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         }
 327
 328         .disabled a, .disabled a:hover {
 329                 color: @textColor;
 330         }
 331
 332         li a:hover {
 333                 background-color: rgba(255, 255, 255, 0.4);
 334                 color: @linkColor;
 335         }
 336
 337         .active a, .active a:hover {
 338                 background-color: rgba(255, 255, 255, 0.4);
 339                 color: @textColor;
 340         }
 341
 342         ul,
 343         li:first-child a,
 344         li:last-child a {
 345                 .border-radius(0);
 346         }
 347 }
 348
 349 .pager {
 350
 351         li > a {
 352                 background-color: #3CB9C6;
 353
 354                 &:hover {
 355                         background-color: #8AD5DC;
 356                 }
 357         }
 358
 359         .disabled a,
 360         .disabled a:hover {
 361                 background-color: #3CB9C6;
 362                 color: @white;
 363         }
 364 }
 365
 366 // BUTTONS
 367 // -----------------------------------------------------
 368
 369 .buttonBackgroundCustom(@color) {
 370
 371   background-color: @color;
 372   border-color: transparent;
 373
 374   &:hover, &:active, &.active, &.disabled, &[disabled] {
 375     background-color: darken(@color, 5%);
 376         text-shadow: none;
 377   }
 378
 379   &:active, &.active {
 380     background-color: darken(@color, 15%);
 381         .box-shadow(none);
 382   }
 383
 384   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
 385   &:active,
 386   &.active {
 387     background-color: darken(@color, 15%) e("\9");
 388   }
 389 }
 390
 391 .btn {
 392         padding: 12px 16px;
 393         .border-radius(0);
 394         background-image: none;
 395         text-shadow: none;
 396         .box-shadow(none);
 397         .buttonBackgroundCustom(@btnBackground)
 398 }
 399
 400 .btn-group .btn:first-child {
 401         margin-left: 0;
 402         .border-radius(0);
 403 }
 404
 405 .btn-group .btn:last-child,
 406 .btn-group .dropdown-toggle {
 407      .border-radius(0);
 408 }
 409
 410 .btn-group .dropdown-toggle,
 411 .btn-group.open .dropdown-toggle,
 412 .btn.open .dropdown-toggle {
 413         .box-shadow(none);
 414 }
 415
 416 .btn-primary {
 417   .buttonBackgroundCustom(@btnPrimaryBackground);
 418 }
 419
 420 .btn-info {
 421   .buttonBackgroundCustom(@btnInfoBackground);
 422 }
 423
 424 .btn-success {
 425   .buttonBackgroundCustom(@btnSuccessBackground);
 426 }
 427
 428 .btn-warning {
 429   .buttonBackgroundCustom(@btnWarningBackground);
 430 }
 431
 432 .btn-danger {
 433   .buttonBackgroundCustom(@btnDangerBackground);
 434 }
 435
 436 .btn-inverse {
 437   .buttonBackgroundCustom(@btnInverseBackground);
 438 }
 439
 440 .btn-link {
 441         .buttonBackgroundCustom(@btnPrimaryBackground);
 442 }
 443
 444 .btn-small {
 445         padding: 13px 16px 12px;
 446 }
 447
 448 [class^="icon-"], [class*=" icon-"] {
 449         margin-top: 2px;
 450         margin-right: 8px;
 451 }
 452
 453 .btn-small [class^="icon-"] {
 454         margin-top: 1px;
 455 }
 456
 457 .add-on [class^="icon-"] {
 458         margin-left: 5px;
 459 }
 460
 461 // TABLES
 462 // -----------------------------------------------------
 463
 464 .table th, .table td,
 465 .table tbody + tbody {
 466         border-top: 0px solid transparent;
 467 }
 468
 469 .table-bordered {
 470         .border-radius(0);
 471 }
 472
 473 .table tbody {
 474
 475         tr.success td {
 476                 background-color: @green;
 477         }
 478
 479         tr.error td {
 480                 background-color: @red;
 481         }
 482
 483         tr.info td {
 484                 background-color: @blue;
 485         }
 486 }
 487
 488 // FORMS
 489 // -----------------------------------------------------
 490
 491 legend {
 492         font-family: @headingsFontFamily;
 493 }
 494
 495 legend, label, .help-block, .input-file {
 496         color: @textColor;
 497         border: 0px solid transparent;
 498 }
 499
 500 input, textarea, .uneditable-input {
 501         border: 0px solid transparent;
 502         padding: 10px;
 503 }
 504
 505 .uneditable-input {
 506         padding-bottom: 30px;
 507 }
 508
 509 select {
 510         border: 0px solid transparent;
 511 }
 512
 513 button {
 514         margin-left: 12px;
 515 }
 516
 517 input, textarea, .search-query, .uneditable-input,
 518 .input-append input, .input-append .uneditable-input,
 519 .input-prepend input, .input-prepend .uneditable-input {
 520         border-color: transparent;
 521         .box-shadow(none);
 522 }
 523
 524 .form-actions {
 525         border-top: 0px solid transparent;
 526 }
 527
 528 .control-group.warning > label,
 529 .control-group.warning .help-inline {
 530         color: lighten(@orange, 30%);
 531 }
 532
 533 .control-group.error > label,
 534 .control-group.error .help-inline {
 535         color: lighten(@linkColor, 10%);
 536 }
 537
 538 .control-group.success > label,
 539 .control-group.success .help-inline {
 540         color: lighten(@green, 20%);
 541 }
 542
 543 .input-prepend .add-on,
 544 .input-append .add-on {
 545         height: 20px;
 546         padding-top: 4px;
 547         background-color: @grayLighter;
 548         border-color: transparent;
 549         .border-radius(0);
 550         color: @gray;
 551         text-shadow: none;
 552 }
 553
 554 .input-append .btn,
 555 .input-prepend .btn {
 556         padding: 4px 10px;
 557 }
 558
 559 // ALERTS, LABELS, BADGES
 560 // -----------------------------------------------------
 561
 562 .alert, .label {
 563         border-color: transparent;
 564         .border-radius(0);
 565         .box-shadow(none);
 566         text-shadow: none;
 567 }
 568
 569 .alert-heading {
 570         color: @textColor;
 571 }
 572
 573 .label, .label:hover {
 574         background-color: @grayLighter;
 575         text-shadow: none;
 576         color: @grayDark;
 577 }
 578
 579 .label-warning, .label-warning:hover, .alert {
 580         background-color: @orange;
 581         color: @textColor;
 582 }
 583
 584 .label-important, .label-important:hover, .alert-error {
 585         background-color: darken(@yellow, 3%);
 586         color: @textColor;
 587 }
 588
 589 .label-success, .label-success:hover, .alert-success {
 590         background-color: @green;
 591         color: @textColor;
 592 }
 593
 594 .label-info, .label-info:hover, .alert-info {
 595         background-color: @purple;
 596         color: @textColor;
 597 }
 598
 599 // MISCELLANEOUS
 600 // -----------------------------------------------------
 601
 602 .progress, .well, pre, code {
 603         border-color: transparent;
 604         .border-radius(0);
 605         .box-shadow(none);
 606         text-shadow: none;
 607 }
 608
 609 .well {
 610         background-image: none;
 611 }
 612
 613 .hero-unit {
 614         .border-radius(0);
 615 }
 616
 617 .thumbnail {
 618         border: 0 solid transparent;
 619         .border-radius(0);
 620         .box-shadow(none);
 621 }
 622
 623 .progress {
 624
 625         background-image: none;
 626         background-color: #27666D;
 627
 628         .bar {
 629
 630                 .box-shadow(none);
 631                 background-image: none;
 632                 background-color: @yellow;
 633
 634                 &-success {
 635                         background-color: @green;
 636                 }
 637
 638                 &-warning {
 639                         background-color: @orange;
 640                 }
 641
 642                 &-error {
 643                         background-color: @red;
 644                 }
 645         }
 646 }
 647
 648 .progress-danger .bar {
 649         background-image: none;
 650         background-color: #AD1D28;
 651 }
 652
 653 .progress-danger.progress-striped .bar {
 654         #gradient > .striped(#AD1D28);
 655 }
 656
 657 .progress-success .bar {
 658         background-image: none;
 659         background-color: @green;
 660 }
 661
 662 .progress-success.progress-striped .bar {
 663         #gradient > .striped(@green);
 664 }
 665
 666 .progress-info .bar {
 667         background-image: none;
 668         background-color: @blue;
 669 }
 670
 671 .progress-info.progress-striped .bar {
 672         #gradient > .striped(@blue);
 673 }
 674
 675 .modal {
 676
 677         .border-radius(0);
 678
 679         &-header {
 680                 background-color: @navbarBackground;
 681                 color: @white;
 682         }
 683
 684         &-body {
 685
 686                 color: @grayDark;
 687
 688                 h1, h2, h3, h4, h5, h6,
 689                 legend {
 690                         color: @red;
 691                 }
 692
 693                 label,
 694                 .input-file {
 695                         color: @grayDark;
 696                 }
 697
 698                 .help-block,
 699                 .help-inline {
 700                         color: @grayLight;
 701                 }
 702
 703                 textarea,
 704                 input,
 705                 .uneditable-input {
 706                         border: 1px solid @grayLight;
 707                 }
 708         }
 709 }
 710
 711 .popover {
 712
 713         padding: 0;
 714         .border-radius(0);
 715         color: @grayDark;
 716
 717         .popover-title {
 718                 .border-radius(0);
 719                 color: @white;
 720         }
 721 }
 722
 723 // MEDIA QUERIES
 724 // -----------------------------------------------------