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

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

Browse source 
Updated CSS accordingly.
This commit is contained in:
Bryan Mauger 2022-10-13 09:30:50 -04:00
parent 204807bf79
commit 2bfb265291
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/common-components/date-picker/date-picker.vue
View file

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