UNPKG

4.97 kBSCSSView Raw
1@import "../core/index-noreset.scss";
2@import "scss/variable";
3@import "scss/mixin";
4@import "./rtl.scss";
5
6#{$progress-prefix}-line {
7 @include box-sizing;
8
9 & {
10 width: 100%;
11 display: inline-block;
12 position: relative;
13
14 &-container {
15 display: inline-block;
16 width: 100%;
17 vertical-align: middle;
18 }
19
20 &-underlay {
21 position: relative;
22 overflow: hidden;
23 width: 100%;
24 background: $progress-line-underlay-color;
25 }
26
27 &-overlay {
28 position: absolute;
29 left: 0;
30 top: 0;
31 transition: all $motion-duration-standard $motion-ease;
32
33 &-normal {
34 background: $progress-line-normal-color;
35 }
36
37 &-success {
38 background: $progress-line-success-color;
39 }
40
41 &-error {
42 background: $progress-line-error-color;
43 }
44
45 &-started {
46 background: $progress-line-started-color;
47 }
48
49 &-middle {
50 background: $progress-line-middle-color;
51 }
52
53 &-finishing {
54 background: $progress-line-finishing-color;
55 }
56 }
57 }
58
59 &.#{$css-prefix}small {
60 @include progress-bar-size($progress-line-height-size-s, $progress-line-height-size-s, $progress-line-font-s, $progress-line-radius-s);
61 }
62
63 &.#{$css-prefix}medium {
64 @include progress-bar-size($progress-line-height-size-m, $progress-line-height-size-m, $progress-line-font-m, $progress-line-radius-m);
65 }
66
67 &.#{$css-prefix}large {
68 @include progress-bar-size($progress-line-height-size-l, $progress-line-height-size-l, $progress-line-font-l, $progress-line-radius-l);
69 }
70
71 &-show-info {
72 #{$progress-prefix}-line-container {
73 padding-right: 60px;
74 margin-right: -60px;
75 }
76
77 #{$progress-prefix}-line-text {
78 width: 50px;
79 text-align: left;
80 margin-left: 10px;
81 vertical-align: middle;
82 display: inline-block;
83 color: $progress-line-font-color;
84 }
85 }
86
87 &-show-border {
88 #{$progress-prefix}-line-underlay {
89 border: $progress-line-underlay-border-width solid $progress-line-underlay-border-color;
90 }
91
92 &.#{$css-prefix}small {
93 @include progress-bar-size(calc(#{$progress-line-height-size-s} + 2 * #{$progress-line-underlay-border-width}), $progress-line-height-size-s, $progress-line-font-s, $progress-line-radius-s);
94 }
95
96 &.#{$css-prefix}medium {
97 @include progress-bar-size(calc(#{$progress-line-height-size-m} + 2 * #{$progress-line-underlay-border-width}), $progress-line-height-size-m, $progress-line-font-m, $progress-line-radius-m);
98 }
99
100 &.#{$css-prefix}large {
101 @include progress-bar-size(calc(#{$progress-line-height-size-l} + 2 * #{$progress-line-underlay-border-width}), $progress-line-height-size-l, $progress-line-font-l, $progress-line-radius-l);
102 }
103 }
104}
105
106#{$progress-prefix}-circle {
107 @include box-sizing();
108
109 & {
110 position: relative;
111 display: inline-block;
112
113 &-underlay {
114 stroke-width: $progress-circle-underlay-width;
115 stroke: $progress-circle-underlay-color;
116 }
117
118 &-overlay {
119 transition: all $motion-duration-standard $motion-ease;
120 stroke-linecap: $progress-circle-corner;
121 stroke-width: $progress-circle-overlay-width;
122
123 &-normal {
124 stroke: $progress-circle-normal-color;
125 }
126
127 &-success {
128 stroke: $progress-circle-success-color;
129 }
130
131 &-error {
132 stroke: $progress-circle-error-color;
133 }
134
135 &-started {
136 stroke: $progress-circle-started-color;
137 }
138
139 &-middle {
140 stroke: $progress-circle-middle-color;
141 }
142
143 &-finishing {
144 stroke: $progress-circle-finishing-color;
145 }
146 }
147 }
148
149 &.#{$css-prefix}small {
150 @include progress-circle-size($progress-circle-size-s, $progress-circle-font-s);
151 }
152
153 &.#{$css-prefix}medium {
154 @include progress-circle-size($progress-circle-size-m, $progress-circle-font-m);
155 }
156
157 &.#{$css-prefix}large {
158 @include progress-circle-size($progress-circle-size-l, $progress-circle-font-l);
159 }
160
161 &-text {
162 display: block;
163 position: absolute;
164 width: 100%;
165 top: 50%;
166 left: 0;
167 text-align: center;
168 line-height: 1;
169 -webkit-transform: translateY(-50%);
170 transform: translateY(-50%);
171 transition: transform $motion-duration-standard $motion-ease;
172 color: $progress-circle-text-color;
173 }
174}