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