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

CASH-499 WIP calendar updates.

Browse source
This commit is contained in:
Bryan Mauger 2025-04-10 17:00:04 -04:00
parent b1f4f9696d
commit fa3ae5cca3
1 changed files with 45 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/experiment-components/date-picker-for-pricing-by-day.vue
View file

@ -962,9 +962,7 @@ export default {
&.selectable-day { &.selectable-day {
label { label {
color: $blue;
background-color: $blue-100; background-color: $blue-100;
border: 1px solid $blue;
min-width: 2.5rem; min-width: 2.5rem;
width: 2.5rem; width: 2.5rem;
border-radius: 50%; border-radius: 50%;
@ -972,12 +970,11 @@ export default {
} }
&.unavailable-day { &.unavailable-day {
label { label {
color: $gray-500;
background-color: $gray-100;
border: none; border: none;
pointer-events: none; pointer-events: none;
} }
} }
//NEEDED?
&.unavailable-day:not(&.sunday) { &.unavailable-day:not(&.sunday) {
label { label {
&::before { &::before {
@ -987,7 +984,6 @@ export default {
left: -1rem; left: -1rem;
width: 1rem; width: 1rem;
height: 2.5rem; height: 2.5rem;
background: $gray-100;
} }
} }
} }
@ -1094,11 +1090,10 @@ export default {
} }
} }
} }
&.pricing-by-day {
// pricing by day override styles // pricing by day override styles
&.pricing-by-day {
.calendar-grid-container .grid-item { .calendar-grid-container .grid-item {
margin: 0; margin: 0 0 0.15rem 0;
} }
.month-year { .month-year {
grid-area: 1 / 1 / 2 / 8; grid-area: 1 / 1 / 2 / 8;
@ -1109,9 +1104,8 @@ export default {
.radio-wrapper { .radio-wrapper {
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
height: 3rem; height: 2.5rem;
color: $gray-500; color: $black;
background-color: $gray-100;
input[type="radio"] { input[type="radio"] {
&:focus-visible + label { &:focus-visible + label {
@ -1122,42 +1116,35 @@ export default {
&:checked:focus + label { &:checked:focus + label {
box-shadow: none; box-shadow: none;
background-color: $white; background-color: $white;
color: $blue; color: $black;
} }
&:checked + label { &:checked + label {
background: $blue-100; background: $blue-100;
border: 2px solid $blue; border: 2px solid $blue;
border-radius: 4px; border-radius: .25rem;
color: $blue; color: $black;
span {
font-family: AvertaSemibold;
font-weight: 400;
}
} }
} }
label { label {
flex-direction: column; flex-direction: column;
height: 3rem; height: 2.5rem;
width: 100%; width: 100%;
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1.2; line-height: 1.2;
justify-content: flex-start; justify-content: center;
padding: 0.25rem; padding: 0.25rem;
span {
margin-top: 0.25rem;
}
} }
&.selectable-day { &.selectable-day {
background-color: $white;
label { label {
background-color: $white; color: $black;
border: none; background-color: $blue-100;
min-width: 100%; min-width: 2.5rem;
width: 100%; width: 2.5rem;
height: -webkit-fill-available; border-radius: 0.25rem;
border-radius: 0;
cursor: pointer;
span {
text-decoration: underline;
}
} }
} }
&.current-day { &.current-day {
@ -1168,18 +1155,17 @@ export default {
} }
} }
} }
} &.show-pricing-by-day {
&.date-picker.show-pricing-by-day {
.radio-wrapper { .radio-wrapper {
&.selectable-day label span { &.selectable-day label span {
text-decoration: none; text-decoration: none;
color: $gray-600; color: $black;
font-weight: 400; font-weight: 400;
font-family: "AvertaSemibold"; font-family: "AvertaSemibold";
&.price { &.price {
color: $green; font-family: "AvertaRegular";
font-weight: 400;
} }
} }
&.upch-day label span.price { &.upch-day label span.price {
@ -1194,6 +1180,11 @@ export default {
} }
&:checked + label { &:checked + label {
color: $blue; color: $blue;
span {
font-weight: 400;
font-family: "AvertaSemibold";
}
}
} }
} }
} }