From 30fcdbefce7c0494cdbbf6aa228d4f7e75a01fa8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 27 Jan 2022 14:41:55 -0500
Subject: [PATCH 1/2] CSR-262 update file name per Mark's request.

---
 src/App.vue                                                | 2 +-
 src/styles/{error-styles.scss => common-error-styles.scss} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/styles/{error-styles.scss => common-error-styles.scss} (100%)

diff --git a/src/App.vue b/src/App.vue
index f64aad6aa..a11e5a9f7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,5 +7,5 @@
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-list-styles.scss";
   @import "@/styles/common-typography-styles.scss";
-  @import "@/styles/error-styles.scss";
+  @import "@/styles/common-error-styles.scss";
 </style>
diff --git a/src/styles/error-styles.scss b/src/styles/common-error-styles.scss
similarity index 100%
rename from src/styles/error-styles.scss
rename to src/styles/common-error-styles.scss

From 21d2ba883d9e6afc632b7ad19aa1adf3720b8602 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 27 Jan 2022 14:54:10 -0500
Subject: [PATCH 2/2] Move list-button styles to component. Delete
 common-list-styles.scss.

---
 src/App.vue                                   |  1 -
 src/styles/common-list-styles.scss            | 44 -------------------
 src/ux-components/list-button/list-button.vue | 34 ++++++++++++++
 3 files changed, 34 insertions(+), 45 deletions(-)
 delete mode 100644 src/styles/common-list-styles.scss

diff --git a/src/App.vue b/src/App.vue
index a11e5a9f7..76a01d29c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,6 @@
 <style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
   @import "@/styles/common-styles.scss";
-  @import "@/styles/common-list-styles.scss";
   @import "@/styles/common-typography-styles.scss";
   @import "@/styles/common-error-styles.scss";
 </style>
diff --git a/src/styles/common-list-styles.scss b/src/styles/common-list-styles.scss
deleted file mode 100644
index 9e232f54d..000000000
--- a/src/styles/common-list-styles.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.list-group {
-  &.list-button {
-    input[type="radio"],
-    input[type="checkbox"] {
-      opacity: 0;
-      position: fixed;
-      width: 0;
-      &:focus-visible + label {
-        box-shadow: 0 0 0 2.5px $blue inset;
-      }
-      &:focus + label {
-        box-shadow: 0 0 0 2.5px $blue inset;
-      }
-      &:checked + label {
-        color: $black;
-        font-weight: 500;
-        background: $blue-100;
-        box-shadow: 0 0 0 1px $blue;
-      }
-      &:checked + label p:first-child {
-        font-weight: 500;
-      }
-    }
-    label {
-      color: $gray-600;
-      position: relative;
-      background: $white;
-      transition: all 150ms linear;
-      border-radius: $border-radius-lg;
-      border: 1px solid $gray-500;
-      width: 100%;
-
-      &:hover {
-        @include media-breakpoint-up(sm) {
-          box-shadow: 0 0 0 4px $blue-100;
-        }
-        cursor: pointer;
-      }
-      + p {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 5fa285c31..7349ee6b3 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -77,6 +77,40 @@ export default {
       position: static; //override bootstrap
       height: 0;
     }
+    &:focus-visible + label {
+      box-shadow: 0 0 0 2.5px $blue inset;
+    }
+    &:focus + label {
+      box-shadow: 0 0 0 2.5px $blue inset;
+    }
+    &:checked + label {
+      color: $black;
+      font-weight: 500;
+      background: $blue-100;
+      box-shadow: 0 0 0 1px $blue;
+    }
+    &:checked + label p:first-child {
+      font-weight: 500;
+    }
+  }
+  label {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+
+    &:hover {
+      @include media-breakpoint-up(sm) {
+        box-shadow: 0 0 0 4px $blue-100;
+      }
+      cursor: pointer;
+    }
+    + p {
+      display: none;
+    }
   }
 }
 </style>