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

   1 // Bootswatch.less
   2 // Swatch: Slate
   3 // Version: 2.1.0
   4 // -----------------------------------------------------
   5
   6 // TYPOGRAPHY
   7 // -----------------------------------------------------
   8
   9 h1, h2, h3, h4, h5, h6 {
  10         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  11 }
  12
  13 code, pre {
  14         background-color: #F7F7F7;
  15         border: 1px solid darken(@grayDarker, 5%);
  16         text-shadow: none;
  17 }
  18
  19 // SCAFFOLDING
  20 // -----------------------------------------------------
  21
  22 hr, legend, .page-header {
  23         border-top: none;
  24         border-bottom: 1px solid darken(@grayDarker, 5%);
  25         background-color: transparent;
  26 }
  27
  28 // NAVBAR
  29 // -----------------------------------------------------
  30
  31 .navbar {
  32
  33         .navbar-inner {
  34                 #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  35         }
  36
  37         .brand {
  38                 font-weight: bold;
  39                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  40                 border-right: 1px solid darken(@gray, 15%);
  41         }
  42
  43         .navbar-text {
  44                 padding: 0 15px;
  45                 font-weight: bold;
  46         }
  47
  48         .nav > li > a  {
  49                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  50                 border-right: 1px solid rgba(0, 0, 0, 0.2);
  51                 border-left: 1px solid rgba(255, 255, 255, 0.1);
  52
  53                 &:hover {
  54                         #gradient > .directional(@grayDarker, @grayDark, 280deg);
  55                         border-left: 1px solid transparent;
  56                         border-right: 1px solid transparent;
  57                 }
  58         }
  59
  60         .nav > li.active > a,
  61         .nav > li.active > a:hover {
  62                 color: @grayLighter;
  63                 background-color: @grayDark;
  64                 #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
  65                 border-right: 1px solid darken(@gray, 15%);
  66         }
  67
  68         .navbar-search .search-query {
  69                 border: 1px solid darken(@gray, 15%);
  70         }
  71
  72         .divider-vertical {
  73                 background-color: transparent;
  74                 border-right: none;
  75         }
  76
  77         .dropdown-menu::after {
  78                 border-bottom: 6px solid @grayDark;
  79         }
  80
  81         .nav-collapse.collapse {
  82
  83                 .nav li > a,
  84                 .nav li.active > a,
  85                 .nav li > a:hover,
  86                 .nav li.active > a:hover {
  87                         .box-shadow(none);
  88                         color: @grayLighter;
  89                         border: 1px solid transparent;
  90                         background-color: transparent;
  91                         background-image: none;
  92                 }
  93
  94                 .nav li > a:hover,
  95                 .nav li.active > a:hover {
  96                         background-color: @grayDarker;
  97                 }
  98
  99                 .navbar-form,
 100                 .navbar-search {
 101                         border-color: transparent;
 102                         .box-shadow(none);
 103                 }
 104
 105                 .nav-header {
 106                         color: @grayLight;
 107                 }
 108         }
 109
 110         &-inverse {
 111
 112                 .navbar-inner {
 113                         #gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%));
 114                 }
 115
 116                 .nav li > a {
 117                         background-image: none;
 118                         background-color: transparent;
 119                 }
 120
 121                 .nav li > a:hover,
 122                 .nav li.active > a,
 123                 .nav li.active > a:hover {
 124                         #gradient > .directional(darken(@grayDarker, 3%), @grayDarker, 280deg);
 125                 }
 126         }
 127 }
 128
 129 div.subnav {
 130         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 131         border: 1px solid transparent;
 132         .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 133
 134         .nav > li > a {
 135                 color: @grayLighter;
 136                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 137                 border-right: 1px solid darken(@gray, 15%);
 138                 border-left: 1px solid @gray;
 139
 140                 &:hover {
 141                         color: @grayLighter;
 142                         background-color: @grayDark;
 143                         #gradient > .directional(@grayDarker, @grayDark, 280deg);
 144                         border-left: 1px solid transparent;
 145                         border-right: 1px solid transparent;
 146                 }
 147         }
 148
 149         .nav > li.active > a,
 150         .nav > li.active > a:hover {
 151                 color: @grayLighter;
 152                 background-color: @grayDark;
 153                 #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
 154                 border-right: 1px solid darken(@gray, 15%);
 155         }
 156
 157         .nav > li:first-child > a,
 158         .nav > li:first-child > a:hover {
 159                 border-left: 1px solid transparent;
 160         }
 161
 162         &.subnav-fixed .nav > li.active:first-child > a,
 163         &.subnav-fixed .nav > li:first-child > a:hover {
 164                 border-left: 1px solid darken(@gray, 15%);
 165         }
 166
 167         .nav > li.active:last-child > a,
 168         .nav > li:last-child > a:hover {
 169                 border-right: 1px solid darken(@gray, 15%);
 170         }
 171
 172         .open .dropdown-toggle {
 173                 border-right: 1px solid darken(@gray, 15%);
 174                 border-left: 1px solid @gray;
 175         }
 176
 177         &.subnav-fixed {
 178                 .box-shadow(none);
 179         }
 180 }
 181
 182 // NAV
 183 // -----------------------------------------------------
 184
 185 .nav .nav-header {
 186         text-shadow: none;
 187 }
 188
 189 .nav > li > a {
 190         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 191         .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 192         border: none;
 193         color: @grayLight;
 194         font-weight: bold;
 195         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 196 }
 197
 198 .nav > li.active > a,
 199 .nav > li.active > a:hover {
 200         background-color: transparent;
 201         border: none;
 202         color: @white;
 203 }
 204
 205 .nav > li > a:hover {
 206         background-color: transparent;
 207         color: @grayLighter;
 208 }
 209
 210 .nav-list {
 211         background-color: @grayDark;
 212         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
 213
 214         li > a {
 215                 background-image: none;
 216                 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 217         }
 218
 219         .nav-header {
 220                 color: @gray;
 221                 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 222         }
 223
 224         .divider {
 225                 border-bottom: 1px solid darken(@grayDarker, 5%);
 226                 background-color: transparent;
 227         }
 228 }
 229
 230 .nav-tabs {
 231         border-bottom: none;
 232 }
 233
 234 .tabs-below .nav-tabs {
 235         border-top: none;
 236 }
 237
 238 .tabs-left .nav-tabs {
 239         border-right: none;
 240 }
 241
 242 .tabs-right .nav-tabs {
 243         border-left: none;
 244 }
 245
 246 .nav-tabs.nav-stacked > li > a,
 247 .nav-tabs.nav-stacked > li > a:hover {
 248         border: none;
 249 }
 250
 251 .breadcrumb {
 252         .box-shadow(none);
 253 }
 254
 255 .breadcrumb, .pagination > ul a, .pager a {
 256         border: 1px solid transparent;
 257         .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 258         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 259 }
 260
 261 .breadcrumb li, .breadcrumb a, .pagination > ul a {
 262         color: @grayLighter;
 263         font-weight: bold;
 264         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 265 }
 266
 267 .breadcrumb a {
 268         color: @white;
 269 }
 270
 271 .pagination {
 272
 273         & > ul {
 274                 .box-shadow(none);
 275         }
 276
 277         & li > a,
 278         & li.disabled > a {
 279                 border-left: 1px solid @gray;
 280                 border-right: 1px solid darken(@gray, 15%);
 281                 border-top: none;
 282                 border-bottom: none;
 283         }
 284
 285         li.disabled > a {
 286                 #gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
 287         }
 288
 289         & > ul > li:not(.disabled) a:hover,
 290           {
 291                 #gradient > .directional(@grayDarker, @grayDark, 280deg);
 292                 border-left: 1px solid transparent;
 293         }
 294
 295         & > ul > li.active > a,
 296         & > ul > li.active > a:hover {
 297                 color: @grayLighter;
 298                 background-color: @grayDark;
 299                 #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
 300                 border-left: 1px solid transparent;
 301         }
 302 }
 303
 304 .pager {
 305
 306         a:hover {
 307                 #gradient > .directional(@grayDarker, @grayDark, 280deg);
 308                 border: 1px solid transparent;
 309         }
 310
 311         .disabled a,
 312         .disabled a:hover {
 313                 background-color: transparent;
 314         }
 315 }
 316
 317 // BUTTONS
 318 // -----------------------------------------------------
 319
 320 .btn {
 321     .buttonBackground(@gray, darken(@gray, 10%));
 322         .border-radius(3px);
 323         border: 1px solid @grayDarker;
 324 }
 325
 326 .btn, .btn:hover {
 327         color: @white;
 328         font-weight: bold;
 329         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 330 }
 331
 332 .btn-primary {
 333   .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
 334 }
 335
 336 .btn-warning {
 337   .buttonBackground(lighten(@orange, 15%), @orange);
 338 }
 339
 340 .btn-danger {
 341   .buttonBackground(#ee5f5b, #bd362f);
 342 }
 343
 344 .btn-success {
 345   .buttonBackground(#62c462, #51a351);
 346 }
 347
 348 .btn-info {
 349   .buttonBackground(#5bc0de, #2f96b4);
 350 }
 351
 352 .btn-inverse {
 353   .buttonBackground(#454545, #262626);
 354 }
 355
 356 .caret {
 357         border-top-color: @white;
 358 }
 359
 360 // TABLES
 361 // -----------------------------------------------------
 362
 363 // FORMS
 364 // -----------------------------------------------------
 365
 366 label, input, button, select, textarea, legend {
 367         color: @textColor;
 368 }
 369
 370 legend, label {
 371         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 372 }
 373
 374 .input-prepend .add-on,
 375 .input-append .add-on {
 376         vertical-align: top;
 377         background-color: @gray;
 378         border-top: 1px solid @grayLight;
 379         border-left: 1px solid @grayLight;
 380         border-bottom: 1px solid @grayDark;
 381         border-right: 1px solid @grayDark;
 382         text-shadow: none;
 383 }
 384
 385 .input-append .btn,
 386 .input-prepend .btn {
 387         margin-top: -1px;
 388         padding: 5px 14px;
 389 }
 390
 391 .uneditable-input,
 392 input[disabled],
 393 select[disabled],
 394 textarea[disabled],
 395 input[readonly],
 396 select[readonly],
 397 textarea[readonly] {
 398         color: @grayLighter;
 399 }
 400
 401 .form-actions {
 402         border-top: none;
 403 }
 404
 405 // DROPDOWNS
 406 // -----------------------------------------------------
 407
 408 .dropdown-menu {
 409         .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
 410
 411         li.active a,
 412         li.active a:hover {
 413                 background-color: @grayDark;
 414         }
 415 }
 416
 417 .dropdown.open .dropdown-toggle {
 418         background-color: @grayDark;
 419         color: @grayLighter;
 420 }
 421
 422 .dropdown-menu .divider {
 423         border-top: none;
 424         border-bottom: 1px solid darken(@grayDarker, 5%);
 425         background-color: transparent;
 426 }
 427
 428 // ALERTS, LABELS, BADGES
 429 // -----------------------------------------------------
 430
 431 .label, .alert {
 432         color: rgba(255, 255, 255, 0.9);
 433         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 434         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
 435 }
 436
 437 .alert-heading {
 438         color: rgba(255, 255, 255, 0.9);
 439         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
 440 }
 441
 442 .alert {
 443   background-color: @orange;
 444   border-color: @orange;
 445 }
 446
 447 .alert-success {
 448   background-color: @successText;
 449   border-color: @successText;
 450 }
 451
 452 .alert-error {
 453   background-color: @errorText;
 454   border-color: @errorText;
 455 }
 456
 457 .alert-info {
 458   background-color: @infoText;
 459   border-color: @infoText;
 460 }
 461
 462 // MISC
 463 // -----------------------------------------------------
 464
 465 .well, .hero-unit {
 466         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
 467 }
 468
 469 .thumbnail,
 470 a.thumbnail:hover {
 471   border: 1px solid darken(@grayDarker, 5%);
 472 }
 473
 474 .progress {
 475         background-color: darken(@grayDarker, 3%);
 476         #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
 477         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
 478 }
 479
 480 .footer {
 481         border-top: 1px solid darken(@grayDarker, 5%);
 482
 483         p {
 484                 color: @textColor;
 485         }
 486 }
 487
 488 .modal {
 489
 490         background-color: darken(@grayDark, 5%);
 491
 492         &-header {
 493                 border-bottom: none;
 494         }
 495
 496         &-body {
 497                 border-bottom: 1px solid #1C1E22;
 498         }
 499
 500         &-footer {
 501                 border-top: none;
 502                 background-color: @grayDarker;
 503                 .box-shadow(none);
 504         }
 505 }
 506
 507 // MEDIA QUERIES
 508 // -----------------------------------------------------
 509
 510 @media (max-width: 979px) {
 511         .navbar .brand {
 512                 border-right: none;
 513         }
 514 }
 515
 516 @media (max-width: 768px) {
 517         div.subnav .nav > li + li > a {
 518                 border-top: 1px solid transparent;
 519         }
 520 }