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

   1 // Bootswatch.less
   2 // Swatch: Slate
   3 // Version: 2.1.0
   4 // -----------------------------------------------------
   5
   6 // SCAFFOLDING
   7 // -----------------------------------------------------
   8
   9 h1, h2, h3, h4, h5, h6, legend, label {
  10         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  11 }
  12
  13 // NAVBAR
  14 // -----------------------------------------------------
  15
  16 .navbar {
  17
  18         .navbar-inner {
  19                 #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  20         }
  21
  22         .brand {
  23                 font-weight: bold;
  24                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  25                 border-right: 1px solid darken(@gray, 15%);
  26         }
  27
  28         .navbar-text {
  29                 padding: 0 15px;
  30                 font-weight: bold;
  31         }
  32
  33         .nav > li > a  {
  34                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  35                 border-right: 1px solid rgba(0, 0, 0, 0.2);
  36                 border-left: 1px solid rgba(255, 255, 255, 0.1);
  37
  38                 &:hover {
  39                         #gradient > .directional(@grayDarker, @grayDark, 280deg);
  40                         border-left: 1px solid transparent;
  41                         border-right: 1px solid transparent;
  42                 }
  43         }
  44
  45         .nav > li.active > a,
  46         .nav > li.active > a:hover {
  47                 color: @grayLighter;
  48                 background-color: @grayDark;
  49                 #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
  50                 border-right: 1px solid darken(@gray, 15%);
  51         }
  52
  53         .navbar-search .search-query {
  54                 border: 1px solid darken(@gray, 15%);
  55         }
  56
  57         .divider-vertical {
  58                 background-color: transparent;
  59                 border-right: none;
  60         }
  61
  62         .dropdown-menu::after {
  63                 border-bottom: 6px solid @grayDark;
  64         }
  65
  66         .nav-collapse.collapse {
  67
  68                 .nav li > a,
  69                 .nav li.active > a,
  70                 .nav li > a:hover,
  71                 .nav li.active > a:hover {
  72                         .box-shadow(none);
  73                         color: @grayLighter;
  74                         border: 1px solid transparent;
  75                         background-color: transparent;
  76                         background-image: none;
  77                 }
  78
  79                 .nav li > a:hover,
  80                 .nav li.active > a:hover {
  81                         background-color: @grayDarker;
  82                 }
  83
  84                 .navbar-form,
  85                 .navbar-search {
  86                         border-color: transparent;
  87                         .box-shadow(none);
  88                 }
  89
  90                 .nav-header {
  91                         color: @grayLight;
  92                 }
  93         }
  94
  95         &-inverse {
  96
  97                 .navbar-inner {
  98                         #gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%));
  99                 }
 100
 101                 .nav li > a {
 102                         background-image: none;
 103                         background-color: transparent;
 104                 }
 105
 106                 .nav li > a:hover,
 107                 .nav li.active > a,
 108                 .nav li.active > a:hover {
 109                         #gradient > .directional(darken(@grayDarker, 3%), @grayDarker, 280deg);
 110                 }
 111         }
 112 }
 113
 114 @media (max-width: 979px) {
 115         .navbar .brand {
 116                 border-right: none;
 117         }
 118 }
 119
 120 div.subnav {
 121         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 122         border: 1px solid transparent;
 123         .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 124
 125         .nav > li > a {
 126                 color: @grayLighter;
 127                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 128                 border-right: 1px solid darken(@gray, 15%);
 129                 border-left: 1px solid @gray;
 130
 131                 &:hover {
 132                         color: @grayLighter;
 133                         background-color: @grayDark;
 134                         #gradient > .directional(@grayDarker, @grayDark, 280deg);
 135                         border-left: 1px solid transparent;
 136                         border-right: 1px solid transparent;
 137                 }
 138         }
 139
 140         .nav > li.active > a,
 141         .nav > li.active > a:hover {
 142                 color: @grayLighter;
 143                 background-color: @grayDark;
 144                 #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
 145                 border-right: 1px solid darken(@gray, 15%);
 146         }
 147
 148         .nav > li:first-child > a,
 149         .nav > li:first-child > a:hover {
 150                 border-left: 1px solid transparent;
 151         }
 152
 153         &.subnav-fixed .nav > li.active:first-child > a,
 154         &.subnav-fixed .nav > li:first-child > a:hover {
 155                 border-left: 1px solid darken(@gray, 15%);
 156         }
 157
 158         .nav > li.active:last-child > a,
 159         .nav > li:last-child > a:hover {
 160                 border-right: 1px solid darken(@gray, 15%);
 161         }
 162
 163         .open .dropdown-toggle {
 164                 border-right: 1px solid darken(@gray, 15%);
 165                 border-left: 1px solid @gray;
 166         }
 167
 168         &.subnav-fixed {
 169                 .box-shadow(none);
 170         }
 171 }
 172
 173 @media (max-width: 768px) {
 174         div.subnav .nav > li + li > a {
 175                 border-top: 1px solid transparent;
 176         }
 177 }
 178
 179 // BUTTONS
 180 // -----------------------------------------------------
 181
 182 .btn {
 183     .buttonBackground(@gray, darken(@gray, 10%));
 184         .border-radius(3px);
 185         border: 1px solid @grayDarker;
 186 }
 187
 188 .btn, .btn:hover {
 189         color: @white;
 190         font-weight: bold;
 191         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 192 }
 193
 194 .btn-primary {
 195   .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
 196 }
 197
 198 .btn-warning {
 199   .buttonBackground(lighten(@orange, 15%), @orange);
 200 }
 201
 202 .btn-danger {
 203   .buttonBackground(#ee5f5b, #bd362f);
 204 }
 205
 206 .btn-success {
 207   .buttonBackground(#62c462, #51a351);
 208 }
 209
 210 .btn-info {
 211   .buttonBackground(#5bc0de, #2f96b4);
 212 }
 213
 214 .btn-inverse {
 215   .buttonBackground(#454545, #262626);
 216 }
 217
 218 .caret {
 219         border-top-color: @white;
 220 }
 221
 222 // TABLES
 223 // -----------------------------------------------------
 224
 225
 226
 227 // NAVIGATION
 228 // -----------------------------------------------------
 229
 230 .breadcrumb {
 231         .box-shadow(none);
 232 }
 233
 234 .breadcrumb, .pagination > ul a, .pager a {
 235         border: 1px solid transparent;
 236         .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 237         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 238 }
 239
 240 .breadcrumb li, .breadcrumb a, .pagination > ul a {
 241         color: @grayLighter;
 242         font-weight: bold;
 243         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 244 }
 245
 246 .breadcrumb a {
 247         color: @white;
 248 }
 249
 250 .pagination {
 251
 252         & > ul {
 253                 .box-shadow(none);
 254         }
 255
 256         & li > a,
 257         & li.disabled > a {
 258                 border-left: 1px solid @gray;
 259                 border-right: 1px solid darken(@gray, 15%);
 260                 border-top: none;
 261                 border-bottom: none;
 262         }
 263
 264         li.disabled > a {
 265                 #gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray);
 266         }
 267
 268         & > ul > li:not(.disabled) a:hover,
 269           {
 270                 #gradient > .directional(@grayDarker, @grayDark, 280deg);
 271                 border-left: 1px solid transparent;
 272         }
 273
 274         & > ul > li.active > a,
 275         & > ul > li.active > a:hover {
 276                 color: @grayLighter;
 277                 background-color: @grayDark;
 278                 #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
 279                 border-left: 1px solid transparent;
 280         }
 281 }
 282
 283 .pager {
 284
 285         a:hover {
 286                 #gradient > .directional(@grayDarker, @grayDark, 280deg);
 287                 border: 1px solid transparent;
 288         }
 289
 290         .disabled a,
 291         .disabled a:hover {
 292                 background-color: transparent;
 293         }
 294 }
 295
 296 .nav .nav-header {
 297         text-shadow: none;
 298 }
 299
 300 .nav > li > a {
 301         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 302         .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
 303         border: none;
 304         color: @grayLight;
 305         font-weight: bold;
 306         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 307 }
 308
 309 .nav > li.active > a,
 310 .nav > li.active > a:hover {
 311         background-color: transparent;
 312         border: none;
 313         color: @white;
 314 }
 315
 316 .nav > li > a:hover {
 317         background-color: transparent;
 318         color: @grayLighter;
 319 }
 320
 321 .nav-list {
 322         background-color: @grayDark;
 323         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
 324
 325         li > a {
 326                 background-image: none;
 327                 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 328         }
 329
 330         .nav-header {
 331                 color: @gray;
 332                 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 333         }
 334
 335         .divider {
 336                 border-bottom: 1px solid darken(@grayDarker, 5%);
 337                 background-color: transparent;
 338         }
 339 }
 340
 341 .nav-tabs {
 342         border-bottom: none;
 343 }
 344
 345 .tabs-below .nav-tabs {
 346         border-top: none;
 347 }
 348
 349 .tabs-left .nav-tabs {
 350         border-right: none;
 351 }
 352
 353 .tabs-right .nav-tabs {
 354         border-left: none;
 355 }
 356
 357 .nav-tabs.nav-stacked > li > a,
 358 .nav-tabs.nav-stacked > li > a:hover {
 359         border: none;
 360 }
 361
 362 .dropdown-menu {
 363         .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
 364
 365         li.active a,
 366         li.active a:hover {
 367                 background-color: @grayDark;
 368         }
 369 }
 370
 371 .dropdown.open .dropdown-toggle {
 372         background-color: @grayDark;
 373         color: @grayLighter;
 374 }
 375
 376 // FORMS
 377 // -----------------------------------------------------
 378
 379 label, input, button, select, textarea, legend {
 380         color: @textColor;
 381 }
 382
 383 .form-actions {
 384         border-top: none;
 385 }
 386
 387 .input-prepend .add-on,
 388 .input-append .add-on {
 389         vertical-align: top;
 390         background-color: @gray;
 391         border-top: 1px solid @grayLight;
 392         border-left: 1px solid @grayLight;
 393         border-bottom: 1px solid @grayDark;
 394         border-right: 1px solid @grayDark;
 395         text-shadow: none;
 396 }
 397
 398 .input-append .btn,
 399 .input-prepend .btn {
 400         margin-top: -1px;
 401         padding: 5px 14px;
 402 }
 403
 404 .uneditable-input,
 405 input[disabled],
 406 select[disabled],
 407 textarea[disabled],
 408 input[readonly],
 409 select[readonly],
 410 textarea[readonly] {
 411         color: @grayLighter;
 412 }
 413
 414 // LABELS AND ALERTS
 415 // -----------------------------------------------------
 416
 417 .label, .alert {
 418         color: rgba(255, 255, 255, 0.9);
 419         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 420         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
 421 }
 422
 423 .alert-heading {
 424         color: rgba(255, 255, 255, 0.9);
 425         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
 426 }
 427
 428 .alert {
 429   background-color: @orange;
 430   border-color: @orange;
 431 }
 432
 433 .alert-success {
 434   background-color: @successText;
 435   border-color: @successText;
 436 }
 437
 438 .alert-error {
 439   background-color: @errorText;
 440   border-color: @errorText;
 441 }
 442
 443 .alert-info {
 444   background-color: @infoText;
 445   border-color: @infoText;
 446 }
 447
 448 // MODALS
 449 // -----------------------------------------------------
 450
 451 .modal {
 452         background-color: darken(@grayDark, 5%);
 453 }
 454
 455 .modal-header {
 456         border-bottom: none;
 457 }
 458
 459 .modal-body {
 460         border-bottom: 1px solid #1C1E22;
 461 }
 462
 463 .modal-footer {
 464         border-top: none;
 465         background-color: @grayDarker;
 466         .box-shadow(none);
 467 }
 468
 469 // MISCELLANEOUS
 470 // -----------------------------------------------------
 471
 472 code, pre {
 473         background-color: #F7F7F7;
 474         border: 1px solid darken(@grayDarker, 5%);
 475         text-shadow: none;
 476 }
 477
 478 hr, legend, .page-header, .dropdown-menu .divider {
 479         border-top: none;
 480         border-bottom: 1px solid darken(@grayDarker, 5%);
 481         background-color: transparent;
 482 }
 483
 484 footer.footer {
 485         border-top: 1px solid darken(@grayDarker, 5%);
 486
 487         p {
 488                 color: @textColor;
 489         }
 490 }
 491
 492 .well, .progress, .hero-unit {
 493         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
 494 }
 495
 496 .progress {
 497         background-color: darken(@grayDarker, 3%);
 498         #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
 499 }
 500
 501 .thumbnail, a.thumbnail:hover {
 502   border: 1px solid darken(@grayDarker, 5%);
 503 }