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

CSR-918 Fix hover states

Browse source
This commit is contained in:
Katie 2022-11-04 09:44:56 -04:00
parent f4c23cb5b5
commit 053723473c
3 changed files with 27 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common-components/base-input-button/base-input-button.vue
View file

@ -1,6 +1,6 @@
<template>
<label
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0, selected: isChecked }]"
:for="buttonId"
@focusin="handleFocus"
@focusout="handleBlur"

16
src/styles/common-error-styles.scss
View file

@ -1,24 +1,20 @@
html {
.has-error {
// START HOVER
&.list-button-horizontal,
&.list-button,
&.list-card,
&.list-button-horizontal {
&.list-card {
border: 1px solid $red;
position: relative;
z-index: 4;
.button-content {
border: none;
}
&:hover {
input[type="radio"],
input[type="checkbox"] {
+ .button-content {
position: relative;
z-index: 4;
@include box-shadow-hover($red-200);
}
}
@include box-shadow-hover($red-200);
z-index: 5;
}
}

30
src/styles/shared-input-button-styles.scss
View file

@ -1,20 +1,30 @@
.base-input-button {
&:hover {
&:not(.has-error):hover {
cursor: pointer;
&.list-button,
&.list-button-horizontal,
&.list-card {
input[type="radio"],
input[type="checkbox"] {
&:not(:checked) {
+ .button-content {
position: relative;
z-index: 4;
@include box-shadow-hover($blue-300);
}
}
&:not(.selected) {
position: relative;
z-index: 4;
@include box-shadow-hover($blue-300);
}
}
// &.list-button,
// &.list-button-horizontal,
// &.list-card {
// input[type="radio"],
// input[type="checkbox"] {
// &:not(:checked) {
// + .button-content {
// position: relative;
// z-index: 4;
// @include box-shadow-hover($blue-300);
// }
// }
// }
// }
}
}