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

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