WIP update classes and markup.
This commit is contained in:
Bryan Mauger
parent
40e152df2c
commit
71f4dcc663
1 changed files with 104 additions and 69 deletions
|
|
@ -16,137 +16,153 @@
|
|||
<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="sep-30" />
|
||||
<input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-25" />
|
||||
<label class="past-day" for="sep-25"><span>25</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-26" />
|
||||
<label class="past-day" for="sep-26"><span>26</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" hidden type="radio" name="day-of-month" id="sep-27" />
|
||||
<label class="past-day" for="sep-27"><span>27</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" hidden type="radio" name="day-of-month" id="sep-28" />
|
||||
<label class="past-day" for="sep-28"><span>28</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" hidden type="radio" name="day-of-month" id="sep-29" />
|
||||
<label class="past-day" for="sep-29"><span>29</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" 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="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="oct-1" />
|
||||
<label class="highlighted-day selectable-day" for="oct-1"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
|
||||
<label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-1"><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="oct-2" />
|
||||
<label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-2"><span>2</span></label>
|
||||
<label class="selectable-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="oct-3" />
|
||||
<label class="highlighted-day selectable-day" for="oct-3"><span>3</span></label>
|
||||
<label class="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="oct-4" />
|
||||
<label class="highlighted-day selectable-day" for="oct-4"><span>4</span></label>
|
||||
<label class="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="oct-5" />
|
||||
<label class="highlighted-day selectable-day" for="oct-5"><span>5</span></label>
|
||||
<label class="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="oct-6" />
|
||||
<label class="highlighted-day selectable-day" for="oct-6"><span>6</span></label>
|
||||
<label class="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="oct-7" />
|
||||
<label class="highlighted-day selectable-day" for="oct-7"><span>7</span></label>
|
||||
<label class="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="oct-8" />
|
||||
<label class="highlighted-day selectable-day" for="oct-8"><span>8</span></label>
|
||||
<label class="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="oct-9" />
|
||||
<label class="highlighted-day selectable-day" for="oct-9"><span>9</span></label>
|
||||
<label class="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="oct-10" />
|
||||
<label class="highlighted-day selectable-day" for="oct-10"><span>10</span></label>
|
||||
<label class="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="oct-11" />
|
||||
<label class="highlighted-day selectable-day" for="oct-11"><span>11</span></label>
|
||||
<label class="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="oct-12" />
|
||||
<label class="highlighted-day selectable-day" for="oct-12"><span>12</span></label>
|
||||
<label class="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="oct-13" />
|
||||
<label class="highlighted-day selectable-day" for="oct-13"><span>13</span></label>
|
||||
<label class="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="oct-14" />
|
||||
<label class="highlighted-day selectable-day" for="oct-14"><span>17</span></label>
|
||||
<label class="selectable-day" for="oct-14"><span>14</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<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>
|
||||
<label class="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="oct-16" />
|
||||
<label class="highlighted-day selectable-day" for="oct-16"><span>16</span></label>
|
||||
<label class="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="oct-17" />
|
||||
<label class="highlighted-day selectable-day" for="oct-17"><span>17</span></label>
|
||||
<label class="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="oct-18" />
|
||||
<label class="highlighted-day selectable-day" for="oct-18"><span>18</span></label>
|
||||
<label class="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="oct-19" />
|
||||
<label class="highlighted-day selectable-day" for="oct-19"><span>19</span></label>
|
||||
<label class="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="oct-20" />
|
||||
<label class="highlighted-day selectable-day" for="oct-20"><span>20</span></label>
|
||||
<label class="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="oct-21" />
|
||||
<label class="highlighted-day selectable-day" for="oct-21"><span>21</span></label>
|
||||
<label class="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="oct-22" />
|
||||
<label class="highlighted-day selectable-day" for="oct-22"><span>22</span></label>
|
||||
<label class="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="oct-23" />
|
||||
<label class="highlighted-day selectable-day" for="oct-23"><span>23</span></label>
|
||||
<label class="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="oct-24" />
|
||||
<label class="highlighted-day selectable-day" for="oct-24"><span>24</span></label>
|
||||
<label class="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="oct-25" />
|
||||
<label class="highlighted-day selectable-day" for="oct-25"><span>25</span></label>
|
||||
<label class="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="oct-26" />
|
||||
<label class="highlighted-day selectable-day" for="oct-26"><span>26</span></label>
|
||||
<label class="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="oct-27" />
|
||||
<label class="highlighted-day selectable-day" for="oct-27"><span>27</span></label>
|
||||
<label class="selectable-day" for="oct-27"><span>27</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<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>
|
||||
<label class="selectable-day" for="oct-28"><span>28</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<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>
|
||||
<label class="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="oct-30" />
|
||||
<label class="highlighted-day selectable-day" for="oct-30"><span>30</span></label>
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nov-30" />
|
||||
<label class="selectable-day" for="nov-30"><span>30</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<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>
|
||||
<label class="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="nov-1" />
|
||||
|
|
@ -156,6 +172,18 @@
|
|||
<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 class="grid-item radio-wrapper future-day">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nov-3" />
|
||||
<label class="future-day selectable-day" for="nov-3"><span>3</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nov-4" />
|
||||
<label class="future-day selectable-day" for="nov-4"><span>4</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nov-5" />
|
||||
<label class="future-day selectable-day" for="nov-5"><span>5</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
@ -210,20 +238,6 @@ export default {
|
|||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
.nav-back {
|
||||
grid-area: 1 / 6 / 2 / 7;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button {
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-forward {
|
||||
grid-area: 1 / 7 / 2 / 8;
|
||||
display: flex;
|
||||
|
|
@ -238,7 +252,20 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
grid-area: 1 / 6 / 2 / 7;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button {
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-back,
|
||||
.nav-forward {
|
||||
button {
|
||||
|
|
@ -295,11 +322,15 @@ export default {
|
|||
}
|
||||
}
|
||||
&:checked + label {
|
||||
color: $blue;
|
||||
//font-weight: 500;
|
||||
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
background: $blue;
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
|
||||
&:after {
|
||||
background-color: $white;
|
||||
}
|
||||
+ .first-of-month {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&:checked + label p,
|
||||
&:checked + label span {
|
||||
|
|
@ -333,7 +364,7 @@ export default {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.highlighted-day {
|
||||
&.selectable-day {
|
||||
color: $blue;
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
|
|
@ -352,13 +383,9 @@ export default {
|
|||
}
|
||||
|
||||
&.future-day {
|
||||
|
||||
}
|
||||
|
||||
&.selectable-day {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
color: $gray-550;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -368,14 +395,22 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:checked {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
&:after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
+ .first-of-month {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
+ p {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue