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

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