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

   1 // Superhero 2.3.1
   2 // Bootswatch
   3 // -----------------------------------------------------
   4
   5
   6 // TYPOGRAPHY
   7 // --------------------------------------------------
   8
   9 @import url('//fonts.googleapis.com/css?family=Oswald|Noticia+Text');
  10
  11 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, h6 {
  12         font-family: @headingsFontFamily;
  13         color: @orange;
  14         text-shadow: -1px 1px 0 darken(@orange, 30%);
  15 }
  16
  17 h1, h2 {
  18         text-shadow: -2px 2px 0 darken(@orange, 30%);
  19 }
  20
  21 h1 {
  22         line-height: 55px;
  23 }
  24
  25 code, pre {
  26         background-color: lighten(@blue, 8%);
  27         border: none;
  28         color: @textColor;
  29 }
  30
  31 // SCAFFOLDING
  32 // --------------------------------------------------
  33
  34 .page-header {
  35         border-bottom: none;
  36 }
  37
  38 blockquote {
  39         border-left: 5px solid @blue;
  40 }
  41
  42 blockquote.pull-right {
  43         border-right: 5px solid @blue;
  44 }
  45
  46 // NAVBAR
  47 // --------------------------------------------------
  48
  49 .navbar {
  50
  51         .navbar-inner {
  52                 .box-shadow(none);
  53                 background-image: none;
  54         }
  55
  56         .brand {
  57                 padding: 25px 20px 15px;
  58                 font-family: @headingsFontFamily;
  59                 font-size: 30px;
  60                 text-shadow: -2px 2px 0 darken(@orange, 30%);
  61         }
  62
  63         .nav > li > a {
  64                 padding: 23px 20px 13px;
  65                 line-height: 30px;
  66                 font-family: @headingsFontFamily;
  67                 font-size: 22px;
  68                 text-shadow: -2px 2px 0 darken(@orange, 30%);
  69         }
  70
  71         .brand:hover,
  72         .nav > li > a:hover,
  73         .nav > li.active > a:hover,
  74         .nav > li.dropdown.open > a,
  75         .nav > li.dropdown.open > a:hover {
  76                 position: relative;
  77                 top: 1px;
  78                 left: -1px;
  79                 color: @orange;
  80                 text-shadow: -1px 1px 0 darken(@orange, 30%);
  81         }
  82
  83         .nav > .active > a,
  84         .nav > .active > a:hover,
  85         .nav > .active > a:focus {
  86                 .box-shadow(none);
  87         }
  88
  89         .navbar-text {
  90                 padding: 23px 20px 13px;
  91                 line-height: 30px;
  92                 font-family: @headingsFontFamily;
  93                 font-size: 22px;
  94                 text-shadow: -2px 2px 0 @gray;
  95         }
  96
  97         .navbar-search {
  98                 margin-top: 24px;
  99         }
 100
 101         .navbar-search .search-query {
 102                 font-family: @baseFontFamily;
 103                 font-size: @baseFontSize;
 104                 line-height: @baseLineHeight;
 105                 .box-shadow(none);
 106         }
 107
 108         &.navbar-inverse .navbar-search .search-query {
 109                 color: @blueDark;
 110         }
 111
 112         .divider-vertical {
 113                 height: 70px;
 114         }
 115
 116         .nav .dropdown-toggle .caret,
 117         .nav .open.dropdown .caret {
 118                 margin-top: 14px;
 119                 border-top-color: @textColor;
 120         }
 121
 122         .dropdown-menu::before {
 123                 border: none;
 124         }
 125
 126         .dropdown-menu::after {
 127                 left: 20px;
 128                 border-left: 7px solid transparent;
 129                 border-right: 7px solid transparent;
 130                 border-bottom: 7px solid lighten(@blue, 10%);
 131         }
 132
 133         [class^="icon-"], [class*=" icon-"] {
 134                 vertical-align: 20%;
 135         }
 136
 137         .btn-navbar {
 138                 background-color: @blue;
 139                 border-color: transparent;
 140         }
 141 }
 142
 143 @media (max-width: @navbarCollapseWidth) {
 144
 145         .navbar .nav-collapse {
 146
 147                 .border-radius(4px);
 148
 149                 .nav li > a {
 150                         color: @orange;
 151
 152                         &:hover {
 153                                 background-color: lighten(@blue, 10%) !important;
 154                                 background-image: none;
 155                         }
 156                 }
 157
 158                 .navbar-form,
 159                 .navbar-search {
 160                         border-top: none;
 161                         border-bottom: none;
 162                         .box-shadow(none);
 163                 }
 164
 165                 .nav-header {
 166                         color: @textColor;
 167                 }
 168         }
 169 }
 170
 171 div.subnav {
 172         margin: 0 1px;
 173         background: @blue none;
 174         border: none;
 175
 176         .nav > li > a,
 177         .nav > li.active > a {
 178                 border-color: transparent;
 179                 color: @textColor;
 180         }
 181
 182         .nav > li > a:hover,
 183         .nav > li.active > a:hover {
 184                 background-color: lighten(@blue, 10%);
 185                 border-color: transparent;
 186         }
 187
 188         .nav > li.active > a,
 189         .nav > li.active > a:hover {
 190                 background: @orange none;
 191                 .box-shadow(none);
 192                 color: @white;
 193         }
 194
 195         &.subnav-fixed {
 196                 top: @navbarHeight + 1;
 197                 margin: 0;
 198                 .box-shadow(none);
 199
 200                 .nav > li > a,
 201                 .nav > li > a:hover,
 202                 .nav > li.active > a,
 203                 .nav > li.active > a:hover {
 204                         border-color: transparent;
 205                         .border-radius(0);
 206                 }
 207
 208                 .nav > li > a:hover,
 209                 .nav > li.active > a:hover {
 210                         color: @white;
 211                 }
 212         }
 213
 214         .nav > .active > a .caret,
 215         .nav > .active > a:hover .caret {
 216                 border-top-color: @textColor;
 217         }
 218 }
 219
 220 // NAVIGATION
 221 // --------------------------------------------------
 222
 223 .nav .nav-header {
 224         color: @textColor;
 225         text-shadow: none;
 226 }
 227
 228 .nav-list {
 229
 230         padding: 0 15px;
 231
 232         & > li > a,
 233         & > .nav-header {
 234                 text-shadow: none;
 235                 color: @textColor;
 236         }
 237
 238         .active > a,
 239         .active > a:hover {
 240                 text-shadow: none;
 241                 color: @white;
 242         }
 243
 244         li > a:hover {
 245                 background-color: lighten(@blue, 10%);
 246         }
 247
 248 }
 249
 250 .nav-tabs,
 251 .nav-tabs.nav-stacked > li > a {
 252         border-color: transparent;
 253 }
 254
 255 .nav-tabs {
 256
 257         & > li > a {
 258                 background-color: @blue;
 259                 color: @textColor;
 260         }
 261
 262         li.active > a,
 263         li.active > a:hover,
 264         &.nav-stacked > li.active > a:hover {
 265                 color: @white;
 266                 background-color: @orange;
 267                 border-color: transparent;
 268         }
 269
 270         li > a:hover,
 271         &.nav-stacked > li > a:hover {
 272                 background-color: lighten(@blue, 10%);
 273                 border-color: transparent;
 274         }
 275 }
 276
 277 .nav-pills {
 278
 279         & > li > a {
 280                 color: @textColor;
 281                 background-color: @blue;
 282         }
 283
 284         & > li > a:hover {
 285                 background-color: lighten(@blue, 10%);
 286                 border-color: transparent;
 287         }
 288
 289         & > .disabled > a:hover {
 290                 background-color: @blue;
 291         }
 292 }
 293
 294 .nav-tabs .open .dropdown-toggle,
 295 .nav-pills .open .dropdown-toggle,
 296 .nav > .open.active > a:hover {
 297         background-color: lighten(@blue, 10%);
 298         border-color: transparent;
 299 }
 300
 301 .nav-pills .dropdown .caret,
 302 .nav-pills .dropdown:hover .caret {
 303         border-top-color: @textColor;
 304 }
 305
 306 .dropdown.open .dropdown-menu > li > a:hover,
 307 .dropdown.open .dropdown-menu > li.active > a:hover {
 308         background-color: @orange;
 309         color: @white;
 310 }
 311
 312 .tabbable .nav-tabs,
 313 .tabbable .nav-tabs > li.active > a,
 314 .tabbable .nav-tabs > li > a:hover,
 315 .tabbable .nav-tabs > li.active > a:hover {
 316         border-color: transparent;
 317 }
 318
 319 .breadcrumb {
 320         background-color: @blue;
 321         background-image: none;
 322         border: none;
 323         .box-shadow(none);
 324
 325         li {
 326                 text-shadow: none;
 327         }
 328
 329         .divider {
 330                 color: @textColor;
 331         }
 332 }
 333
 334 .pagination {
 335
 336         ul {
 337                 background-image: none;
 338                 border-color: transparent;
 339         }
 340
 341         ul > li > a,
 342         ul > li > span {
 343                 border: none;
 344                 color: @textColor;
 345         }
 346
 347         ul > li > a:hover {
 348                 background: lighten(@blue, 10%);
 349         }
 350
 351         ul > .active > a,
 352         ul > .active > a:hover,
 353         ul > .active > span,
 354         ul > .active > span:hover {
 355                 background-color: @orange;
 356                 color: @white;
 357         }
 358
 359         ul > .disabled > a,
 360         ul > .disabled > a:hover,
 361         ul > .disabled > span,
 362         ul > .disabled > span:hover {
 363                 background: darken(@blue, 5%);
 364         }
 365 }
 366
 367 .pager {
 368
 369         li > a,
 370         li > span {
 371
 372                 background-color: @blue;
 373                 border: none;
 374                 color: @textColor;
 375
 376                 &:hover {
 377                         background: lighten(@blue, 10%);
 378                 }
 379         }
 380
 381         .disabled a,
 382         .disabled a:hover {
 383                 background-color: @blue;
 384         }
 385 }
 386
 387 // BUTTONS
 388 // --------------------------------------------------
 389
 390 .btn,
 391 .btn:hover {
 392         text-shadow: none;
 393         background-image: none;
 394         .box-shadow(-2px 2px 0 rgba(0, 0, 0, 0.2));
 395         border: none;
 396 }
 397
 398 .btn-warning {
 399         background-color: @yellow;
 400 }
 401
 402 .btn-primary, .btn-primary:hover {
 403         .box-shadow(-2px 2px 0 darken(@btnPrimaryBackground, 30%));
 404 }
 405
 406 .btn-warning, .btn-warning:hover {
 407         .box-shadow(-2px 2px 0 darken(@yellow, 30%));
 408 }
 409
 410 .btn-danger, .btn-danger:hover {
 411         .box-shadow(-2px 2px 0 darken(#ee5f5b, 30%));
 412 }
 413
 414 .btn-success, .btn-success:hover {
 415         .box-shadow(-2px 2px 0 darken(#62c462, 30%));
 416 }
 417
 418 .btn-info, .btn-info:hover {
 419         .box-shadow(-2px 2px 0 darken(#5bc0de, 40%));
 420 }
 421
 422 .btn-inverse, .btn-inverse:hover {
 423         .box-shadow(-2px 2px 0 darken(#454545, 20%));
 424 }
 425
 426 .btn.dropdown-toggle, .btn.dropdown-toggle:hover {
 427         .box-shadow(0 2px 0 darken(@white, 80%));
 428 }
 429
 430 .btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:hover {
 431         .box-shadow(0 2px 0 darken(@btnPrimaryBackground, 30%));
 432 }
 433
 434 .btn-warning.dropdown-toggle, .btn-warning.dropdown-toggle:hover {
 435         .box-shadow(0 2px 0 darken(@yellow, 30%));
 436 }
 437
 438 .btn-danger.dropdown-toggle, .btn-danger.dropdown-toggle:hover {
 439         .box-shadow(0 2px 0 darken(#ee5f5b, 30%));
 440 }
 441
 442 .btn-success.dropdown-toggle, .btn-success.dropdown-toggle:hover {
 443         .box-shadow(0 2px 0 darken(#62c462, 30%));
 444 }
 445
 446 .btn-info.dropdown-toggle, .btn-info.dropdown-toggle:hover {
 447         .box-shadow(0 2px 0 darken(#5bc0de, 40%));
 448 }
 449
 450 .btn-inverse.dropdown-toggle, .btn-inverse.dropdown-toggle:hover {
 451         .box-shadow(0 2px 0 darken(#454545, 20%));
 452 }
 453
 454 .btn.active,
 455 .btn:active {
 456         position: relative;
 457         top: 1px;
 458         left: -1px;
 459         .box-shadow(-1px 1px 0 darken(@white, 80%))
 460 }
 461
 462 .btn.disabled,
 463 .btn.disabled.active,
 464 .btn.disabled:active,
 465 .btn[disabled] {
 466         .box-shadow(none);
 467         text-shadow: none;
 468         top: 0;
 469         left: 0;
 470 }
 471
 472 [class^="icon-"], [class*=" icon-"] {
 473         vertical-align: -13%;
 474 }
 475
 476 // TABLES
 477 // -----------------------------------------------------
 478
 479 .table,
 480 .table-striped tbody > tr > td:first-child,
 481 .table-striped tbody > tr > td:last-child, {
 482         .border-radius(4px);
 483 }
 484
 485 // FORMS
 486 // --------------------------------------------------
 487
 488 input, button, select, textarea {
 489         font-family: 'Noticia Text', serif;
 490 }
 491
 492 legend {
 493         border-bottom: none;
 494         font-family: @headingsFontFamily;
 495         color: @orange;
 496         text-shadow: -2px 2px 0 darken(@orange, 30%);
 497 }
 498
 499 label {
 500         color: @textColor;
 501         line-height: 15px;
 502 }
 503
 504 .help-block {
 505         color: @textColor;
 506         opacity: 0.6;
 507 }
 508
 509 .form-actions {
 510         border-top: none;
 511 }
 512
 513 .control-group.warning {
 514   .formFieldState(lighten(@warningText, 10%), lighten(@warningText, 10%), @warningBackground);
 515 }
 516
 517 .control-group.error {
 518   .formFieldState(lighten(@errorText, 10%), lighten(@errorText, 10%), @errorBackground);
 519 }
 520
 521 .control-group.success {
 522   .formFieldState(lighten(@successText, 10%), lighten(@successText, 10%), @successBackground);
 523 }
 524
 525 .input-append .add-on,
 526 .input-prepend .add-on,
 527 .input-append .btn,
 528 .input-prepend .btn {
 529         color: @bodyBackground;
 530 }
 531
 532 // DROPDOWNS
 533 // --------------------------------------------------
 534
 535 .dropdown .caret {
 536         margin-top: 14px;
 537         opacity: 1;
 538         border-left: 6px solid transparent;
 539         border-right: 6px solid transparent;
 540         border-top: 6px solid lighten(@blue, 10%);
 541 }
 542
 543 // ALERTS, LABELS, BADGES
 544 // --------------------------------------------------
 545
 546 .label {
 547         background-color: @blue;
 548         color: @textColor;
 549 }
 550
 551 .label-important {
 552         background-color: @errorText;
 553 }
 554
 555 .label-warning {
 556         background-color: @orange;
 557 }
 558
 559 .label-success {
 560         background-color: @successText;
 561 }
 562
 563 .label-info {
 564         background-color: @infoText;
 565 }
 566
 567 .alert {
 568   background-color: @blue;
 569   border: none;
 570   color: @textColor;
 571   text-shadow: none;
 572
 573   a {
 574         color: lighten(@orange, 12%);
 575   }
 576 }
 577
 578 .alert .alert-heading {
 579         color: @orange;
 580 }
 581
 582 .alert-success {
 583   background-color: @successText;
 584 }
 585
 586 .alert-danger,
 587 .alert-error {
 588   background-color: @errorText;
 589 }
 590
 591 .alert-info {
 592   background-color: @infoText;
 593 }
 594
 595 // MISC
 596 // --------------------------------------------------
 597
 598 .well, .hero-unit {
 599         border: none;
 600         .box-shadow(none);
 601 }
 602
 603 .hero-unit h1 {
 604         color: @orange;
 605         line-height: 2em;
 606 }
 607
 608 .progress {
 609         background-color: darken(@blueDark, 5%);
 610         background-image: none;
 611         .box-shadow(none);
 612
 613         .bar {
 614                 .box-shadow(none);
 615         }
 616 }
 617
 618 .thumbnail {
 619         border: none;
 620         background: @blue;
 621         .border-radius(3px);
 622 }
 623
 624 .modal {
 625         background-color: transparent;
 626
 627         &-header,
 628         &-body,
 629         &-footer {
 630                 .box-shadow(none);
 631                 background-color: @bodyBackground;
 632                 border: none;
 633         }
 634
 635         &-header {
 636                 .border-radius(4px 4px 0 0);
 637         }
 638
 639         &-footer {
 640                 .border-radius(0 0 4px 4px);
 641         }
 642 }
 643
 644 // MEDIA QUERIES
 645 // --------------------------------------------------
 646
 647 @media (max-width: 768px) {
 648
 649         div.subnav {
 650
 651                 .nav > li {
 652
 653                         &:first-child > a,
 654                         &:first-child > a:hover,
 655                         &.active:first-child > a,
 656                         &.active:first-child > a:hover {
 657                                 .border-radius(4px 4px 0 0);
 658                         }
 659
 660                         &:last-child > a,
 661                         &:last-child > a:hover,
 662                         &.active:last-child > a,
 663                         &.active:last-child > a:hover {
 664                                 .border-radius(0 0 4px 4px);
 665                         }
 666                 }
 667         }
 668 }