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

WIP update styles per Rachel request.

Browse source
This commit is contained in:
Bryan Mauger 2022-10-12 15:25:40 -04:00
parent 58f059ba4a
commit cb063b5363
2 changed files with 31 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -42,7 +42,7 @@
<div class="grid-item radio-wrapper">
<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>
<div v-if="isFirstDayOfMonth" class="current-month first-of-month">OCT</div>
<div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
</div>
<div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-2" />
@ -148,39 +148,39 @@
<input tabindex="0" type="radio" name="day-of-month" id="oct-27" />
<label class="selectable-day" for="oct-27"><span>27</span></label>
</div>
<div class="grid-item radio-wrapper future-day">
<div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-28" />
<label class="selectable-day" for="oct-28"><span>28</span></label>
</div>
<div class="grid-item radio-wrapper future-day">
<div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-29" />
<label class="selectable-day" for="oct-29"><span>29</span></label>
</div>
<div class="grid-item radio-wrapper future-day">
<div class="grid-item radio-wrapper">
<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 future-day">
<div class="grid-item radio-wrapper">
<input tabindex="0" type="radio" name="day-of-month" id="oct-31" />
<label class="selectable-day" for="oct-31"><span>31</span></label>
</div>
<div class="grid-item radio-wrapper future-day">
<div class="grid-item radio-wrapper">
<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">
<div class="grid-item radio-wrapper">
<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">
<div class="grid-item radio-wrapper">
<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">
<div class="grid-item radio-wrapper">
<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">
<div class="grid-item radio-wrapper">
<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>
@ -227,6 +227,8 @@ export default {
.month-year {
grid-area: 1 / 1 / 2 / 4;
text-transform: uppercase;
font-weight: 300;
letter-spacing: .75px;
}
.legend {
grid-area: 1 / 4 / 2 / 6;
@ -278,9 +280,11 @@ export default {
display: flex;
justify-content: center;
align-items: center;
&:focus {
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
background-color: $blue;
&:focus,
&:focus-visible {
border: 2.5px solid $blue;
box-shadow: none;
background-color: $blue-100;
color: $white;
}
}
@ -316,9 +320,9 @@ export default {
&:after {
background-color: $white;
}
}
+ .first-of-month {
color: $white;
+ .first-day {
color: $white;
}
}
}
&:checked + label {
@ -328,9 +332,6 @@ export default {
&:after {
background-color: $white;
}
+ .first-of-month {
color: $white;
}
}
&:checked + label p,
&:checked + label span {
@ -338,21 +339,15 @@ export default {
}
}
.first-of-month {
.first-day {
position: absolute;
font-size: 9px;
font-weight: 500;
color: $gray-600;
top: 0;
z-index: 1;
}
.current-day {
&.selectable-day {
+ .first-of-month {
color: $blue;
}
}
}
label {
position: relative;
@ -388,6 +383,9 @@ export default {
position: absolute;
top: 28px;
}
+ .first-day {
color: $blue;
}
}
&.future-day {
@ -414,8 +412,10 @@ export default {
}
}
cursor: pointer;
+ .first-of-month {
color: $white;
&.current-day {
+ .first-day {
color: $white;
}
}
}
@ -423,6 +423,8 @@ export default {
display: none;
}
}
}
}

3
src/styles/common-error-styles.scss
View file

@ -47,9 +47,6 @@ html {
background-color: $blue-100;
box-shadow: 0px 0px 0px 4px $red-200;
}
span {
color: $red;
}
}
}
}