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

   1 // Bootswatch.less
   2 // Swatch: Slate
   3 // -----------------------------------------------------
   4
   5 // SCAFFOLDING
   6 // -----------------------------------------------------
   7
   8 body {
   9         background-color: @grayDarker;
  10 }
  11
  12 h1, h2, h3, h4, h5, h6, body, legend, label {
  13         color: @grayLight;
  14         text-shadow: -1px -1px 0 #111;
  15 }
  16
  17 // NAVBAR
  18 // -----------------------------------------------------
  19
  20 .navbar .brand {
  21         font-weight: bold;
  22 }
  23
  24 .navbar .navbar-inner,
  25 div.subnav {
  26         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
  27 }
  28
  29 .navbar .divider-vertical {
  30         background-color: transparent;
  31         border-right: none;
  32 }
  33
  34 .navbar .brand,
  35 .navbar .nav > li > a,
  36 div.subnav .nav > li > a {
  37         color: @grayLighter;
  38         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  39         border-right: 1px solid darken(@gray, 15%);
  40 }
  41
  42 .navbar .nav > li > a,
  43 div.subnav .nav > li > a {
  44         border-left: 1px solid @gray;
  45
  46         &:hover {
  47                 color: @grayLighter;
  48                 background-color: @grayDark;
  49                 #gradient > .directional(@grayDarker, @grayDark, 280deg);
  50                 border-left: 1px solid transparent;
  51                 border-right: 1px solid transparent;
  52         }
  53 }
  54
  55 .navbar .nav > li.active > a,
  56 div.subnav .nav > li.active > a,
  57 .navbar .nav > li.active > a:hover,
  58 div.subnav .nav > li.active > a:hover {
  59         color: @grayLighter;
  60         background-color: @grayDark;
  61         #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg);
  62         border-right: 1px solid darken(@gray, 15%);
  63 }
  64
  65 div.subnav .nav > li:first-child > a,
  66 div.subnav .nav > li:first-child > a:hover {
  67         border-left: 1px solid transparent;
  68 }
  69
  70 div.subnav.subnav-fixed .nav > li.active:first-child > a,
  71 div.subnav.subnav-fixed .nav > li:first-child > a:hover {
  72         border-left: 1px solid darken(@gray, 15%);
  73 }
  74
  75 div.subnav .nav > li.active:last-child > a,
  76 div.subnav .nav > li:last-child > a:hover {
  77         border-right: 1px solid darken(@gray, 15%);
  78 }
  79
  80 div.subnav {
  81         border: 1px solid transparent;
  82         .box-shadow(0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1));
  83 }
  84
  85 .navbar-search .search-query {
  86         border: 1px solid darken(@gray, 15%);
  87 }
  88
  89 .navbar .nav-collapse.collapse > .nav > li > a,
  90 .navbar .nav-collapse.collapse > .nav > li.active > a,
  91 .navbar .nav-collapse.collapse > .nav > li > a:hover,
  92 .navbar .nav-collapse.collapse > .nav > li.active > a:hover {
  93         color: @grayLighter;
  94         border: 1px solid transparent;
  95         .box-shadow(none);
  96         background-color: transparent;
  97         background-image: none;
  98 }
  99
 100 .navbar .nav-collapse.collapse > .nav > li > a:hover,
 101 .navbar .nav-collapse.collapse > .nav > li.active > a:hover {
 102         background-color: @grayDarker;
 103 }
 104
 105 @media (max-width: 979px) {
 106         .navbar .brand {
 107                 border-right: none;
 108         }
 109 }
 110
 111 // BUTTONS
 112 // -----------------------------------------------------
 113
 114 .btn {
 115     .buttonBackground(@gray, darken(@gray, 10%));
 116         .border-radius(3px);
 117         border: 1px solid @grayDarker;
 118 }
 119
 120 .btn, .btn:hover {
 121         color: @white;
 122         font-weight: bold;
 123         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 124 }
 125
 126 // Set the backgrounds
 127 // -------------------------
 128 .btn-primary {
 129   .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
 130 }
 131 // Warning appears are orange
 132 .btn-warning {
 133   .buttonBackground(lighten(@orange, 15%), @orange);
 134 }
 135 // Danger and error appear as red
 136 .btn-danger {
 137   .buttonBackground(#ee5f5b, #bd362f);
 138 }
 139 // Success appears as green
 140 .btn-success {
 141   .buttonBackground(#62c462, #51a351);
 142 }
 143 // Info appears as a neutral blue
 144 .btn-info {
 145   .buttonBackground(#5bc0de, #2f96b4);
 146 }
 147 // Inverse appears as dark gray
 148 .btn-inverse {
 149   .buttonBackground(#454545, #262626);
 150 }
 151
 152 .caret {
 153         border-top-color: @white;
 154 }
 155
 156 // TABLES
 157 // -----------------------------------------------------
 158
 159 .table th, .table td, .table tbody + tbody {
 160         border-top: 1px solid darken(@grayDarker, 5%);
 161 }
 162
 163 .table-bordered {
 164   border: 1px solid darken(@grayDarker, 5%);
 165   th + th,
 166   td + td,
 167   th + td,
 168   td + th {
 169     border-left: 1px solid darken(@grayDarker, 5%);
 170   }
 171   // Prevent a double border
 172   thead:first-child tr:first-child th,
 173   tbody:first-child tr:first-child th,
 174   tbody:first-child tr:first-child td {
 175     border-top: 0;
 176   }
 177 }
 178
 179 .table-striped {
 180   tbody {
 181     tr:nth-child(odd) td,
 182     tr:nth-child(odd) th {
 183       background-color: darken(@grayDark, 5%);
 184     }
 185   }
 186 }
 187
 188 .table {
 189   tbody tr:hover td,
 190   tbody tr:hover th {
 191     background-color: @grayDark;
 192   }
 193 }
 194
 195 // NAVIGATION
 196 // -----------------------------------------------------
 197
 198 .pagination > ul {
 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 > li > a,
 250 .nav > li > a:hover,
 251 .nav > li.active > a,
 252 .nav > li.active > a:hover,
 253 .nav-tabs.nav-stacked > li > a,
 254 .nav-tabs.nav-stacked > li > a:hover {
 255         border: none;
 256         background-color: transparent;
 257         color: @grayLighter;
 258         font-weight: bold;
 259         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 260 }
 261
 262 .dropdown-menu {
 263         .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
 264 }
 265
 266 .dropdown-menu,
 267 .dropdown-menu li.active a,
 268 .dropdown-menu li.active a:hover {
 269         background-color: @grayDark;
 270 }
 271
 272 .dropdown-menu a,
 273 .dropdown-menu li.active a,
 274 .dropdown-menu li a:hover,
 275 .dropdown-menu li.active a:hover,
 276 .dropdown.open .dropdown-toggle {
 277         color: @grayLighter;
 278 }
 279
 280 .dropdown-menu li a:hover,
 281 .dropdown-menu li.active a:hover {
 282         background-color: @grayDarker;
 283 }
 284
 285 .navbar .dropdown-menu::after {
 286         border-bottom: 6px solid @grayDark;
 287 }
 288
 289 .nav > li > a {
 290         border: none;
 291         .box-shadow(0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1));
 292         #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark);
 293
 294 }
 295
 296 .nav.nav-list .nav-header {
 297         color: @grayLight;
 298         text-shadow: -1px -1px 0 #111;
 299 }
 300
 301 .tabs-below .nav-tabs {
 302         border-top: none;
 303 }
 304
 305 .tabs-left .nav-tabs {
 306         border-right: none;
 307 }
 308
 309 .tabs-right .nav-tabs {
 310         border-left: none;
 311 }
 312
 313 // FORMS
 314 // -----------------------------------------------------
 315
 316 .form-actions {
 317         background-color: darken(@grayDarker, 3%);
 318         border-top: none;
 319 }
 320
 321 .input-prepend .add-on, .input-append .add-on {
 322         background-color: @gray;
 323         border-top: 1px solid @grayLight;
 324         border-left: 1px solid @grayLight;
 325         border-bottom: 1px solid @grayDark;
 326         border-right: 1px solid @grayDark;
 327         text-shadow: none;
 328 }
 329
 330 .uneditable-input, input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
 331         text-shadow: none;
 332         color: @grayLighter;
 333 }
 334
 335 // LABELS AND ALERTS
 336 // -----------------------------------------------------
 337
 338 .label, .alert {
 339         color: rgba(256, 256, 256, 0.9);
 340         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
 341         .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
 342 }
 343
 344 .alert-heading {
 345         color: rgba(256, 256, 256, 0.9);
 346         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
 347 }
 348
 349 .alert {
 350   background-color: @warningText;
 351   border-color: @warningText;
 352 }
 353
 354 .alert-success {
 355   background-color: @successText;
 356   border-color: @successText;
 357 }
 358
 359 .alert-danger,
 360 .alert-error {
 361   background-color: @errorText;
 362   border-color: @errorText;
 363 }
 364
 365 .alert-info {
 366   background-color: @infoText;
 367   border-color: @infoText;
 368 }
 369
 370 // MISCELLANEOUS
 371 // -----------------------------------------------------
 372
 373 code, pre {
 374         background-color: #F7F7F7;
 375         border: 1px solid darken(@grayDarker, 5%);
 376         text-shadow: none;
 377 }
 378
 379 hr, legend, .page-header, .dropdown-menu .divider {
 380         border-top: none;
 381         border-bottom: 1px solid darken(@grayDarker, 5%);
 382         background-color: transparent;
 383 }
 384
 385 footer.footer {
 386         border-top: 1px solid darken(@grayDarker, 5%);
 387 }
 388
 389 .well, .progress {
 390         background-color: darken(@grayDarker, 3%);
 391         .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
 392 }
 393
 394 .progress {
 395         #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%));
 396 }
 397
 398 .thumbnail, a.thumbnail:hover {
 399   border: 1px solid darken(@grayDarker, 5%);
 400 }