Code cleanup.

This commit is contained in:
Bryan Mauger 2022-10-13 08:40:10 -04:00
parent deea1abbe3
commit d0ba0aa8ee

View file

@ -41,7 +41,9 @@
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-1" /> <input tabindex="0" type="radio" name="day-of-month" id="oct-1" />
<label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-1"><span>1</span></label> <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-1"><span>1</span>
<span class="sr-only">October 1st</span>
</label>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div> <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</div> </div>
<div class="grid-item radio-wrapper"> <div class="grid-item radio-wrapper">
@ -195,15 +197,10 @@ export default {
name: "datePicker", name: "datePicker",
data() { data() {
return { return {
dayOfWeek: "Tuesday",
dayOfMonth: "1st",
pastMonth: "October",
currentMonth: "October", currentMonth: "October",
currentYear: "2022", currentYear: "2022",
isFirstDayOfMonth: true, isFirstDayOfMonth: true,
isCurrentDay: true, isCurrentDay: true,
isCurrentDayDot: true,
isPastDay: true,
}; };
}, },
}; };
@ -214,7 +211,6 @@ export default {
margin: 0 auto; margin: 0 auto;
max-width: 414px; max-width: 414px;
display: grid; display: grid;
//grid-template-columns: auto auto auto auto auto auto auto;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -306,6 +302,7 @@ export default {
&:focus-visible + label { &:focus-visible + label {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
} }
&:focus + label, &:focus + label,
&:checked:focus + label { &:checked:focus + label {
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1; box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
@ -326,6 +323,7 @@ export default {
} }
} }
} }
&:checked + label { &:checked + label {
color: $white; color: $white;
background: $blue; background: $blue;
@ -337,10 +335,6 @@ export default {
color: $white; color: $white;
} }
} }
&:checked + label p,
&:checked + label span {
//font-weight: 500;
}
} }
.first-day { .first-day {
@ -352,7 +346,6 @@ export default {
z-index: 1; z-index: 1;
} }
label { label {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -425,14 +418,10 @@ export default {
color: $white; color: $white;
} }
} }
+ p { + p {
display: none; display: none;
} }
} }
} }
} }
</style> </style>