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

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