Cleanup SCSS.

Author: niels-bosman

README.md

@@ -48,7 +48,7 @@ export default {
 | darkTheme     | `Boolean` | `false`   | ❌        | Set's dark mode to active. (note that this will not change the background like in the preview GIF) |
 | disabled      | `Number`  | `false`   | ❌        | Disables the toggler.                                                                              |
 | fontSize      | `String`  | `16`      | ❌        | Sets the font size of the text next to the toggle                                                  |
-| fontWeight    | `Boolean` | `bold`    | ❌        | Sets the font weight of the text next to the toggle.                                               |
+| fontWeight    | `Boolean` | `normal`  | ❌        | Sets the font weight of the text next to the toggle.                                               |
 | toggled       | `Boolean` | `true`    | ❌        | Sets the default value for the toggler.                                                            |
 
 ### Vue version support

src/components/VueToggle.vue

@@ -15,17 +15,19 @@
       :aria-checked="toggleState"
       :aria-disabled="disabled"
       :aria-readonly="disabled"
+      :aria-labelledby="labelId"
       :style="toggleState && {background: activeColor}"
       class="m-toggle__content"
       role="checkbox"
-      @click="toggleState = !toggleState"
+      @click="toggle"
     />
     <label
+      :id="labelId"
       :for="id"
       :style="[{fontSize: `${fontSize}px`, fontWeight}]"
       class="m-toggle__label"
     >
-      {{title}}
+      {{ title }}
     </label>
   </section>
 </template>
@@ -35,14 +37,14 @@ export default {
   name: 'VueToggle',
 
   props: {
-    activeColor: {type: String, default: '#9FD6AE'},
-    darkTheme:   {type: Boolean, default: false},
-    disabled:    {type: Boolean, default: false },
-    fontSize:    {type: Number, default: 16},
-    fontWeight:  {type: String, default: 'normal'},
-    name:        {type: String, required: true},
-    title:       {type: String, required: true},
-    toggled:     {type: Boolean, default: false},
+    activeColor: { type: String, default: '#9FD6AE' },
+    darkTheme: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    fontSize: { type: Number, default: 16 },
+    fontWeight: { type: String, default: 'normal' },
+    name: { type: String, required: true },
+    title: { type: String, required: true },
+    toggled: { type: Boolean, default: false },
   },
 
   data() {
@@ -51,16 +53,28 @@ export default {
     }
   },
 
+  methods: {
+    toggle() {
+      if (this.disabled) return;
+      this.toggleState = !this.toggleState
+    }
+  },
+
   computed: {
     id() {
-      return `_${this.name.replace(/ /g, '').toLowerCase()}`;
-    }
+      return this.name.replace(/ /g, '').toLowerCase();
+    },
+    labelId() {
+      return `${this.id}-label`
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
 .m-toggle {
+  $self: &;
+  $toggle-spacing: 2px;
   display: flex;
   align-items: center;
   margin: 0 -5px;
@@ -70,8 +84,6 @@ export default {
     margin: 0 5px;
   }
 
-  $self: &;
-
   &__label {
     user-select: none;
 
@@ -90,7 +102,7 @@ export default {
     &:checked {
       & + #{$self}__content {
         &:after {
-          left: 50%;
+          left: calc(50% + #{$toggle-spacing});
         }
       }
     }
@@ -102,7 +114,7 @@ export default {
     border-radius: 2em;
     height: 2em;
     outline: 0;
-    padding: 2px;
+    padding: $toggle-spacing;
     transition: background .4s ease;
     width: 4em;
     will-change: background;
@@ -116,16 +128,13 @@ export default {
       left: 0;
       position: relative;
       transition: left .2s ease;
-      width: 50%;
+      width: calc(50% - #{$toggle-spacing});
       will-change: left;
     }
 
     .disabled & {
       opacity: 50%;
-
-      &:hover {
-        cursor: not-allowed;
-      }
+      cursor: not-allowed;
     }
 
     .dark & {