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

   1 // Journal 2.3.0
   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                 border-top: none;
 187         }
 188
 189         .nav > li > a,
 190         .nav > li:first-child > a,
 191         .nav > li.active > a {
 192                 padding: 20px 15px;
 193                 border-left: none;
 194                 border-right: none;
 195                 background-color: transparent;
 196                 .box-shadow(none);
 197                 font-family: @sansFontFamily;
 198                 color: @headingsColor;
 199                 font-size: 15px;
 200                 font-weight: bold;
 201
 202                 &:hover {
 203                         padding: 20px 15px;
 204                         background-color: transparent;
 205                         .box-shadow(none);
 206                         color: @headingsColor;
 207                 }
 208         }
 209
 210         li.dropdown > .dropdown-toggle .caret ,
 211         li.dropdown > .dropdown-toggle:hover .caret,
 212         li.dropdown.open > .dropdown-toggle .caret {
 213                 border-top-color: @headingsColor;
 214                 border-bottom-color: @headingsColor;
 215                 opacity: 1;
 216         }
 217
 218         li.dropdown.open .dropdown-toggle,
 219         li.dropdown.open .dropdown-toggle:hover {
 220                 background-color: @bodyBackground;
 221                 color: @headingsColor;
 222         }
 223 }
 224
 225 // NAV
 226 // -----------------------------------------------------
 227
 228 // BUTTONS
 229 // -----------------------------------------------------
 230
 231 [class^="icon-"], [class*=" icon-"] {
 232         vertical-align: baseline;
 233 }
 234
 235 .btn-inverse {
 236         .buttonBackground(@grayDarker, @black);
 237 }
 238
 239 // TABLES
 240 // -----------------------------------------------------
 241
 242 .table-bordered {
 243         .border-radius(0);
 244         .box-shadow(none);
 245 }
 246
 247 // FORMS
 248 // -----------------------------------------------------
 249
 250 legend {
 251         border-bottom: 2px solid @grayLighter;
 252         font-family: @headingsFontFamily;
 253         font-weight: @headingsFontWeight;
 254         color: @headingsColor;
 255 }
 256
 257 // DROPDOWNS
 258 // -----------------------------------------------------
 259
 260 // MISC
 261 // -----------------------------------------------------
 262
 263 .well {
 264         .border-radius(0);
 265         .box-shadow(none);
 266 }
 267
 268 .hero-unit {
 269         padding: 30px 60px;
 270         border: 1px solid rgba(0,0,0,.05);
 271         .border-radius(0);
 272         .box-shadow(none);
 273
 274         h1 {
 275                 margin: 0 0 10px;
 276                 line-height: 1.2;
 277         }
 278 }
 279
 280 // a.thumbnail:hover {
 281 //      .box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.3));
 282 //      border-color: #ddd;
 283 // }
 284
 285 .modal {
 286         .border-radius(0px);
 287         background: @bodyBackground;
 288 }
 289
 290 .modal-header {
 291         border-bottom: none;
 292 }
 293
 294 .modal-footer {
 295         border-top: none;
 296         background: transparent;
 297         .box-shadow(none);
 298 }
 299
 300 .close,
 301 .close:hover {
 302         border-bottom: none;
 303 }
 304
 305 // MEDIA QUERIES
 306 // -----------------------------------------------------
 307
 308 @media (max-width: 768px) {
 309
 310         div.subnav {
 311
 312                 height: auto;
 313
 314                 .nav > li.active > a {
 315                         border-top: none;
 316                 }
 317
 318                 .nav > li:hover > a,
 319                 .nav > li:first-child:hover > a,
 320                 .nav > li.active:hover > a,
 321                 .nav > li.dropdown.open .dropdown-toggle,
 322                 .nav > li.dropdown.open .dropdown-toggle:hover {
 323                         background-color: @dropdownLinkBackgroundHover;
 324                 }
 325         }
 326
 327         .nav-tabs .open .dropdown-toggle,
 328         .nav-pills .open .dropdown-toggle,
 329         .nav > li.dropdown.open.active > a:hover {
 330                 border-color: #e5e5e5;
 331         }
 332 }