mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Use the existing bootstrap CSS for progress bars
This commit is contained in:
parent
2c6e8da90e
commit
399dcafede
@ -31,37 +31,26 @@
|
||||
|
||||
/* Progress bars */
|
||||
|
||||
.progress-bar {
|
||||
height: 25px;
|
||||
background: #eee;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
width: 100%;
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-bar-value {
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
.progress-bar {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
width: 100%;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.progress-bar-inner {
|
||||
height: 23px;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #3a3;
|
||||
opacity: 40%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
|
@ -98,10 +98,10 @@ function makeProgressBar(value, maximum, opts) {
|
||||
}
|
||||
|
||||
return `
|
||||
<div class='progress-bar'>
|
||||
<div class='progress-bar progress-bar-inner' style='width: ${percent}%;'></div>
|
||||
<div class='progress-bar-value'>${value} / ${maximum}</div>
|
||||
</div>
|
||||
<div class='progress'>
|
||||
<div class='progress-bar' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
|
||||
<div class='progress-value'>${value} / ${maximum}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user