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('//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         background-color: rgba(42, 99, 105, 0.9);
 164         background-image: none;
 165         border: 0px solid transparent;
 166         .border-radius(0);
 167         .box-shadow(none);
 168
 169         .nav > li.open > a {
 170                 border-color: transparent;
 171                 background-color: rgba(255, 255, 255, 0.4);
 172         }
 173
 174         .nav > li > a {
 175                 color: @textColor;
 176                 border-color: transparent;
 177         }
 178
 179         .nav > li:first-child > a,
 180         .nav > li:first-child > a:hover {
 181                 .border-radius(0);
 182         }
 183
 184         .nav > .active > a {
 185                 background-color: transparent;
 186                 border-color: transparent;
 187                 color: @textColor;
 188                 .box-shadow(none);
 189         }
 190
 191         .nav > .active > a:hover,
 192         .nav > li > a:hover,
 193         .nav > .active > a,
 194         .nav > .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:hover {
 231                 color: @textColor;
 232         }
 233
 234         li.active > a,
 235         li > a:hover,
 236         li.active > a:hover {
 237                 background-color: #8AD5DC;
 238                 border-color: transparent;
 239                 text-shadow: none;
 240         }
 241 }
 242
 243 .nav-tabs, .nav-tabs > li > a {
 244         border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 245 }
 246
 247 .nav-tabs > li > a {
 248         background-color: #3CB9C6;
 249 }
 250
 251 .nav-tabs.nav-stacked {
 252
 253         li > a:first-child,
 254         li > a:last-child {
 255                 .border-radius(0);
 256         }
 257
 258         li > a,
 259         li > a:hover,
 260         li.active > a,
 261         li.active > a:hover {
 262                 border-color: transparent;
 263         }
 264 }
 265
 266 .nav-list {
 267
 268         .nav-header {
 269                 text-shadow: none;
 270                 color: @textColor;
 271         }
 272
 273         li > a {
 274                 text-shadow: none;
 275         }
 276
 277         li.active > a,
 278         li > a:hover,
 279         li.active > a:hover {
 280                 background-color: #8AD5DC;
 281                 text-shadow: none;
 282         }
 283
 284         .divider {
 285                 background-color: rgba(255, 255, 255, 0.3);
 286                 border-bottom: none;
 287         }
 288 }
 289
 290 .breadcrumb, .pager > li > a {
 291         border-color: transparent;
 292         .border-radius(0);
 293         .box-shadow(none);
 294         text-shadow: none;
 295 }
 296
 297 .breadcrumb {
 298         background-color: #3CB9C6;
 299         background-image: none;
 300
 301         li {
 302                 text-shadow: none;
 303         }
 304
 305         .active {
 306                 color: @white;
 307         }
 308
 309         .divider {
 310                 color: @linkColor;
 311         }
 312 }
 313
 314 .pagination {
 315
 316         ul  {
 317                 background-color: @paginationBackground;
 318                 background-image: none;
 319                 .border-radius(0);
 320         }
 321
 322         ul > li > a:hover {
 323                 background-color: rgba(255, 255, 255, 0.4);
 324                 color: @linkColor;
 325         }
 326
 327         ul > li:first-child > a,
 328         ul > li:last-child > a {
 329                 .border-radius(0);
 330         }
 331
 332         ul > .disabled > a,
 333         ul > .disabled > a:hover,
 334         ul > .disabled > span,
 335         ul > .disabled > span:hover {
 336                 color: @textColor;
 337         }
 338
 339         ul > .active > a,
 340         ul > .active > a:hover,
 341         ul > .active > span,
 342         ul > .active > span:hover {
 343                 background-color: rgba(255, 255, 255, 0.4);
 344                 color: @textColor;
 345         }
 346 }
 347
 348 .pager {
 349
 350         li > a {
 351                 background-color: #3CB9C6;
 352
 353                 &:hover {
 354                         background-color: #8AD5DC;
 355                 }
 356         }
 357
 358         .disabled a,
 359         .disabled a:hover {
 360                 background-color: #3CB9C6;
 361                 color: @white;
 362         }
 363 }
 364
 365 // BUTTONS
 366 // -----------------------------------------------------
 367
 368 .buttonBackgroundCustom(@color) {
 369
 370   background-color: @color;
 371   border-color: transparent;
 372
 373   &:hover, &:active, &.active, &.disabled, &[disabled] {
 374     background-color: darken(@color, 5%);
 375         text-shadow: none;
 376   }
 377
 378   &:active, &.active {
 379     background-color: darken(@color, 15%);
 380         .box-shadow(none);
 381   }
 382
 383   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
 384   &:active,
 385   &.active {
 386     background-color: darken(@color, 15%) e("\9");
 387   }
 388 }
 389
 390 .btn {
 391         padding: 12px 16px;
 392         .border-radius(0);
 393         background-image: none;
 394         text-shadow: none;
 395         .box-shadow(none);
 396         .buttonBackgroundCustom(@btnBackground)
 397 }
 398
 399 .btn-group .btn:first-child {
 400         margin-left: 0;
 401         .border-radius(0);
 402 }
 403
 404 .btn-group .btn:last-child,
 405 .btn-group .dropdown-toggle {
 406      .border-radius(0);
 407 }
 408
 409 .btn-group .dropdown-toggle,
 410 .btn-group.open .dropdown-toggle,
 411 .btn.open .dropdown-toggle {
 412         .box-shadow(none);
 413 }
 414
 415 .btn-primary {
 416   .buttonBackgroundCustom(@btnPrimaryBackground);
 417 }
 418
 419 .btn-info {
 420   .buttonBackgroundCustom(@btnInfoBackground);
 421 }
 422
 423 .btn-success {
 424   .buttonBackgroundCustom(@btnSuccessBackground);
 425 }
 426
 427 .btn-warning {
 428   .buttonBackgroundCustom(@btnWarningBackground);
 429 }
 430
 431 .btn-danger {
 432   .buttonBackgroundCustom(@btnDangerBackground);
 433 }
 434
 435 .btn-inverse {
 436   .buttonBackgroundCustom(@btnInverseBackground);
 437 }
 438
 439 .btn-link {
 440         .buttonBackgroundCustom(@btnPrimaryBackground);
 441 }
 442
 443 [class^="icon-"], [class*=" icon-"] {
 444         margin-top: 2px;
 445         margin-right: 8px;
 446 }
 447
 448 .btn-small [class^="icon-"] {
 449         margin-top: 1px;
 450 }
 451
 452 .add-on [class^="icon-"] {
 453         margin-left: 5px;
 454 }
 455
 456 // TABLES
 457 // -----------------------------------------------------
 458
 459 .table th, .table td,
 460 .table tbody + tbody {
 461         border-top: 0px solid transparent;
 462 }
 463
 464 .table-bordered {
 465         .border-radius(0);
 466 }
 467
 468 .table tbody {
 469
 470         tr.success td {
 471                 background-color: @green;
 472         }
 473
 474         tr.error td {
 475                 background-color: @red;
 476         }
 477
 478         tr.info td {
 479                 background-color: @blue;
 480         }
 481 }
 482
 483 // FORMS
 484 // -----------------------------------------------------
 485
 486 legend {
 487         font-family: @headingsFontFamily;
 488 }
 489
 490 legend, label, .help-block, .input-file {
 491         color: @textColor;
 492         border: 0px solid transparent;
 493 }
 494
 495 input, textarea, .uneditable-input {
 496         border: 0px solid transparent;
 497         padding: 10px;
 498 }
 499
 500 .uneditable-input {
 501         padding-bottom: 30px;
 502 }
 503
 504 select {
 505         border: 0px solid transparent;
 506 }
 507
 508 button {
 509         margin-left: 12px;
 510 }
 511
 512 input, textarea, .search-query, .uneditable-input,
 513 .input-append input, .input-append .uneditable-input,
 514 .input-prepend input, .input-prepend .uneditable-input {
 515         border-color: transparent;
 516         .box-shadow(none);
 517 }
 518
 519 .form-actions {
 520         border-top: 0px solid transparent;
 521 }
 522
 523 .control-group.warning > label,
 524 .control-group.warning .help-inline {
 525         color: lighten(@orange, 30%);
 526 }
 527
 528 .control-group.error > label,
 529 .control-group.error .help-inline {
 530         color: lighten(@linkColor, 10%);
 531 }
 532
 533 .control-group.success > label,
 534 .control-group.success .help-inline {
 535         color: lighten(@green, 20%);
 536 }
 537
 538 .input-prepend .add-on,
 539 .input-append .add-on {
 540         height: 20px;
 541         padding-top: 4px;
 542         background-color: @grayLighter;
 543         border-color: transparent;
 544         .border-radius(0);
 545         color: @gray;
 546         text-shadow: none;
 547 }
 548
 549 .input-append .btn,
 550 .input-prepend .btn {
 551         padding: 4px 10px;
 552 }
 553
 554 // ALERTS, LABELS, BADGES
 555 // -----------------------------------------------------
 556
 557 .alert {
 558
 559         h1, h2, h3, h4, h5, h6 {
 560                 color: @textColor;
 561         }
 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 // -----------------------------------------------------