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-small {
 451         padding: 13px 16px 12px;
 452 }
 453
 454 [class^="icon-"], [class*=" icon-"] {
 455         margin-top: 2px;
 456         margin-right: 8px;
 457 }
 458
 459 .btn-small [class^="icon-"] {
 460         margin-top: 1px;
 461 }
 462
 463 .add-on [class^="icon-"] {
 464         margin-left: 5px;
 465 }
 466
 467 // TABLES
 468 // -----------------------------------------------------
 469
 470 .table th, .table td,
 471 .table tbody + tbody {
 472         border-top: 0px solid transparent;
 473 }
 474
 475 .table-bordered {
 476         .border-radius(0);
 477 }
 478
 479 .table tbody {
 480
 481         tr.success td {
 482                 background-color: @green;
 483         }
 484
 485         tr.error td {
 486                 background-color: @red;
 487         }
 488
 489         tr.info td {
 490                 background-color: @blue;
 491         }
 492 }
 493
 494 // FORMS
 495 // -----------------------------------------------------
 496
 497 legend {
 498         font-family: @headingsFontFamily;
 499 }
 500
 501 legend, label, .help-block, .input-file {
 502         color: @textColor;
 503         border: 0px solid transparent;
 504 }
 505
 506 input, textarea, .uneditable-input {
 507         border: 0px solid transparent;
 508         padding: 10px;
 509 }
 510
 511 .uneditable-input {
 512         padding-bottom: 30px;
 513 }
 514
 515 select {
 516         border: 0px solid transparent;
 517 }
 518
 519 button {
 520         margin-left: 12px;
 521 }
 522
 523 input, textarea, .search-query, .uneditable-input,
 524 .input-append input, .input-append .uneditable-input,
 525 .input-prepend input, .input-prepend .uneditable-input {
 526         border-color: transparent;
 527         .box-shadow(none);
 528 }
 529
 530 .form-actions {
 531         border-top: 0px solid transparent;
 532 }
 533
 534 .control-group.warning > label,
 535 .control-group.warning .help-inline {
 536         color: lighten(@orange, 30%);
 537 }
 538
 539 .control-group.error > label,
 540 .control-group.error .help-inline {
 541         color: lighten(@linkColor, 10%);
 542 }
 543
 544 .control-group.success > label,
 545 .control-group.success .help-inline {
 546         color: lighten(@green, 20%);
 547 }
 548
 549 .input-prepend .add-on,
 550 .input-append .add-on {
 551         height: 20px;
 552         padding-top: 4px;
 553         background-color: @grayLighter;
 554         border-color: transparent;
 555         .border-radius(0);
 556         color: @gray;
 557         text-shadow: none;
 558 }
 559
 560 .input-append .btn,
 561 .input-prepend .btn {
 562         padding: 4px 10px;
 563 }
 564
 565 // ALERTS, LABELS, BADGES
 566 // -----------------------------------------------------
 567
 568 .alert, .label {
 569         border-color: transparent;
 570         .border-radius(0);
 571         .box-shadow(none);
 572         text-shadow: none;
 573 }
 574
 575 .alert-heading {
 576         color: @textColor;
 577 }
 578
 579 .label, .label:hover {
 580         background-color: @grayLighter;
 581         text-shadow: none;
 582         color: @grayDark;
 583 }
 584
 585 .label-warning, .label-warning:hover, .alert {
 586         background-color: @orange;
 587         color: @textColor;
 588 }
 589
 590 .label-important, .label-important:hover, .alert-error {
 591         background-color: darken(@yellow, 3%);
 592         color: @textColor;
 593 }
 594
 595 .label-success, .label-success:hover, .alert-success {
 596         background-color: @green;
 597         color: @textColor;
 598 }
 599
 600 .label-info, .label-info:hover, .alert-info {
 601         background-color: @purple;
 602         color: @textColor;
 603 }
 604
 605 // MISCELLANEOUS
 606 // -----------------------------------------------------
 607
 608 .progress, .well, pre, code {
 609         border-color: transparent;
 610         .border-radius(0);
 611         .box-shadow(none);
 612         text-shadow: none;
 613 }
 614
 615 .well {
 616         background-image: none;
 617 }
 618
 619 .hero-unit {
 620         .border-radius(0);
 621 }
 622
 623 .thumbnail {
 624         border: 0 solid transparent;
 625         .border-radius(0);
 626         .box-shadow(none);
 627 }
 628
 629 .progress {
 630
 631         background-image: none;
 632         background-color: #27666D;
 633
 634         .bar {
 635
 636                 .box-shadow(none);
 637                 background-image: none;
 638                 background-color: @yellow;
 639
 640                 &-success {
 641                         background-color: @green;
 642                 }
 643
 644                 &-warning {
 645                         background-color: @orange;
 646                 }
 647
 648                 &-error {
 649                         background-color: @red;
 650                 }
 651         }
 652 }
 653
 654 .progress-danger .bar {
 655         background-image: none;
 656         background-color: #AD1D28;
 657 }
 658
 659 .progress-danger.progress-striped .bar {
 660         #gradient > .striped(#AD1D28);
 661 }
 662
 663 .progress-success .bar {
 664         background-image: none;
 665         background-color: @green;
 666 }
 667
 668 .progress-success.progress-striped .bar {
 669         #gradient > .striped(@green);
 670 }
 671
 672 .progress-info .bar {
 673         background-image: none;
 674         background-color: @blue;
 675 }
 676
 677 .progress-info.progress-striped .bar {
 678         #gradient > .striped(@blue);
 679 }
 680
 681 .modal {
 682
 683         .border-radius(0);
 684
 685         &-header {
 686                 background-color: @navbarBackground;
 687                 color: @white;
 688         }
 689
 690         &-body {
 691
 692                 color: @grayDark;
 693
 694                 h1, h2, h3, h4, h5, h6,
 695                 legend {
 696                         color: @red;
 697                 }
 698
 699                 label,
 700                 .input-file {
 701                         color: @grayDark;
 702                 }
 703
 704                 .help-block,
 705                 .help-inline {
 706                         color: @grayLight;
 707                 }
 708
 709                 textarea,
 710                 input,
 711                 .uneditable-input {
 712                         border: 1px solid @grayLight;
 713                 }
 714         }
 715 }
 716
 717 .popover {
 718
 719         padding: 0;
 720         .border-radius(0);
 721         color: @grayDark;
 722
 723         .popover-title {
 724                 .border-radius(0);
 725                 color: @white;
 726         }
 727 }
 728
 729 // MEDIA QUERIES
 730 // -----------------------------------------------------