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

Merge pull request #789 from Safelite/defect/CSR-909

Browse source 
CSR-909 Fix validation UI defect
This commit is contained in:
katieoh-safelite 2022-10-28 14:26:38 -04:00 committed by GitHub
commit f75c3fd26d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 12 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

@ -31,7 +31,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,

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

@ -57,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 {
@ -108,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;