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

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

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