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

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