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

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