cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-14 11:53:49 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix for MultiPartProgressBar styling (#1022)

Browse Source
This commit is contained in:
Michael Foster
2024-06-07 15:08:17 -04:00
committed by GitHub
parent 3af4c64ff3
commit add769fe1e
5 changed files with 64 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
+28 -21
View File
@@ -7,10 +7,6 @@ $progress-bar-br: 3px;
position: relative;
width: 100%;
height: $progress-bar-size;
border-radius: $progress-bar-br;
background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
display: flex;
overflow: hidden;
&--hidden {
display: none;
@@ -18,31 +14,42 @@ $progress-bar-br: 3px;
}
}
.multiprogress-bar__bg {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: var(--progress-bar-br, $progress-bar-br);
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.multiprogress-bar__indicator {
position: absolute;
height: inherit;
background-color: black;
inset: 0;
margin: -1px;
margin-left: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.multiprogress-bar__indicator-bar {
background-color: var(--background-color-override, $ui-black);
opacity: 0.8;
transition: 1s linear;
transition-property: width;
right: 0;
.multiprogress-bar--ignore-css-override & {
background-color: $ui-black;
}
}
.multiprogress-bar__bg-normal {
position: absolute;
height: inherit;
right: 0;
width: 100%;
}
.multiprogress-bar__bg-warning {
position: absolute;
height: inherit;
right: 0;
flex: 1;
}
.multiprogress-bar__bg-danger {
position: absolute;
height: inherit;
right: 0;
}
flex-shrink: 0;
}