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

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