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

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