git.roojs.org Git - bootswatch/blob - journal/bootswatch.less

   1 // Journal 2.2.2
   2 // Bootswatch
   3 // -----------------------------------------------------
   4
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 @import url('//fonts.googleapis.com/css?family=News+Cycle:400,700');
  10
  11 h1, h2, h3, h4, h5, h6 {
  12
  13         margin: 0 0 10px;
  14         line-height: 1.2;
  15
  16         a {
  17                 color: @headingsColor;
  18         }
  19 }
  20
  21 h1 { font-size: 48px; }
  22
  23 h2 { font-size: 36px; }
  24
  25 h3 { font-size: 28px; }
  26
  27 h4 { font-size: 20px; }
  28
  29 h5 { font-size: 13px; }
  30
  31 p > a,
  32 address > a,
  33 .breadcrumb a,
  34 abbr[title] {
  35         text-decoration: none;
  36         border-bottom: 1px dotted;
  37
  38         &:hover {
  39                 text-decoration: none;
  40                 border-bottom: 1px solid;
  41         }
  42 }
  43
  44 code, pre {
  45         .border-radius(0);
  46         background-color: @grayLighter;
  47         .box-shadow(none);
  48 }
  49
  50 // SCAFFOLDING
  51 // -----------------------------------------------------
  52
  53 .page-header {
  54         border-bottom: 2px solid @grayLighter;
  55 }
  56
  57 hr {
  58         border-bottom: 1px solid @grayLighter;
  59 }
  60
  61 // NAVBAR
  62 // -----------------------------------------------------
  63
  64 .navbar {
  65
  66         font-family: @sansFontFamily;
  67         font-weight: bold;
  68
  69         .navbar-inner {
  70                 border-bottom: 2px solid @grayLighter;
  71                 .border-radius(0);
  72                 .box-shadow(none);
  73         }
  74
  75         .brand {
  76                 padding: 19px 20px 21px;
  77                 font-size: 24px;
  78                 font-weight: bold;
  79                 text-shadow: none;
  80                 text-transform: uppercase;
  81         }
  82
  83         .nav > li > a {
  84                 padding: 20px 10px 20px;
  85                 font-size: 18px;
  86                 text-shadow: none;
  87                 text-transform: uppercase;
  88         }
  89
  90         .nav > .active > a {
  91                 background-color: transparent;
  92         }
  93
  94         .navbar-text {
  95                 margin-top: 20px;
  96                 padding-left: 10px;
  97                 padding-right: 10px;
  98                 font-size: 18px;
  99                 line-height: 20px;
 100         }
 101
 102         .nav > .active > a,
 103         .nav > .active > a:hover,
 104         .nav > .active > a:focus {
 105                 .box-shadow(none);
 106         }
 107
 108         .divider-vertical {
 109                 border-left-color: @grayLighter;
 110                 border-right-color: @grayLighter;
 111         }
 112
 113         .dropdown-menu {
 114
 115                 top: 85%;
 116                 .border-radius(0);
 117
 118                 a {
 119                         font-size: 15px;
 120                         font-weight: bold;
 121                 }
 122         }
 123
 124         .navbar-search .search-query,
 125         .navbar-search .search-query:hover {
 126                 border: 2px solid @grayLighter;
 127                 color: @textColor;
 128                 .placeholder(@gray);
 129         }
 130 }
 131
 132 @media (max-width: @navbarCollapseWidth) {
 133
 134         .nav-collapse .navbar-form,
 135         .nav-collapse .navbar-search {
 136                 margin-bottom: 0;
 137                 border-top: 2px solid @grayLighter;
 138                 border-bottom: 2px solid @grayLighter;
 139         }
 140
 141
 142
 143         .navbar .nav-collapse {
 144
 145                 .nav li > a {
 146                         color: @navbarLinkColor;
 147
 148                         &:hover {
 149                                 background-color: @dropdownLinkBackgroundHover;
 150                         }
 151                 }
 152
 153                 .navbar-text {
 154                         margin-top: 0;
 155                 }
 156         }
 157
 158         .navbar-inverse .nav-collapse {
 159
 160                 .nav li > a {
 161                         color: @navbarInverseLinkColor;
 162
 163                         &:hover {
 164                                 background-color: #111;
 165                                 background-image: none;
 166                         }
 167                 }
 168
 169         }
 170 }
 171
 172 div.subnav {
 173
 174         height: 54px;
 175         background-color: @bodyBackground;
 176         background-image: none;
 177         .box-shadow(none);
 178         border: 2px solid @grayLighter;
 179         border-left: none;
 180         border-right: none;
 181         .border-radius(0);
 182
 183         &.subnav-fixed {
 184                 top: @navbarHeight;
 185         }
 186
 187         .nav > li > a,
 188         .nav > li:first-child > a,
 189         .nav > li.active > a {
 190                 padding: 20px 15px;
 191                 border-left: none;
 192                 border-right: none;
 193                 background-color: transparent;
 194                 .box-shadow(none);
 195                 font-family: @sansFontFamily;
 196                 color: @headingsColor;
 197                 font-size: 15px;
 198                 font-weight: bold;
 199
 200                 &:hover {
 201                         padding: 20px 15px;
 202                         background-color: transparent;
 203                         .box-shadow(none);
 204                         color: @headingsColor;
 205                 }
 206         }
 207
 208         li.dropdown > .dropdown-toggle .caret ,
 209         li.dropdown > .dropdown-toggle:hover .caret,
 210         li.dropdown.open > .dropdown-toggle .caret {
 211                 border-top-color: @headingsColor;
 212                 border-bottom-color: @headingsColor;
 213                 opacity: 1;
 214         }
 215
 216         li.dropdown.open .dropdown-toggle,
 217         li.dropdown.open .dropdown-toggle:hover {
 218                 background-color: @bodyBackground;
 219                 color: @headingsColor;
 220         }
 221 }
 222
 223 // NAV
 224 // -----------------------------------------------------
 225
 226 // BUTTONS
 227 // -----------------------------------------------------
 228
 229 [class^="icon-"], [class*=" icon-"] {
 230         vertical-align: baseline;
 231 }
 232
 233 .btn-inverse {
 234         .buttonBackground(@grayDarker, @black);
 235 }
 236
 237 // TABLES
 238 // -----------------------------------------------------
 239
 240 .table-bordered {
 241         .border-radius(0);
 242         .box-shadow(none);
 243 }
 244
 245 // FORMS
 246 // -----------------------------------------------------
 247
 248 legend {
 249         border-bottom: 2px solid @grayLighter;
 250         font-family: @headingsFontFamily;
 251         font-weight: @headingsFontWeight;
 252         color: @headingsColor;
 253 }
 254
 255 // DROPDOWNS
 256 // -----------------------------------------------------
 257
 258 // MISC
 259 // -----------------------------------------------------
 260
 261 .well {
 262         .border-radius(0);
 263         .box-shadow(none);
 264 }
 265
 266 .hero-unit {
 267         padding: 30px 60px;
 268         border: 1px solid rgba(0,0,0,.05);
 269         .border-radius(0);
 270         .box-shadow(none);
 271
 272         h1 {
 273                 margin: 0 0 10px;
 274                 line-height: 1.2;
 275         }
 276 }
 277
 278 // a.thumbnail:hover {
 279 //      .box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.3));
 280 //      border-color: #ddd;
 281 // }
 282
 283 .modal {
 284         .border-radius(0px);
 285         background: @bodyBackground;
 286 }
 287
 288 .modal-header {
 289         border-bottom: none;
 290 }
 291
 292 .modal-footer {
 293         border-top: none;
 294         background: transparent;
 295         .box-shadow(none);
 296 }
 297
 298 .close,
 299 .close:hover {
 300         border-bottom: none;
 301 }
 302
 303 // MEDIA QUERIES
 304 // -----------------------------------------------------
 305
 306 @media (max-width: 768px) {
 307
 308         div.subnav {
 309
 310                 height: auto;
 311
 312                 .nav > li.active > a {
 313                         border-top: none;
 314                 }
 315
 316                 .nav > li:hover > a,
 317                 .nav > li:first-child:hover > a,
 318                 .nav > li.active:hover > a,
 319                 .nav > li.dropdown.open .dropdown-toggle,
 320                 .nav > li.dropdown.open .dropdown-toggle:hover {
 321                         background-color: @dropdownLinkBackgroundHover;
 322                 }
 323         }
 324
 325         .nav-tabs .open .dropdown-toggle,
 326         .nav-pills .open .dropdown-toggle,
 327         .nav > li.dropdown.open.active > a:hover {
 328                 border-color: #e5e5e5;
 329         }
 330 }