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

WIP CASH-1042

Browse source
This commit is contained in:
Bryan Mauger 2025-07-03 09:26:04 -04:00
parent f29d6082b3
commit bc8fcca2ea
27 changed files with 243 additions and 294 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/css/site-2020Styling.css
View file

@ -194,16 +194,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
margin-bottom: 2px; margin-bottom: 2px;
} }
@media (min-width: 500px) {
.form-group {
width: 80%;
}
}
@media (min-width: 800px) {
.form-group {
width: 60%;
}
}
.list-group { .list-group {
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 0; padding-left: 0;

20
public/scss/site-2020Styling.scss
View file

@ -188,16 +188,16 @@
margin-bottom: 2px; margin-bottom: 2px;
} }
@media (min-width: 500px) { // @media (min-width: 500px) {
.form-group { // .form-group {
width: 80%; // width: 80%;
} // }
} // }
@media (min-width: 800px) { // @media (min-width: 800px) {
.form-group { // .form-group {
width: 60%; // width: 60%;
} // }
} // }
.list-group { .list-group {
margin-bottom: 20px; margin-bottom: 20px;

13
src/digital-components/button-question/button-question.vue
View file

@ -7,7 +7,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
"> ">
<div <div
v-if="questionText && answers && answers.length > 0" v-if="questionText && answers && answers.length > 0"
class="question-text d-flex" class="question-text"
:class="{ 'small-question-text': isSmallQuestionText }"> :class="{ 'small-question-text': isSmallQuestionText }">
<span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']"> <span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
{{ questionText }} {{ questionText }}
@ -76,10 +76,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div <div id="form-test-error" class="row form-test-error">
id="form-test-error"
class="row form-test-error"
:class="isErrorCentered ? 'text-center' : ''">
<error-message <error-message
role="comment" role="comment"
aria-atomic="true" aria-atomic="true"
@ -249,12 +246,6 @@ export default {
return classes; return classes;
}, },
isErrorCentered() {
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length <= 2) {
return true;
}
return false;
},
buttonsInfo() { buttonsInfo() {
return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({ return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,

27
src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
View file

@ -66,19 +66,18 @@ export default {
.btn { .btn {
&.btn-primary { &.btn-primary {
position: relative; position: relative;
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: $red;
border: none; border: none;
border-radius: $border-radius-lg;
color: $white; color: $white;
justify-content: center; justify-content: center;
font-weight: 500; font-weight: 500;
@media (hover: hover) { @media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: $red;
} }
&:focus { &:focus {
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
} }
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { &:focus-visible {
@ -86,27 +85,26 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
color: $white; color: $white;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%); background: $red;
} }
&:disabled { &:disabled {
background: $gray-200 !important; background: $gray-200 !important;
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important; background: $red !important;
color: $gray-600 !important; color: $gray-600 !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: none; border: none;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
background: $blue-700; background: $red;
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
pointer-events: none; pointer-events: none;
} }
&.delay { &.delay {
@ -117,8 +115,7 @@ export default {
&.btn-secondary { &.btn-secondary {
position: relative; position: relative;
background: transparent; background: transparent;
border: 1px solid $blue; border: 1px solid $red;
border-radius: $border-radius-lg;
color: $blue; color: $blue;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
@ -133,7 +130,7 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px $white, 0 0 0 3px $white,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
color: $white; color: $white;
@include blue-gradient; @include blue-gradient;
} }
@ -142,14 +139,12 @@ export default {
color: $gray-550 !important; color: $gray-550 !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: 1px solid $gray-550; border: 1px solid $red;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
@include blue-gradient;
pointer-events: none; pointer-events: none;
} }
&.delay { &.delay {

17
src/fmg-components/funnel-footer/funnel-footer.vue
View file

@ -1,15 +1,5 @@
<template> <template>
<div class="funnel-footer"> <div class="funnel-footer">
<div class="container-fluid">
<div class="row">
<div class="col d-flex justify-content-center justify-content-md-start">
<img class="skyline" src="~@/assets/img/skyline-van.svg" alt="" />
</div>
<div class="col d-none d-md-flex justify-content-end align-items-end">
<img class="neighborhood" src="~@/assets/img/neighborhood.svg" alt="" />
</div>
</div>
</div>
<div class="footer-inner-wrapper"> <div class="footer-inner-wrapper">
<textLink <textLink
linkType="newWindowLink" linkType="newWindowLink"
@ -64,13 +54,6 @@ export default {
margin-top: auto; margin-top: auto;
padding: 0 0 2rem 0; padding: 0 0 2rem 0;
.skyline {
height: 96px;
}
.neighborhood {
height: 48px;
}
p { p {
font-size: 0.875rem; font-size: 0.875rem;
margin-top: 0.25rem; margin-top: 0.25rem;

50
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -1,7 +1,13 @@
<template> <template>
<div class="funnel-header" v-if="imageSrc"> <div class="funnel-header" v-if="imageSrc">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex w-100">
<div class="button-container"> <progress-bar :page="$route.name" />
</div>
<div class="container d-flex">
<div class="site-logo">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
</div>
<div class="button-container webchat">
<span class="webchat"> <span class="webchat">
<button <button
v-show="shouldShowWebchatButton" v-show="shouldShowWebchatButton"
@ -10,18 +16,10 @@
class="chat-button"></button> class="chat-button"></button>
</span> </span>
</div> </div>
<div class="site-logo">
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
</div>
<div class="button-container"> <div class="button-container">
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
<menuModal /> <menuModal />
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
</div> </div>
</div> </div>
<div class="d-flex w-100">
<progress-bar :page="$route.name" />
</div>
</div> </div>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id"> <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
@ -197,23 +195,39 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.funnel-header { .funnel-header {
.container {
padding: 1rem 0.75rem;
display: flex;
align-items: center;
@include media-breakpoint-up(md) {
padding: 2rem 0.75rem;
}
}
position: relative; position: relative;
padding: 1rem 0; padding: 0 0 1rem 0;
.button-container { .button-container {
width: 1.5rem; &.webchat {
height: 1.625rem; margin-right: 1rem;
@include media-breakpoint-up(md) {
margin-right: 2rem;
}
}
}
.site-logo {
margin-right: auto;
} }
.logo-image { .logo-image {
width: auto; width: 100px;
height: 1.1875rem; height: auto;
margin: 0 auto; margin: 0 auto;
@include media-breakpoint-up(md) {
width: 165px;
}
} }
:deep(.menu-modal-container) {
display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
}
.webchat { .webchat {
.chat-button { .chat-button {
width: 1.5rem; width: 1.5rem;

109
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -6,9 +6,12 @@
:class="[isActive ? 'active' : '']" :class="[isActive ? 'active' : '']"
@click="toggleModal" @click="toggleModal"
aria-label="Hamburger Menu (modal window)"> aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div> <span class="step-numbers">Step 1 of 4</span>
<div class="bar2"></div> <div class="bars">
<div class="bar3"></div> <div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button> </button>
</div> </div>
<div <div
@ -111,35 +114,56 @@ export default {
button { button {
border: none; border: none;
&.menu-button { &.menu-button {
width: 1.5rem; width: auto;
height: 1.5rem; height: auto;
border-radius: 50%; border-radius: 1.5rem;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
background-color: $white; background-color: $white;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone padding: 0.15rem 0.5rem; //Required to prevent 'squish' on iPhone
z-index: 1050; z-index: 1050;
.bar1, @include media-breakpoint-up(md) {
.bar2, padding: 0.25rem 1rem;
.bar3 {
width: 14px;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
} }
&.active .bar1 { &.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px); transform: rotate(-45deg) translate(-3px, 8px);
} }
&.active .bar2 { &.active .bar2 {
opacity: 0; opacity: 0;
} }
&.active .bar3 { &.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px); transform: rotate(45deg) translate(-3px, -8px);
}
.bars {
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: space-around;
flex-direction: column;
scale: 0.75;
@include media-breakpoint-up(md) {
scale: 1;
}
.bar1,
.bar2,
.bar3 {
width: 1.5rem;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
}
}
.step-numbers {
font-size: 0.875rem;
margin-right: 0.5rem;
@include media-breakpoint-up(md) {
font-size: 1rem;
}
} }
} }
} }
@ -147,11 +171,15 @@ export default {
.modal { .modal {
&.menu-modal { &.menu-modal {
//left: auto; //left: auto;
height: calc(100% - 56px); height: calc(100% - 68px);
top: 56px; top: 68px;
border-top: 1px solid $gray-300; border-top: 1px solid $gray-300;
overflow-x: visible; overflow-x: visible;
overflow-y: visible; overflow-y: visible;
@include media-breakpoint-up(md) {
height: calc(100% - 104px);
top: 104px;
}
.modal-body { .modal-body {
padding: 2rem; padding: 2rem;
.ccpa-icon { .ccpa-icon {
@ -190,23 +218,30 @@ export default {
align-items: center; align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone padding: 0; //Required to prevent 'squish' on iPhone
z-index: 1056; z-index: 1056;
.bar1, .bars {
.bar2, width: 1.5rem;
.bar3 { height: 1.5rem;
width: 14px; display: flex;
height: 2px; justify-content: space-around;
background-color: $blue; flex-direction: column;
margin: 1px 0; .bar1,
transition: 0.25s; .bar2,
} .bar3 {
&.active .bar1 { width: 1.5rem;
transform: rotate(-45deg) translate(-3px, 3px); height: 2px;
} background-color: $blue;
&.active .bar2 { margin: 1px 0;
opacity: 0; transition: 0.25s;
} }
&.active .bar3 { &.active .bar1 {
transform: rotate(45deg) translate(-3px, -3px); transform: rotate(-45deg) translate(-3px, 8px);
}
&.active .bar2 {
opacity: 0;
}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -8px);
}
} }
} }
} }

33
src/fmg-components/funnel-header/progress-bar/progress-bar.vue
View file

@ -55,50 +55,33 @@ export default {
<style lang="scss"> <style lang="scss">
.progress-bar-outer { .progress-bar-outer {
background: $blue-100; background: $blue-100;
height: 10px; height: 5px;
position: relative; position: relative;
border-radius: 10px; border-radius: 0;
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
.progress-bar-inner { .progress-bar-inner {
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */ transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
will-change: width; will-change: width;
height: 10px; height: 5px;
background-color: $blue; background-color: $red;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
border-radius: 10px; border-radius: 0;
} }
progress { progress {
height: 10px; height: 5px;
width: 100%; width: 100%;
/* Firefox */ /* Firefox */
appearance: none; appearance: none;
background-color: $blue-100; background-color: $gray-100;
border: 0; border: 0;
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
box-shadow: $box-shadow-inset; box-shadow: $box-shadow-inset;
&::-moz-progress-bar {
background-color: $blue;
border-radius: $border-radius-pill;
}
/* Webkit */
-webkit-appearance: none;
&::-webkit-progress-bar {
background-color: $blue-100;
border-radius: $border-radius-pill;
box-shadow: $box-shadow-inset;
}
&::-webkit-progress-value {
background-color: $blue;
border-radius: $border-radius-pill;
}
} }
} }
</style> </style>

19
src/fmg-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -1,9 +1,7 @@
<template> <template>
<div class="funnel-sub-header"> <div class="funnel-sub-header">
<div <div class="d-flex align-items-center overflow-hidden">
class="d-flex align-items-center container-fluid overflow-hidden" <h5 class="fw-normal mb-0" :class="headerColor">
:class="[textAlignment]">
<h5 class="text-center fw-normal mb-0" :class="headerColor">
<span> <span>
{{ text }} {{ text }}
</span> </span>
@ -13,10 +11,8 @@
@click-event="clickEvent" /> @click-event="clickEvent" />
</h5> </h5>
</div> </div>
<div <div v-if="subText" class="d-flex align-items-center overflow-hidden mt-1">
v-if="subText" <p class="small fw-normal sub-text">
class="d-flex align-items-center justify-content-center container-fluid overflow-hidden mt-1">
<p class="text-center small fw-normal sub-text">
<span> <span>
{{ subText }} {{ subText }}
</span> </span>
@ -37,10 +33,6 @@ export default {
type: String, type: String,
default: "dark-header", default: "dark-header",
}, },
leftAlignHeader: {
type: Boolean,
default: false,
},
}, },
components: { components: {
buttonBack, buttonBack,
@ -49,9 +41,6 @@ export default {
text() { text() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText"); return this.getCmsContent(this.cmsWidgetName, "HeaderText");
}, },
textAlignment() {
return this.leftAlignHeader ? "justify-content-start" : "justify-content-center";
},
subText() { subText() {
return this.getCmsContent(this.cmsWidgetName, "HeaderSubText"); return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
}, },

12
src/layouts/customer-details/customer-details.vue
View file

@ -1,13 +1,9 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
<textboxQuestion <textboxQuestion
isRequired isRequired

12
src/layouts/payment-method/payment-method.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal notFullScreen ref="loadingModal" /> <loadingModal notFullScreen ref="loadingModal" />
<div class="container-fluid payment-method"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container payment-method">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
<hr class="my-0" /> <hr class="my-0" />

13
src/layouts/payment/payment.vue
View file

@ -1,15 +1,10 @@
<template> <template>
<Form> <Form>
<loadingModal notFullScreen ref="loadingModal" /> <loadingModal notFullScreen ref="loadingModal" />
<div class="container-fluid"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-md-8">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 p-0">
<div> <div>
<alert <alert
ref="piaCCErrorAlert" ref="piaCCErrorAlert"

17
src/layouts/quote/quote.vue
View file

@ -1,16 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
class="container-fluid page-container-grouped-styles quote-page" <div class="container">
:class="showSaveProgressPopup ? 'show-save-progress-popup' : ''">
<div class="row justify-content-center funnel-header-wrapper">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4"> <div class="col-md-6">
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
<cashOrInsuranceQuestion <cashOrInsuranceQuestion
ref="cashOrInsurance" ref="cashOrInsurance"
@ -919,6 +913,11 @@ export default {
.text-block { .text-block {
display: block; display: block;
} }
:deep(.container .funnel-sub-header) {
display: flex;
align-items: center;
flex-direction: column;
}
:deep(.promo-modal-question a) { :deep(.promo-modal-question a) {
@include responsive-font-size-md(0.875rem, 1rem); @include responsive-font-size-md(0.875rem, 1rem);
} }

12
src/layouts/schedule/schedule.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles page-schedule"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
<template v-if="ChangeShopLink.length"> <template v-if="ChangeShopLink.length">
<textBlock <textBlock

24
src/layouts/service-location/service-location.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container page-container-grouped-styles">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion <serviceZipModalQuestion
@ -69,8 +65,8 @@
alertClass="alert-success" /> alertClass="alert-success" />
</div> </div>
</div> </div>
<div class="row justify-content-center appointment-type"> <div class="row appointment-type">
<div class="col-md-6"> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
<appointmentTypeQuestion <appointmentTypeQuestion
v-model="selectedAppointmentType" v-model="selectedAppointmentType"
v-show="isAppointmentTypeDisplayed" v-show="isAppointmentTypeDisplayed"
@ -87,8 +83,8 @@
labelBold="true" /> labelBold="true" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6 col-xl-4"> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
<div class="text-center"> <div class="text-center">
<textBlock <textBlock
v-if="mobileFeeApplies && isMobileSelected" v-if="mobileFeeApplies && isMobileSelected"
@ -809,10 +805,6 @@ export default {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: 0 0.75rem; padding: 0 0.75rem;
} }
@include media-breakpoint-up(xl) {
width: 33.3333333%;
flex: 0 0 auto;
}
} }
} }
} }

2
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="text-center"> <div class="text-left">
<div class="update-zip-text-link"> <div class="update-zip-text-link">
<textLink <textLink
id="serviceZipLinkPromptId" id="serviceZipLinkPromptId"

8
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
View file

@ -2,11 +2,11 @@
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<baseInputButton <baseInputButton
v-bind="$props" v-bind="$props"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2" buttonWrapperClasses="list-group base-input-button rounded-pill list-button d-flex flex-column w-100 mb-2"
v-model="selectedValue"> v-model="selectedValue">
<div <div
:aria-label="buttonLabel" :aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4"> class="button-content list-button-content rounded-pill d-flex flex-column justify-content-center py-3 px-4 p-md-4">
<div class="row-one"> <div class="row-one">
<span class="m-0 button-label-copy text-truncate" :class="textPosition"> <span class="m-0 button-label-copy text-truncate" :class="textPosition">
{{ buttonLabel }} {{ buttonLabel }}
@ -144,7 +144,6 @@ export default {
position: relative; position: relative;
background: $white; background: $white;
transition: all 150ms linear; transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;
@ -163,6 +162,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1.5rem; line-height: 1.5rem;
justify-content: center;
.button-label-copy { .button-label-copy {
font-weight: 500; font-weight: 500;
@ -232,7 +232,7 @@ export default {
} }
.row-two { .row-two {
text-align: left; text-align: center;
} }
} }
</style> </style>

2
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -16,7 +16,7 @@
:questionText="questionText" :questionText="questionText"
:answers="answers" :answers="answers"
groupName="chooseShop" groupName="chooseShop"
textPosition="text-start" textPosition="text-center"
v-model="selectedProviderNumber" v-model="selectedProviderNumber"
isRequired isRequired
validationRules="option-required" /> validationRules="option-required" />

12
src/layouts/service-zip/service-zip.vue
View file

@ -1,14 +1,10 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div> <div>
<textboxQuestion <textboxQuestion

22
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -1,13 +1,9 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="container-fluid page-container-grouped-styles vehicle-damage"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<alert <alert
ref="vehicleChangeAlert" ref="vehicleChangeAlert"
@ -18,7 +14,7 @@
:isDismissible="false" /> :isDismissible="false" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<damageLocationQuestion <damageLocationQuestion
ref="damageLocation" ref="damageLocation"
@ -27,8 +23,8 @@
groupName="DamageLocationQuestion" /> groupName="DamageLocationQuestion" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6 col-xl-4"> <div class="col-md-6">
<windshieldOptions <windshieldOptions
class="windshield-options" class="windshield-options"
ref="windshieldOptions" ref="windshieldOptions"
@ -61,8 +57,8 @@
validationRules="replace-options-required" /> validationRules="replace-options-required" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row">
<div class="col-md-6 col-xl-4"> <div class="col-md-6">
<navbar <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!isContinueEnabled" :isForwardActionDisabled="!isContinueEnabled"

12
src/layouts/vehicle/vehicle.vue
View file

@ -1,13 +1,9 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid"> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="row justify-content-center"> <div class="container">
<div class="col-md-6"> <div class="row">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <div class="col-12 col-md-10 col-lg-8 col-xl-7">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
<vehicleQuestion <vehicleQuestion
ref="vehicleYearQuestion" ref="vehicleYearQuestion"

8
src/styles/common-error-styles.scss
View file

@ -202,21 +202,21 @@ html {
.form-test-invalid { .form-test-invalid {
&.btn.btn-primary { &.btn.btn-primary {
color: $gray-600; color: $white;
background: $gray-200; background: $red;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
} }
&.btn.btn-primary:hover, &.btn.btn-primary:hover,
&.btn.btn-primary:focus { &.btn.btn-primary:focus {
background: $gray-200; background: $red;
box-shadow: none; box-shadow: none;
} }
&.btn.btn-primary:focus-visible { &.btn.btn-primary:focus-visible {
box-shadow: box-shadow:
0 0 0 3px $white, 0 0 0 3px $white,
0 0 0 5.5px $gray-700; 0 0 0 5.5px $red;
} }
} }
} }

13
src/styles/common-styles.scss
View file

@ -8,13 +8,10 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100dvh; min-height: 100dvh;
form { }
> .container-fluid { .container {
margin-bottom: -1rem; @include media-breakpoint-up(xl) {
@media screen and (min-width: 1090px) { max-width: 1020px;
margin-bottom: -5rem;
}
}
} }
} }
.container-fluid { .container-fluid {
@ -90,7 +87,7 @@ body {
} }
} }
.modal-open:not(.prevent-modal-scroll) { .modal-open:not(.prevent-modal-scroll) {
.container-fluid { .container {
&.page-container-grouped-styles { &.page-container-grouped-styles {
overflow: hidden; overflow: hidden;
height: auto; height: auto;

22
src/styles/shared-input-button-styles.scss
View file

@ -1,3 +1,23 @@
.base-input-button {
&.rounded-pill {
&:not(.has-error):hover {
cursor: pointer;
&.list-button,
&.list-button-horizontal,
&.list-card {
&:not(.selected) {
position: relative;
z-index: 5;
@include box-shadow-hover($blue-300);
border-radius: 50rem;
}
}
}
}
}
.base-input-button { .base-input-button {
&:not(.has-error):hover { &:not(.has-error):hover {
cursor: pointer; cursor: pointer;
@ -9,7 +29,7 @@
position: relative; position: relative;
z-index: 5; z-index: 5;
@include box-shadow-hover($blue-300); @include box-shadow-hover($blue-300);
border-radius: 0.5rem; border-radius: .5rem;
} }
} }
} }

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

@ -121,8 +121,8 @@ $body-color: $gray-600;
//Fonts //Fonts
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif; $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", $font-family-monospace:
monospace; UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case // stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif; $font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace; $font-family-code: $font-family-monospace;
@ -199,6 +199,7 @@ $enable-important-utilities: false;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
md: 768px, md: 768px,
lg: 992px,
xl: 1200px, xl: 1200px,
xxl: 1440px, xxl: 1440px,
); );

40
src/ux-components/button-main/button-main.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<button <button
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay" class="btn rounded-pill d-flex align-items-center justify-content-center py-3 px-6 delay"
:class="[ :class="[
isPrimary ? 'btn-primary' : 'btn-secondary', isPrimary ? 'btn-primary' : 'btn-secondary',
isFloat ? 'float-end' : '', isFloat ? 'float-end' : '',
@ -65,19 +65,18 @@ export default {
.btn { .btn {
&.btn-primary { &.btn-primary {
position: relative; position: relative;
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: $red;
border: none; border: none;
border-radius: $border-radius-lg;
color: $white; color: $white;
justify-content: center; justify-content: center;
font-weight: 500; font-weight: 500;
@media (hover: hover) { @media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%); background: $red;
} }
&:focus { &:focus {
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
} }
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { &:focus-visible {
@ -85,27 +84,26 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
color: $white; color: $white;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%); background: $red;
} }
&:disabled { &:disabled {
background: $gray-200 !important; background: $gray-200 !important;
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important; background: $red !important;
color: $gray-600 !important; color: $white !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: none; border: none;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
background: $blue-700; background: $red;
box-shadow: box-shadow:
0 0 0 3px, 0 0 0 3px,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
pointer-events: auto; pointer-events: auto;
} }
&.delay { &.delay {
@ -116,15 +114,13 @@ export default {
&.btn-secondary { &.btn-secondary {
position: relative; position: relative;
background: transparent; background: transparent;
border: 1px solid $blue; border: 1px solid $red;
border-radius: $border-radius-lg; color: $red;
color: $blue;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
height: 3rem; height: 3rem;
&:hover { &:hover {
color: $white; color: $white;
@include blue-gradient;
} }
&:focus, // Mouse, touch, stylus focus &:focus, // Mouse, touch, stylus focus
&:focus-visible { &:focus-visible {
@ -132,23 +128,20 @@ export default {
outline: none; outline: none;
box-shadow: box-shadow:
0 0 0 3px $white, 0 0 0 3px $white,
0 0 0 5.5px $blue-700; 0 0 0 5.5px $red;
color: $white; color: $white;
@include blue-gradient;
} }
&:disabled { &:disabled {
background: transparent; background: transparent;
color: $gray-550 !important; color: $red !important;
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: 1px solid $gray-550; border: 1px solid $red;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
@include blue-gradient;
pointer-events: none; pointer-events: none;
} }
&.delay { &.delay {
@ -160,7 +153,6 @@ export default {
position: relative; position: relative;
background: $green-100; background: $green-100;
border: 1px solid $green-400; border: 1px solid $green-400;
border-radius: $border-radius-lg;
color: $black; color: $black;
font-weight: 500; font-weight: 500;
transition: all 150ms linear; transition: all 150ms linear;
@ -185,13 +177,11 @@ export default {
font-weight: 400; font-weight: 400;
height: 48px; height: 48px;
border: 1px solid $gray-550; border: 1px solid $gray-550;
border-radius: $border-radius-lg;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
} }
&.has-loader { &.has-loader {
color: $white; color: $white;
@include blue-gradient;
pointer-events: none; pointer-events: none;
} }
&.delay { &.delay {

3
src/ux-components/list-button/list-button.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<baseInputButton <baseInputButton
v-bind="$props" v-bind="$props"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2" buttonWrapperClasses="list-group base-input-button list-button rounded-pill d-flex flex-column w-100 mb-2"
v-model="selectedValue"> v-model="selectedValue">
<div <div
:aria-label="buttonLabel" :aria-label="buttonLabel"
@ -102,7 +102,6 @@ export default {
position: relative; position: relative;
background: $white; background: $white;
transition: all 150ms linear; transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500; border: 1px solid $gray-500;
width: 100%; width: 100%;
outline: none; outline: none;