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

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