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

Merge pull request #3085 from Safelite/feature/CASH-2378

Browse source 
CASH-2378 - CSS updates
This commit is contained in:
AdamCaouetteSafelite 2026-03-05 15:37:23 -05:00 committed by GitHub
commit d071c36b67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 83 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/layouts/schedule/multi-location-modal/multi-location-modal.vue
View file

@ -300,13 +300,15 @@ export default {
.modal-content { .modal-content {
.modal-header { .modal-header {
flex-direction: column; flex-direction: column;
text-align: center;
padding: 0 1rem;
& > span { & > span {
color: $red; color: $red;
font-size: $font-size-14;
font-weight: $font-weight-600; font-weight: $font-weight-600;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-sans-serif-semibold;
} }
.modal-title { .modal-title {
font-size: $font-size-20; font-size: $font-size-20;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
@ -315,6 +317,10 @@ export default {
.modal-body { .modal-body {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
.button-question {
margin-top: 0.75rem;
}
.modal-body-inner { .modal-body-inner {
ul { ul {
list-style: none; list-style: none;

154
src/layouts/schedule/multi-location-modal/multi-location-radio/multi-location-radio.vue
View file

@ -1,26 +1,25 @@
<template> <template>
<baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue"> <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
<div class="location-label" for="testradio"> <div class="radio-label" for="testradio">
<div class="location-specs"> <div class="location-specs">
<div class="row"> <div class="row">
<div class="col md-6"> <div class="col md-6">
<p class="m-0"> <p class="m-0">
<span v-html="this.buttonLabel"></span> <span v-html="this.buttonLabel"></span>
</p> </p>
<span v-html="this.buttonAuxillaryCopy"></span> <span class="service-tag" v-html="this.buttonAuxillaryCopy"></span>
<p <p
class="sub-label m-0" class="sub-label m-0"
v-if="this.buttonLabelSubCopy" v-if="this.buttonLabelSubCopy"
v-html="this.buttonLabelSubCopy"></p> v-html="this.buttonLabelSubCopy"></p>
</div> </div>
<hr />
<div class="col md-6 location-info"> <div class="col md-6 location-info">
<div <div
class="location-info-label" class="location-info-label"
v-if="this.buttonBodyCopy" v-if="this.buttonBodyCopy"
v-html="this.buttonBodyCopy"></div> v-html="this.buttonBodyCopy"></div>
</div> </div>
<div class="time-info" v-html="this.buttonFooterCopy"></div> <div class="col md-6 time-info" v-html="this.buttonFooterCopy"></div>
</div> </div>
</div> </div>
</div> </div>
@ -83,17 +82,6 @@ export default {
&:last-child { &:last-child {
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
} }
@include media-breakpoint-up(md) {
margin: 1rem 0.5rem 0 0.5rem;
display: flex;
flex-direction: column;
&:first-child {
margin: 1rem 0.5rem 0 0;
}
&:last-child {
margin: 1rem 0 0 0.5rem;
}
}
label { label {
display: block; display: block;
@ -108,7 +96,7 @@ export default {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
+ .location-label { + .radio-label {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
position: relative; position: relative;
@ -124,7 +112,6 @@ export default {
min-height: 52px; min-height: 52px;
max-height: 126px; max-height: 126px;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
max-height: 500px;
padding-bottom: 3rem; padding-bottom: 3rem;
} }
transition: max-height 0.25s ease-in; transition: max-height 0.25s ease-in;
@ -158,7 +145,7 @@ export default {
} }
&:hover { &:hover {
+ .location-label { + .radio-label {
&:before { &:before {
border: 1px solid #8e9292; border: 1px solid #8e9292;
box-shadow: box-shadow:
@ -169,35 +156,27 @@ export default {
} }
&:checked { &:checked {
+ .location-label { + .radio-label {
.location-specs {
max-height: 1000px;
}
}
+ .location-label {
.location-specs { .location-specs {
.hide-when-closed { .hide-when-closed {
display: block; display: block;
} }
p:first-child { .service-tag {
font-weight: 600; background: $blue;
color: $blue-150;
} }
} }
} }
+ .location-label { + .radio-label {
border: 1px solid $blue; border: 1px solid $blue;
max-height: 500px;
background-color: $blue-100; background-color: $blue-100;
.special-save-box {
background-color: $green-200;
}
} }
+ .location-label { + .radio-label {
&:before { &:before {
box-shadow: 0px 0px 0px 1px $blue; box-shadow: 0px 0px 0px 1px $blue;
} }
} }
+ .location-label { + .radio-label {
&:after { &:after {
background: $blue; background: $blue;
} }
@ -205,7 +184,7 @@ export default {
} }
&:focus { &:focus {
+ .location-label { + .radio-label {
&:before { &:before {
border: 2px solid $blue; border: 2px solid $blue;
} }
@ -213,77 +192,70 @@ export default {
} }
} }
.package-footer {
color: $red;
font-weight: 600;
}
.location-specs { .location-specs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
transition: all 0.5s ease; transition: all 0.5s ease;
@include media-breakpoint-up(md) {
max-height: 500px;
}
.row { .row {
align-items: center; align-items: center;
.col {
flex: 1 0 100%;
}
.service-tag {
font-size: $font-size-12;
font-family: $font-family-sans-serif-semibold;
position: absolute;
top: 0;
right: 0;
background: $blue-150;
color: $blue;
padding: 0.25rem 0.5rem;
border-radius: 1rem;
margin: 0.5rem;
}
p {
font-size: $font-size-14;
& > span {
color: $black;
font-family: $font-family-sans-serif-semibold;
font-weight: $font-weight-bold;
font-size: $font-size-base;
}
}
.sub-label {
margin-bottom: 0.5rem !important;
border-bottom: 1px solid $gray-1000;
}
} }
.pricing-info .insurance-pricing span { .location-info-label,
font-size: 0.875rem; .time-info {
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif; font-family: $font-family-sans-serif;
font-size: $font-size-12;
} }
.location-info-label {
p {
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
white-space: nowrap;
&:first-child {
font-weight: 400;
}
span {
&.pricing-info {
color: $green;
font-size: 0.875rem;
font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
@include media-breakpoint-up(md) {
position: absolute;
bottom: 0.75rem;
left: 0;
width: 100%;
margin-left: 1.25rem;
}
span.strikethrough-price {
text-decoration: line-through;
font-size: 0.75rem;
font-weight: 400;
color: $gray-550;
padding-right: 8px;
}
}
}
&.sub-label {
color: $green;
text-transform: uppercase;
font-size: 0.75rem;
}
}
ul { &:before {
margin: 1rem 0 0 -5px; content: "";
padding: 0; display: inline-block;
li { position: relative;
font-size: 0.875rem; top: 0;
line-height: 1.714; margin-right: 0.375rem;
color: $gray-550; width: 0.75rem;
a { height: 1rem;
line-height: 1.714; background-image: url(~@/assets/img/icons/location-pin.svg);
padding: 0; background-repeat: no-repeat;
} background-position: 0 50%;
background-size: 0.75rem auto;
padding: 0 0.75rem 0 0;
@include blue-filter();
} }
} }

6
src/styles/mixins/customMixins.scss
View file

@ -20,3 +20,9 @@
} }
// Usage: @include responsive-font-size-md(mobile-font-size-in-rem, desktop-font-size-in-rem); // Usage: @include responsive-font-size-md(mobile-font-size-in-rem, desktop-font-size-in-rem);
// Example: @include responsive-font-size-md(0.875rem, 1rem); // Example: @include responsive-font-size-md(0.875rem, 1rem);
// Filter to use on SVG elements that are background
@mixin blue-filter {
filter: brightness(0) saturate(100%) invert(31%) sepia(68%) saturate(1676%) hue-rotate(186deg)
brightness(93%) contrast(110%);
}

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

@ -127,6 +127,12 @@ $body-color: $gray-600;
$font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif; $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
$font-family-monospace: $font-family-monospace:
UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-sans-serif-semibold: UrbanistSemibold, Arial, Helvetica, sans-serif;
$font-family-sans-serif-bold: UrbanistBold, Arial, Helvetica, sans-serif;
$font-family-sans-serif-extrabold: UrbanistExtraBold, Arial, Helvetica, sans-serif;
$font-family-sans-serif-medium-italic: UrbanistMedium_Italic, Arial, Helvetica, sans-serif;
$font-family-sans-serif-bold-italic: UrbanistBold_Italic, Arial, Helvetica, sans-serif;
// 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;