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

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