61 lines
No EOL
1.3 KiB
SCSS
61 lines
No EOL
1.3 KiB
SCSS
@import "../../../css/static/mixin";
|
|
@import "../../../css/static/properties";
|
|
|
|
html:root {
|
|
--progress-bar-background: #242527;
|
|
|
|
--progress-bar-filler-normal: #4370a299;
|
|
--progress-bar-filler-error: #a1000099;
|
|
--progress-bar-filler-success: #2b854199;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
|
|
height: 1.4em;
|
|
border-radius: 0.2em;
|
|
|
|
overflow: hidden;
|
|
|
|
background-color: var(--progress-bar-background);
|
|
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);
|
|
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);
|
|
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.75);
|
|
|
|
.filler {
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
@include transition($button_hover_animation_time ease-in-out);
|
|
}
|
|
|
|
.text {
|
|
align-self: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
&.type-normal {
|
|
.filler {
|
|
background-color: var(--progress-bar-filler-normal);
|
|
}
|
|
}
|
|
|
|
&.type-error {
|
|
.filler {
|
|
background-color: var(--progress-bar-filler-error);
|
|
}
|
|
}
|
|
|
|
&.type-success {
|
|
.filler {
|
|
background-color: var(--progress-bar-filler-success);
|
|
}
|
|
}
|
|
} |