Merge pull request #789 from Safelite/defect/CSR-909
CSR-909 Fix validation UI defect
This commit is contained in:
commit
f75c3fd26d
2 changed files with 21 additions and 12 deletions
|
|
@ -31,7 +31,6 @@ export default {
|
|||
name: "listButton",
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
props: {
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: {
|
||||
type: String,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue