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