Merge remote-tracking branch 'origin/release/2025.08.21' into feature/CASH-1182
This commit is contained in:
commit
d5d3bb5cca
3 changed files with 48 additions and 30 deletions
|
|
@ -15,7 +15,9 @@
|
|||
v-show="shouldShowWebchatButton"
|
||||
v-on:click="webchatClicked"
|
||||
type="button"
|
||||
class="chat-button"></button>
|
||||
class="chat-button">
|
||||
<span>Chat Now</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
|
|
@ -197,6 +199,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.funnel-header {
|
||||
margin-bottom: 1rem;
|
||||
.container {
|
||||
padding: 1rem 0.75rem;
|
||||
display: flex;
|
||||
|
|
@ -206,14 +209,11 @@ export default {
|
|||
}
|
||||
}
|
||||
position: relative;
|
||||
padding: 0 0 1rem 0;
|
||||
padding: 0;
|
||||
|
||||
.button-container {
|
||||
&.webchat {
|
||||
margin-right: 1rem;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
margin-right: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -232,14 +232,28 @@ export default {
|
|||
|
||||
.webchat {
|
||||
.chat-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
width: 7.5rem;
|
||||
height: 2rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5rem 1.5rem;
|
||||
background-position: center;
|
||||
background-size: 2rem 2rem;
|
||||
background-position: right;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding-right: 2rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
font-family: "UrbanistSemibold";
|
||||
color: $blue;
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 2rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
span {
|
||||
@include media-breakpoint-down(md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,25 +39,14 @@
|
|||
<span class="dot4"></span>
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-between">
|
||||
<div class="step-containers">
|
||||
<span class="step-number">Step 1 of 4</span>
|
||||
<div class="step-containers" v-for="step in steps" :key="step.number">
|
||||
<span class="step-number">Step {{ step.number }} of 4</span>
|
||||
<br />
|
||||
<span class="step-name">Vehicle</span>
|
||||
</div>
|
||||
<div class="step-containers">
|
||||
<span class="step-number">Step 2 of 4</span>
|
||||
<br />
|
||||
<span class="step-name">Quote</span>
|
||||
</div>
|
||||
<div class="step-containers">
|
||||
<span class="step-number">Step 3 of 4</span>
|
||||
<br />
|
||||
<span class="step-name">Schedule</span>
|
||||
</div>
|
||||
<div class="step-containers">
|
||||
<span class="step-number">Step 4 of 4</span>
|
||||
<br />
|
||||
<span class="step-name">Review</span>
|
||||
<span
|
||||
class="step-name"
|
||||
:class="{ 'active-step': step.number === currentStepNumber }">
|
||||
{{ step.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,6 +96,14 @@ export default {
|
|||
currentStepNumber() {
|
||||
return getProgressBarStep(this.$route.name);
|
||||
},
|
||||
steps() {
|
||||
return [
|
||||
{ number: 1, name: "Vehicle" },
|
||||
{ number: 2, name: "Quote" },
|
||||
{ number: 3, name: "Schedule" },
|
||||
{ number: 4, name: "Review" },
|
||||
];
|
||||
},
|
||||
},
|
||||
components: {
|
||||
progressBar,
|
||||
|
|
@ -118,6 +115,10 @@ export default {
|
|||
.menu-modal-container {
|
||||
button {
|
||||
border: none;
|
||||
color: $blue;
|
||||
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
&.menu-button {
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
|
@ -254,6 +255,10 @@ export default {
|
|||
.step-name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.active-step {
|
||||
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-fullscreen {
|
||||
|
|
|
|||
|
|
@ -631,8 +631,7 @@ export default {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
.siteSubHeader {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.separator-line {
|
||||
grid-area: 2/1/2/8;
|
||||
|
|
|
|||
Loading…
Reference in a new issue