UNPKG

2.88 kBSCSSView Raw
1// Name: Progress
2// Description: Component to create progress bars
3//
4// Component: `uk-progress`
5//
6// ========================================================================
7
8
9// Variables
10// ========================================================================
11
12$progress-height: 15px !default;
13$progress-margin-vertical: $global-margin !default;
14$progress-background: $global-muted-background !default;
15
16$progress-bar-background: $global-primary-background !default;
17
18
19/* ========================================================================
20 Component: Progress
21 ========================================================================== */
22
23/*
24 * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
25 * 2. Remove default style
26 * 3. Behave like a block element
27 * 4. Remove borders in Firefox and Edge
28 * 5. Set background color for progress container in Firefox, IE11 and Edge
29 * 6. Style
30 */
31
32.uk-progress {
33 /* 1 */
34 vertical-align: baseline;
35 /* 2 */
36 -webkit-appearance: none;
37 -moz-appearance: none;
38 /* 3 */
39 display: block;
40 width: 100%;
41 /* 4 */
42 border: 0;
43 /* 5 */
44 background-color: $progress-background;
45 /* 6 */
46 margin-bottom: $progress-margin-vertical;
47 height: $progress-height;
48 @if(mixin-exists(hook-progress)) {@include hook-progress();}
49}
50
51/* Add margin if adjacent element */
52* + .uk-progress { margin-top: $progress-margin-vertical; }
53
54/*
55 * Remove animated circles for indeterminate state in IE11 and Edge
56 */
57
58.uk-progress:indeterminate { color: transparent; }
59
60/*
61 * Progress container
62 * 2. Remove progress bar for indeterminate state in Firefox
63 */
64
65.uk-progress::-webkit-progress-bar {
66 background-color: $progress-background;
67 @if(mixin-exists(hook-progress)) {@include hook-progress();}
68}
69
70/* 2 */
71.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
72
73/*
74 * Progress bar
75 * 1. Remove right border in IE11 and Edge
76 */
77
78.uk-progress::-webkit-progress-value {
79 background-color: $progress-bar-background;
80 transition: width 0.6s ease;
81 @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();}
82}
83
84.uk-progress::-moz-progress-bar {
85 background-color: $progress-bar-background;
86 @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();}
87}
88
89.uk-progress::-ms-fill {
90 background-color: $progress-bar-background;
91 transition: width 0.6s ease;
92 /* 1 */
93 border: 0;
94 @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();}
95}
96
97
98// Hooks
99// ========================================================================
100
101@if(mixin-exists(hook-progress-misc)) {@include hook-progress-misc();}
102
103// @mixin hook-progress(){}
104// @mixin hook-progress-bar(){}
105// @mixin hook-progress-misc(){}