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

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