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

   1 // Bootswatch.less
   2 // Swatch: Journal
   3 // Version: 2.1.0
   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 > .active > a,
 108         .nav > .active > a:hover,
 109         .nav > .active > a:focus {
 110                 .box-shadow(none);
 111         }
 112
 113         .nav li.dropdown > .dropdown-toggle:hover,
 114         .nav li.dropdown.active > .dropdown-toggle:hover {
 115                 color: @black;
 116         }
 117
 118         .nav li.dropdown > .dropdown-toggle .caret,
 119         .nav li.dropdown.open > .dropdown-toggle:hover .caret {
 120                 border-top-color: @headingsColor;
 121                 border-bottom-color: @headingsColor;
 122         }
 123
 124         .dropdown-menu {
 125
 126                 top: 85%;
 127                 .border-radius(0);
 128
 129                 a {
 130                         font-size: 15px;
 131                         font-weight: bold;
 132                 }
 133         }
 134
 135         .nav-collapse.collapse {
 136
 137                 .nav li > a {
 138                         color: @headingsColor;
 139
 140                         &:hover {
 141                                 background-color: @dropdownLinkBackgroundHover;
 142                         }
 143                 }
 144
 145                 .navbar-text {
 146                         margin-top: 0;
 147                 }
 148         }
 149
 150         .navbar-search .search-query,
 151         .navbar-search .search-query:hover {
 152                 border: 2px solid @grayLighter;
 153                 color: @textColor;
 154                 .placeholder(@gray);
 155         }
 156 }
 157
 158 div.subnav {
 159
 160         height: 54px;
 161         background-color: @bodyBackground;
 162         background-image: none;
 163         .box-shadow(none);
 164         border: 2px solid @grayLighter;
 165         border-left: none;
 166         border-right: none;
 167         .border-radius(0);
 168
 169         &.subnav-fixed {
 170                 top: @navbarHeight;
 171         }
 172
 173         .nav > li > a,
 174         .nav > li:first-child > a,
 175         .nav > li.active > a {
 176                 padding: 20px 15px;
 177                 border-left: none;
 178                 border-right: none;
 179                 background-color: transparent;
 180                 .box-shadow(none);
 181                 font-family: @sansFontFamily;
 182                 color: @headingsColor;
 183                 font-size: 15px;
 184                 font-weight: bold;
 185
 186                 &:hover {
 187                         padding: 20px 15px;
 188                         background-color: transparent;
 189                         .box-shadow(none);
 190                         color: @headingsColor;
 191                 }
 192         }
 193
 194         li.dropdown > .dropdown-toggle .caret ,
 195         li.dropdown > .dropdown-toggle:hover .caret,
 196         li.dropdown.open > .dropdown-toggle .caret {
 197                 border-top-color: @headingsColor;
 198                 border-bottom-color: @headingsColor;
 199                 opacity: 1;
 200         }
 201
 202         li.dropdown.open .dropdown-toggle,
 203         li.dropdown.open .dropdown-toggle:hover {
 204                 background-color: @bodyBackground;
 205                 color: @headingsColor;
 206         }
 207 }
 208
 209 // BUTTONS
 210 // -----------------------------------------------------
 211
 212 [class^="icon-"], [class*=" icon-"] {
 213         vertical-align: baseline;
 214 }
 215
 216 .btn-inverse {
 217         .buttonBackground(@grayDarker, @black);
 218 }
 219
 220 // MODALS
 221 // -----------------------------------------------------
 222
 223 .modal {
 224         .border-radius(0px);
 225         background: @bodyBackground;
 226 }
 227
 228 .modal-header {
 229         border-bottom: none;
 230 }
 231
 232 .modal-footer {
 233         background: transparent;
 234         .box-shadow(none);
 235         border-top: none;
 236 }
 237
 238 .close,
 239 .close:hover {
 240         border-bottom: none;
 241 }
 242
 243 // MISC
 244 // -----------------------------------------------------
 245
 246 .hero-unit {
 247         .box-shadow(none);
 248         border: 1px solid rgba(0,0,0,.05);
 249         .border-radius(0);
 250
 251         h1 {
 252                 line-height: 1.5em;
 253         }
 254 }
 255
 256 .well {
 257         .border-radius(0);
 258         .box-shadow(none);
 259
 260 }
 261
 262 .table-bordered {
 263         .border-radius(0);
 264         .box-shadow(none);
 265 }
 266
 267
 268 legend {
 269         border-bottom: 2px solid @grayLighter;
 270         font-family: @headingsFontFamily;
 271         font-weight: @headingsFontWeight;
 272         color: @headingsColor;
 273 }
 274
 275 a.thumbnail:hover {
 276         .box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.3));
 277         border-color: #ddd;
 278 }
 279
 280 code, pre, pre.prettyprint {
 281         .border-radius(0);
 282         background-color: @grayLighter;
 283         .box-shadow(none);
 284 }
 285
 286 hr {
 287         border-bottom: 1px solid @grayLighter;
 288 }
 289
 290 @media (max-width: 768px) {
 291
 292         div.subnav {
 293                 height: auto;
 294
 295                 .nav > li.active > a {
 296                         border-top: none;
 297                 }
 298
 299                 .nav > li:hover > a,
 300                 .nav > li:first-child:hover > a,
 301                 .nav > li.active:hover > a,
 302                 .nav > li.dropdown.open .dropdown-toggle,
 303                 .nav > li.dropdown.open .dropdown-toggle:hover {
 304                         background-color: @dropdownLinkBackgroundHover;
 305                 }
 306         }
 307
 308         .nav-tabs .open .dropdown-toggle,
 309         .nav-pills .open .dropdown-toggle,
 310         .nav > li.dropdown.open.active > a:hover {
 311                 border-color: #e5e5e5;
 312         }
 313 }
 314
 315 @media (max-width: 979px) {
 316
 317         .nav-collapse .navbar-form,
 318         .nav-collapse .navbar-search {
 319                 margin-bottom: 0;
 320                 border-top: 2px solid @grayLighter;
 321                 border-bottom: 2px solid @grayLighter;
 322         }
 323
 324 }