jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use bootstrap progress element, update styling

Browse source
This commit is contained in:
Katie Kroell 2025-12-08 16:26:03 -05:00
parent e2b66ebdab
commit ed5cccfb6a
1 changed files with 42 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/iss-components/site-header/progress-bar/progress-bar.vue
View file

@ -5,13 +5,17 @@
<div class="progress-bar-header">
<span aria-hidden="true">{{ progress }}%</span>
</div>
<progress
class="progress-bar progress-bar-success"
:value="progress"
max="100"
aria-label="Scheduling progress">
<div class="progress-bar-middle"></div>
</progress>
<div class="progress">
<div
class="progress-bar progress-bar-success"
role="progressbar"
:aria-valuetext="`Scheduling progress ${progress}%`"
aria-valuemin="0"
aria-valuemax="100"
:style="{ width: progress + '%' }">
<div class="progress-bar-middle"></div>
</div>
</div>
</div>
</template>
@ -36,28 +40,41 @@ export default {
</script>
<style lang="scss">
.progress-bar-container {
padding: .75rem 0;
display: flex;
.progress-bar-header {
width: 38px;
height: 15px;
float: left;
padding-right: 5px;
// color: @color-progress-bar;
// font-weight: @font-weight-bold;
font-style: normal;
font-stretch: normal;
font-size: 14px;
line-height: 15px;
padding-right: 0.3125rem;
color: $green;
font-weight: 600;
font-size: 0.875rem;
line-height: 0.9375rem;
text-align: right;
}
.progress-bar {
.progress {
min-width: 17.1875rem;
margin-left: .5rem;
margin-left: 0;
border-radius: $border-radius-pill;
.progress-bar {
background-color: $green;
.progress-bar-middle {
width: 1.0625rem;
height: 1.0625rem;
position: relative;
float: right;
margin-right: -8.5px;
margin-top: -1px;
border: 0.125rem solid #ffffff;
border-radius: 50%;
background-color: $green;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
}
}
/*
.progress {
height: 10px;
width: 100%;
@ -66,7 +83,7 @@ export default {
border-bottom-left-radius: 7.5px;
line-height: inherit;
/* Firefox */
/* Firefox
appearance: none;
background-color: $blue-100;
border: 0;
@ -77,8 +94,9 @@ export default {
background-color: $blue;
border-radius: $border-radius-pill;
}
*/
/* Webkit */
/* Webkit
-webkit-appearance: none;
&::-webkit-progress-bar {
background-color: $blue-100;
@ -89,23 +107,7 @@ export default {
background-color: $blue;
border-radius: $border-radius-pill;
}
}
.progress {
margin-left: .5rem;
}
.progress-bar-middle {
position: relative;
float: right;
margin-right: -8.5px;
width: 17px;
height: 17px;
margin-top: -1px;
border: solid 2px; //@progress-bar-outer-color;
border-radius: 50%;
//background-color: @color-progress-bar;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
*/
/*}*/
}
</style>