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