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

   1 // Superhero 2.3.2
   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         li.disabled > a:hover {
 277                 background-color: @blue;
 278         }
 279 }
 280
 281 .nav-pills {
 282
 283         & > li > a {
 284                 color: @textColor;
 285                 background-color: @blue;
 286         }
 287
 288         & > li > a:hover {
 289                 background-color: lighten(@blue, 10%);
 290                 border-color: transparent;
 291         }
 292
 293         & > .disabled > a:hover {
 294                 background-color: @blue;
 295         }
 296 }
 297
 298 .nav-tabs .open .dropdown-toggle,
 299 .nav-pills .open .dropdown-toggle,
 300 .nav > .open.active > a:hover {
 301         background-color: lighten(@blue, 10%);
 302         border-color: transparent;
 303 }
 304
 305 .nav-pills .dropdown .caret,
 306 .nav-pills .dropdown:hover .caret {
 307         border-top-color: @textColor;
 308 }
 309
 310 .dropdown.open .dropdown-menu > li > a:hover,
 311 .dropdown.open .dropdown-menu > li.active > a:hover {
 312         background-color: @orange;
 313         color: @white;
 314 }
 315
 316 .tabbable .nav-tabs,
 317 .tabbable .nav-tabs > li.active > a,
 318 .tabbable .nav-tabs > li > a:hover,
 319 .tabbable .nav-tabs > li.active > a:hover {
 320         border-color: transparent;
 321 }
 322
 323 .breadcrumb {
 324         background-color: @blue;
 325         background-image: none;
 326         border: none;
 327         .box-shadow(none);
 328
 329         li {
 330                 text-shadow: none;
 331         }
 332
 333         .divider {
 334                 color: @textColor;
 335         }
 336 }
 337
 338 .pagination {
 339
 340         ul {
 341                 background-image: none;
 342                 border-color: transparent;
 343         }
 344
 345         ul > li > a,
 346         ul > li > span {
 347                 border: none;
 348                 color: @textColor;
 349         }
 350
 351         ul > li > a:hover {
 352                 background: lighten(@blue, 10%);
 353         }
 354
 355         ul > .active > a,
 356         ul > .active > a:hover,
 357         ul > .active > span,
 358         ul > .active > span:hover {
 359                 background-color: @orange;
 360                 color: @white;
 361         }
 362
 363         ul > .disabled > a,
 364         ul > .disabled > a:hover,
 365         ul > .disabled > span,
 366         ul > .disabled > span:hover {
 367                 background: darken(@blue, 5%);
 368         }
 369 }
 370
 371 .pager {
 372
 373         li > a,
 374         li > span {
 375
 376                 background-color: @blue;
 377                 border: none;
 378                 color: @textColor;
 379
 380                 &:hover {
 381                         background: lighten(@blue, 10%);
 382                 }
 383         }
 384
 385         .disabled a,
 386         .disabled a:hover {
 387                 background-color: @blue;
 388         }
 389 }
 390
 391 // BUTTONS
 392 // --------------------------------------------------
 393
 394 .btn,
 395 .btn:hover {
 396         text-shadow: none;
 397         background-image: none;
 398         .box-shadow(-2px 2px 0 rgba(0, 0, 0, 0.2));
 399         border: none;
 400 }
 401
 402 .btn-warning {
 403         background-color: @yellow;
 404 }
 405
 406 .btn-primary, .btn-primary:hover {
 407         .box-shadow(-2px 2px 0 darken(@btnPrimaryBackground, 30%));
 408 }
 409
 410 .btn-warning, .btn-warning:hover {
 411         .box-shadow(-2px 2px 0 darken(@yellow, 30%));
 412 }
 413
 414 .btn-danger, .btn-danger:hover {
 415         .box-shadow(-2px 2px 0 darken(#ee5f5b, 30%));
 416 }
 417
 418 .btn-success, .btn-success:hover {
 419         .box-shadow(-2px 2px 0 darken(#62c462, 30%));
 420 }
 421
 422 .btn-info, .btn-info:hover {
 423         .box-shadow(-2px 2px 0 darken(#5bc0de, 40%));
 424 }
 425
 426 .btn-inverse, .btn-inverse:hover {
 427         .box-shadow(-2px 2px 0 darken(#454545, 20%));
 428 }
 429
 430 .btn.dropdown-toggle, .btn.dropdown-toggle:hover {
 431         .box-shadow(0 2px 0 darken(@white, 80%));
 432 }
 433
 434 .btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:hover {
 435         .box-shadow(0 2px 0 darken(@btnPrimaryBackground, 30%));
 436 }
 437
 438 .btn-warning.dropdown-toggle, .btn-warning.dropdown-toggle:hover {
 439         .box-shadow(0 2px 0 darken(@yellow, 30%));
 440 }
 441
 442 .btn-danger.dropdown-toggle, .btn-danger.dropdown-toggle:hover {
 443         .box-shadow(0 2px 0 darken(#ee5f5b, 30%));
 444 }
 445
 446 .btn-success.dropdown-toggle, .btn-success.dropdown-toggle:hover {
 447         .box-shadow(0 2px 0 darken(#62c462, 30%));
 448 }
 449
 450 .btn-info.dropdown-toggle, .btn-info.dropdown-toggle:hover {
 451         .box-shadow(0 2px 0 darken(#5bc0de, 40%));
 452 }
 453
 454 .btn-inverse.dropdown-toggle, .btn-inverse.dropdown-toggle:hover {
 455         .box-shadow(0 2px 0 darken(#454545, 20%));
 456 }
 457
 458 .btn.active,
 459 .btn:active {
 460         position: relative;
 461         top: 1px;
 462         left: -1px;
 463         .box-shadow(-1px 1px 0 darken(@white, 80%))
 464 }
 465
 466 .btn.disabled,
 467 .btn.disabled.active,
 468 .btn.disabled:active,
 469 .btn[disabled] {
 470         .box-shadow(none);
 471         text-shadow: none;
 472         top: 0;
 473         left: 0;
 474 }
 475
 476 [class^="icon-"], [class*=" icon-"] {
 477         vertical-align: -13%;
 478 }
 479
 480 // TABLES
 481 // -----------------------------------------------------
 482
 483 .table,
 484 .table-striped tbody > tr > td:first-child,
 485 .table-striped tbody > tr > td:last-child, {
 486         .border-radius(4px);
 487 }
 488
 489 // FORMS
 490 // --------------------------------------------------
 491
 492 input, button, select, textarea {
 493         font-family: 'Noticia Text', serif;
 494 }
 495
 496 legend {
 497         border-bottom: none;
 498         font-family: @headingsFontFamily;
 499         color: @orange;
 500         text-shadow: -2px 2px 0 darken(@orange, 30%);
 501 }
 502
 503 label {
 504         color: @textColor;
 505         line-height: 15px;
 506 }
 507
 508 .help-block {
 509         color: @textColor;
 510         opacity: 0.6;
 511 }
 512
 513 .form-actions {
 514         border-top: none;
 515 }
 516
 517 .control-group.warning {
 518   .formFieldState(lighten(@warningText, 10%), lighten(@warningText, 10%), @warningBackground);
 519 }
 520
 521 .control-group.error {
 522   .formFieldState(lighten(@errorText, 10%), lighten(@errorText, 10%), @errorBackground);
 523 }
 524
 525 .control-group.success {
 526   .formFieldState(lighten(@successText, 10%), lighten(@successText, 10%), @successBackground);
 527 }
 528
 529 .input-append .add-on,
 530 .input-prepend .add-on,
 531 .input-append .btn,
 532 .input-prepend .btn {
 533         color: @bodyBackground;
 534 }
 535
 536 // DROPDOWNS
 537 // --------------------------------------------------
 538
 539 .dropdown .caret {
 540         margin-top: 14px;
 541         opacity: 1;
 542         border-left: 6px solid transparent;
 543         border-right: 6px solid transparent;
 544         border-top: 6px solid lighten(@blue, 10%);
 545 }
 546
 547 // ALERTS, LABELS, BADGES
 548 // --------------------------------------------------
 549
 550 .label {
 551         background-color: @blue;
 552         color: @textColor;
 553 }
 554
 555 .label-important {
 556         background-color: @errorText;
 557 }
 558
 559 .label-warning {
 560         background-color: @orange;
 561 }
 562
 563 .label-success {
 564         background-color: @successText;
 565 }
 566
 567 .label-info {
 568         background-color: @infoText;
 569 }
 570
 571 .alert {
 572   background-color: @blue;
 573   border: none;
 574   color: @textColor;
 575   text-shadow: none;
 576
 577   a {
 578         color: lighten(@orange, 12%);
 579   }
 580 }
 581
 582 .alert .alert-heading {
 583         color: @orange;
 584 }
 585
 586 .alert-success {
 587   background-color: @successText;
 588 }
 589
 590 .alert-danger,
 591 .alert-error {
 592   background-color: @errorText;
 593 }
 594
 595 .alert-info {
 596   background-color: @infoText;
 597 }
 598
 599 // MISC
 600 // --------------------------------------------------
 601
 602 .well, .hero-unit {
 603         border: none;
 604         .box-shadow(none);
 605 }
 606
 607 .hero-unit h1 {
 608         color: @orange;
 609         line-height: 2em;
 610 }
 611
 612 .progress {
 613         background-color: darken(@blueDark, 5%);
 614         background-image: none;
 615         .box-shadow(none);
 616
 617         .bar {
 618                 .box-shadow(none);
 619         }
 620 }
 621
 622 .thumbnail {
 623         border: none;
 624         background: @blue;
 625         .border-radius(3px);
 626 }
 627
 628 .modal {
 629         background-color: transparent;
 630
 631         &-header,
 632         &-body,
 633         &-footer {
 634                 .box-shadow(none);
 635                 background-color: @bodyBackground;
 636                 border: none;
 637         }
 638
 639         &-header {
 640                 .border-radius(4px 4px 0 0);
 641         }
 642
 643         &-footer {
 644                 .border-radius(0 0 4px 4px);
 645         }
 646 }
 647
 648 // MEDIA QUERIES
 649 // --------------------------------------------------
 650
 651 @media (max-width: 768px) {
 652
 653         div.subnav {
 654
 655                 .nav > li {
 656
 657                         &:first-child > a,
 658                         &:first-child > a:hover,
 659                         &.active:first-child > a,
 660                         &.active:first-child > a:hover {
 661                                 .border-radius(4px 4px 0 0);
 662                         }
 663
 664                         &:last-child > a,
 665                         &:last-child > a:hover,
 666                         &.active:last-child > a,
 667                         &.active:last-child > a:hover {
 668                                 .border-radius(0 0 4px 4px);
 669                         }
 670                 }
 671         }
 672 }