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

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