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

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