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