33 lines
819 B
SCSS
33 lines
819 B
SCSS
@use '../../styles/mixins' as *;
|
|
@use '../../styles/variables' as *;
|
|
|
|
.ui-progress-bar {
|
|
background-color: var(--progress-bar-background-color);
|
|
border-radius: 2px;
|
|
height: 4px;
|
|
overflow: hidden;
|
|
|
|
&__bar {
|
|
height: 100%;
|
|
background-color: var(--progress-bar-color);
|
|
transition: ease-out;
|
|
transition-property: width, background-color;
|
|
transition-duration: .1s, .2s;
|
|
}
|
|
|
|
@include element-variant('progress-bar', 'normal', (
|
|
'background-color': $clr-grey-300,
|
|
'color': $clr-cyan-500,
|
|
));
|
|
|
|
@include element-variant('progress-bar', 'middle', (
|
|
'background-color': $clr-warn-200,
|
|
'color': $clr-warn-500,
|
|
));
|
|
|
|
@include element-variant('progress-bar', 'high', (
|
|
'background-color': $clr-red-100,
|
|
'color': $clr-red-500,
|
|
));
|
|
|
|
} |