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

Merge pull request #981 from Safelite/feature/INSR-7742

Browse source 
INSR-7742: color fixes to progress bar
This commit is contained in:
katiekroell 2025-12-12 13:43:11 -05:00 committed by GitHub
commit eb7b7e4cb0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -44,7 +44,7 @@ export default {
.progress-bar-header { .progress-bar-header {
padding-right: 0.3125rem; padding-right: 0.3125rem;
color: $progress-bar-color; color: $progress-bar-success-color;
font-weight: 600; font-weight: 600;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 0.9375rem; line-height: 0.9375rem;
@ -63,9 +63,10 @@ export default {
margin-left: 0; margin-left: 0;
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
overflow: visible; overflow: visible;
background-color: $progress-bar-background-color;
.progress-bar { .progress-bar {
background-color: $progress-bar-color; background-color: $progress-bar-success-color;
border-radius: $border-radius-pill 0 0 $border-radius-pill; border-radius: $border-radius-pill 0 0 $border-radius-pill;
overflow: visible; overflow: visible;
@ -78,7 +79,7 @@ export default {
margin-top: -1px; margin-top: -1px;
border: 0.125rem solid #ffffff; border: 0.125rem solid #ffffff;
border-radius: 50%; border-radius: 50%;
background-color: $progress-bar-color; background-color: $progress-bar-success-color;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
} }
} }

11
src/styles/client-customizations.scss
View file

@ -9,7 +9,8 @@
$accent-color: #09748b; $accent-color: #09748b;
$link: #09748b; $link: #09748b;
$svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23 $svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23
$progress-bar-color: #181643; $progress-bar-success-color: #1a1446;
$progress-bar-background-color: #ffffff;
svg, svg,
.modal-text { .modal-text {
@ -29,15 +30,17 @@
.progress-bar-container { .progress-bar-container {
.progress-bar-header { .progress-bar-header {
color: $progress-bar-color; color: $progress-bar-success-color;
} }
.progress { .progress {
background-color: $progress-bar-background-color;
.progress-bar { .progress-bar {
background-color: $progress-bar-color; background-color: $progress-bar-success-color;
.progress-bar-middle { .progress-bar-middle {
background-color: $progress-bar-color; background-color: $progress-bar-success-color;
} }
} }
} }

3
src/styles/ux-variables.scss
View file

@ -156,7 +156,8 @@ $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of
$border-radius-pill: 50rem; $border-radius-pill: 50rem;
//Progress Bar Styling //Progress Bar Styling
$progress-bar-color: $green; $progress-bar-success-color: $green;
$progress-bar-background-color: #cacbcc;
//Spacing //Spacing
// 8 spacers available instead of the usual 5 // 8 spacers available instead of the usual 5