From 92ecbd6d3c08ab5c07365044546ffea47dae3697 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 26 Apr 2022 10:41:00 -0400
Subject: [PATCH] CSR-447: final style tweaks

---
 src/styles/common-error-styles.scss                 |  2 +-
 .../list-button-horizontal.vue                      |  5 +++--
 src/ux-components/list-button/list-button.vue       |  7 +++++--
 src/ux-components/list-card/list-card.vue           | 13 ++++++-------
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 165101177..67bd9473b 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -75,7 +75,7 @@ html {
         }
         input:checked:focus {
           + label {
-            box-shadow: 0 0 0 1px $blue;
+            box-shadow: 0 0 0 2.5px $blue;
             border-radius: .5rem;
           }
         }
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 006718bed..23266a91d 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -163,10 +163,11 @@ export default {
 .list-button-horizontal {
   input[type="radio"],
   input[type="checkbox"] {
+    position: absolute;
+    height: 0;
     opacity: 0;
     width: 0;
-    height: 0;
-    position: absolute;
+
     &:focus-visible + label {
       box-shadow: 0 0 0 2.5px $blue;
       z-index: 2;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 300bf6baa..2a9428d97 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -170,10 +170,10 @@ export default {
       opacity: 0;
 
       &:focus-visible + label {
-        box-shadow: 0 0 0 2.5px $blue inset;
+        box-shadow: 0 0 0 2.5px $blue;
       }
       &:focus + label {
-        box-shadow: 0 0 0 2.5px $blue inset;
+        box-shadow: 0 0 0 2.5px $blue;
       }
       &:checked + label {
         color: $black;
@@ -181,6 +181,9 @@ export default {
         background: $blue-100;
         box-shadow: 0 0 0 1px $blue;
       }
+      &:checked:focus + label {
+        box-shadow: 0 0 0 2.5px $blue;
+      }
       &:checked + label p,
       &:checked + label span {
         font-weight: 500;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index ae563a952..20954fa9a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -237,18 +237,17 @@ export default {
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
-
+    &:focus-visible + label {
+      box-shadow: 0 0 0 2.5px $blue;
+      border-radius: 0.5rem;
+    }
     &:focus + label {
       box-shadow: 0 0 0 2.5px $blue;
       border-radius: 0.5rem;
     }
-
-    &:checked {
-      &:focus + label {
-        box-shadow: 0 0 0 2.5px $blue;
-      }
+    &:checked:focus + label {
+      box-shadow: 0 0 0 2.5px $blue;
     }
-
     &:checked + label {
       p {
         color: $black;