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                 border-left: 1px solid @gray;
 288                 border-right: 1px solid darken(@gray, 15%);
 289                 border-top: none;
 290                 border-bottom: none;
 291                 #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 292                 .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 293                 color: @grayLighter;
 294                 font-weight: bold;
 295                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 296
 297                 &:hover {
 298                         #gradient > .directional(@grayDarker, @grayDark, 280deg);
 299                         border-left: 1px solid transparent;
 300                 }
 301         }
 302
 303         ul > li.active > a,
 304         ul > li.active > a:hover {
 305                 color: @grayLighter;
 306                 background-color: @grayDark;
 307                 #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
 308                 border-left: 1px solid transparent;
 309         }
 310
 311         ul > li.disabled > a,
 312         ul > li.disabled > a:hover {
 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(@grayLight, @gray, 70%, @gray);
 318         }
 319 }
 320
 321 .pager {
 322
 323         a {
 324                 border: 1px solid transparent;
 325                 .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 326                 #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 327         }
 328
 329         a:hover {
 330                 #gradient > .directional(@grayDarker, @grayDark, 280deg);
 331                 border: 1px solid transparent;
 332         }
 333
 334         .disabled a,
 335         .disabled a:hover {
 336                 background-color: transparent;
 337         }
 338 }
 339
 340 // BUTTONS
 341 // -----------------------------------------------------
 342
 343 .btn {
 344     .buttonBackground(@gray, darken(@gray, 10%));
 345         .border-radius(3px);
 346         border: 1px solid @grayDarker;
 347 }
 348
 349 .btn, .btn:hover {
 350         color: @white;
 351         font-weight: bold;
 352         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 353 }
 354
 355 .btn-primary {
 356   .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
 357 }
 358
 359 .btn-warning {
 360   .buttonBackground(lighten(@orange, 15%), @orange);
 361 }
 362
 363 .btn-danger {
 364   .buttonBackground(#ee5f5b, #bd362f);
 365 }
 366
 367 .btn-success {
 368   .buttonBackground(#62c462, #51a351);
 369 }
 370
 371 .btn-info {
 372   .buttonBackground(#5bc0de, #2f96b4);
 373 }
 374
 375 .btn-inverse {
 376   .buttonBackground(#454545, #262626);
 377 }
 378
 379 .caret {
 380         border-top-color: @white;
 381 }
 382
 383 // TABLES
 384 // -----------------------------------------------------
 385
 386 // FORMS
 387 // -----------------------------------------------------
 388
 389 label, input, button, select, textarea, legend {
 390         color: @textColor;
 391 }
 392
 393 legend, label {
 394         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 395 }
 396
 397 .input-prepend .add-on,
 398 .input-append .add-on {
 399         vertical-align: top;
 400         background-color: @gray;
 401         border-top: 1px solid @grayLight;
 402         border-left: 1px solid @grayLight;
 403         border-bottom: 1px solid @grayDark;
 404         border-right: 1px solid @grayDark;
 405         text-shadow: none;
 406 }
 407
 408 .input-append .btn,
 409 .input-prepend .btn {
 410         margin-top: -1px;
 411         padding: 5px 14px;
 412 }
 413
 414 .uneditable-input,
 415 input[disabled],
 416 select[disabled],
 417 textarea[disabled],
 418 input[readonly],
 419 select[readonly],
 420 textarea[readonly] {
 421         color: @grayLighter;
 422 }
 423
 424 .form-actions {
 425         border-top: none;
 426 }
 427
 428 // DROPDOWNS
 429 // -----------------------------------------------------
 430
 431 .dropdown-menu {
 432         .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
 433
 434         li.active a,
 435         li.active a:hover {
 436                 background-color: @grayDark;
 437         }
 438 }
 439
 440 .dropdown.open .dropdown-toggle {
 441         background-color: @grayDark;
 442         color: @grayLighter;
 443 }
 444
 445 .dropdown-menu .divider {
 446         border-top: none;
 447         border-bottom: 1px solid darken(@grayDarker, 5%);
 448         background-color: transparent;
 449 }
 450
 451 .dropdown-submenu > a::after {
 452         border-left-color: @white;
 453 }
 454
 455 // ALERTS, LABELS, BADGES
 456 // -----------------------------------------------------
 457
 458 .label, .alert {
 459         color: rgba(255, 255, 255, 0.9);
 460         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 461         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
 462 }
 463
 464 .alert-heading {
 465         color: rgba(255, 255, 255, 0.9);
 466         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
 467 }
 468
 469 .alert {
 470   background-color: @orange;
 471   border-color: @orange;
 472 }
 473
 474 .alert-success {
 475   background-color: @successText;
 476   border-color: @successText;
 477 }
 478
 479 .alert-error {
 480   background-color: @errorText;
 481   border-color: @errorText;
 482 }
 483
 484 .alert-info {
 485   background-color: @infoText;
 486   border-color: @infoText;
 487 }
 488
 489 // MISC
 490 // -----------------------------------------------------
 491
 492 .well, .hero-unit {
 493         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
 494 }
 495
 496 .thumbnail,
 497 a.thumbnail:hover {
 498   border: 1px solid darken(@grayDarker, 5%);
 499 }
 500
 501 .progress {
 502         background-color: darken(@grayDarker, 3%);
 503         #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
 504         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
 505 }
 506
 507 .footer {
 508         border-top: 1px solid darken(@grayDarker, 5%);
 509
 510         p {
 511                 color: @textColor;
 512         }
 513 }
 514
 515 .modal {
 516
 517         background-color: darken(@grayDark, 5%);
 518
 519         &-header {
 520                 border-bottom: none;
 521         }
 522
 523         &-body {
 524                 border-bottom: 1px solid #1C1E22;
 525         }
 526
 527         &-footer {
 528                 border-top: none;
 529                 background-color: @grayDarker;
 530                 .box-shadow(none);
 531         }
 532 }
 533
 534 // MEDIA QUERIES
 535 // -----------------------------------------------------
 536
 537 @media (max-width: 979px) {
 538         .navbar .brand {
 539                 border-right: none;
 540         }
 541 }
 542
 543 @media (max-width: 768px) {
 544         div.subnav .nav > li + li > a {
 545                 border-top: 1px solid transparent;
 546         }
 547 }