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