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

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