diff --git a/src/styles/client-customizations.scss b/src/styles/client-customizations.scss index 87bf3701..5e0db1ec 100644 --- a/src/styles/client-customizations.scss +++ b/src/styles/client-customizations.scss @@ -33,9 +33,7 @@ $limu-button-color: #A9E3E9; color: $limu-button-text-color !important; box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $limu-button-color !important; } - &:focus { - box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $limu-button-color !important; - } + } } diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index eb217eb0..3ff1648d 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -68,10 +68,7 @@ export default { @media (hover: hover) { background: linear-gradient(270deg, $blue 0%, $blue-800 100%); } - &:focus { - box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; - } - &:focus, // Mouse, touch, stylus focus + // Mouse, touch, stylus focus &:focus-visible { // Keyboard focus for accessibility outline: none; @@ -93,7 +90,7 @@ export default { &.has-loader { color: $white; background: $blue-700; - box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; + } &.delay { // fixes flicker while transitioning between states diff --git a/src/ux-components/modal-button-main/modal-button-main.vue b/src/ux-components/modal-button-main/modal-button-main.vue index 3cf8f7a2..b8255af7 100644 --- a/src/ux-components/modal-button-main/modal-button-main.vue +++ b/src/ux-components/modal-button-main/modal-button-main.vue @@ -75,10 +75,8 @@ export default { @media (hover: hover) { background: linear-gradient(270deg, $blue 0%, $blue-800 100%); } - &:focus { - box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; - } - &:focus, // Mouse, touch, stylus focus + + // Mouse, touch, stylus focus &:focus-visible { // Keyboard focus for accessibility outline: none; @@ -99,8 +97,7 @@ export default { } &.has-loader { color: $white; - background: $blue-700; - box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; + background: $blue-700; pointer-events: none; } &.delay {