From f26ab03cdbde3c48b9036fd7985973fafd1fa22e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 17 Dec 2021 06:35:43 -0500
Subject: [PATCH] CSR-241 WIP css cleanup.

---
 src/ux-components/checkbox/checkbox.vue | 98 ++++++++++++-------------
 1 file changed, 45 insertions(+), 53 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 22d6a6784..9639f93e8 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -2,7 +2,7 @@
   <div class="ui-checkbox d-flex">
     <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
     <label class="d-flex align-items-center" :for="buttonID">
-      <p class="m-0 lh-1">{{checkboxLabel}}</p>
+      <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
     </label>
   </div>
 </template>
@@ -22,64 +22,56 @@ export default {
 <style lang="scss">
 .ui-checkbox {
   position: relative;
-  input[type='checkbox'] {
-    position: absolute;
-  }
-
-  input[type='checkbox'] + label {
-    display: block;
-    position: relative;
-  }
-  input[type='checkbox'] + label::before {
-    content: '';
-    position: relative;
-    display: inline-block;
-    margin-right: 10px;
-    width: 16px;
-    height: 16px;
-    background: white;
-    border: 1px solid $gray-500;
-    border-radius: 2px;
-  }
-  input[type='checkbox']:checked + label::before {
-    background: $blue;
-  }
-  input[type='checkbox']:checked + label::after {
-    content: '';
-    position: absolute;
-    top: 4px;
-    left: 2px;
-    border-left: 2px solid $white;
-    border-bottom: 2px solid $white;
-    height: 6px;
-    width: 12px;
-    transform: rotate(-45deg);
-  }
-  input[type='checkbox']:hover + label::before {
-    //outline: #5d9dd5 solid 1px;
-    box-shadow: 0 0 0 4px $blue-100;
-  }
-  input[type='checkbox']:focus + label::before {
-    //outline: #5d9dd5 solid 1px;
-    box-shadow: 0 0 0 2px $blue;
-  }
-  input[type='checkbox']:focus:checked + label::before {
-    box-shadow: 0 0 0 2px transparent;
-  }
   input[type='checkbox'] {
     position: absolute !important;
     height: 1px;
     width: 1px;
     overflow: hidden;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
     clip: rect(1px, 1px, 1px, 1px);
-  }
-  input[type='checkbox']:disabled + label {
-    color: #575757;
-  }
-
-  input[type='checkbox']:disabled + label::before {
-    background: #ddd;
+    + label {
+      display: block;
+      position: relative;
+    }
+    + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 16px;
+      height: 16px;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+    }
+    &:checked + label::before {
+      background: $blue;
+    }
+    &:checked + label::after {
+      content: '';
+      position: absolute;
+      top: 8px;
+      left: 2px;
+      border-left: 2px solid $white;
+      border-bottom: 2px solid $white;
+      height: 6px;
+      width: 12px;
+      transform: rotate(-45deg);
+    }
+    &:hover + label::before {
+      box-shadow: 0 0 0 4px $blue-100;
+    }
+    &:focus + label::before {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus:checked + label::before {
+      box-shadow: 0 0 0 2px transparent;
+    }
+    &:disabled + label {
+      color: $gray-200;
+    }
+    &:disabled + label::before {
+      background: $gray-200;
+    }
   }
 }
 </style>