rewrite checkbox component

src/components/checkbox/checkbox.js

@@ -1,44 +0,0 @@
-// TODO: Template-based functional component is supported in vue-loader 13.3.0+.
-// Also, somehow, props are not provided through 'context' even though they are defined.
-// Need to upgrade vue-loader
-
-import './checkbox.scss'
-
-export default {
-  functional: true,
-  name: 'Checkbox',
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  render (createElement, { data, children }) {
-    const { props = {}, attrs = {}, on = {}, ...rest } = data
-    const { name, checked, disabled, readonly, ...restAttrs } = attrs
-    const { change, ...restListeners } = on
-    const wrapperProps = {
-      attrs: restAttrs,
-      on: restListeners,
-      ...rest
-    }
-    const inputProps = {
-      attrs: {
-        name,
-        checked,
-        disabled,
-        readonly,
-        ...props
-      },
-      on: {}
-    }
-    if (change) {
-      inputProps.on.change = e => change(e.target.checked)
-    }
-    return (
-      <label class="checkbox" {...wrapperProps}>
-        <input type="checkbox" {...inputProps} />
-        <i class="checkbox-indicator" />
-        {children && <span>{children}</span>}
-      </label>
-    )
-  }
-}

src/components/checkbox/checkbox.scss

@@ -1,48 +0,0 @@
-@import '../../_variables.scss';
-
-.checkbox {
-  position: relative;
-  display: inline-block;
-  padding-left: 1.2em;
-
-  &-indicator::before {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: block;
-    content: '✔';
-    transition: color 200ms;
-    width: 1.1em;
-    height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-    box-shadow: 0px 0px 2px black inset;
-    box-shadow: var(--inputShadow);
-    background-color: $fallback--fg;
-    background-color: var(--input, $fallback--fg);
-    vertical-align: top;
-    text-align: center;
-    line-height: 1.1em;
-    font-size: 1.1em;
-    color: transparent;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-
-  input[type=checkbox] {
-    display: none;
-
-    &:checked + .checkbox-indicator::before {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
-    &:disabled + .checkbox-indicator::before {
-      opacity: .5;
-    }
-  }
-
-  & > span {
-    margin-left: .5em;
-  }
-}

src/components/user_reporting_modal/user_reporting_modal.js

@@ -1,6 +1,6 @@
 
 import Status from '../status/status.vue'
-import Checkbox from '../checkbox/checkbox.js'
+import Checkbox from '../checkbox/checkbox.vue'
 
 const UserReportingModal = {
   components: {