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