Code cleanup.
This commit is contained in:
parent
deea1abbe3
commit
d0ba0aa8ee
1 changed files with 6 additions and 17 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue