From 715fe43f33b7b6b9958f7413b523b2a09044509e Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Mon, 25 Oct 2021 19:02:46 -0400
Subject: [PATCH] WIP - css cleanup.

---
 src/assets/scss/components/_radio-card.scss | 56 +++++++++------------
 src/components/forms/radioCard.vue          |  4 +-
 2 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/assets/scss/components/_radio-card.scss b/src/assets/scss/components/_radio-card.scss
index 772064dd1..6b3b1797f 100644
--- a/src/assets/scss/components/_radio-card.scss
+++ b/src/assets/scss/components/_radio-card.scss
@@ -1,36 +1,28 @@
 .radio-card {
   input[type=radio] {
-     position: absolute;
-     opacity: 0;
-     &:focus + label {
-       background-color: $white;
-       box-shadow: 0px 0px 0px 4px $blue-600;
-     }
-     &:focus-visible + label {
-       background-color: $white;
-       box-shadow: 0px 0px 0px 4px $blue-600;
-     }
-     &:checked + label {
-        background-color: $blue-100;
-        border: 1px solid $blue-600;
-      }
-      &.invalid + label {
-        background-color: $white;
-        border: 1px solid $red-500;
-      }
-   }
-   label {
-     display: flex;
-     align-items: center;
-     flex-direction: column;
-     background: $white;
-     border: 1px solid $gray-400;
-     border-radius: 8px;
-     padding: 8px;
-     width: 100%;
-     &:hover {
-       cursor: pointer;
-       box-shadow: 0px 0px 0px 6px $blue-100;
-     }
+    &:focus + label {
+      background-color: $white;
+      box-shadow: 0px 0px 0px 4px $blue-600;
+    }
+    &:focus-visible + label {
+      background-color: $white;
+      box-shadow: 0px 0px 0px 4px $blue-600;
+    }
+    &:checked + label {
+      background-color: $blue-100;
+      border: 1px solid $blue-600;
+    }
+    &.invalid + label {
+      background-color: $white;
+      border: 1px solid $red-500;
+    }
+  }
+  label {
+    background: $white;
+    border: 1px solid $gray-400;
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0px 0px 0px 6px $blue-100;
+    }
   }
 }
diff --git a/src/components/forms/radioCard.vue b/src/components/forms/radioCard.vue
index da7b334d7..a8793cc5e 100644
--- a/src/components/forms/radioCard.vue
+++ b/src/components/forms/radioCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="col-4 mb-3 d-flex radio-card">
-    <input type="radio" v-bind:class="className" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
-      <label v-bind:for="radioID">
+    <input type="radio" class="position-absolute opacity-0" v-bind:class="className" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
+      <label v-bind:for="radioID" class="p-3 rounded-3 d-flex flex-column align-items-center w-100">
         <img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:alt="altText"/>
         <span class="mt-auto">{{radioLabel}}</span>
         <span>Selected: {{ picked }}</span>