resources/scss/bootstrap/_theme.scss

   1 /*!
   2  * Bootstrap v3.3.5 (http://getbootstrap.com)
   3  * Copyright 2011-2015 Twitter, Inc.
   4  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
   5  */
   6 //
   7 // Load core variables and mixins
   8 // --------------------------------------------------
   9 @import "variables";
  10 @import "mixins";
  11
  12 //
  13 // Buttons
  14 // --------------------------------------------------
  15
  16 // Common styles
  17 .btn-default,
  18 .btn-primary,
  19 .btn-success,
  20 .btn-info,
  21 .btn-warning,
  22 .btn-danger {
  23   text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
  24   $shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
  25   @include box-shadow($shadow);
  26
  27   // Reset the shadow
  28   &:active,
  29   &.active {
  30         @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
  31   }
  32
  33   &.disabled,
  34   &[disabled],
  35   fieldset[disabled] & {
  36         @include box-shadow(none);
  37   }
  38
  39   .badge {
  40         text-shadow: none;
  41   }
  42 }
  43
  44 // Mixin for generating new styles
  45 @mixin btn-styles($btn-color: #555) {
  46   @include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 12%));
  47   @include reset-filter; // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
  48   background-repeat: repeat-x;
  49   border-color: darken($btn-color, 14%);
  50
  51   &:hover,
  52   &:focus {
  53         background-color: darken($btn-color, 12%);
  54         background-position: 0 -15px;
  55   }
  56
  57   &:active,
  58   &.active {
  59         background-color: darken($btn-color, 12%);
  60         border-color: darken($btn-color, 14%);
  61   }
  62
  63   &.disabled,
  64   &[disabled],
  65   fieldset[disabled] & {
  66         &,
  67         &:hover,
  68         &:focus,
  69         &.focus,
  70         &:active,
  71         &.active {
  72           background-color: darken($btn-color, 12%);
  73           background-image: none;
  74         }
  75   }
  76 }
  77
  78 // Common styles
  79 .btn {
  80   // Remove the gradient for the pressed/active state
  81   &:active,
  82   &.active {
  83         background-image: none;
  84   }
  85 }
  86
  87 // Apply the mixin to the buttons
  88 .btn-default {
  89   @include btn-styles($btn-default-bg);
  90   text-shadow: 0 1px 0 #fff;
  91   border-color: #ccc;
  92 }
  93
  94 .btn-primary {
  95   @include btn-styles($btn-primary-bg);
  96 }
  97
  98 .btn-success {
  99   @include btn-styles($btn-success-bg);
 100 }
 101
 102 .btn-info {
 103   @include btn-styles($btn-info-bg);
 104 }
 105
 106 .btn-warning {
 107   @include btn-styles($btn-warning-bg);
 108 }
 109
 110 .btn-danger {
 111   @include btn-styles($btn-danger-bg);
 112 }
 113
 114 //
 115 // Images
 116 // --------------------------------------------------
 117
 118 .thumbnail,
 119 .img-thumbnail {
 120   @include box-shadow(0 1px 2px rgba(0, 0, 0, .075));
 121 }
 122
 123 //
 124 // Dropdowns
 125 // --------------------------------------------------
 126
 127 .dropdown-menu > li > a:hover,
 128 .dropdown-menu > li > a:focus {
 129   @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%));
 130   background-color: darken($dropdown-link-hover-bg, 5%);
 131 }
 132
 133 .dropdown-menu > .active > a,
 134 .dropdown-menu > .active > a:hover,
 135 .dropdown-menu > .active > a:focus {
 136   @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
 137   background-color: darken($dropdown-link-active-bg, 5%);
 138 }
 139
 140 //
 141 // Navbar
 142 // --------------------------------------------------
 143
 144 // Default navbar
 145 .navbar-default {
 146   @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg);
 147   @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
 148   border-radius: $navbar-border-radius;
 149   $shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
 150   @include box-shadow($shadow);
 151
 152   .navbar-nav > .open > a,
 153   .navbar-nav > .active > a {
 154         @include gradient-vertical($start-color: darken($navbar-default-link-active-bg, 5%), $end-color: darken($navbar-default-link-active-bg, 2%));
 155         @include box-shadow(inset 0 3px 9px rgba(0, 0, 0, .075));
 156   }
 157 }
 158
 159 .navbar-brand,
 160 .navbar-nav > li > a {
 161   text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
 162 }
 163
 164 // Inverted navbar
 165 .navbar-inverse {
 166   @include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg);
 167   @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
 168   border-radius: $navbar-border-radius;
 169   .navbar-nav > .open > a,
 170   .navbar-nav > .active > a {
 171         @include gradient-vertical($start-color: $navbar-inverse-link-active-bg, $end-color: lighten($navbar-inverse-link-active-bg, 2.5%));
 172         @include box-shadow(inset 0 3px 9px rgba(0, 0, 0, .25));
 173   }
 174
 175   .navbar-brand,
 176   .navbar-nav > li > a {
 177         text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
 178   }
 179 }
 180
 181 // Undo rounded corners in static and fixed navbars
 182 .navbar-static-top,
 183 .navbar-fixed-top,
 184 .navbar-fixed-bottom {
 185   border-radius: 0;
 186 }
 187
 188 // Fix active state of dropdown items in collapsed mode
 189 @media (max-width: $grid-float-breakpoint-max) {
 190   .navbar .navbar-nav .open .dropdown-menu > .active > a {
 191         &,
 192         &:hover,
 193         &:focus {
 194           color: #fff;
 195           @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
 196         }
 197   }
 198 }
 199
 200 //
 201 // Alerts
 202 // --------------------------------------------------
 203
 204 // Common styles
 205 .alert {
 206   text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
 207   $shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
 208   @include box-shadow($shadow);
 209 }
 210
 211 // Mixin for generating new styles
 212 @mixin alert-styles($color) {
 213   @include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%));
 214   border-color: darken($color, 15%);
 215 }
 216
 217 // Apply the mixin to the alerts
 218 .alert-success {
 219   @include alert-styles($alert-success-bg);
 220 }
 221
 222 .alert-info {
 223   @include alert-styles($alert-info-bg);
 224 }
 225
 226 .alert-warning {
 227   @include alert-styles($alert-warning-bg);
 228 }
 229
 230 .alert-danger {
 231   @include alert-styles($alert-danger-bg);
 232 }
 233
 234 //
 235 // Progress bars
 236 // --------------------------------------------------
 237
 238 // Give the progress background some depth
 239 .progress {
 240   @include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg)
 241 }
 242
 243 // Mixin for generating new styles
 244 @mixin progress-bar-styles($color) {
 245   @include gradient-vertical($start-color: $color, $end-color: darken($color, 10%));
 246 }
 247
 248 // Apply the mixin to the progress bars
 249 .progress-bar {
 250   @include progress-bar-styles($progress-bar-bg);
 251 }
 252
 253 .progress-bar-success {
 254   @include progress-bar-styles($progress-bar-success-bg);
 255 }
 256
 257 .progress-bar-info {
 258   @include progress-bar-styles($progress-bar-info-bg);
 259 }
 260
 261 .progress-bar-warning {
 262   @include progress-bar-styles($progress-bar-warning-bg);
 263 }
 264
 265 .progress-bar-danger {
 266   @include progress-bar-styles($progress-bar-danger-bg);
 267 }
 268
 269 // Reset the striped class because our mixins don't do multiple gradients and
 270 // the above custom styles override the new `.progress-bar-striped` in v3.2.0.
 271 .progress-bar-striped {
 272   @include gradient-striped;
 273 }
 274
 275 //
 276 // List groups
 277 // --------------------------------------------------
 278
 279 .list-group {
 280   border-radius: $border-radius-base;
 281   @include box-shadow(0 1px 2px rgba(0, 0, 0, .075));
 282 }
 283
 284 .list-group-item.active,
 285 .list-group-item.active:hover,
 286 .list-group-item.active:focus {
 287   text-shadow: 0 -1px 0 darken($list-group-active-bg, 10%);
 288   @include gradient-vertical($start-color: $list-group-active-bg, $end-color: darken($list-group-active-bg, 7.5%));
 289   border-color: darken($list-group-active-border, 7.5%);
 290
 291   .badge {
 292         text-shadow: none;
 293   }
 294 }
 295
 296 //
 297 // Panels
 298 // --------------------------------------------------
 299
 300 // Common styles
 301 .panel {
 302   @include box-shadow(0 1px 2px rgba(0, 0, 0, .05));
 303 }
 304
 305 // Mixin for generating new styles
 306 @mixin panel-heading-styles($color) {
 307   @include gradient-vertical($start-color: $color, $end-color: darken($color, 5%));
 308 }
 309
 310 // Apply the mixin to the panel headings only
 311 .panel-default > .panel-heading {
 312   @include panel-heading-styles($panel-default-heading-bg);
 313 }
 314
 315 .panel-primary > .panel-heading {
 316   @include panel-heading-styles($panel-primary-heading-bg);
 317 }
 318
 319 .panel-success > .panel-heading {
 320   @include panel-heading-styles($panel-success-heading-bg);
 321 }
 322
 323 .panel-info > .panel-heading {
 324   @include panel-heading-styles($panel-info-heading-bg);
 325 }
 326
 327 .panel-warning > .panel-heading {
 328   @include panel-heading-styles($panel-warning-heading-bg);
 329 }
 330
 331 .panel-danger > .panel-heading {
 332   @include panel-heading-styles($panel-danger-heading-bg);
 333 }
 334
 335 //
 336 // Wells
 337 // --------------------------------------------------
 338
 339 .well {
 340   @include gradient-vertical($start-color: darken($well-bg, 5%), $end-color: $well-bg);
 341   border-color: darken($well-bg, 10%);
 342   $shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
 343   @include box-shadow($shadow);
 344 }