progress.variables
2.6 KB
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/*******************************
Progress
*******************************/
/*-------------------
Element
--------------------*/
@verticalSpacing: 1em;
@margin: @verticalSpacing 0em (@labelHeight + @verticalSpacing);
@firstMargin: 0em 0em (@labelHeight + @verticalSpacing);
@lastMargin: 0em 0em (@labelHeight);
@background: @strongTransparentBlack;
@border: none;
@boxShadow: none;
@padding: 0em;
@borderRadius: @defaultBorderRadius;
/* Bar */
@barPosition: relative;
@barHeight: 1.75em;
@barBackground: #888888;
@barBorderRadius: @borderRadius;
@barTransitionEasing: @defaultEasing;
@barTransitionDuration: @defaultDuration;
@barTransition:
width @barTransitionDuration @barTransitionEasing,
background-color @barTransitionDuration @barTransitionEasing
;
@barInitialWidth: 0%;
@barMinWidth: 2em;
/* Progress Bar Label */
@progressWidth: auto;
@progressSize: @relativeSmall;
@progressPosition: absolute;
@progressTop: 50%;
@progressRight: 0.5em;
@progressLeft: auto;
@progressBottom: auto;
@progressOffset: -0.5em;
@progressColor: @invertedLightTextColor;
@progressTextShadow: none;
@progressFontWeight: @bold;
@progressTextAlign: left;
/* Label */
@labelWidth: 100%;
@labelHeight: 1.5em;
@labelSize: 1em;
@labelPosition: absolute;
@labelTop: 100%;
@labelLeft: 0%;
@labelRight: auto;
@labelBottom: auto;
@labelOffset: (@labelHeight - 1.3em);
@labelColor: @textColor;
@labelTextShadow: none;
@labelFontWeight: @bold;
@labelTextAlign: center;
@labelTransition: color 0.4s @defaultEasing;
/*-------------------
Types
--------------------*/
@indicatingFirstColor: #D95C5C;
@indicatingSecondColor: #EFBC72;
@indicatingThirdColor: #E6BB48;
@indicatingFourthColor: #DDC928;
@indicatingFifthColor: #B4D95C;
@indicatingSixthColor: #66DA81;
@indicatingFirstLabelColor: @textColor;
@indicatingSecondLabelColor: @textColor;
@indicatingThirdLabelColor: @textColor;
@indicatingFourthLabelColor: @textColor;
@indicatingFifthLabelColor: @textColor;
@indicatingSixthLabelColor: @textColor;
/*-------------------
States
--------------------*/
/* Active */
@activePulseColor: @white;
@activePulseMaxOpacity: 0.3;
@activePulseDuration: 2s;
@activeMinWidth: @barMinWidth;
/*-------------------
Variations
--------------------*/
/* Attached */
@attachedBackground: transparent;
@attachedHeight: 0.2rem;
@attachedBorderRadius: @borderRadius;
/* Inverted */
@invertedBackground: @transparentWhite;
@invertedBorder: none;
@invertedBarBackground: @barBackground;
@invertedProgressColor: @offWhite;
@invertedLabelColor: @white;
/* Sizing */
@tinyBarHeight: 0.5em;
@smallBarHeight: 1em;
@largeBarHeight: 2.5em;
@bigBarHeight: 3.5em;