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

   1 // Superhero 2.2.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         background-color: @blue;
 173         background-image: none;
 174         border: none;
 175
 176         .nav > li > a,
 177         .nav > li.active > a {
 178                 border-left: none;
 179                 border-right: none;
 180                 color: @textColor;
 181         }
 182
 183         .nav > li > a:hover,
 184         .nav > li.active > a:hover {
 185                 background-color: lighten(@blue, 10%);
 186         }
 187
 188         .nav > li + li > a {
 189                 border-top: 0px solid transparent;
 190         }
 191
 192         .nav > li:first-child > a,
 193         .nav > li:first-child > a:hover,
 194         .nav > li.active:first-child > a,
 195         .nav > li.active:first-child > a:hover {
 196                 .border-radius(4px 0 0 4px);
 197         }
 198
 199         .nav > li.active > a,
 200         .nav > li.active > a:hover {
 201                 color: @white;
 202                 background-color: @orange;
 203                 background-image: none;
 204                 .box-shadow(none);
 205         }
 206
 207         &.subnav-fixed {
 208                 top: 70px;
 209                 .box-shadow(none);
 210
 211                 .nav > li > a,
 212                 .nav > li.active > a,
 213                 .nav > li > a:hover,
 214                 .nav > li.active > a:hover {
 215                         border-color: transparent;
 216                         padding-left: 12px;
 217                         padding-right: 12px;
 218                         .border-radius(0);
 219                 }
 220
 221                 .nav > li > a:hover,
 222                 .nav > li.active > a:hover {
 223                         color: @white;
 224                 }
 225         }
 226
 227         .nav > .active > a .caret,
 228         .nav > .active > a:hover .caret {
 229                 border-top-color: @textColor;
 230         }
 231 }
 232
 233 // NAVIGATION
 234 // --------------------------------------------------
 235
 236 .nav .nav-header {
 237         color: @textColor;
 238         text-shadow: none;
 239 }
 240
 241 .nav-list {
 242         padding: 0 15px;
 243 }
 244
 245 .nav-list > li > a, .nav-list .nav-header {
 246         text-shadow: none;
 247         color: @textColor;
 248 }
 249
 250 .nav-list .active > a, .nav-list .active > a:hover {
 251         text-shadow: none;
 252         color: @white;
 253 }
 254
 255 .nav-list li > a:hover {
 256         background-color: lighten(@blue, 10%);
 257 }
 258
 259 .nav-tabs, .nav-tabs.nav-stacked > li > a {
 260         border-color: transparent;
 261 }
 262
 263 .nav-tabs {
 264         > li > a {
 265                 background-color: @blue;
 266                 color: @textColor;
 267         }
 268
 269         li.active > a,
 270         li.active > a:hover,
 271         &.nav-stacked > li.active > a:hover {
 272                 color: @white;
 273                 background-color: @orange;
 274                 border-color: transparent;
 275         }
 276
 277         li > a:hover,
 278         &.nav-stacked > li > a:hover {
 279                 background-color: lighten(@blue, 10%);
 280                 border-color: transparent;
 281         }
 282 }
 283
 284 .nav-pills > li > a {
 285         color: @textColor;
 286         background-color: @blue;
 287 }
 288
 289 .nav-pills > li:hover > a {
 290         background-color: lighten(@blue, 10%);
 291         border-color: transparent;
 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         a {
 370                 color: @textColor;
 371                 background-color: @blue;
 372                 border-color: transparent;
 373
 374                 &:hover {
 375                         background: lighten(@blue, 10%);
 376                 }
 377         }
 378
 379         .disabled a,
 380         .disabled a:hover {
 381                 background-color: @blue;
 382         }
 383 }
 384
 385 // BUTTONS
 386 // --------------------------------------------------
 387
 388 .btn,
 389 .btn:hover {
 390         text-shadow: none;
 391         background-image: none;
 392         .box-shadow(-2px 2px 0 rgba(0, 0, 0, 0.2));
 393         border: none;
 394 }
 395
 396 .btn-warning {
 397         background-color: @yellow;
 398 }
 399
 400 .btn-primary, .btn-primary:hover {
 401         .box-shadow(-2px 2px 0 darken(@btnPrimaryBackground, 30%));
 402 }
 403
 404 .btn-warning, .btn-warning:hover {
 405         .box-shadow(-2px 2px 0 darken(@yellow, 30%));
 406 }
 407
 408 .btn-danger, .btn-danger:hover {
 409         .box-shadow(-2px 2px 0 darken(#ee5f5b, 30%));
 410 }
 411
 412 .btn-success, .btn-success:hover {
 413         .box-shadow(-2px 2px 0 darken(#62c462, 30%));
 414 }
 415
 416 .btn-info, .btn-info:hover {
 417         .box-shadow(-2px 2px 0 darken(#5bc0de, 40%));
 418 }
 419
 420 .btn-inverse, .btn-inverse:hover {
 421         .box-shadow(-2px 2px 0 darken(#454545, 20%));
 422 }
 423
 424 .btn.dropdown-toggle, .btn.dropdown-toggle:hover {
 425         .box-shadow(0 2px 0 darken(@white, 80%));
 426 }
 427
 428 .btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:hover {
 429         .box-shadow(0 2px 0 darken(@btnPrimaryBackground, 30%));
 430 }
 431
 432 .btn-warning.dropdown-toggle, .btn-warning.dropdown-toggle:hover {
 433         .box-shadow(0 2px 0 darken(@yellow, 30%));
 434 }
 435
 436 .btn-danger.dropdown-toggle, .btn-danger.dropdown-toggle:hover {
 437         .box-shadow(0 2px 0 darken(#ee5f5b, 30%));
 438 }
 439
 440 .btn-success.dropdown-toggle, .btn-success.dropdown-toggle:hover {
 441         .box-shadow(0 2px 0 darken(#62c462, 30%));
 442 }
 443
 444 .btn-info.dropdown-toggle, .btn-info.dropdown-toggle:hover {
 445         .box-shadow(0 2px 0 darken(#5bc0de, 40%));
 446 }
 447
 448 .btn-inverse.dropdown-toggle, .btn-inverse.dropdown-toggle:hover {
 449         .box-shadow(0 2px 0 darken(#454545, 20%));
 450 }
 451
 452 .btn.active,
 453 .btn:active {
 454         position: relative;
 455         top: 1px;
 456         left: -1px;
 457         .box-shadow(-1px 1px 0 darken(@white, 80%))
 458 }
 459
 460 .btn.disabled,
 461 .btn.disabled.active,
 462 .btn.disabled:active,
 463 .btn[disabled] {
 464         .box-shadow(none);
 465         text-shadow: none;
 466         top: 0;
 467         left: 0;
 468 }
 469
 470 [class^="icon-"], [class*=" icon-"] {
 471         vertical-align: -13%;
 472 }
 473
 474 // TABLES
 475 // -----------------------------------------------------
 476
 477 .table,
 478 .table-striped tbody > tr > td:first-child,
 479 .table-striped tbody > tr > td:last-child, {
 480         .border-radius(4px);
 481 }
 482
 483 // FORMS
 484 // --------------------------------------------------
 485
 486 input, button, select, textarea {
 487         font-family: 'Noticia Text', serif;
 488 }
 489
 490 legend {
 491         border-bottom: none;
 492         font-family: @headingsFontFamily;
 493         color: @orange;
 494         text-shadow: -2px 2px 0 darken(@orange, 30%);
 495 }
 496
 497 label {
 498         color: @textColor;
 499         line-height: 15px;
 500 }
 501
 502 .help-block {
 503         color: @textColor;
 504         opacity: 0.6;
 505 }
 506
 507 .form-actions {
 508         border-top: none;
 509 }
 510
 511 .control-group.warning {
 512   .formFieldState(lighten(@warningText, 10%), lighten(@warningText, 10%), @warningBackground);
 513 }
 514
 515 .control-group.error {
 516   .formFieldState(lighten(@errorText, 10%), lighten(@errorText, 10%), @errorBackground);
 517 }
 518
 519 .control-group.success {
 520   .formFieldState(lighten(@successText, 10%), lighten(@successText, 10%), @successBackground);
 521 }
 522
 523 .input-append .add-on,
 524 .input-prepend .add-on,
 525 .input-append .btn,
 526 .input-prepend .btn {
 527         color: @bodyBackground;
 528 }
 529
 530 // DROPDOWNS
 531 // --------------------------------------------------
 532
 533 .dropdown .caret {
 534         margin-top: 14px;
 535         opacity: 1;
 536         border-left: 6px solid transparent;
 537         border-right: 6px solid transparent;
 538         border-top: 6px solid lighten(@blue, 10%);
 539 }
 540
 541 // ALERTS, LABELS, BADGES
 542 // --------------------------------------------------
 543
 544 .label {
 545         background-color: @blue;
 546         color: @textColor;
 547 }
 548
 549 .label-important {
 550         background-color: @errorText;
 551 }
 552
 553 .label-warning {
 554         background-color: @orange;
 555 }
 556
 557 .label-success {
 558         background-color: @successText;
 559 }
 560
 561 .label-info {
 562         background-color: @infoText;
 563 }
 564
 565 .alert {
 566   background-color: @blue;
 567   border: none;
 568   color: @textColor;
 569   text-shadow: none;
 570
 571   a {
 572         color: lighten(@orange, 12%);
 573   }
 574 }
 575
 576 .alert .alert-heading {
 577         color: @orange;
 578 }
 579
 580 .alert-success {
 581   background-color: @successText;
 582 }
 583
 584 .alert-danger,
 585 .alert-error {
 586   background-color: @errorText;
 587 }
 588
 589 .alert-info {
 590   background-color: @infoText;
 591 }
 592
 593 // MISC
 594 // --------------------------------------------------
 595
 596 .well, .hero-unit {
 597         border: none;
 598         .box-shadow(none);
 599 }
 600
 601 .hero-unit h1 {
 602         color: @orange;
 603         line-height: 2em;
 604 }
 605
 606 .progress {
 607         background-color: darken(@blueDark, 5%);
 608         background-image: none;
 609         .box-shadow(none);
 610
 611         .bar {
 612                 .box-shadow(none);
 613         }
 614 }
 615
 616 .thumbnail {
 617         border: none;
 618         background: @blue;
 619         .border-radius(3px);
 620 }
 621
 622 .modal {
 623         background-color: transparent;
 624
 625         &-header,
 626         &-body,
 627         &-footer {
 628                 .box-shadow(none);
 629                 background-color: @bodyBackground;
 630                 border: none;
 631         }
 632
 633         &-header {
 634                 .border-radius(4px 4px 0 0);
 635         }
 636
 637         &-footer {
 638                 .border-radius(0 0 4px 4px);
 639         }
 640 }
 641
 642 // MEDIA QUERIES
 643 // --------------------------------------------------
 644
 645 @media (max-width: 768px) {
 646
 647         div.subnav {
 648
 649                 .nav > li {
 650
 651                         &:first-child > a,
 652                         &:first-child > a:hover,
 653                         &.active:first-child > a,
 654                         &.active:first-child > a:hover {
 655                                 .border-radius(4px 4px 0 0);
 656                         }
 657
 658                         &:last-child > a,
 659                         &:last-child > a:hover,
 660                         &.active:last-child > a,
 661                         &.active:last-child > a:hover {
 662                                 .border-radius(0 0 4px 4px);
 663                         }
 664                 }
 665         }
 666 }