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

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