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