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