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

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