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

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