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

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