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

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

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