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 > .active > a,
 195         .nav > .active > a:hover, {
 196                 border-right-color: transparent;
 197                 background-color: rgba(255, 255, 255, 0.4);
 198                 color: @textColor;
 199         }
 200
 201         .nav > li:first-child > a:hover {
 202                 border-left-color: rgba(255, 255, 255, 0.4);
 203                 border-left-width: 1px;
 204         }
 205
 206         &-fixed {
 207                 top: 50px;
 208         }
 209 }
 210
 211 // NAV
 212 // -----------------------------------------------------
 213
 214 .nav-tabs li.open > .dropdown-toggle,
 215 .nav-pills li.open > .dropdown-toggle {
 216         background-color: #8AD5DC;
 217         color: @linkColor;
 218         border-color: transparent;
 219 }
 220
 221 .nav-tabs, .nav-pills {
 222         border-color: transparent;
 223
 224         li > a {
 225                 border-color: transparent;
 226                 .border-radius(0);
 227                 .box-shadow(0);
 228         }
 229
 230         li.active > a,
 231         li.active > a:hover {
 232                 color: @textColor;
 233         }
 234
 235         li.active > a,
 236         li > a:hover,
 237         li.active > a:hover {
 238                 background-color: #8AD5DC;
 239                 border-color: transparent;
 240                 text-shadow: none;
 241         }
 242 }
 243
 244 .nav-tabs, .nav-tabs > li > a {
 245         border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 246 }
 247
 248 .nav-tabs > li > a {
 249         background-color: #3CB9C6;
 250 }
 251
 252 .nav-tabs.nav-stacked {
 253
 254         li > a:first-child,
 255         li > a:last-child {
 256                 .border-radius(0);
 257         }
 258
 259         li > a,
 260         li > a:hover,
 261         li.active > a,
 262         li.active > a:hover {
 263                 border-color: transparent;
 264         }
 265 }
 266
 267 .nav-list {
 268
 269         .nav-header {
 270                 text-shadow: none;
 271                 color: @textColor;
 272         }
 273
 274         li > a {
 275                 text-shadow: none;
 276         }
 277
 278         li.active > a,
 279         li > a:hover,
 280         li.active > a:hover {
 281                 background-color: #8AD5DC;
 282                 text-shadow: none;
 283         }
 284
 285         .divider {
 286                 background-color: rgba(255, 255, 255, 0.3);
 287                 border-bottom: none;
 288         }
 289 }
 290
 291 .breadcrumb, .pager > li > a {
 292         border-color: transparent;
 293         .border-radius(0);
 294         .box-shadow(none);
 295         text-shadow: none;
 296 }
 297
 298 .breadcrumb {
 299         background-color: #3CB9C6;
 300         background-image: none;
 301
 302         li {
 303                 text-shadow: none;
 304         }
 305
 306         .active {
 307                 color: @white;
 308         }
 309
 310         .divider {
 311                 color: @linkColor;
 312         }
 313 }
 314
 315 .pagination {
 316
 317         ul  {
 318                 background-color: @paginationBackground;
 319                 background-image: none;
 320                 .border-radius(0);
 321         }
 322
 323         ul > li > a:hover {
 324                 background-color: rgba(255, 255, 255, 0.4);
 325                 color: @linkColor;
 326         }
 327
 328         ul > li:first-child > a,
 329         ul > li:last-child > a {
 330                 .border-radius(0);
 331         }
 332
 333         ul > .disabled > a,
 334         ul > .disabled > a:hover,
 335         ul > .disabled > span,
 336         ul > .disabled > span:hover {
 337                 color: @textColor;
 338         }
 339
 340         ul > .active > a,
 341         ul > .active > a:hover,
 342         ul > .active > span,
 343         ul > .active > span:hover {
 344                 background-color: rgba(255, 255, 255, 0.4);
 345                 color: @textColor;
 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 [class^="icon-"], [class*=" icon-"] {
 445         margin-top: 2px;
 446         margin-right: 8px;
 447 }
 448
 449 .btn-small [class^="icon-"] {
 450         margin-top: 1px;
 451 }
 452
 453 .add-on [class^="icon-"] {
 454         margin-left: 5px;
 455 }
 456
 457 // TABLES
 458 // -----------------------------------------------------
 459
 460 .table th, .table td,
 461 .table tbody + tbody {
 462         border-top: 0px solid transparent;
 463 }
 464
 465 .table-bordered {
 466         .border-radius(0);
 467 }
 468
 469 .table tbody {
 470
 471         tr.success td {
 472                 background-color: @green;
 473         }
 474
 475         tr.error td {
 476                 background-color: @red;
 477         }
 478
 479         tr.info td {
 480                 background-color: @blue;
 481         }
 482 }
 483
 484 // FORMS
 485 // -----------------------------------------------------
 486
 487 legend {
 488         font-family: @headingsFontFamily;
 489 }
 490
 491 legend, label, .help-block, .input-file {
 492         color: @textColor;
 493         border: 0px solid transparent;
 494 }
 495
 496 input, textarea, .uneditable-input {
 497         border: 0px solid transparent;
 498         padding: 10px;
 499 }
 500
 501 .uneditable-input {
 502         padding-bottom: 30px;
 503 }
 504
 505 select {
 506         border: 0px solid transparent;
 507 }
 508
 509 button {
 510         margin-left: 12px;
 511 }
 512
 513 input, textarea, .search-query, .uneditable-input,
 514 .input-append input, .input-append .uneditable-input,
 515 .input-prepend input, .input-prepend .uneditable-input {
 516         border-color: transparent;
 517         .box-shadow(none);
 518 }
 519
 520 .form-actions {
 521         border-top: 0px solid transparent;
 522 }
 523
 524 .control-group.warning > label,
 525 .control-group.warning .help-inline {
 526         color: lighten(@orange, 30%);
 527 }
 528
 529 .control-group.error > label,
 530 .control-group.error .help-inline {
 531         color: lighten(@linkColor, 10%);
 532 }
 533
 534 .control-group.success > label,
 535 .control-group.success .help-inline {
 536         color: lighten(@green, 20%);
 537 }
 538
 539 .input-prepend .add-on,
 540 .input-append .add-on {
 541         height: 20px;
 542         padding-top: 4px;
 543         background-color: @grayLighter;
 544         border-color: transparent;
 545         .border-radius(0);
 546         color: @gray;
 547         text-shadow: none;
 548 }
 549
 550 .input-append .btn,
 551 .input-prepend .btn {
 552         padding: 4px 10px;
 553 }
 554
 555 // ALERTS, LABELS, BADGES
 556 // -----------------------------------------------------
 557
 558 .alert {
 559
 560         h1, h2, h3, h4, h5, h6 {
 561                 color: @textColor;
 562         }
 563 }
 564
 565 .alert, .label {
 566         border-color: transparent;
 567         .border-radius(0);
 568         .box-shadow(none);
 569         text-shadow: none;
 570 }
 571
 572 .alert-heading {
 573         color: @textColor;
 574 }
 575
 576 .label, .label:hover {
 577         background-color: @grayLighter;
 578         text-shadow: none;
 579         color: @grayDark;
 580 }
 581
 582 .label-warning, .label-warning:hover, .alert {
 583         background-color: @orange;
 584         color: @textColor;
 585 }
 586
 587 .label-important, .label-important:hover, .alert-error {
 588         background-color: darken(@yellow, 3%);
 589         color: @textColor;
 590 }
 591
 592 .label-success, .label-success:hover, .alert-success {
 593         background-color: @green;
 594         color: @textColor;
 595 }
 596
 597 .label-info, .label-info:hover, .alert-info {
 598         background-color: @purple;
 599         color: @textColor;
 600 }
 601
 602 // MISCELLANEOUS
 603 // -----------------------------------------------------
 604
 605 .progress, .well, pre, code {
 606         border-color: transparent;
 607         .border-radius(0);
 608         .box-shadow(none);
 609         text-shadow: none;
 610 }
 611
 612 .well {
 613         background-image: none;
 614 }
 615
 616 .hero-unit {
 617         .border-radius(0);
 618 }
 619
 620 .thumbnail {
 621         border: 0 solid transparent;
 622         .border-radius(0);
 623         .box-shadow(none);
 624 }
 625
 626 .progress {
 627
 628         background-image: none;
 629         background-color: #27666D;
 630
 631         .bar {
 632
 633                 .box-shadow(none);
 634                 background-image: none;
 635                 background-color: @yellow;
 636
 637                 &-success {
 638                         background-color: @green;
 639                 }
 640
 641                 &-warning {
 642                         background-color: @orange;
 643                 }
 644
 645                 &-error {
 646                         background-color: @red;
 647                 }
 648         }
 649 }
 650
 651 .progress-danger .bar {
 652         background-image: none;
 653         background-color: #AD1D28;
 654 }
 655
 656 .progress-danger.progress-striped .bar {
 657         #gradient > .striped(#AD1D28);
 658 }
 659
 660 .progress-success .bar {
 661         background-image: none;
 662         background-color: @green;
 663 }
 664
 665 .progress-success.progress-striped .bar {
 666         #gradient > .striped(@green);
 667 }
 668
 669 .progress-info .bar {
 670         background-image: none;
 671         background-color: @blue;
 672 }
 673
 674 .progress-info.progress-striped .bar {
 675         #gradient > .striped(@blue);
 676 }
 677
 678 .modal {
 679
 680         .border-radius(0);
 681
 682         &-header {
 683                 background-color: @navbarBackground;
 684                 color: @white;
 685         }
 686
 687         &-body {
 688
 689                 color: @grayDark;
 690
 691                 h1, h2, h3, h4, h5, h6,
 692                 legend {
 693                         color: @red;
 694                 }
 695
 696                 label,
 697                 .input-file {
 698                         color: @grayDark;
 699                 }
 700
 701                 .help-block,
 702                 .help-inline {
 703                         color: @grayLight;
 704                 }
 705
 706                 textarea,
 707                 input,
 708                 .uneditable-input {
 709                         border: 1px solid @grayLight;
 710                 }
 711         }
 712 }
 713
 714 .popover {
 715
 716         padding: 0;
 717         .border-radius(0);
 718         color: @grayDark;
 719
 720         .popover-title {
 721                 .border-radius(0);
 722                 color: @white;
 723         }
 724 }
 725
 726 // MEDIA QUERIES
 727 // -----------------------------------------------------