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

   1 // Bootswatch.less
   2 // Swatch: Slate
   3 // -----------------------------------------------------
   4
   5 // SCAFFOLDING
   6 // -----------------------------------------------------
   7
   8 body {
   9         background-color: @grayDarker;
  10 }
  11
  12 h1, h2, h3, h4, h5, h6, body, legend, label {
  13         color: @grayLight;
  14         text-shadow: -1px -1px 0 #111;
  15 }
  16
  17 // NAVBAR
  18 // -----------------------------------------------------
  19
  20 .navbar .brand {
  21         font-weight: bold;
  22 }
  23
  24 .navbar .navbar-inner,
  25 div.subnav {
  26         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  27 }
  28
  29 .navbar .divider-vertical {
  30         background-color: transparent;
  31         border-right: none;
  32 }
  33
  34 .navbar .brand,
  35 .navbar .nav > li > a,
  36 div.subnav .nav > li > a {
  37         color: @grayLighter;
  38         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  39         border-right: 1px solid darken(@gray, 15%);
  40 }
  41
  42 .navbar .nav > li > a,
  43 div.subnav .nav > li > a {
  44         border-left: 1px solid @gray;
  45
  46         &:hover {
  47                 color: @grayLighter;
  48                 background-color: @grayDark;
  49                 #gradient > .directional(@grayDarker, @grayDark, 280deg);
  50                 border-left: 1px solid transparent;
  51                 border-right: 1px solid transparent;
  52         }
  53 }
  54
  55 .navbar .nav > li.active > a,
  56 div.subnav .nav > li.active > a,
  57 .navbar .nav > li.active > a:hover,
  58 div.subnav .nav > li.active > a:hover {
  59         color: @grayLighter;
  60         background-color: @grayDark;
  61         #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
  62         border-right: 1px solid darken(@gray, 15%);
  63 }
  64
  65 div.subnav .nav > li:first-child > a,
  66 div.subnav .nav > li:first-child > a:hover {
  67         border-left: 1px solid transparent;
  68 }
  69
  70 div.subnav.subnav-fixed .nav > li.active:first-child > a,
  71 div.subnav.subnav-fixed .nav > li:first-child > a:hover {
  72         border-left: 1px solid darken(@gray, 15%);
  73 }
  74
  75 div.subnav .nav > li.active:last-child > a,
  76 div.subnav .nav > li:last-child > a:hover {
  77         border-right: 1px solid darken(@gray, 15%);
  78 }
  79
  80 div.subnav {
  81         border: 1px solid transparent;
  82         .box-shadow(0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1));
  83 }
  84
  85 .navbar-search .search-query {
  86         border: 1px solid darken(@gray, 15%);
  87 }
  88
  89 .nav .nav-header {
  90         text-shadow: none;
  91 }
  92
  93 .navbar .nav-collapse.collapse > .nav > li > a,
  94 .navbar .nav-collapse.collapse > .nav > li.active > a,
  95 .navbar .nav-collapse.collapse > .nav > li > a:hover,
  96 .navbar .nav-collapse.collapse > .nav > li.active > a:hover {
  97         color: @grayLighter;
  98         border: 1px solid transparent;
  99         .box-shadow(none);
 100         background-color: transparent;
 101         background-image: none;
 102 }
 103
 104 .navbar .nav-collapse.collapse > .nav > li > a:hover,
 105 .navbar .nav-collapse.collapse > .nav > li.active > a:hover {
 106         background-color: @grayDarker;
 107 }
 108
 109 @media (max-width: 979px) {
 110         .navbar .brand {
 111                 border-right: none;
 112         }
 113 }
 114
 115 // BUTTONS
 116 // -----------------------------------------------------
 117
 118 .btn {
 119     .buttonBackground(@gray, darken(@gray, 10%));
 120         .border-radius(3px);
 121         border: 1px solid @grayDarker;
 122 }
 123
 124 .btn, .btn:hover {
 125         color: @white;
 126         font-weight: bold;
 127         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 128 }
 129
 130 // Set the backgrounds
 131 // -------------------------
 132 .btn-primary {
 133   .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
 134 }
 135 // Warning appears are orange
 136 .btn-warning {
 137   .buttonBackground(lighten(@orange, 15%), @orange);
 138 }
 139 // Danger and error appear as red
 140 .btn-danger {
 141   .buttonBackground(#ee5f5b, #bd362f);
 142 }
 143 // Success appears as green
 144 .btn-success {
 145   .buttonBackground(#62c462, #51a351);
 146 }
 147 // Info appears as a neutral blue
 148 .btn-info {
 149   .buttonBackground(#5bc0de, #2f96b4);
 150 }
 151 // Inverse appears as dark gray
 152 .btn-inverse {
 153   .buttonBackground(#454545, #262626);
 154 }
 155
 156 .caret {
 157         border-top-color: @white;
 158 }
 159
 160 // TABLES
 161 // -----------------------------------------------------
 162
 163 .table th, .table td, .table tbody + tbody {
 164         border-top: 1px solid darken(@grayDarker, 5%);
 165 }
 166
 167 .table-bordered {
 168   border: 1px solid darken(@grayDarker, 5%);
 169   th + th,
 170   td + td,
 171   th + td,
 172   td + th {
 173     border-left: 1px solid darken(@grayDarker, 5%);
 174   }
 175   // Prevent a double border
 176   thead:first-child tr:first-child th,
 177   tbody:first-child tr:first-child th,
 178   tbody:first-child tr:first-child td {
 179     border-top: 0;
 180   }
 181 }
 182
 183 .table-striped {
 184   tbody {
 185     tr:nth-child(odd) td,
 186     tr:nth-child(odd) th {
 187       background-color: darken(@grayDark, 5%);
 188     }
 189   }
 190 }
 191
 192 .table {
 193   tbody tr:hover td,
 194   tbody tr:hover th {
 195     background-color: @grayDark;
 196   }
 197 }
 198
 199 // NAVIGATION
 200 // -----------------------------------------------------
 201
 202 .pagination > ul {
 203         .box-shadow(none);
 204 }
 205
 206 .breadcrumb, .pagination > ul a, .pager a {
 207         border: 1px solid transparent;
 208         .box-shadow(0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1));
 209         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 210 }
 211
 212 .breadcrumb li, .breadcrumb a, .pagination > ul a {
 213         color: @grayLighter;
 214         font-weight: bold;
 215         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 216 }
 217
 218 .breadcrumb a {
 219         color: @white;
 220 }
 221
 222 .pagination li > a,
 223 .pagination li.disabled > a {
 224         border-left: 1px solid @gray;
 225         border-right: 1px solid darken(@gray, 15%);
 226         border-top: none;
 227         border-bottom: none;
 228 }
 229
 230 .pagination li.disabled > a {
 231         #gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
 232 }
 233
 234 .pagination > ul > li:not(.disabled) a:hover,
 235   {
 236         #gradient > .directional(@grayDarker, @grayDark, 280deg);
 237         border-left: 1px solid transparent;
 238 }
 239
 240 .pagination > ul > li.active > a,
 241 .pagination > ul > li.active > a:hover {
 242         color: @grayLighter;
 243         background-color: @grayDark;
 244         #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
 245         border-left: 1px solid transparent;
 246 }
 247
 248 .pager a:hover {
 249         #gradient > .directional(@grayDarker, @grayDark, 280deg);
 250         border: 1px solid transparent;
 251 }
 252
 253 .nav > li > a,
 254 .nav > li > a:hover,
 255 .nav > li.active > a,
 256 .nav > li.active > a:hover,
 257 .nav-tabs.nav-stacked > li > a,
 258 .nav-tabs.nav-stacked > li > a:hover {
 259         border: none;
 260         background-color: transparent;
 261         color: @grayLighter;
 262         font-weight: bold;
 263         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 264 }
 265
 266 .dropdown-menu {
 267         .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
 268 }
 269
 270 .dropdown-menu,
 271 .dropdown-menu li.active a,
 272 .dropdown-menu li.active a:hover {
 273         background-color: @grayDark;
 274 }
 275
 276 .dropdown-menu a,
 277 .dropdown-menu li.active a,
 278 .dropdown-menu li a:hover,
 279 .dropdown-menu li.active a:hover,
 280 .dropdown.open .dropdown-toggle {
 281         color: @grayLighter;
 282 }
 283
 284 .dropdown-menu li a:hover,
 285 .dropdown-menu li.active a:hover {
 286         background-color: @grayDarker;
 287 }
 288
 289 .navbar .dropdown-menu::after {
 290         border-bottom: 6px solid @grayDark;
 291 }
 292
 293 .nav > li > a {
 294         border: none;
 295         .box-shadow(0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1));
 296         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 297
 298 }
 299
 300 .nav.nav-list .nav-header {
 301         color: @grayLight;
 302         text-shadow: -1px -1px 0 #111;
 303 }
 304
 305 .tabs-below .nav-tabs {
 306         border-top: none;
 307 }
 308
 309 .tabs-left .nav-tabs {
 310         border-right: none;
 311 }
 312
 313 .tabs-right .nav-tabs {
 314         border-left: none;
 315 }
 316
 317 // FORMS
 318 // -----------------------------------------------------
 319
 320 .form-actions {
 321         background-color: darken(@grayDarker, 3%);
 322         border-top: none;
 323 }
 324
 325 .input-prepend .add-on, .input-append .add-on {
 326         background-color: @gray;
 327         border-top: 1px solid @grayLight;
 328         border-left: 1px solid @grayLight;
 329         border-bottom: 1px solid @grayDark;
 330         border-right: 1px solid @grayDark;
 331         text-shadow: none;
 332 }
 333
 334 .uneditable-input, input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
 335         text-shadow: none;
 336         color: @grayLighter;
 337 }
 338
 339 // LABELS AND ALERTS
 340 // -----------------------------------------------------
 341
 342 .label, .alert {
 343         color: rgba(256, 256, 256, 0.9);
 344         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
 345         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
 346 }
 347
 348 .alert-heading {
 349         color: rgba(256, 256, 256, 0.9);
 350         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
 351 }
 352
 353 .alert {
 354   background-color: @warningText;
 355   border-color: @warningText;
 356 }
 357
 358 .alert-success {
 359   background-color: @successText;
 360   border-color: @successText;
 361 }
 362
 363 .alert-danger,
 364 .alert-error {
 365   background-color: @errorText;
 366   border-color: @errorText;
 367 }
 368
 369 .alert-info {
 370   background-color: @infoText;
 371   border-color: @infoText;
 372 }
 373
 374 // MISCELLANEOUS
 375 // -----------------------------------------------------
 376
 377 code, pre {
 378         background-color: #F7F7F7;
 379         border: 1px solid darken(@grayDarker, 5%);
 380         text-shadow: none;
 381 }
 382
 383 hr, legend, .page-header, .dropdown-menu .divider {
 384         border-top: none;
 385         border-bottom: 1px solid darken(@grayDarker, 5%);
 386         background-color: transparent;
 387 }
 388
 389 footer.footer {
 390         border-top: 1px solid darken(@grayDarker, 5%);
 391 }
 392
 393 .well, .progress {
 394         background-color: darken(@grayDarker, 3%);
 395         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
 396 }
 397
 398 .progress {
 399         #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
 400 }
 401
 402 .thumbnail, a.thumbnail:hover {
 403   border: 1px solid darken(@grayDarker, 5%);
 404 }