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