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

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