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;
}
@media (min-width: 500px) {
.form-group {
width: 80%;
}
}
@media (min-width: 800px) {
.form-group {
width: 60%;
}
}
.list-group {
margin-bottom: 20px;
padding-left: 0;

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

@ -188,16 +188,16 @@
margin-bottom: 2px;
}
@media (min-width: 500px) {
.form-group {
width: 80%;
}
}
@media (min-width: 800px) {
.form-group {
width: 60%;
}
}
// @media (min-width: 500px) {
// .form-group {
// width: 80%;
// }
// }
// @media (min-width: 800px) {
// .form-group {
// width: 60%;
// }
// }
.list-group {
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
v-if="questionText && answers && answers.length > 0"
class="question-text d-flex"
class="question-text"
:class="{ 'small-question-text': isSmallQuestionText }">
<span class="fw-bold w-100" :class="[labelBold ? 'span-bold' : '']">
{{ questionText }}
@ -76,10 +76,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
</div>
</fieldset>
</div>
<div
id="form-test-error"
class="row form-test-error"
:class="isErrorCentered ? 'text-center' : ''">
<div id="form-test-error" class="row form-test-error">
<error-message
role="comment"
aria-atomic="true"
@ -249,12 +246,6 @@ export default {
return classes;
},
isErrorCentered() {
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length <= 2) {
return true;
}
return false;
},
buttonsInfo() {
return (Array.isArray(this.answers) ? this.answers : [])?.map((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-primary {
position: relative;
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
background: $red;
border: none;
border-radius: $border-radius-lg;
color: $white;
justify-content: center;
font-weight: 500;
@media (hover: hover) {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
background: $red;
}
&:focus {
box-shadow:
0 0 0 3px,
0 0 0 5.5px $blue-700;
0 0 0 5.5px $red;
}
&:focus, // Mouse, touch, stylus focus
&:focus-visible {
@ -86,27 +85,26 @@ export default {
outline: none;
box-shadow:
0 0 0 3px,
0 0 0 5.5px $blue-700;
0 0 0 5.5px $red;
color: $white;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
background: $red;
}
&:disabled {
background: $gray-200 !important;
background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
background: $red !important;
color: $gray-600 !important;
font-weight: 400;
height: 48px;
border: none;
border-radius: $border-radius-lg;
cursor: pointer;
pointer-events: all;
}
&.has-loader {
color: $white;
background: $blue-700;
background: $red;
box-shadow:
0 0 0 3px,
0 0 0 5.5px $blue-700;
0 0 0 5.5px $red;
pointer-events: none;
}
&.delay {
@ -117,8 +115,7 @@ export default {
&.btn-secondary {
position: relative;
background: transparent;
border: 1px solid $blue;
border-radius: $border-radius-lg;
border: 1px solid $red;
color: $blue;
font-weight: 500;
transition: all 150ms linear;
@ -133,7 +130,7 @@ export default {
outline: none;
box-shadow:
0 0 0 3px $white,
0 0 0 5.5px $blue-700;
0 0 0 5.5px $red;
color: $white;
@include blue-gradient;
}
@ -142,14 +139,12 @@ export default {
color: $gray-550 !important;
font-weight: 400;
height: 48px;
border: 1px solid $gray-550;
border-radius: $border-radius-lg;
border: 1px solid $red;
cursor: pointer;
pointer-events: all;
}
&.has-loader {
color: $white;
@include blue-gradient;
pointer-events: none;
}
&.delay {

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

@ -1,15 +1,5 @@
<template>
<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">
<textLink
linkType="newWindowLink"
@ -64,13 +54,6 @@ export default {
margin-top: auto;
padding: 0 0 2rem 0;
.skyline {
height: 96px;
}
.neighborhood {
height: 48px;
}
p {
font-size: 0.875rem;
margin-top: 0.25rem;

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

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

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

@ -6,9 +6,12 @@
:class="[isActive ? 'active' : '']"
@click="toggleModal"
aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<span class="step-numbers">Step 1 of 4</span>
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button>
</div>
<div
@ -111,35 +114,56 @@ export default {
button {
border: none;
&.menu-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
width: auto;
height: auto;
border-radius: 1.5rem;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
background-color: $white;
position: relative;
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: 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;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
@include media-breakpoint-up(md) {
padding: 0.25rem 1rem;
}
&.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, -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 {
&.menu-modal {
//left: auto;
height: calc(100% - 56px);
top: 56px;
height: calc(100% - 68px);
top: 68px;
border-top: 1px solid $gray-300;
overflow-x: visible;
overflow-y: visible;
@include media-breakpoint-up(md) {
height: calc(100% - 104px);
top: 104px;
}
.modal-body {
padding: 2rem;
.ccpa-icon {
@ -190,23 +218,30 @@ export default {
align-items: center;
padding: 0; //Required to prevent 'squish' on iPhone
z-index: 1056;
.bar1,
.bar2,
.bar3 {
width: 14px;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
}
&.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px);
}
&.active .bar2 {
opacity: 0;
}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px);
.bars {
width: 1.5rem;
height: 1.5rem;
display: flex;
justify-content: space-around;
flex-direction: column;
.bar1,
.bar2,
.bar3 {
width: 1.5rem;
height: 2px;
background-color: $blue;
margin: 1px 0;
transition: 0.25s;
}
&.active .bar1 {
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">
.progress-bar-outer {
background: $blue-100;
height: 10px;
height: 5px;
position: relative;
border-radius: 10px;
border-radius: 0;
width: 100%;
margin-top: 1rem;
margin-top: 0;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
.progress-bar-inner {
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
will-change: width;
height: 10px;
background-color: $blue;
height: 5px;
background-color: $red;
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
border-radius: 0;
}
progress {
height: 10px;
height: 5px;
width: 100%;
/* Firefox */
appearance: none;
background-color: $blue-100;
background-color: $gray-100;
border: 0;
border-radius: $border-radius-pill;
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>

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

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

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

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

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

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

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

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

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

@ -1,16 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div
class="container-fluid page-container-grouped-styles quote-page"
: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>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<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" />
<cashOrInsuranceQuestion
ref="cashOrInsurance"
@ -919,6 +913,11 @@ export default {
.text-block {
display: block;
}
:deep(.container .funnel-sub-header) {
display: flex;
align-items: center;
flex-direction: column;
}
:deep(.promo-modal-question a) {
@include responsive-font-size-md(0.875rem, 1rem);
}

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

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

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

@ -1,14 +1,10 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 mt-4">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container page-container-grouped-styles">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion
@ -69,8 +65,8 @@
alertClass="alert-success" />
</div>
</div>
<div class="row justify-content-center appointment-type">
<div class="col-md-6">
<div class="row appointment-type">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<appointmentTypeQuestion
v-model="selectedAppointmentType"
v-show="isAppointmentTypeDisplayed"
@ -87,8 +83,8 @@
labelBold="true" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<div class="text-center">
<textBlock
v-if="mobileFeeApplies && isMobileSelected"
@ -809,10 +805,6 @@ export default {
@include media-breakpoint-up(md) {
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>
<div class="text-center">
<div class="text-left">
<div class="update-zip-text-link">
<textLink
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">
<baseInputButton
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">
<div
: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">
<span class="m-0 button-label-copy text-truncate" :class="textPosition">
{{ buttonLabel }}
@ -144,7 +144,6 @@ export default {
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
@ -163,6 +162,7 @@ export default {
display: flex;
align-items: center;
line-height: 1.5rem;
justify-content: center;
.button-label-copy {
font-weight: 500;
@ -232,7 +232,7 @@ export default {
}
.row-two {
text-align: left;
text-align: center;
}
}
</style>

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

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

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

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

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

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

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

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

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

@ -202,21 +202,21 @@ html {
.form-test-invalid {
&.btn.btn-primary {
color: $gray-600;
background: $gray-200;
color: $white;
background: $red;
cursor: pointer;
pointer-events: all;
font-weight: $font-weight-normal;
}
&.btn.btn-primary:hover,
&.btn.btn-primary:focus {
background: $gray-200;
background: $red;
box-shadow: none;
}
&.btn.btn-primary:focus-visible {
box-shadow:
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;
flex-direction: column;
min-height: 100dvh;
form {
> .container-fluid {
margin-bottom: -1rem;
@media screen and (min-width: 1090px) {
margin-bottom: -5rem;
}
}
}
.container {
@include media-breakpoint-up(xl) {
max-width: 1020px;
}
}
.container-fluid {
@ -90,7 +87,7 @@ body {
}
}
.modal-open:not(.prevent-modal-scroll) {
.container-fluid {
.container {
&.page-container-grouped-styles {
overflow: hidden;
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 {
&:not(.has-error):hover {
cursor: pointer;
@ -9,7 +29,7 @@
position: relative;
z-index: 5;
@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
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
$font-family-monospace:
UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;
@ -199,6 +199,7 @@ $enable-important-utilities: false;
$grid-breakpoints: (
xs: 0,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
);

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

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

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

@ -1,7 +1,7 @@
<template>
<baseInputButton
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">
<div
:aria-label="buttonLabel"
@ -102,7 +102,6 @@ export default {
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;