Material Radio, needs a little bit more love

Author: alvarosabu

dev/App.vue

@@ -120,7 +120,7 @@ const data = () => ({
         type: 'checkbox',
         label: 'Disabled',
         name: 'disabled',
-        inline: false,
+        value: true,
         disabled: true,
         customClass: 'col-12',
       }),

src/components/input-checkbox/InputCheckbox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="input-checkbox">
     <input
-      class="input-checkbox__toggle"
+      class="input-checkbox__input"
       type="checkbox"
       :id="formControl.name"
       v-model="formControl.value"

src/components/input-radio/InputRadio.vue

@@ -1,20 +1,22 @@
 <template>
-  <div class="input-radio">
+  <div
+    class="input-radio"
+    :class="{ 'input-radio--inline': formControl.inline }"
+  >
     <div
-      class="form-check"
-      :class="{ 'form-check--inline': formControl.inline }"
+      class="input-radio__base"
       v-for="opt in formControl.options"
       :key="opt.name"
     >
       <input
-        class="form-check__input"
+        class="input-radio__input"
         type="radio"
         :id="opt.value"
         v-model="formControl.value"
         :value="opt.value"
         :disabled="opt.disabled"
       />
-      <label class="form-check__label" :for="opt.value">
+      <label class="input-radio__label" :for="opt.value">
         {{ opt.text }}
       </label>
     </div>

src/styles/themes/material.scss

@@ -158,7 +158,7 @@ select.form-control ~ .form-label,
   line-height: 1.5;
 
   &:hover {
-    #{$checkbox}__toggle {
+    #{$checkbox}__input {
       opacity: 0.04;
 
       &:hover {
@@ -167,7 +167,7 @@ select.form-control ~ .form-label,
     }
   }
 
-  &__toggle {
+  &__input {
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -284,3 +284,54 @@ select.form-control ~ .form-label,
     }
   }
 }
+
+.input-radio {
+  &--inline {
+    display: inline-block;
+  }
+
+  input[type='radio'] {
+    display: none;
+
+    &:checked + label:before {
+      border-color: $theme-color;
+      animation: ripple 0.2s linear forwards;
+    }
+    &:checked + label:after {
+      transform: scale(1);
+    }
+  }
+
+  label {
+    display: inline-block;
+    min-height: 20px;
+    position: relative;
+    padding: 0 (20px + 10px);
+    margin-bottom: 0;
+    cursor: pointer;
+    vertical-align: bottom;
+    &:before,
+    &:after {
+      position: absolute;
+      content: '';
+      border-radius: 50%;
+      transition: all 0.3s ease;
+      transition-property: transform, border-color;
+    }
+    &:before {
+      left: 0;
+      top: 0;
+      width: 20px;
+      height: 20px;
+      border: 2px solid $base-color;
+    }
+    &:after {
+      top: 20px / 2 - 10px / 2;
+      left: 20px / 2 - 10px / 2;
+      width: 10px;
+      height: 10px;
+      transform: scale(0);
+      background: $theme-color;
+    }
+  }
+}