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

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

View file

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

View file

@ -57,12 +57,30 @@ export default {
</script>
<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 {
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);
}
}
img {
@ -108,17 +126,9 @@ export default {
box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem;
}
&:focus-visible + .list-card-content {
box-shadow: 0 0 0 2.5px $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;
}
@include list-card-focus($blue);
&:checked + .list-card-content {
p {
color: $black;