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

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