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

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