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

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

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