Material checkbox

Author: alvarosabu

dev/App.vue

@@ -116,6 +116,14 @@ const data = () => ({
         inline: false,
         customClass: 'col-12',
       }),
+      new FormField({
+        type: 'checkbox',
+        label: 'Disabled',
+        name: 'disabled',
+        inline: false,
+        disabled: true,
+        customClass: 'col-12',
+      }),
       new FormField({
         type: 'radio',
         label: 'Prefered Animal',

src/components/input-checkbox/InputCheckbox.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="form-check">
+  <div class="input-checkbox">
     <input
-      class="form-check-input"
+      class="input-checkbox__toggle"
       type="checkbox"
       :id="formControl.name"
       v-model="formControl.value"
       :disabled="formControl.disabled"
     />
-    <label class="form-check-label" :for="formControl.name">
+    <label class="input-checkbox__label" :for="formControl.name">
       {{ formControl.label }}
     </label>
   </div>

src/components/input-radio/InputRadio.vue

@@ -2,19 +2,19 @@
   <div class="input-radio">
     <div
       class="form-check"
-      :class="{ 'form-check-inline': formControl.inline }"
+      :class="{ 'form-check--inline': formControl.inline }"
       v-for="opt in formControl.options"
       :key="opt.name"
     >
       <input
-        class="form-check-input"
+        class="form-check__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="form-check__label" :for="opt.value">
         {{ opt.text }}
       </label>
     </div>

src/core/utils/form-control.model.js

@@ -8,6 +8,7 @@ export function FormControl({
   options = [],
   placeholder = null,
   errors = {},
+  disabled = false,
   valid = true,
   touched = false,
   dirty = false,
@@ -20,6 +21,7 @@ export function FormControl({
   this.customClass = customClass;
   this.options = options;
   this.placeholder = placeholder;
+  this.disabled = disabled;
   this.errors = errors;
   this.valid = valid;
   this.touched = touched;

src/styles/themes/material.scss

@@ -1,5 +1,8 @@
 $theme-color: #6200ee;
 $base-color: #ced4da;
+$text-color: #202020;
+$light: #fefefe;
+
 $font-size: 1rem !default;
 
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
@@ -109,7 +112,7 @@ select.form-control ~ .form-label,
   }
 }
 
-.form-check ~ .form-bar,
+.input-checkbox ~ .form-bar,
 .input-radio ~ .form-bar {
   display: none;
 }
@@ -144,3 +147,140 @@ select.form-control ~ .form-label,
 .custom-control-input:not(:checked) ~ .custom-control-label::before {
   border-color: $theme-color;
 }
+
+.input-checkbox {
+  $checkbox: &;
+  z-index: 0;
+  position: relative;
+  display: inline-block;
+  color: $base-color;
+  font-size: 16px;
+  line-height: 1.5;
+
+  &:hover {
+    #{$checkbox}__toggle {
+      opacity: 0.04;
+
+      &:hover {
+        opacity: 0.16;
+      }
+    }
+  }
+
+  &__toggle {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    z-index: -1;
+    position: absolute;
+    left: -10px;
+    top: -8px;
+    display: block;
+    margin: 0;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    background-color: $base-color;
+    box-shadow: none;
+    outline: none;
+    opacity: 0;
+    transform: scale(1);
+    pointer-events: none;
+    transition: opacity 0.3s, transform 0.2s;
+
+    &:focus {
+      opacity: 0.12;
+    }
+
+    &:active {
+      opacity: 1;
+      transform: scale(0);
+      transition: transform 0s, opacity 0s;
+    }
+
+    &:active + label::before {
+      border-color: $light;
+    }
+
+    &:checked:active + label::before {
+      border-color: transparent;
+      background-color: $base-color;
+    }
+
+    /* Checked, Indeterminate */
+    &:checked,
+    &:indeterminate {
+      background-color: $theme-color;
+    }
+
+    &:checked + label::before,
+    &:indeterminate + label::before {
+      border-color: $theme-color;
+      background-color: $theme-color;
+    }
+
+    &:checked + label::after,
+    &:indeterminate + label::after {
+      border-color: $light;
+    }
+
+    &:indeterminate + label::after {
+      border-left: none;
+      transform: translate(4px, 3px);
+    }
+
+    &:disabled {
+      opacity: 0;
+    }
+
+    &:disabled + label {
+      color: rgba($base-color, 0.38);
+      cursor: initial;
+    }
+
+    &:disabled + label::before {
+      border-color: currentColor;
+    }
+
+    &:checked:disabled + label::before,
+    &:indeterminate:disabled + label::before {
+      border-color: transparent;
+      background-color: currentColor;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    width: 100%;
+    cursor: pointer;
+    color: $text-color;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      box-sizing: border-box;
+      margin: 3px 11px 3px 1px;
+      border: solid 2px; /* Safari */
+      border-color: $base-color;
+      border-radius: 2px;
+      width: 18px;
+      height: 18px;
+      vertical-align: top;
+      transition: border-color 0.2s, background-color 0.2s;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 4px;
+      left: 2px;
+      width: 10px;
+      height: 5px;
+      border: solid 2px transparent;
+      border-right: none;
+      border-top: none;
+      transform: translate(3px, 4px) rotate(-45deg);
+    }
+  }
+}