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

fix: prevent css collision (#404)

Browse Source
This commit is contained in:
Carlos Valente
2023-05-20 22:48:14 +02:00
committed by GitHub
parent a5a6ca3229
commit 4612829e5b
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
+5 -5
View File
@@ -3,7 +3,7 @@
$progress-bar-size: 12px;
$progress-bar-br: 3px;
.progress-bar {
.multiprogress-bar {
position: relative;
width: 100%;
height: $progress-bar-size;
@@ -17,7 +17,7 @@ $progress-bar-br: 3px;
}
}
.progress-bar__indicator {
.multiprogress-bar__indicator {
position: absolute;
height: inherit;
background-color: black;
@@ -27,7 +27,7 @@ $progress-bar-br: 3px;
right: 0;
}
.progress-bar__bg-normal {
.multiprogress-bar__bg-normal {
position: absolute;
height: inherit;
right: 0;
@@ -35,14 +35,14 @@ $progress-bar-br: 3px;
width: 100%;
}
.progress-bar__bg-warning {
.multiprogress-bar__bg-warning {
position: absolute;
height: inherit;
right: 0;
border-radius: 0 $progress-bar-br $progress-bar-br 0;
}
.progress-bar__bg-danger {
.multiprogress-bar__bg-danger {
position: absolute;
height: inherit;
right: 0;
apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
+5 -5
View File
@@ -23,11 +23,11 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
const warningWidth = clamp((warning / complete) * 100, 0, 100);
return (
<div className={`progress-bar ${hidden ? 'progress-bar--hidden' : ''} ${className}`}>
<div className='progress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
<div className='progress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
<div className='progress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
<div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
<div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
<div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
<div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
<div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
<div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
</div>
);
}