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

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