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

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