1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | $button-line-height: $global-control-height !default;
|
26 | $button-small-line-height: $global-control-small-height !default;
|
27 | $button-large-line-height: $global-control-large-height !default;
|
28 |
|
29 | $button-font-size: $global-font-size !default;
|
30 | $button-small-font-size: $global-small-font-size !default;
|
31 | $button-large-font-size: $global-medium-font-size !default;
|
32 |
|
33 | $button-padding-horizontal: $global-gutter !default;
|
34 | $button-small-padding-horizontal: $global-small-gutter !default;
|
35 | $button-large-padding-horizontal: $global-medium-gutter !default;
|
36 |
|
37 | $button-default-background: $global-muted-background !default;
|
38 | $button-default-color: $global-emphasis-color !default;
|
39 | $button-default-hover-background: darken($button-default-background, 5%) !default;
|
40 | $button-default-hover-color: $global-emphasis-color !default;
|
41 | $button-default-active-background: darken($button-default-background, 10%) !default;
|
42 | $button-default-active-color: $global-emphasis-color !default;
|
43 |
|
44 | $button-primary-background: $global-primary-background !default;
|
45 | $button-primary-color: $global-inverse-color !default;
|
46 | $button-primary-hover-background: darken($button-primary-background, 5%) !default;
|
47 | $button-primary-hover-color: $global-inverse-color !default;
|
48 | $button-primary-active-background: darken($button-primary-background, 10%) !default;
|
49 | $button-primary-active-color: $global-inverse-color !default;
|
50 |
|
51 | $button-secondary-background: $global-secondary-background !default;
|
52 | $button-secondary-color: $global-inverse-color !default;
|
53 | $button-secondary-hover-background: darken($button-secondary-background, 5%) !default;
|
54 | $button-secondary-hover-color: $global-inverse-color !default;
|
55 | $button-secondary-active-background: darken($button-secondary-background, 10%) !default;
|
56 | $button-secondary-active-color: $global-inverse-color !default;
|
57 |
|
58 | $button-danger-background: $global-danger-background !default;
|
59 | $button-danger-color: $global-inverse-color !default;
|
60 | $button-danger-hover-background: darken($button-danger-background, 5%) !default;
|
61 | $button-danger-hover-color: $global-inverse-color !default;
|
62 | $button-danger-active-background: darken($button-danger-background, 10%) !default;
|
63 | $button-danger-active-color: $global-inverse-color !default;
|
64 |
|
65 | $button-disabled-background: $global-muted-background !default;
|
66 | $button-disabled-color: $global-muted-color !default;
|
67 |
|
68 | $button-text-line-height: $global-line-height !default;
|
69 | $button-text-color: $global-muted-color !default;
|
70 | $button-text-hover-color: $global-color !default;
|
71 | $button-text-disabled-color: $global-muted-color !default;
|
72 |
|
73 | $button-link-line-height: $global-line-height !default;
|
74 | $button-link-color: $global-link-color !default;
|
75 | $button-link-hover-color: $global-link-hover-color !default;
|
76 | $button-link-hover-text-decoration: underline !default;
|
77 | $button-link-disabled-color: $global-muted-color !default;
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 | .uk-button {
|
98 |
|
99 | margin: 0;
|
100 |
|
101 | border: none;
|
102 |
|
103 | overflow: visible;
|
104 |
|
105 | font: inherit;
|
106 | color: inherit;
|
107 |
|
108 | text-transform: none;
|
109 |
|
110 | display: inline-block;
|
111 | box-sizing: border-box;
|
112 | padding: 0 $button-padding-horizontal;
|
113 | vertical-align: middle;
|
114 | font-size: $button-font-size;
|
115 |
|
116 | line-height: $button-line-height;
|
117 |
|
118 | text-align: center;
|
119 |
|
120 | text-decoration: none;
|
121 | @if(mixin-exists(hook-button)) {@include hook-button();}
|
122 | }
|
123 |
|
124 | .uk-button:not(:disabled) { cursor: pointer; }
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 | .uk-button::-moz-focus-inner {
|
131 | border: 0;
|
132 | padding: 0;
|
133 | }
|
134 |
|
135 |
|
136 | .uk-button:hover {
|
137 |
|
138 | text-decoration: none;
|
139 | @if(mixin-exists(hook-button-hover)) {@include hook-button-hover();}
|
140 | }
|
141 |
|
142 |
|
143 | .uk-button:focus {
|
144 | outline: none;
|
145 | @if(mixin-exists(hook-button-focus)) {@include hook-button-focus();}
|
146 | }
|
147 |
|
148 |
|
149 | .uk-button:active,
|
150 | .uk-button.uk-active {
|
151 | @if(mixin-exists(hook-button-active)) {@include hook-button-active();}
|
152 | }
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 | .uk-button-default {
|
163 | background-color: $button-default-background;
|
164 | color: $button-default-color;
|
165 | @if(mixin-exists(hook-button-default)) {@include hook-button-default();}
|
166 | }
|
167 |
|
168 |
|
169 | .uk-button-default:hover,
|
170 | .uk-button-default:focus {
|
171 | background-color: $button-default-hover-background;
|
172 | color: $button-default-hover-color;
|
173 | @if(mixin-exists(hook-button-default-hover)) {@include hook-button-default-hover();}
|
174 | }
|
175 |
|
176 |
|
177 | .uk-button-default:active,
|
178 | .uk-button-default.uk-active {
|
179 | background-color: $button-default-active-background;
|
180 | color: $button-default-active-color;
|
181 | @if(mixin-exists(hook-button-default-active)) {@include hook-button-default-active();}
|
182 | }
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 | .uk-button-primary {
|
189 | background-color: $button-primary-background;
|
190 | color: $button-primary-color;
|
191 | @if(mixin-exists(hook-button-primary)) {@include hook-button-primary();}
|
192 | }
|
193 |
|
194 |
|
195 | .uk-button-primary:hover,
|
196 | .uk-button-primary:focus {
|
197 | background-color: $button-primary-hover-background;
|
198 | color: $button-primary-hover-color;
|
199 | @if(mixin-exists(hook-button-primary-hover)) {@include hook-button-primary-hover();}
|
200 | }
|
201 |
|
202 |
|
203 | .uk-button-primary:active,
|
204 | .uk-button-primary.uk-active {
|
205 | background-color: $button-primary-active-background;
|
206 | color: $button-primary-active-color;
|
207 | @if(mixin-exists(hook-button-primary-active)) {@include hook-button-primary-active();}
|
208 | }
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 | .uk-button-secondary {
|
215 | background-color: $button-secondary-background;
|
216 | color: $button-secondary-color;
|
217 | @if(mixin-exists(hook-button-secondary)) {@include hook-button-secondary();}
|
218 | }
|
219 |
|
220 |
|
221 | .uk-button-secondary:hover,
|
222 | .uk-button-secondary:focus {
|
223 | background-color: $button-secondary-hover-background;
|
224 | color: $button-secondary-hover-color;
|
225 | @if(mixin-exists(hook-button-secondary-hover)) {@include hook-button-secondary-hover();}
|
226 | }
|
227 |
|
228 |
|
229 | .uk-button-secondary:active,
|
230 | .uk-button-secondary.uk-active {
|
231 | background-color: $button-secondary-active-background;
|
232 | color: $button-secondary-active-color;
|
233 | @if(mixin-exists(hook-button-secondary-active)) {@include hook-button-secondary-active();}
|
234 | }
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 | .uk-button-danger {
|
241 | background-color: $button-danger-background;
|
242 | color: $button-danger-color;
|
243 | @if(mixin-exists(hook-button-danger)) {@include hook-button-danger();}
|
244 | }
|
245 |
|
246 |
|
247 | .uk-button-danger:hover,
|
248 | .uk-button-danger:focus {
|
249 | background-color: $button-danger-hover-background;
|
250 | color: $button-danger-hover-color;
|
251 | @if(mixin-exists(hook-button-danger-hover)) {@include hook-button-danger-hover();}
|
252 | }
|
253 |
|
254 |
|
255 | .uk-button-danger:active,
|
256 | .uk-button-danger.uk-active {
|
257 | background-color: $button-danger-active-background;
|
258 | color: $button-danger-active-color;
|
259 | @if(mixin-exists(hook-button-danger-active)) {@include hook-button-danger-active();}
|
260 | }
|
261 |
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 | .uk-button-default:disabled,
|
268 | .uk-button-primary:disabled,
|
269 | .uk-button-secondary:disabled,
|
270 | .uk-button-danger:disabled {
|
271 | background-color: $button-disabled-background;
|
272 | color: $button-disabled-color;
|
273 | @if(mixin-exists(hook-button-disabled)) {@include hook-button-disabled();}
|
274 | }
|
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 | .uk-button-small {
|
281 | padding: 0 $button-small-padding-horizontal;
|
282 | line-height: $button-small-line-height;
|
283 | font-size: $button-small-font-size;
|
284 | @if(mixin-exists(hook-button-small)) {@include hook-button-small();}
|
285 | }
|
286 |
|
287 | .uk-button-large {
|
288 | padding: 0 $button-large-padding-horizontal;
|
289 | line-height: $button-large-line-height;
|
290 | font-size: $button-large-font-size;
|
291 | @if(mixin-exists(hook-button-large)) {@include hook-button-large();}
|
292 | }
|
293 |
|
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 | .uk-button-text {
|
305 |
|
306 | padding: 0;
|
307 | line-height: $button-text-line-height;
|
308 | background: none;
|
309 |
|
310 | color: $button-text-color;
|
311 | @if(mixin-exists(hook-button-text)) {@include hook-button-text();}
|
312 | }
|
313 |
|
314 |
|
315 | .uk-button-text:hover,
|
316 | .uk-button-text:focus {
|
317 | color: $button-text-hover-color;
|
318 | @if(mixin-exists(hook-button-text-hover)) {@include hook-button-text-hover();}
|
319 | }
|
320 |
|
321 |
|
322 | .uk-button-text:disabled {
|
323 | color: $button-text-disabled-color;
|
324 | @if(mixin-exists(hook-button-text-disabled)) {@include hook-button-text-disabled();}
|
325 | }
|
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 | .uk-button-link {
|
334 |
|
335 | padding: 0;
|
336 | line-height: $button-link-line-height;
|
337 | background: none;
|
338 |
|
339 | color: $button-link-color;
|
340 | @if(mixin-exists(hook-button-link)) {@include hook-button-link();}
|
341 | }
|
342 |
|
343 |
|
344 | .uk-button-link:hover,
|
345 | .uk-button-link:focus {
|
346 | color: $button-link-hover-color;
|
347 | text-decoration: $button-link-hover-text-decoration;
|
348 | }
|
349 |
|
350 |
|
351 | .uk-button-link:disabled {
|
352 | color: $button-link-disabled-color;
|
353 | text-decoration: none;
|
354 | }
|
355 |
|
356 |
|
357 |
|
358 |
|
359 |
|
360 |
|
361 |
|
362 |
|
363 |
|
364 |
|
365 |
|
366 | .uk-button-group {
|
367 |
|
368 | display: inline-flex;
|
369 |
|
370 | vertical-align: middle;
|
371 |
|
372 | position: relative;
|
373 | }
|
374 |
|
375 |
|
376 |
|
377 |
|
378 |
|
379 | @if(mixin-exists(hook-button-misc)) {@include hook-button-misc();}
|
380 |
|
381 |
|
382 |
|
383 |
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 |
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 |
|
396 |
|
397 |
|
398 |
|
399 |
|
400 |
|
401 |
|
402 |
|
403 |
|
404 |
|
405 |
|
406 |
|
407 |
|
408 |
|
409 |
|
410 | $inverse-button-default-background: $inverse-global-primary-background !default;
|
411 | $inverse-button-default-color: $inverse-global-inverse-color !default;
|
412 | $inverse-button-default-hover-background: darken($inverse-button-default-background, 5%) !default;
|
413 | $inverse-button-default-hover-color: $inverse-global-inverse-color !default;
|
414 | $inverse-button-default-active-background: darken($inverse-button-default-background, 10%) !default;
|
415 | $inverse-button-default-active-color: $inverse-global-inverse-color !default;
|
416 | $inverse-button-primary-background: $inverse-global-primary-background !default;
|
417 | $inverse-button-primary-color: $inverse-global-inverse-color !default;
|
418 | $inverse-button-primary-hover-background: darken($inverse-button-primary-background, 5%) !default;
|
419 | $inverse-button-primary-hover-color: $inverse-global-inverse-color !default;
|
420 | $inverse-button-primary-active-background: darken($inverse-button-primary-background, 10%) !default;
|
421 | $inverse-button-primary-active-color: $inverse-global-inverse-color !default;
|
422 | $inverse-button-secondary-background: $inverse-global-primary-background !default;
|
423 | $inverse-button-secondary-color: $inverse-global-inverse-color !default;
|
424 | $inverse-button-secondary-hover-background: darken($inverse-button-secondary-background, 5%) !default;
|
425 | $inverse-button-secondary-hover-color: $inverse-global-inverse-color !default;
|
426 | $inverse-button-secondary-active-background: darken($inverse-button-secondary-background, 10%) !default;
|
427 | $inverse-button-secondary-active-color: $inverse-global-inverse-color !default;
|
428 | $inverse-button-text-color: $inverse-global-muted-color !default;
|
429 | $inverse-button-text-hover-color: $inverse-global-color !default;
|
430 | $inverse-button-text-disabled-color: $inverse-global-muted-color !default;
|
431 | $inverse-button-link-color: $inverse-global-muted-color !default;
|
432 | $inverse-button-link-hover-color: $inverse-global-color !default;
|
433 |
|
434 |
|
435 |
|
436 |
|
437 |
|
438 |
|
439 |
|
440 |
|
441 |
|
442 |
|
443 |
|
444 |
|
445 |
|
446 |
|
447 |
|
448 |
|