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

CASH-153 - new styling

Browse source
This commit is contained in:
Adam Caouette 2025-02-13 19:33:12 -05:00
parent 6881ff35ec
commit e201944b77
1 changed files with 24 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/digital-components/date-picker/date-picker-2.vue
View file

@ -750,8 +750,7 @@ export default {
.grid-item {
text-align: center;
// margin: 10px 3px;
margin: 0;
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
@ -810,50 +809,27 @@ export default {
position: relative;
display: flex;
justify-content: center;
// align-items: center;
align-items: flex-start;
align-items: flex-start;
outline: none;
// height: 1.5rem;
width: 100%;
height: 2.5rem;
width: 100%;
opacity: 1;
transition:
transition:
height ease 250ms,
opacity ease 250ms;
color: $gray-500;
background-color: $gray-100;
color: $gray-500;
background-color: $gray-100;
input[type="radio"] {
position: absolute; //override bootstrap
height: 0;
opacity: 0;
&:focus-visible + label {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + label,
&:checked:focus + label {
box-shadow:
0 0 0 3px #fff,
0 0 0 5.5px #1574a1;
background-color: $blue;
color: $white;
&.current-day {
&:after {
background-color: $white;
}
.first-day {
color: $white;
}
}
}
&:checked + label {
color: $white;
background: $blue;
background: $blue-100;
border: 2px solid $blue;
border-radius: 4px;
&:after {
background-color: $white;
}
@ -882,29 +858,25 @@ export default {
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 2.5rem;
// width: 2.5rem;
// height: 2.5rem;
min-height: 2.5rem;
width: 100%;
font-size: .75rem;
line-height: 1.2;
justify-content: flex-start;
padding: .25rem;
height: 3rem;
width: 100%;
font-size: 0.75rem;
line-height: 1.2;
justify-content: flex-start;
padding: 0.25rem;
span {
margin-top: .25rem;
margin-top: 0.25rem;
&.small {
font-size: 0.75rem;
color: $gray-550;
}
}
// &:hover,
&:checked {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px transparent;
@ -930,30 +902,16 @@ export default {
}
&.selectable-day {
background-color: $white;
background-color: $white;
label {
color: $blue;
// background-color: $blue-100;
// border: 1px solid $blue;
// min-width: 2.5rem;
// width: 2.5rem;
// border-radius: 50%;
span {
// text-underline-offset: 4px;
text-decoration: underline;
}
span {
text-decoration: underline;
}
}
}
// &.unavailable-day {
// label {
// color: $gray-500;
// background-color: $gray-100;
// border: none;
// pointer-events: none;
// }
// }
&.unavailable-day:not(&.sunday) {
label {
&::before {
@ -974,13 +932,11 @@ export default {
&:after {
content: "";
margin-top: .2rem;
margin-top: 0.2rem;
width: 0.25rem;
height: 0.25rem;
border-radius: 50%;
background-color: $black;
// position: absolute;
// top: 28px;
}
.first-day {
color: $blue;