WIP date picker
update hover state, ID's.
This commit is contained in:
Bryan Mauger
parent
eea0b883a7
commit
d8cfcab66b
1 changed files with 76 additions and 72 deletions
|
|
@ -16,145 +16,145 @@
|
|||
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtypast" />
|
||||
<label class="past-day" for="thirtypast"><span>30</span></label>
|
||||
<input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-30" />
|
||||
<label class="past-day" for="sep-30"><span>30</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtyonepast" />
|
||||
<label class="past-day" for="thirtyonepast"><span>31</span></label>
|
||||
<input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-31" />
|
||||
<label class="past-day" for="sep-31"><span>31</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="one" />
|
||||
<label class="highlighted-day selectable-day" for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-1" />
|
||||
<label class="highlighted-day selectable-day" for="oct-1"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
|
||||
<div v-if="isFirstDayOfMonth" class="current-month first-of-month">OCT</div>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="two" />
|
||||
<label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="two"><span>2</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-2" />
|
||||
<label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-2"><span>2</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="three" />
|
||||
<label class="highlighted-day selectable-day" for="three"><span>3</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-3" />
|
||||
<label class="highlighted-day selectable-day" for="oct-3"><span>3</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="four" />
|
||||
<label class="highlighted-day selectable-day" for="four"><span>4</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-4" />
|
||||
<label class="highlighted-day selectable-day" for="oct-4"><span>4</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="five" />
|
||||
<label class="highlighted-day selectable-day" for="five"><span>5</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-5" />
|
||||
<label class="highlighted-day selectable-day" for="oct-5"><span>5</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="six" />
|
||||
<label class="highlighted-day selectable-day" for="six"><span>6</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-6" />
|
||||
<label class="highlighted-day selectable-day" for="oct-6"><span>6</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="seven" />
|
||||
<label class="highlighted-day selectable-day" for="seven"><span>7</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-7" />
|
||||
<label class="highlighted-day selectable-day" for="oct-7"><span>7</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="eight" />
|
||||
<label class="highlighted-day selectable-day" for="eight"><span>8</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-8" />
|
||||
<label class="highlighted-day selectable-day" for="oct-8"><span>8</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nine" />
|
||||
<label class="highlighted-day selectable-day" for="nine"><span>9</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-9" />
|
||||
<label class="highlighted-day selectable-day" for="oct-9"><span>9</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="ten" />
|
||||
<label class="highlighted-day selectable-day" for="ten"><span>10</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-10" />
|
||||
<label class="highlighted-day selectable-day" for="oct-10"><span>10</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="eleven" />
|
||||
<label class="highlighted-day selectable-day" for="eleven"><span>11</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-11" />
|
||||
<label class="highlighted-day selectable-day" for="oct-11"><span>11</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twelve" />
|
||||
<label class="highlighted-day selectable-day" for="twelve"><span>12</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-12" />
|
||||
<label class="highlighted-day selectable-day" for="oct-12"><span>12</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="thirteen" />
|
||||
<label class="highlighted-day selectable-day" for="thirteen"><span>13</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-13" />
|
||||
<label class="highlighted-day selectable-day" for="oct-13"><span>13</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="fourteen" />
|
||||
<label class="highlighted-day selectable-day" for="fourteen"><span>17</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-14" />
|
||||
<label class="highlighted-day selectable-day" for="oct-14"><span>17</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="fifteen" />
|
||||
<label class="highlighted-day selectable-day" for="fifteen"><span>15</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-15" />
|
||||
<label class="highlighted-day selectable-day" for="oct-15"><span>15</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="sixteen" />
|
||||
<label class="highlighted-day selectable-day" for="sixteen"><span>16</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-16" />
|
||||
<label class="highlighted-day selectable-day" for="oct-16"><span>16</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="seventeen" />
|
||||
<label class="highlighted-day selectable-day" for="seventeen"><span>17</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-17" />
|
||||
<label class="highlighted-day selectable-day" for="oct-17"><span>17</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="eighteen" />
|
||||
<label class="highlighted-day selectable-day" for="eighteen"><span>18</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-18" />
|
||||
<label class="highlighted-day selectable-day" for="oct-18"><span>18</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nineteen" />
|
||||
<label class="highlighted-day selectable-day" for="nineteen"><span>19</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-19" />
|
||||
<label class="highlighted-day selectable-day" for="oct-19"><span>19</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twenty" />
|
||||
<label class="highlighted-day selectable-day" for="twenty"><span>20</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-20" />
|
||||
<label class="highlighted-day selectable-day" for="oct-20"><span>20</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyone" />
|
||||
<label class="highlighted-day selectable-day" for="twentyone"><span>21</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-21" />
|
||||
<label class="highlighted-day selectable-day" for="oct-21"><span>21</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentytwo" />
|
||||
<label class="highlighted-day selectable-day" for="twentytwo"><span>22</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-22" />
|
||||
<label class="highlighted-day selectable-day" for="oct-22"><span>22</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentythree" />
|
||||
<label class="highlighted-day selectable-day" for="twentythree"><span>23</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-23" />
|
||||
<label class="highlighted-day selectable-day" for="oct-23"><span>23</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyfour" />
|
||||
<label class="highlighted-day selectable-day" for="twentyfour"><span>24</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-24" />
|
||||
<label class="highlighted-day selectable-day" for="oct-24"><span>24</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyfive" />
|
||||
<label class="highlighted-day selectable-day" for="twentyfive"><span>25</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-25" />
|
||||
<label class="highlighted-day selectable-day" for="oct-25"><span>25</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentysix" />
|
||||
<label class="highlighted-day selectable-day" for="twentysix"><span>26</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-26" />
|
||||
<label class="highlighted-day selectable-day" for="oct-26"><span>26</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyseven" />
|
||||
<label class="highlighted-day selectable-day" for="twentyseven"><span>27</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-27" />
|
||||
<label class="highlighted-day selectable-day" for="oct-27"><span>27</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyeight" />
|
||||
<label class="highlighted-day selectable-day" for="twentyeight"><span>28</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-28" />
|
||||
<label class="highlighted-day selectable-day" for="oct-28"><span>28</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentynine" />
|
||||
<label class="highlighted-day selectable-day" for="twentynine"><span>29</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-29" />
|
||||
<label class="highlighted-day selectable-day" for="oct-29"><span>29</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="thirty" />
|
||||
<label class="highlighted-day selectable-day" for="thirty"><span>30</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-30" />
|
||||
<label class="highlighted-day selectable-day" for="oct-30"><span>30</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="thirtyone" />
|
||||
<label class="highlighted-day selectable-day" for="thirtyone"><span>31</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="oct-31" />
|
||||
<label class="highlighted-day selectable-day" for="oct-31"><span>31</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="onefuture" />
|
||||
<label class="future-day selectable-day" for="onefuture"><span>1</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nov-1" />
|
||||
<label class="future-day selectable-day" for="nov-1"><span>1</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twofuture" />
|
||||
<label class="future-day selectable-day" for="twofuture"><span>2</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nov-2" />
|
||||
<label class="future-day selectable-day" for="nov-2"><span>2</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -295,7 +295,9 @@ export default {
|
|||
&:checked + label {
|
||||
color: $blue;
|
||||
//font-weight: 500;
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
&:checked + label p,
|
||||
&:checked + label span {
|
||||
|
|
@ -366,7 +368,9 @@ export default {
|
|||
|
||||
&:hover {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue