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

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