Merge pull request #231 from Safelite/BRM-update-radio-buttons

Rebuild radio buttons.

src/ux-components/checkbox/checkbox.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .form-check {
   .form-check-input {
     border: 1px solid $gray-500;

src/ux-components/radio/radio.vue

@@ -1,8 +1,9 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio d-flex form-check" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
+    class="form-check-input"
     aria-checked="false"
     :name="groupName"
     :id="buttonID"
@@ -11,7 +12,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged()"
     />
-    <label class="d-flex align-items-start radio-label" :for="buttonID">
+    <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -77,71 +78,25 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.ui-radio {
-  position: relative;
-  input[type="radio"] {
-    position: absolute!important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px,1px,1px,1px);
-    + .radio-label {
-      &:before {
-        content: '';
-        background: $white;
-        border-radius: 100%;
-        border: 1px solid $gray-500;
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        position: relative;
-        margin-right: .5rem;
-        vertical-align: top;
-        cursor: pointer;
-        transition: all 250ms ease;
-        flex-shrink: 0;
-        top: .25rem;
-      }
-    }
+<style lang="scss" scoped>
+.form-check {
+  .form-check-input {
+    border: 1px solid $gray-500;
+    border-radius: 100%;
+    margin-right: .5rem;
     &:checked {
-      + .radio-label {
-        &:before {
-          background-color: $blue;
-          box-shadow: inset 0 0 0 2px $white;
-        }
-      }
-    }
-    &:hover {
-      + label {
-        cursor: pointer;
-        &:before {
-          box-shadow: 0 0 0 4px #9fcee6;
-        }
-      }
+      background-color: $white;
+      background-size: 71%;
+      border: 1px solid $blue;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
     }
     &:focus {
-      + label {
-        &:before {
-          box-shadow: 0 0 0 2px #1574a1;
-        }
-      }
+      box-shadow: 0 0 0 4px $blue-300;
     }
-    &:disabled {
-      + .radio-label {
-        &:before {
-          box-shadow: inset 0 0 0 4px $gray-550;
-          border-color: $gray-550;
-          background: $gray-550;
-        }
-      }
-    }
-    + .radio-label {
-      &:empty {
-        &:before {
-          margin-right: 0;
-        }
-      }
+  }
+  &:hover {
+    .form-check-input {
+      box-shadow: 0 0 0 4px $blue-300;
     }
   }
 }