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