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

   1 // Bootswatch.less
   2 // Swatch: Spruce
   3 // Version: 2.1.0
   4 // -----------------------------------------------------
   5
   6 // TYPOGRAPHY
   7 // --------------------------------------------------
   8
   9 @import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400,700');
  10
  11 h1 {
  12         font-size: 54px;
  13         line-height: 1.2em;
  14         color: @yellow;
  15 }
  16
  17 h2 { font-size: 48px; }
  18 h3 { font-size: 36px; }
  19 h4 { font-size: 24px; }
  20 h5 { font-size: 20px; }
  21
  22 h1 > small,
  23 h2 > small,
  24 h3 > small,
  25 h4 > small,
  26 h5 > small,
  27 h6 > small,
  28 .muted {
  29         color: @headingsColor;
  30         font-family: @baseFontFamily;
  31 }
  32
  33 code, pre {
  34         color: lighten(@blueDark, 10%);
  35         background-color: @headingsColor;
  36 }
  37
  38 // SCAFFOLDING
  39 // --------------------------------------------------
  40
  41 // body {
  42 //      #gradient > .vertical-three-colors (#90A38F, #AEAD8E, 60%, #90A38F);
  43 //      background-size: 100% 1400px;
  44 //      background-repeat: repeat-y;
  45 // }
  46
  47 .page-header {
  48         border-bottom: 2px solid @headingsColor;
  49         padding-bottom: 5px;
  50
  51         h1 {
  52                 margin-bottom: 0;
  53         }
  54 }
  55
  56 hr {
  57         border-top: none;
  58         border-bottom: 2px solid @headingsColor;
  59 }
  60
  61 blockquote {
  62         border-left: 2px solid @headingsColor;
  63
  64         &.pull-right {
  65                 border-right: 2px solid @headingsColor;
  66         }
  67
  68         small {
  69                 color: @blueDark;
  70         }
  71 }
  72
  73 // NAVBAR
  74 // --------------------------------------------------
  75
  76 .navbar {
  77
  78         .navbar-inner {
  79                 background-image: none;
  80                 .box-shadow(none);
  81         }
  82
  83         .brand {
  84                 padding: 18px 20px 12px;
  85                 font-size: 26px;
  86                 font-family: @headingsFontFamily;
  87                 font-weight: @headingsFontWeight;
  88         }
  89
  90         .nav > li > a {
  91                 padding: 20px 20px 10px;
  92                 font-size: 20px;
  93                 font-family: @headingsFontFamily;
  94                 font-weight: @headingsFontWeight;
  95         }
  96
  97         .nav .active > a,
  98         .nav .active > a:hover {
  99                 color: @yellow;
 100         }
 101
 102         .nav > .active > a,
 103         .nav > .active > a:hover,
 104         .nav > .active > a:focus {
 105                 .box-shadow(none);
 106         }
 107
 108         .navbar-text {
 109                 margin: 19px 20px 0;
 110                 font-size: 20px;
 111                 font-family: @headingsFontFamily;
 112                 font-weight: @headingsFontWeight;
 113                 line-height: inherit;
 114         }
 115
 116         .divider-vertical {
 117                 border-color: rgba(0, 0, 0, 0.2);
 118         }
 119
 120         .navbar-search {
 121                 margin-top: 12px;
 122         }
 123
 124         .navbar-search .search-query {
 125                 border-color: transparent;
 126                 background-color: rgba(255, 255, 255, 0.4);
 127                 color: @white;
 128         }
 129
 130         .nav > .open > a {
 131                 color: @yellow;
 132         }
 133
 134         .nav > .open > .dropdown-menu {
 135                 background-color: @headingsColor;
 136                 color: @textColor;
 137                 border-color: transparent;
 138         }
 139
 140         .nav > .open > .dropdown-menu a:hover {
 141                 background-color: darken(#90A38F, 10%);
 142                 color: @headingsColor;
 143         }
 144
 145         .btn-navbar {
 146                 margin-top: 14px;
 147         }
 148
 149         .nav-collapse.in .nav li > a {
 150                 color: @headingsColor;
 151
 152                 &:hover {
 153                         color: @yellow;
 154                         background-color: @blue;
 155                 }
 156         }
 157
 158         .navbar-form, .navbar-search {
 159                 border-color: transparent;
 160                 .box-shadow(none);
 161         }
 162 }
 163
 164 div.subnav {
 165         background-color: @green;
 166         background-image: none;
 167         border-color: transparent;
 168         .box-shadow(0 1px 5px rgba(0,0,0,.1));
 169         font-size: 18px;
 170
 171         .nav > li > a {
 172                 padding: 13px 12px 9px;
 173                 border-color: transparent;
 174                 background-color: transparent;
 175                 font-family: @headingsFontFamily;
 176                 font-weight: @headingsFontWeight;
 177                 color: @headingsColor;
 178         }
 179
 180         .nav > li + li > a {
 181                 border-color: transparent;
 182         }
 183
 184         .nav > li.active > a,
 185         .nav > li > a:hover,
 186         .nav > li.active > a:hover,
 187         .dropdown.open .dropdown-toggle,
 188         .dropdown.open.active .dropdown-toggle:hover {
 189                 .box-shadow(none);
 190                 background-color: transparent;
 191                 border-color: transparent;
 192                 color: @yellow;
 193         }
 194
 195         .dropdown.open > .dropdown-menu {
 196                 background-color: @headingsColor;
 197                 color: @textColor;
 198                 border-color: transparent;
 199         }
 200
 201         .dropdown.open > .dropdown-menu a:hover {
 202                 background-color: darken(#90A38F, 10%);
 203                 color: @headingsColor;
 204         }
 205
 206         &.subnav-fixed {
 207                 top: @navbarHeight;
 208         }
 209 }
 210
 211 // NAV
 212 // --------------------------------------------------
 213
 214 .nav {
 215         .disabled > a {
 216
 217                 color: #ccc;
 218
 219                 &:hover {
 220                         background-color: #748C73;
 221                 }
 222         }
 223 }
 224
 225 .nav-list {
 226
 227         li > a,
 228         .nav-header {
 229                 text-shadow: none;
 230         }
 231
 232         li > a:hover {
 233                 background-color: transparent;
 234         }
 235
 236         li.active > a,
 237         li.active > a:hover {
 238                 background-color: #A2CDB5;
 239                 text-shadow: none;
 240         }
 241
 242         .divider {
 243                 background-color: transparent;
 244                 border-bottom: 1px solid @headingsColor;
 245         }
 246 }
 247
 248 .nav-tabs {
 249         border-color: transparent;
 250 }
 251
 252 .nav-tabs > li > a,
 253 .nav-pills > li > a {
 254         background-color: #748C73;
 255
 256         &:hover {
 257                 background-color: #748C73;
 258                 border-color: transparent;
 259         }
 260 }
 261
 262 .nav-tabs > .active > a,
 263 .nav-tabs > .active > a:hover,
 264 .nav-pills .active > a,
 265 .nav-pills .active > a:hover {
 266         background-color: #A2CDB5;
 267         border-color: transparent;
 268         color: @blue;
 269 }
 270
 271 .nav-tabs.nav-stacked > li > a {
 272         border-color: transparent;
 273
 274         &:hover {
 275                 border-color: transparent;
 276         }
 277 }
 278
 279 .nav-tabs .open .dropdown-toggle,
 280 .nav-pills .open .dropdown-toggle  {
 281         background-color: #748C73;
 282         border-color: transparent;
 283         color: @yellow;
 284 }
 285
 286 .nav-tabs .active.open .dropdown-toggle,
 287 .nav-pills .active.open .dropdown-toggle {
 288         background-color: #A2CDB5;
 289 }
 290
 291 .nav-tabs .dropdown-menu,
 292 .nav-pills .dropdown-menu {
 293         background-color: @headingsColor;
 294         color: @textColor;
 295         border-color: transparent;
 296
 297         a:hover {
 298                 background-color: #A2CDB5;
 299                 color: @headingsColor;
 300         }
 301 }
 302
 303 .nav .nav-header {
 304         color: @blue;
 305 }
 306
 307 .tabbable {
 308         .nav-tabs,
 309         .nav-tabs > li > a,
 310         .nav-tabs > li > a:hover,
 311         .nav-tabs > li.active > a,
 312         .nav-tabs > li.active > a:hover  {
 313                 border-color: transparent;
 314         }
 315 }
 316
 317 .breadcrumb {
 318         background-color: darken(#90A38F, 10%);
 319         background-image: none;
 320         border-color: transparent;
 321         .box-shadow(none);
 322
 323         li {
 324                 color: @yellow;
 325                 text-shadow: none;
 326
 327                 a {
 328                         color: @yellow;
 329                 }
 330
 331                 a:hover {
 332                         color: @yellow;
 333                 }
 334
 335                 .divider {
 336                         color: @headingsColor;
 337                 }
 338         }
 339
 340         .active {
 341                 color: @headingsColor;
 342         }
 343 }
 344
 345 .pagination {
 346
 347         & > ul {
 348                 background-color: darken(#90A38F, 10%);
 349                 background-image: none;
 350                 border-color: transparent;
 351                 .box-shadow(none);
 352         }
 353
 354         a {
 355                 color: @yellow;
 356                 border-color: transparent;
 357
 358                 &:hover {
 359                         color: @yellow;
 360                         background-color: rgba(0, 0, 0, 0.1);
 361                 }
 362         }
 363
 364         .active a {
 365                 color: @headingsColor;
 366                 background-color: rgba(0, 0, 0, 0.1);
 367         }
 368
 369         .disabled a,
 370         .disabled a:hover {
 371                 color: @blue;
 372         }
 373 }
 374
 375 .pager {
 376
 377         a {
 378                 border: none;
 379                 background-color: #748C73;
 380
 381                 &:hover {
 382                         background-color: #687D67;
 383                 }
 384         }
 385
 386         .disabled a,
 387         .disabled a:hover {
 388                 background-color: #748C73;
 389                 color: @textColor;
 390         }
 391 }
 392
 393 // BUTTONS
 394 // --------------------------------------------------
 395
 396 .btn {
 397         .buttonBackground(lighten(@blueDark, 5%), @blueDark);
 398         font-family: @headingsFontFamily;
 399         font-weight: @headingsFontWeight;
 400     color: @white;
 401     text-shadow: none;
 402         border-color: transparent;
 403         .box-shadow(none);
 404
 405         &:hover {
 406                 color: @grayLighter;
 407         }
 408 }
 409
 410 .btn-large {
 411         font-size: 18px;
 412 }
 413
 414 .btn-primary {
 415         .buttonBackground(lighten(@blue, 10%), lighten(@blue, 5%));
 416 }
 417
 418 .btn-warning {
 419   .buttonBackground(@orange, darken(@orange, 5%));
 420 }
 421
 422 .btn-danger {
 423   .buttonBackground(lighten(@red, 5%), @red);
 424 }
 425
 426 .btn-success {
 427   .buttonBackground(#62c462, #51a351);
 428 }
 429
 430 .btn-info {
 431   .buttonBackground(#5bc0de, #2f96b4);
 432 }
 433
 434 .btn-inverse {
 435   .buttonBackground(@yellow, darken(@yellow, 5%));
 436 }
 437
 438 .btn-group .dropdown-toggle {
 439         .box-shadow(none);
 440 }
 441
 442 // TABLES
 443 // --------------------------------------------------
 444
 445 .table,
 446 .table.table-bordered,
 447 .table.table-striped {
 448         .border-radius(0 0 8px 8px);
 449 }
 450
 451 .table-bordered thead:first-child tr:first-child th:first-child,
 452 .table-bordered tbody:first-child tr:first-child td:first-child,
 453 .table-bordered thead:first-child tr:first-child th:last-child,
 454 .table-bordered tbody:first-child tr:first-child td:last-child {
 455         .border-radius(0);
 456 }
 457
 458 .table-striped tbody:last-child tr:last-child td:first-child {
 459         .border-radius(0 0 0 8px);
 460 }
 461
 462 .table-striped tbody:last-child tr:last-child td:last-child {
 463         .border-radius(0 0 8px 0);
 464 }
 465
 466 .table-bordered {
 467         border: none;
 468 }
 469
 470 .table thead tr th:first-child,
 471 .table tbody tr td:first-child {
 472         border-left: none;
 473 }
 474
 475 .table th,
 476 .table-striped tbody tr:nth-child(odd) th {
 477         background-color: darken(#90A38F, 10%);
 478         color: @headingsColor;
 479 }
 480
 481 // FORMS
 482 // --------------------------------------------------
 483
 484 legend {
 485         font-family: @headingsFontFamily;
 486         font-weight: @headingsFontWeight;
 487         color: @headingsColor;
 488 }
 489
 490 label, .help-block, input[type="file"] {
 491         color: @headingsColor;
 492 }
 493
 494 input, textarea, select {
 495         color: @textColor;
 496 }
 497
 498 .uneditable-input {
 499         color: @gray;
 500 }
 501
 502 legend {
 503         border-bottom: 2px solid @white;
 504 }
 505
 506 .form-actions {
 507         border-top: none;
 508         .border-radius(4px);
 509 }
 510
 511 // ALERTS, LABELS, BADGES
 512 // --------------------------------------------------
 513
 514 .alert {
 515         text-shadow: none;
 516         border: none;
 517 }
 518
 519 .alert-heading {
 520         font-family: @baseFontFamily;
 521         color: inherit;
 522 }
 523
 524 .badge,
 525 .label {
 526
 527         background-color: @blue;
 528         text-shadow: none;
 529
 530         &-success {
 531                 background-color: @successBackground;
 532         }
 533
 534         &-warning {
 535                 background-color: @warningBackground;
 536         }
 537
 538         &-important {
 539                 background-color: @errorBackground;
 540         }
 541
 542         &-info {
 543                 background-color: @infoBackground;
 544         }
 545
 546         &-inverse {
 547                 background-color: @yellow;
 548         }
 549 }
 550
 551 // MISC
 552 // --------------------------------------------------
 553
 554 .well {
 555         border: none;
 556         .box-shadow(none);
 557 }
 558
 559 .thumbnail {
 560         border: none;
 561         .box-shadow(none);
 562
 563         img {
 564                 .border-radius(4px);
 565         }
 566 }
 567
 568 .progress {
 569         background-color: darken(#90A38F, 10%);
 570         background-image: none;
 571 }
 572
 573 .modal {
 574
 575         &-header {
 576                 padding: 12px 15px 6px;
 577                 background-color: @green;
 578         }
 579
 580         &-body,
 581         &-footer {
 582                 background-color: @headingsColor;
 583                 border: none;
 584                 .box-shadow(none);
 585
 586                 label {
 587                         color: @textColor;
 588                 }
 589         }
 590
 591         &-footer {
 592                 .border-radius(0 0 4px 4px);
 593         }
 594 }
 595
 596 // MEDIA QUERIES
 597 // --------------------------------------------------