|
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 // |
|
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 } |