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

Merge pull request #796 from Safelite/defect/CSR-914

Browse source 
CSR-914 Fix validation UI
This commit is contained in:
katieoh-safelite 2022-11-02 14:46:51 -04:00 committed by GitHub
commit 9238e9f1c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,8 +2,18 @@ html {
.has-error { .has-error {
&.list-button, &.list-button,
&.list-card, &.list-card,
&.list-card.list-button { &.list-button-horizontal {
border: 1px solid $red;
.button-content {
border: none;
}
}
&.list-button,
&.list-card {
color: $red; color: $red;
input[type="checkbox"]:focus + label, input[type="checkbox"]:focus + label,
input[type="radio"]:focus + label { input[type="radio"]:focus + label {
box-shadow: 0 0 0 2.5px $red; box-shadow: 0 0 0 2.5px $red;
@ -38,6 +48,7 @@ html {
box-shadow: 0 0 1px $red; box-shadow: 0 0 1px $red;
} }
} }
&.grid-item { &.grid-item {
input[type="radio"] { input[type="radio"] {
+ label { + label {

14
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -6,7 +6,8 @@
{ 'radio-fancy': isCashOrInsurance }, { 'radio-fancy': isCashOrInsurance },
]" ]"
v-model="selectedValue"> v-model="selectedValue">
<div class="list-button-horizontal-content d-flex flex-column justify-content-center p-3"> <div
class="button-content list-button-horizontal-content d-flex flex-column justify-content-center p-3">
<span class="m-0" :class="textPosition"> <span class="m-0" :class="textPosition">
{{ buttonLabel }} {{ buttonLabel }}
</span> </span>
@ -163,9 +164,15 @@ export default {
} }
} }
.col { .col,
.list-group {
border-radius: 0;
&:first-of-type { &:first-of-type {
.list-button-horizontal { .list-button-horizontal {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
.list-button-horizontal-content { .list-button-horizontal-content {
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem; border-top-left-radius: 0.5rem;
@ -175,6 +182,9 @@ export default {
&:last-of-type { &:last-of-type {
.list-button-horizontal { .list-button-horizontal {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
.list-button-horizontal-content { .list-button-horizontal-content {
border-bottom-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem; border-top-right-radius: 0.5rem;

2
src/ux-components/list-button/list-button.vue
View file

@ -5,7 +5,7 @@
v-model="selectedValue"> v-model="selectedValue">
<div <div
:aria-label="buttonLabel" :aria-label="buttonLabel"
class="list-button-content d-flex flex-column justify-content-center py-3 px-4"> class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="textPosition"> <span class="m-0" :class="textPosition">
{{ buttonLabel }} {{ buttonLabel }}
</span> </span>

5
src/ux-components/list-card/list-card.vue
View file

@ -7,7 +7,7 @@
]" ]"
v-model="selectedValue"> v-model="selectedValue">
<div <div
class="d-flex w-100 align-items-center px-2 h-100 list-card-content" class="d-flex w-100 align-items-center px-2 h-100 list-card-content button-content rounded-3"
:class="labelClasses"> :class="labelClasses">
<img <img
:id="buttonImageId" :id="buttonImageId"
@ -74,9 +74,6 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
&.has-error { &.has-error {
//Red border if invalid
border: 1px solid $red;
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
@include list-card-focus($red); @include list-card-focus($red);