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

   1 // Slate 2.3.1
   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 > a:hover {
 230                 background-color: transparent;
 231                 color: @grayLighter;
 232         }
 233
 234 }
 235
 236 .nav-list {
 237         background-color: @grayDark;
 238         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
 239
 240         li > a {
 241                 background-image: none;
 242                 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 243         }
 244
 245         .nav-header {
 246                 color: @gray;
 247                 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 248         }
 249
 250         .divider {
 251                 border-bottom: 1px solid darken(@grayDarker, 5%);
 252                 background-color: transparent;
 253         }
 254 }
 255
 256 .nav-tabs {
 257         border-bottom: none;
 258 }
 259
 260 .tabs-below .nav-tabs {
 261         border-top: none;
 262 }
 263
 264 .tabs-left .nav-tabs {
 265         border-right: none;
 266 }
 267
 268 .tabs-right .nav-tabs {
 269         border-left: none;
 270 }
 271
 272 .nav-tabs.nav-stacked {
 273
 274         li > a,
 275         li > a:hover {
 276                 border: 1px solid darken(@grayDarker, 5%);
 277                 background-image: none;
 278         }
 279
 280         li > a:hover,
 281         .active > a,
 282         .active > a:hover {
 283                 background-color: @wellBackground;
 284                 color: @white;
 285         }
 286 }
 287
 288 .breadcrumb {
 289         border: 1px solid transparent;
 290         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 291         .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 292
 293         a {
 294                 color: @grayLighter;
 295                 font-weight: bold;
 296         }
 297
 298         li {
 299                 color: @grayLight;
 300                 font-weight: bold;
 301                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 302         }
 303 }
 304
 305 .pagination {
 306
 307         ul {
 308                 .box-shadow(none);
 309         }
 310
 311         ul > li > a,
 312         ul > li > span {
 313                 border-left: 1px solid @gray;
 314                 border-right: 1px solid darken(@gray, 15%);
 315                 border-top: none;
 316                 border-bottom: none;
 317                 #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 318                 .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 319                 color: @grayLighter;
 320                 font-weight: bold;
 321                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 322
 323                 &:hover {
 324                         #gradient > .directional(@grayDarker, @grayDark, 280deg);
 325                         border-left: 1px solid transparent;
 326                 }
 327         }
 328
 329         ul > .active > a,
 330         ul > .active > a:hover,
 331         ul > .active > span,
 332         ul > .active > span:hover {
 333                 color: @grayLighter;
 334                 background-color: @grayDark;
 335                 #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
 336                 border-left: 1px solid transparent;
 337         }
 338
 339         ul > .disabled > a,
 340         ul > .disabled > a:hover,
 341         ul > .disabled > span,
 342         ul > .disabled > span:hover {
 343                 border-left: 1px solid @gray;
 344                 border-right: 1px solid darken(@gray, 15%);
 345                 border-top: none;
 346                 border-bottom: none;
 347                 #gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
 348         }
 349 }
 350
 351 .pager {
 352
 353         li > a,
 354         li > span {
 355                 border: 1px solid transparent;
 356                 .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 357                 #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 358
 359                 &:hover {
 360                         #gradient > .directional(@grayDarker, @grayDark, 280deg);
 361                         border: 1px solid transparent;
 362                 }
 363         }
 364
 365         .disabled a,
 366         .disabled a:hover {
 367                 background-color: transparent;
 368         }
 369 }
 370
 371 // BUTTONS
 372 // -----------------------------------------------------
 373
 374 .btn {
 375     .buttonBackground(@gray, darken(@gray, 10%));
 376         .border-radius(3px);
 377         border: 1px solid @grayDarker;
 378 }
 379
 380 .btn, .btn:hover {
 381         color: @white;
 382         font-weight: bold;
 383         text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3);
 384 }
 385
 386 .btn-primary {
 387         .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
 388         color: @grayDark;
 389         text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
 390 }
 391
 392 .btn-warning {
 393         .buttonBackground(lighten(@orange, 15%), @orange);
 394 }
 395
 396 .btn-danger {
 397         .buttonBackground(@red, #bd362f);
 398 }
 399
 400 .btn-success {
 401         .buttonBackground(@green, #51a351);
 402 }
 403
 404 .btn-info {
 405         .buttonBackground(@blue, #2f96b4);
 406 }
 407
 408 .btn-inverse {
 409         .buttonBackground(@gray, @grayDarker);
 410 }
 411
 412 .caret {
 413         border-top-color: @white;
 414 }
 415
 416 // TABLES
 417 // -----------------------------------------------------
 418
 419 .table {
 420
 421         tbody tr.success td {
 422                 background-color: @successText;
 423         }
 424
 425         tbody tr.error td {
 426                 background-color: @errorText;
 427         }
 428
 429         tbody tr.info td {
 430                 background-color: @infoText;
 431         }
 432
 433 }
 434
 435
 436 // FORMS
 437 // -----------------------------------------------------
 438
 439 label, input, button, select, textarea, legend {
 440         color: @textColor;
 441 }
 442
 443 legend, label {
 444         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 445 }
 446
 447 .input-prepend .add-on,
 448 .input-append .add-on {
 449         vertical-align: top;
 450         background-color: @gray;
 451         border-top: 1px solid @grayLight;
 452         border-left: 1px solid @grayLight;
 453         border-bottom: 1px solid @grayDark;
 454         border-right: 1px solid @grayDark;
 455         text-shadow: none;
 456 }
 457
 458 .input-append .btn,
 459 .input-prepend .btn {
 460         margin-top: -1px;
 461         padding: 5px 14px;
 462 }
 463
 464 .uneditable-input,
 465 input[disabled],
 466 select[disabled],
 467 textarea[disabled],
 468 input[readonly],
 469 select[readonly],
 470 textarea[readonly] {
 471         color: @grayLighter;
 472 }
 473
 474 .form-actions {
 475         border-top: none;
 476 }
 477
 478 // DROPDOWNS
 479 // -----------------------------------------------------
 480
 481 .dropdown-menu {
 482         .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
 483 }
 484
 485 .dropdown.open .dropdown-toggle {
 486         background-color: @grayDark;
 487         color: @grayLighter;
 488 }
 489
 490 .dropdown-submenu > a::after {
 491         border-left-color: @white;
 492 }
 493
 494 // ALERTS, LABELS, BADGES
 495 // -----------------------------------------------------
 496
 497 .label, .alert {
 498         color: rgba(255, 255, 255, 0.9);
 499         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 500         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
 501 }
 502
 503 .alert {
 504   background-color: @orange;
 505   border-color: @orange;
 506
 507         .alert-heading {
 508                 color: rgba(255, 255, 255, 0.9);
 509                 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
 510         }
 511 }
 512
 513 .alert-success {
 514   background-color: @successText;
 515   border-color: @successText;
 516 }
 517
 518 .alert-error {
 519   background-color: @errorText;
 520   border-color: @errorText;
 521 }
 522
 523 .alert-info {
 524   background-color: @infoText;
 525   border-color: @infoText;
 526 }
 527
 528 // MISC
 529 // -----------------------------------------------------
 530
 531 .well, .hero-unit {
 532         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
 533 }
 534
 535 .thumbnail,
 536 a.thumbnail:hover {
 537   border: 1px solid darken(@grayDarker, 5%);
 538 }
 539
 540 .progress {
 541         background-color: darken(@grayDarker, 3%);
 542         #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
 543         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
 544 }
 545
 546 .footer {
 547         border-top: 1px solid darken(@grayDarker, 5%);
 548
 549         p {
 550                 color: @textColor;
 551         }
 552 }
 553
 554 .modal {
 555
 556         background-color: darken(@grayDark, 5%);
 557
 558         &-header {
 559                 border-bottom: none;
 560         }
 561
 562         &-body {
 563                 border-bottom: 1px solid #1C1E22;
 564         }
 565
 566         &-footer {
 567                 border-top: none;
 568                 background-color: @grayDarker;
 569                 .box-shadow(none);
 570         }
 571 }
 572
 573 // MEDIA QUERIES
 574 // -----------------------------------------------------
 575
 576 @media (max-width: 979px) {
 577         .navbar .brand {
 578                 border-right: none;
 579         }
 580 }
 581
 582 @media (max-width: 768px) {
 583         div.subnav .nav > li + li > a {
 584                 border-top: 1px solid transparent;
 585         }
 586 }