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

CASH-2378 - CSS updates

Browse source
This commit is contained in:
Adam Caouette 2026-03-05 15:05:35 -05:00
parent dafd855f39
commit ef8ff581d5
4 changed files with 82 additions and 94 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-header {
flex-direction: column;
text-align: center;
padding: 0 1rem;
& > span {
color: $red;
font-size: $font-size-14;
font-weight: $font-weight-600;
text-transform: uppercase;
font-family: $font-family-sans-serif-semibold;
}
.modal-title {
font-size: $font-size-20;
font-weight: $font-weight-normal;
@ -315,6 +317,10 @@ export default {
.modal-body {
padding: 0.5rem 1rem;
.button-question {
margin-top: 0.75rem;
}
.modal-body-inner {
ul {
list-style: none;

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

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

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

@ -20,3 +20,8 @@
}
// 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);
// 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-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
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;