Moved div to inside label so month name was hoverable with label.

Updated CSS accordingly.
This commit is contained in:
Bryan Mauger 2022-10-13 09:30:50 -04:00
parent 204807bf79
commit 2bfb265291

View file

@ -43,8 +43,8 @@
<input 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>
<span class="sr-only">October 1st</span>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</label>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="oct-2" />
@ -168,8 +168,10 @@
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="nov-1" />
<label class="future-day selectable-day" for="nov-1"><span>1</span></label>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
<label class="future-day selectable-day" for="nov-1"><span>1</span>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</label>
</div>
<div class="grid-item radio-wrapper">
<input type="radio" name="day-of-month" id="nov-2" />
@ -318,7 +320,7 @@ export default {
&:after {
background-color: $white;
}
+ .first-day {
.first-day {
color: $white;
}
}
@ -331,7 +333,7 @@ export default {
&:after {
background-color: $white;
}
+ .first-day {
.first-day {
color: $white;
}
}
@ -380,7 +382,7 @@ export default {
position: absolute;
top: 28px;
}
+ .first-day {
.first-day {
color: $blue;
}
}
@ -414,7 +416,7 @@ export default {
color: $white;
}
}
+ .first-day {
.first-day {
color: $white;
}
}