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

   1 // Slate 3.0.0
   2 // Bootswatch
   3 // -----------------------------------------------------
   4
   5 .btn-shadow(@color) {
   6         #gradient > .vertical-three-colors(lighten(@color, 6%), @color, 60%, darken(@color, 4%));
   7 }
   8
   9 .btn-shadow-inverse(@color) {
  10         #gradient > .vertical-three-colors(darken(@color, 24%), darken(@color, 18%), 40%, darken(@color, 14%));
  11 }
  12
  13 // Navbar =====================================================================
  14
  15 .navbar {
  16
  17         .btn-shadow(@navbar-default-bg);
  18         filter: none;
  19         border: 1px solid rgba(0, 0, 0, 0.6);
  20         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  21
  22         &-inverse {
  23                 .btn-shadow(@navbar-inverse-bg);
  24         }
  25
  26         &-nav > li > a {
  27                 border-right: 1px solid rgba(0, 0, 0, 0.2);
  28                 border-left: 1px solid rgba(255, 255, 255, 0.1);
  29
  30                 &:hover {
  31                         .btn-shadow-inverse(@navbar-default-bg);
  32                         border-left-color: transparent;
  33                 }
  34         }
  35
  36         .nav .open > a {
  37                 border-color: transparent;
  38         }
  39
  40         &-nav > li.active > a {
  41                 border-left-color: transparent;
  42         }
  43
  44         &-form {
  45                 margin-left: 5px;
  46                 margin-right: 5px;
  47         }
  48 }
  49
  50 // Buttons ====================================================================
  51
  52 .btn,
  53 .btn:hover {
  54         border-color: rgba(0, 0, 0, 0.6);
  55         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  56 }
  57
  58 .btn-default {
  59         .btn-shadow(@btn-default-bg);
  60 }
  61
  62 .btn-primary {
  63         .btn-shadow(@btn-primary-bg);
  64 }
  65
  66 .btn-success {
  67         .btn-shadow(@btn-success-bg);
  68 }
  69
  70 .btn-info {
  71         .btn-shadow(@btn-info-bg);
  72 }
  73
  74 .btn-warning {
  75         .btn-shadow(@btn-warning-bg);
  76 }
  77
  78 .btn-danger {
  79         .btn-shadow(@btn-danger-bg);
  80 }
  81
  82 .btn-default:hover {
  83         .btn-shadow-inverse(@btn-default-bg);
  84 }
  85
  86 .btn-primary:hover {
  87         .btn-shadow-inverse(@btn-primary-bg);
  88 }
  89
  90 .btn-success:hover {
  91         .btn-shadow-inverse(@btn-success-bg);
  92 }
  93
  94 .btn-info:hover {
  95         .btn-shadow-inverse(@btn-info-bg);
  96 }
  97
  98 .btn-warning:hover {
  99         .btn-shadow-inverse(@btn-warning-bg);
 100 }
 101
 102 .btn-danger:hover {
 103         .btn-shadow-inverse(@btn-danger-bg);
 104 }
 105
 106 // Typography =================================================================
 107
 108 h1, h2, h3, h4, h5, h6 {
 109         text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 110 }
 111
 112 .text-primary {
 113         color: @brand-primary;
 114 }
 115
 116 .text-success {
 117         color: @brand-success;
 118 }
 119
 120 .text-danger {
 121         color: @brand-danger;
 122 }
 123
 124 .text-warning {
 125         color: @brand-warning;
 126 }
 127
 128 .text-info {
 129         color: @brand-info;
 130 }
 131
 132 // Tables =====================================================================
 133
 134 .table {
 135
 136         tr.success,
 137         tr.warning,
 138         tr.danger {
 139                 color: #fff;
 140         }
 141
 142         &-bordered tbody {
 143
 144                 tr.success,
 145                 tr.warning,
 146                 tr.danger {
 147
 148                         td,
 149                         &:hover td {
 150                                 border-color: @table-border-color;
 151                         }
 152                 }
 153         }
 154 }
 155
 156 // Forms ======================================================================
 157
 158 .has-warning {
 159         .help-block,
 160         .control-label {
 161                 color: @brand-warning;
 162         }
 163
 164         .form-control,
 165         .form-control:focus {
 166                 border-color: @brand-warning;
 167         }
 168 }
 169
 170 .has-error {
 171         .help-block,
 172         .control-label {
 173                 color: @brand-danger;
 174         }
 175
 176         .form-control,
 177         .form-control:focus {
 178                 border-color: @brand-danger;
 179         }
 180 }
 181
 182 .has-success {
 183         .help-block,
 184         .control-label {
 185                 color: @brand-success;
 186         }
 187
 188         .form-control,
 189         .form-control:focus {
 190                 border-color: @brand-success;
 191         }
 192 }
 193
 194 legend {
 195         color: #fff;
 196 }
 197
 198 .input-group-addon {
 199         border-color: rgba(0, 0, 0, 0.6);
 200         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 201         .btn-shadow(@btn-default-bg);
 202 }
 203
 204 // Navs =======================================================================
 205
 206 .nav {
 207
 208         .open > a,
 209         .open > a:hover,
 210         .open > a:focus {
 211                 border-color: rgba(0, 0, 0, 0.6);
 212         }
 213
 214 }
 215
 216 .nav-pills {
 217
 218         & > li > a {
 219                 .btn-shadow(@btn-default-bg);
 220                 border: 1px solid rgba(0, 0, 0, 0.6);
 221                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 222
 223                 &:hover {
 224                         .btn-shadow-inverse(@btn-default-bg);
 225                         border: 1px solid rgba(0, 0, 0, 0.6);
 226                 }
 227         }
 228
 229         & > li.active > a,
 230         & > li.active > a:hover {
 231                 background-color: none;
 232                 .btn-shadow-inverse(@btn-default-bg);
 233                 border: 1px solid rgba(0, 0, 0, 0.6);
 234         }
 235
 236         & > li.disabled > a,
 237         & > li.disabled > a:hover {
 238                 .btn-shadow(@btn-default-bg);
 239         }
 240 }
 241
 242 .pagination {
 243
 244         & > li > a {
 245                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 246                 .btn-shadow(@btn-default-bg);
 247
 248                 &:hover {
 249                         .btn-shadow-inverse(@btn-default-bg);
 250                 }
 251         }
 252
 253         & > li.active > a {
 254                 .btn-shadow-inverse(@btn-default-bg);
 255                 border-color: rgba(0, 0, 0, 0.6);
 256         }
 257
 258         & > li.disabled > a,
 259         & > li.disabled > a:hover {
 260                 background-color: transparent;
 261                 .btn-shadow(@btn-default-bg);
 262         }
 263 }
 264
 265 .pager {
 266
 267         & > li > a {
 268                 .btn-shadow(@btn-default-bg);
 269                 border: 1px solid rgba(0, 0, 0, 0.6);
 270                 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 271
 272                 &:hover {
 273                         .btn-shadow-inverse(@btn-default-bg);
 274                         border: 1px solid rgba(0, 0, 0, 0.6);
 275                 }
 276         }
 277
 278         & > li.disabled > a,
 279         & > li.disabled > a:hover {
 280                 background-color: transparent;
 281                 .btn-shadow(@btn-default-bg);
 282         }
 283 }
 284
 285 .breadcrumb {
 286         border: 1px solid rgba(0, 0, 0, 0.6);
 287         text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 288         .btn-shadow(@btn-default-bg);
 289 }
 290
 291 // Indicators =================================================================
 292
 293 .alert {
 294
 295         .alert-link,
 296         a {
 297                 color: #fff;
 298                 text-decoration: underline;
 299         }
 300 }
 301
 302 // Progress bars ==============================================================
 303
 304 // Containers =================================================================
 305
 306 .jumbotron {
 307         border: 1px solid rgba(0, 0, 0, 0.6);
 308 }
 309
 310 .list-group-item {
 311         background-color: lighten(@body-bg, 5%);
 312 }
 313
 314 .panel-primary,
 315 .panel-success,
 316 .panel-danger,
 317 .panel-warning,
 318 .panel-info {
 319
 320         .panel-heading {
 321                 border-color: #000;
 322         }
 323 }