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