Project

General

Profile

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;
13
@progress-margin-vertical:                      @global-margin;
14
@progress-background:                           @global-muted-background;
15

    
16
@progress-bar-background:                       @global-primary-background;
17

    
18

    
19
/* ========================================================================
20
   Component: Progress
21
 ========================================================================== */
22

    
23
/*
24
 * 1. Remove default style
25
 * 2. Behave like a block element
26
 * 3. Remove borders in Firefox and Edge
27
 * 4. Set background color for progress container in Firefox, IE11 and Edge
28
 * 5. Style
29
 */
30

    
31
.uk-progress {
32
    /* 1 */
33
    -webkit-appearance: none;
34
    -moz-appearance: none;
35
    /* 2 */
36
    display: block;
37
    width: 100%;
38
    /* 3 */
39
    border: 0;
40
    /* 4 */
41
    background-color: @progress-background;
42
    /* 5 */
43
    margin-bottom: @progress-margin-vertical;
44
    height: @progress-height;
45
    .hook-progress;
46
}
47

    
48
/* Add margin if adjacent element */
49
* + .uk-progress { margin-top: @progress-margin-vertical; }
50

    
51
/*
52
 * Remove animated circles for indeterminate state in IE11 and Edge
53
 */
54

    
55
.uk-progress:indeterminate { color: transparent; }
56

    
57
/*
58
 * Progress container
59
 * 2. Remove progress bar for indeterminate state in Firefox
60
 */
61

    
62
.uk-progress::-webkit-progress-bar {
63
  background-color: @progress-background;
64
  .hook-progress;
65
}
66

    
67
/* 2 */
68
.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
69

    
70
/*
71
 * Progress bar
72
 * 1. Remove right border in IE11 and Edge
73
 */
74

    
75
.uk-progress::-webkit-progress-value {
76
    background-color: @progress-bar-background;
77
    transition: width 0.6s ease;
78
    .hook-progress-bar;
79
}
80

    
81
.uk-progress::-moz-progress-bar {
82
    background-color: @progress-bar-background;
83
    .hook-progress-bar;
84
}
85

    
86
.uk-progress::-ms-fill {
87
    background-color: @progress-bar-background;
88
    transition: width 0.6s ease;
89
    /* 1 */
90
    border: 0;
91
    .hook-progress-bar;
92
}
93

    
94

    
95
// Hooks
96
// ========================================================================
97

    
98
.hook-progress-misc;
99

    
100
.hook-progress() {}
101
.hook-progress-bar() {}
102
.hook-progress-misc() {}
(47-47/66)