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 | }
|