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

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