1 | @use 'sass:map';
|
2 | @use '../internal' as *;
|
3 |
|
4 | $generate-utility: should-generate-classes($PROGRESS);
|
5 |
|
6 | @if $generate-utility {
|
7 | $progress-primary: $cirrus-primary;
|
8 | $progress-background: fill('gray', '200');
|
9 | $progress-border-radius: 0.25rem;
|
10 |
|
11 | .progress {
|
12 | --progress-color: #{$progress-primary};
|
13 |
|
14 | background-color: $progress-background;
|
15 | border: none;
|
16 | border-radius: $progress-border-radius;
|
17 | overflow: hidden;
|
18 | padding: 0;
|
19 | width: 100%;
|
20 |
|
21 | @include explode-properties(map.get($progress-bar-sizes, $md));
|
22 |
|
23 | &::-webkit-progress-bar {
|
24 | background-color: transparent;
|
25 | }
|
26 | &::-webkit-progress-value {
|
27 | background-color: var(--progress-color);
|
28 | }
|
29 | &::-moz-progress-bar {
|
30 | background-color: var(--progress-color);
|
31 | }
|
32 | &::-ms-fill {
|
33 | background-color: var(--progress-color);
|
34 | border: none;
|
35 | }
|
36 |
|
37 |
|
38 | @each $class, $property-map in $progress-bar-sizes {
|
39 | &.progress--#{$class} {
|
40 | @include explode-properties($property-map);
|
41 | }
|
42 | }
|
43 |
|
44 |
|
45 | @each $class, $color in $control-themes {
|
46 | &.progress--#{$class} {
|
47 | --progress-color: #{map-get($color, bg)};
|
48 | }
|
49 | }
|
50 |
|
51 | &:indeterminate {
|
52 | animation: progress-indeterminate 1.5s linear infinite;
|
53 | background: $progress-background
|
54 | linear-gradient(to right, var(--progress-color) 30%, $progress-background 30%)
|
55 | top
|
56 | left /
|
57 | 150%
|
58 | 150%
|
59 | no-repeat;
|
60 |
|
61 | &::-webkit-progress-bar {
|
62 | --progress-color: transparent;
|
63 | }
|
64 | &::-moz-progress-bar {
|
65 | --progress-color: transparent;
|
66 | }
|
67 | &::-ms-fill {
|
68 | animation-name: none;
|
69 | }
|
70 | }
|
71 | }
|
72 |
|
73 | @keyframes progress-indeterminate {
|
74 | 0% {
|
75 | background-position: 200% 0;
|
76 | }
|
77 | 100% {
|
78 | background-position: -200% 0;
|
79 | }
|
80 | }
|
81 | }
|