replace checkboxes in user-settings with Checkbox component

1 files changed, 27 insertions, 6 deletions

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 2b822ec3..441f815c 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,13 +1,22 @@
 <template>
-  <label class="checkbox">
+  <label
+    class="checkbox"
+    :class="{ disabled, indeterminate }"
+    >
     <input
       type="checkbox"
+      :disabled="disabled"
       :checked="checked"
       :indeterminate.prop="indeterminate"
       @change="$emit('change', $event.target.checked)"
     >
     <i class="checkbox-indicator" />
-    <span v-if="!!$slots.default"><slot /></span>
+    <span
+      class="label"
+      v-if="!!$slots.default"
+      >
+      <slot />
+    </span>
   </label>
 </template>
 
@@ -17,7 +26,11 @@ export default {
     prop: 'checked',
     event: 'change'
   },
-  props: ['checked', 'indeterminate']
+  props: [
+    'checked',
+    'indeterminate',
+    'disabled'
+  ]
 }
 </script>
 
@@ -54,6 +67,17 @@ export default {
     box-sizing: border-box;
   }
 
+  &.disabled {
+    .checkbox-indicator::before,
+    .label {
+      opacity: .5;
+    }
+    .label {
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
+    }
+  }
+
   input[type=checkbox] {
     display: none;
 
@@ -68,9 +92,6 @@ export default {
       color: var(--text, $fallback--text);
     }
 
-    &:disabled + .checkbox-indicator::before {
-      opacity: .5;
-    }
   }
 
   & > span {