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