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

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