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

   1 // Cyborg 2.3.0
   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         .open .dropdown-toggle {
 224                 background-color: #060606;
 225                 border-color: transparent;
 226         }
 227 }
 228
 229 .nav-pills {
 230
 231         li > a:hover {
 232                 background-color: @blue;
 233                 color: @white;
 234         }
 235
 236         .open .dropdown-toggle {
 237                 background-color: #060606;
 238         }
 239
 240         .dropdown-menu li > a:hover {
 241                 border: none;
 242         }
 243 }
 244
 245 .nav-list {
 246
 247         li > a {
 248                 text-shadow: none;
 249         }
 250
 251         li > a:hover {
 252                 background-color: @blue;
 253                 color: @white;
 254         }
 255
 256         .nav-header {
 257                 text-shadow: none;
 258         }
 259
 260         .divider {
 261                 background-color: transparent;
 262                 border-bottom: 1px solid @grayDark;
 263         }
 264 }
 265
 266 .nav-stacked {
 267
 268         li > a {
 269                 border: 1px solid @grayDark !important;
 270         }
 271
 272         li > a:hover,
 273         li.active > a {
 274                 background-color: @blue;
 275                 color: @white;
 276         }
 277 }
 278
 279 .tabbable  {
 280         .nav-tabs,
 281         .nav-tabs li.active > a {
 282                 border-color: @grayDark;
 283         }
 284 }
 285
 286 .breadcrumb {
 287
 288         background-color: transparent;
 289         background-image: none;
 290         border-width: 0;
 291         .box-shadow(none);
 292         font-size: 14px;
 293
 294         li {
 295                 text-shadow: none;
 296         }
 297
 298         li > a {
 299                 color: @blue;
 300                 text-shadow: none;
 301         }
 302 }
 303
 304 .pagination {
 305
 306         ul {
 307                 .box-shadow(none);
 308         }
 309
 310         ul > li > a:hover,
 311         ul > .active > a,
 312         ul > .active > span {
 313                 // color: @white;
 314         }
 315
 316         ul > .disabled > a,
 317         ul > .disabled > a:hover,
 318         ul > .disabled > span,
 319         ul > .disabled > span:hover {
 320                 background-color: rgba(0, 0, 0, 0.2);
 321         }
 322 }
 323
 324 .pager {
 325
 326         li > a,
 327         li > span {
 328                 background-color: @bodyBackground;
 329                 border: none;
 330
 331                 &:hover {
 332                         background-color: @blue;
 333                 }
 334         }
 335
 336         .disabled a,
 337         .disabled a:hover {
 338                 background-color: @bodyBackground;
 339         }
 340
 341 }
 342
 343 // BUTTONS
 344 // -----------------------------------------------------
 345
 346 .btn {
 347         .box-shadow(1px 1px 2px #111);
 348         .buttonBackground(darken(@gray, 20%), darken(@gray, 30%));
 349         color: @white;
 350         text-shadow: none;
 351
 352         &:hover {
 353                 text-shadow: none;
 354                 color: @white;
 355         }
 356 }
 357
 358 .btn-primary {
 359   .buttonBackground(@blueDark, darken(@blueDark, 10%));
 360 }
 361
 362 .btn-warning {
 363   .buttonBackground(lighten(@orange, 10%), @orange);
 364 }
 365
 366 .btn-danger {
 367   .buttonBackground(lighten(@red, 10%), @red);
 368 }
 369
 370 .btn-success {
 371   .buttonBackground(lighten(@green, 10%), @green);
 372 }
 373
 374 .btn-info {
 375   .buttonBackground(darken(@gray, 40%), darken(@gray, 50%));
 376 }
 377
 378 .btn-inverse {
 379   .buttonBackground(lighten(@purple, 5%), @purple);
 380 }
 381
 382 .btn .caret {
 383         border-top: 4px solid black;
 384         opacity: 0.3;
 385 }
 386
 387 .btn-group > .dropdown-menu > li > a:hover {
 388         border-bottom: 0;
 389 }
 390
 391 .btn.disabled, .btn[disabled] {
 392         background-color: @grayLight;
 393 }
 394
 395 // FORMS
 396 // -----------------------------------------------------
 397
 398 input, textarea, select {
 399         border-width: 2px;
 400         .border-radius(1px);
 401 }
 402
 403 select, textarea,
 404 input[type="text"], input[type="password"], input[type="datetime"],
 405 input[type="datetime-local"], input[type="date"], input[type="month"],
 406 input[type="time"], input[type="week"], input[type="number"],
 407 input[type="email"], input[type="url"], input[type="search"],
 408 input[type="tel"], input[type="color"], .uneditable-input {
 409         color: @grayDark;
 410 }
 411
 412 input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input {
 413         border-color: #444;
 414 }
 415
 416 input:focus,
 417 textarea:focus,
 418 input.focused,
 419 textarea.focused {
 420   border-color: rgba(82,168,236,1);
 421   outline: 0;
 422   outline: thin dotted \9; /* IE6-9 */
 423 }
 424
 425 input[type="file"]:focus,
 426 input[type="radio"]:focus,
 427 input[type="checkbox"]:focus,
 428 select:focus {
 429   .box-shadow(none); // override for file inputs
 430   .tab-focus();
 431 }
 432
 433 legend, label {
 434         color: @textColor;
 435         border-bottom: 0px solid #222;
 436 }
 437
 438 .form-actions {
 439         border-top: 1px solid #222;
 440 }
 441
 442 // TABLES
 443 // -----------------------------------------------------
 444
 445 .table {
 446
 447         .border-radius(1px);
 448
 449         tbody tr.success td {
 450                 background-color: @green;
 451                 color: @white;
 452         }
 453
 454         tbody tr.error td {
 455                 background-color: @red;
 456                 color: @white;
 457         }
 458
 459         tbody tr.info td {
 460                 background-color: @blue;
 461                 color: @white;
 462         }
 463 }
 464
 465 // DROPDOWNS
 466 // -----------------------------------------------------
 467
 468 .dropdown-menu {
 469         .box-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
 470 }
 471
 472 // ALERTS, LABELS, BADGES
 473 // -----------------------------------------------------
 474
 475 .alert,
 476 .alert .alert-heading,
 477 .alert-success,
 478 .alert-success .alert-heading,
 479 .alert-danger,
 480 .alert-error,
 481 .alert-danger .alert-heading,
 482 .alert-error .alert-heading,
 483 .alert-info,
 484 .alert-info .alert-heading {
 485   color: @grayLighter;
 486   text-shadow: none;
 487   border: none;
 488 }
 489
 490 .label {
 491         color: @grayLighter;
 492 }
 493
 494 .label, .alert { background-color: darken(@gray, 20%); }
 495
 496 .label:hover { background-color: darken(@gray, 30%); }
 497
 498 .label-important,
 499 .alert-danger,
 500 .alert-error { background-color: @red; }
 501
 502 .label-important:hover { background-color: darken(@red, 10%); }
 503
 504 .label-warning   { background-color: darken(@orange, 10%); }
 505
 506 .label-warning:hover { background-color: darken(@orange, 20%); }
 507
 508 .label-success, .alert-success { background-color: darken(@green, 3%); }
 509
 510 .label-success:hover { background-color: darken(@green, 13%); }
 511
 512 .label-info, .alert-info { background-color: darken(@blueDark, 10%); }
 513
 514 .label-info:hover { background-color: darken(@blueDark, 20%); }
 515
 516 // MISC
 517 // -----------------------------------------------------
 518
 519 .well, .hero-unit {
 520         .border-radius(1px);
 521 }
 522
 523 .well, .hero-unit {
 524         border-top: solid 1px lighten(@grayDark, 5%);
 525         .box-shadow(0 2px 4px rgba(0,0,0,.8));
 526 }
 527
 528 .thumbnail {
 529         border-color: @grayDark;
 530 }
 531
 532 .progress {
 533         background-color: #060606;
 534         background-image: none;
 535         .border-radius(0);
 536 }
 537
 538 .modal {
 539         .border-radius(1px);
 540         border-top: solid 1px lighten(@grayDark, 5%);
 541         background-color: @grayDark;
 542 }
 543
 544 .modal-header {
 545         border-bottom: 1px solid @grayDark;
 546 }
 547
 548 .modal-footer {
 549         background-color: @grayDark;
 550         border-top: 1px solid @grayDark;
 551         .border-radius(0 0 6px 6px);
 552         .box-shadow(none);
 553 }
 554
 555 .footer {
 556         border-top: 1px solid @grayDark;
 557 }
 558
 559 // MEDIA QUERIES
 560 // -----------------------------------------------------
 561
 562 @media (max-width: 768px) {
 563         div.subnav .nav > li + li > a,
 564         div.subnav .nav > li:first-child > a {
 565                 border-top: 1px solid @grayDark;
 566                 border-left: 1px solid @grayDark;
 567         }
 568
 569         .subnav .nav > li + li > a:hover,
 570         .subnav .nav > li:first-child > a:hover {
 571                         border-bottom: 0;
 572                         background-color: @blue;
 573         }
 574 }