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

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