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
 473 // DROPDOWNS
 474 // -----------------------------------------------------
 475
 476 .dropdown-menu {
 477         .box-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
 478 }
 479
 480 // ALERTS, LABELS, BADGES
 481 // -----------------------------------------------------
 482
 483 .alert,
 484 .alert .alert-heading,
 485 .alert-success,
 486 .alert-success .alert-heading,
 487 .alert-danger,
 488 .alert-error,
 489 .alert-danger .alert-heading,
 490 .alert-error .alert-heading,
 491 .alert-info,
 492 .alert-info .alert-heading {
 493   color: @grayLighter;
 494   text-shadow: none;
 495   border: none;
 496 }
 497
 498 .label {
 499         color: @grayLighter;
 500 }
 501
 502 .label, .alert { background-color: darken(@gray, 20%); }
 503
 504 .label:hover { background-color: darken(@gray, 30%); }
 505
 506 .label-important,
 507 .alert-danger,
 508 .alert-error { background-color: @red; }
 509
 510 .label-important:hover { background-color: darken(@red, 10%); }
 511
 512 .label-warning   { background-color: darken(@orange, 10%); }
 513
 514 .label-warning:hover { background-color: darken(@orange, 20%); }
 515
 516 .label-success, .alert-success { background-color: darken(@green, 3%); }
 517
 518 .label-success:hover { background-color: darken(@green, 13%); }
 519
 520 .label-info, .alert-info { background-color: darken(@blueDark, 10%); }
 521
 522 .label-info:hover { background-color: darken(@blueDark, 20%); }
 523
 524 // MISC
 525 // -----------------------------------------------------
 526
 527 .well, .hero-unit {
 528         .border-radius(1px);
 529 }
 530
 531 .well, .hero-unit {
 532         border-top: solid 1px lighten(@grayDark, 5%);
 533         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 534 }
 535
 536 .thumbnail {
 537         border-color: @grayDark;
 538 }
 539
 540 .progress {
 541         background-color: #060606;
 542         background-image: none;
 543         .border-radius(0);
 544 }
 545
 546 .modal {
 547         .border-radius(1px);
 548         border-top: solid 1px lighten(@grayDark, 5%);
 549         background-color: @grayDark;
 550 }
 551
 552 .modal-header {
 553         border-bottom: 1px solid @grayDark;
 554 }
 555
 556 .modal-footer {
 557         background-color: @grayDark;
 558         border-top: 1px solid @grayDark;
 559         .border-radius(0 0 6px 6px);
 560         .box-shadow(none);
 561 }
 562
 563 .footer {
 564         border-top: 1px solid @grayDark;
 565 }
 566
 567 // MEDIA QUERIES
 568 // -----------------------------------------------------
 569
 570 @media (max-width: 768px) {
 571         div.subnav .nav > li + li > a,
 572         div.subnav .nav > li:first-child > a {
 573                 border-top: 1px solid @grayDark;
 574                 border-left: 1px solid @grayDark;
 575         }
 576
 577         .subnav .nav > li + li > a:hover,
 578         .subnav .nav > li:first-child > a:hover {
 579                         border-bottom: 0;
 580                         background-color: @blue;
 581         }
 582 }