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

CSR-909 Fix validation UI defect

Browse source
This commit is contained in:
Katie 2022-10-28 09:19:37 -04:00
parent 61ecd7cf9f
commit 8fac778c54
2 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,7 +34,6 @@ export default {
name: "listButton", name: "listButton",
mixins: [inputButtonWrapperMixin], mixins: [inputButtonWrapperMixin],
props: { props: {
selectingInitiatesLoad: Boolean,
loaderColor: String, loaderColor: String,
loaderPosition: { loaderPosition: {
type: String, type: String,

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

@ -14,15 +14,10 @@
:class="!isWide ? 'order-1' : 'ms-auto order-3'" :class="!isWide ? 'order-1' : 'ms-auto order-3'"
:src="buttonImage" :src="buttonImage"
:alt="altText" /> :alt="altText" />
<p <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
v-if="!isWide"
class="small order-3"
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
{{ buttonLabel }} {{ buttonLabel }}
</p> </p>
<p <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
v-if="buttonLabelSubCopy && !isWide"
class="fs-7 m-0 order-4 sub-copy">
{{ buttonLabelSubCopy }} {{ buttonLabelSubCopy }}
</p> </p>
<div v-if="isWide" class="order-2"> <div v-if="isWide" class="order-2">
@ -62,12 +57,30 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@mixin list-card-focus($box-shadow-color) {
&:focus-visible + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
border-radius: 0.5rem;
}
&:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
border-radius: 0.5rem;
}
&:checked:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
}
}
.list-card { .list-card {
border: 1px solid $gray-500; border: 1px solid $gray-500;
&.has-error { &.has-error {
//Red border if invalid //Red border if invalid
border: 1px solid $red; border: 1px solid $red;
input[type="checkbox"],
input[type="radio"] {
@include list-card-focus($red);
}
} }
img { img {
@ -113,17 +126,9 @@ export default {
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
&:focus-visible + .list-card-content {
box-shadow: 0 0 0 2.5px $blue; @include list-card-focus($blue);
border-radius: 0.5rem;
}
&:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $blue;
border-radius: 0.5rem;
}
&:checked:focus + .list-card-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-card-content { &:checked + .list-card-content {
p { p {
color: $black; color: $black;