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

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