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