From 6d233b521d8420bf1c9c19a80f688449cf44a66f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 11 Nov 2022 09:04:57 -0500
Subject: [PATCH] CSR-933 fix error styles.

---
 src/styles/common-error-styles.scss           |  9 ++
 src/ux-components/list-button/list-button.vue | 90 +++++++++----------
 2 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index c9ac0c4d9..ce9aaaf67 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -3,6 +3,7 @@ html {
         // START HOVER
         &.list-button-horizontal,
         &.list-button,
+        &.list-button.list-group,
         &.list-card {
             border: 1px solid $red;
             position: relative;
@@ -16,6 +17,9 @@ html {
                 @include box-shadow-hover($red-200);
                 z-index: 5;
             }
+            input[type="radio"]:focus + .list-button-content {
+                box-shadow: 0 0 0 2.5px $red;
+            }
         }
 
         &.ui-radio {
@@ -26,6 +30,11 @@ html {
                 }
             }
         }
+        .form-check-input {
+            &:focus {
+                @include box-shadow-hover($red-200);
+            }
+        }
         // END HOVER
 
         &.list-button,
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 031805509..33df5568a 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -60,56 +60,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.list-group {
-    .loader {
-        position: absolute;
-    }
-    &.list-button {
-        outline: none;
-        input[type="radio"],
-        input[type="checkbox"] {
-            position: static; //override bootstrap
+.loader {
+    position: absolute;
+}
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
 
-            &:focus-visible + .list-button-content {
-                box-shadow: 0 0 0 2.5px $blue;
-            }
-            &:focus + .list-button-content {
-                box-shadow: 0 0 0 2.5px $blue;
-            }
-            &:checked + .list-button-content {
-                color: $black;
-                font-weight: 500;
-                background: $blue-100;
-                box-shadow: 0 0 0 1px $blue;
-            }
-            &:checked:focus + .list-button-content {
-                box-shadow: 0 0 0 2.5px $blue;
-            }
-            &:checked + .list-button-content p,
-            &:checked + .list-button-content span {
-                font-weight: 500;
-            }
-            &:checked + .list-button-content span:nth-child(2) {
-                font-weight: 400;
-                color: $gray-600;
-            }
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
         }
     }
-    .list-button-content {
-        color: $gray-600;
-        position: relative;
-        background: $white;
-        transition: all 150ms linear;
-        border-radius: $border-radius-lg;
-        border: 1px solid $gray-500;
-        width: 100%;
-        outline: none;
+}
+.list-button-content {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+    outline: none;
 
-        span {
-            &.small {
-                font-size: 0.75rem;
-                color: $gray-550;
-            }
+    span {
+        &.small {
+            font-size: 0.75rem;
+            color: $gray-550;
         }
     }
 }