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

CSR-914 Fix validation UI

Browse source
This commit is contained in:
Katie 2022-11-02 12:31:32 -04:00
parent 3621f4ade0
commit 8157162f82
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 {
&.list-button,
&.list-card,
&.list-card.list-button {
&.list-button-horizontal {
border: 1px solid $red;
.button-content {
border: none;
}
}
&.list-button,
&.list-card {
color: $red;
input[type="checkbox"]:focus + label,
input[type="radio"]:focus + label {
box-shadow: 0 0 0 2.5px $red;
@ -38,6 +48,7 @@ html {
box-shadow: 0 0 1px $red;
}
}
&.grid-item {
input[type="radio"] {
+ label {

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

@ -6,7 +6,8 @@
{ 'radio-fancy': isCashOrInsurance },
]"
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">
{{ buttonLabel }}
</span>
@ -163,9 +164,15 @@ export default {
}
}
.col {
.col,
.list-group {
border-radius: 0;
&:first-of-type {
.list-button-horizontal {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
@ -175,6 +182,9 @@ export default {
&:last-of-type {
.list-button-horizontal {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
.list-button-horizontal-content {
border-bottom-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">
<div
: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">
{{ buttonLabel }}
</span>

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

@ -7,7 +7,7 @@
]"
v-model="selectedValue">
<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">
<img
:id="buttonImageId"
@ -74,9 +74,6 @@ export default {
border: 1px solid $gray-500;
&.has-error {
//Red border if invalid
border: 1px solid $red;
input[type="checkbox"],
input[type="radio"] {
@include list-card-focus($red);