Added BEMIT and molecule design. Formatted fontSize so it works. Changed default fontWeight value. Reformatted SCSS

Author: niels-bosman

src/App.vue

@@ -12,3 +12,9 @@ export default {
   }
 }
 </script>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
+* {
+  font-family: 'Roboto', sans-serif;
+}
+</style>

src/components/VueToggle.vue

@@ -1,27 +1,29 @@
 <template>
   <section
     :class="{'dark': darkTheme, disabled}"
-    :title="title"
+    class="m-toggle"
   >
     <input
       :id="id"
       v-model="toggleState"
-      :aria-checked="toggleState"
-      :aria-readonly="disabled"
       :disabled="disabled"
       :name="name"
-      role="checkbox"
+      class="m-toggle__input"
       type="checkbox"
     />
-    <label
-      :for="id"
+    <span
+      :aria-checked="toggleState"
+      :aria-disabled="disabled"
+      :aria-readonly="disabled"
       :style="toggleState && {background: activeColor}"
-      class="toggler"
+      class="m-toggle__content"
+      role="checkbox"
+      @click="toggleState = !toggleState"
     />
     <label
       :for="id"
-      :style="[{fontSize, fontWeight}]"
-      class="title"
+      :style="[{fontSize: `${fontSize}px`, fontWeight}]"
+      class="m-toggle__label"
     >
       {{title}}
     </label>
@@ -37,7 +39,7 @@ export default {
     darkTheme:   {type: Boolean, default: false},
     disabled:    {type: Boolean, default: false },
     fontSize:    {type: Number, default: 16},
-    fontWeight:  {type: String, default: 'bold'},
+    fontWeight:  {type: String, default: 'normal'},
     name:        {type: String, required: true},
     title:       {type: String, required: true},
     toggled:     {type: Boolean, default: false},
@@ -58,68 +60,57 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-section {
+.m-toggle {
   display: flex;
-  flex-wrap: wrap;
-  padding: 5px;
+  align-items: center;
+  margin: 0 -5px;
 
   > * {
     cursor: pointer;
     margin: 0 5px;
   }
-}
 
-.title {
-  display: inline-block;
-  line-height: 2em;
-  vertical-align: middle;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  &::selection {
-    background: none;
-  }
+  $self: &;
 
-  .disabled & {
-    &:hover {
+  &__label {
+    user-select: none;
+
+    .disabled & {
       cursor: not-allowed;
     }
-  }
 
-  .dark & {
-    color: white;
+    .dark & {
+      color: white;
+    }
   }
-}
 
-input {
-  display: none;
+  &__input {
+    display: none;
 
-  &:after,
-  & + .toggler {
-    box-sizing: border-box;
+    &:checked {
+      & + #{$self}__content {
+        &:after {
+          left: 50%;
+        }
+      }
+    }
   }
 
-  + .toggler {
+  &__content {
+    box-sizing: border-box;
     background: #F0F0F0;
     border-radius: 2em;
-    display: block;
     height: 2em;
     outline: 0;
     padding: 2px;
-    position: relative;
     transition: background .4s ease;
-    user-select: none;
     width: 4em;
     will-change: background;
 
     &:after {
       background: white;
       border-radius: 50%;
-      content: "";
+      content: '';
       display: block;
       height: 100%;
       left: 0;
@@ -141,14 +132,5 @@ input {
       background: #374151;
     }
   }
-
-  &:checked {
-    & + .toggler {
-      &:after {
-        left: 50%;
-      }
-    }
-  }
 }
-
 </style>

vue-toggle-component/src/vue-toggle-component.vue

@@ -16,12 +16,12 @@
     <label
         :for="id"
         :style="toggleState && {background: activeColor}"
-        class="toggler"
+        class="toggle__content"
     />
     <label
         :for="id"
         :style="[{fontSize, fontWeight}]"
-        class="title"
+        class="toggle__label"
     >
       {{title}}
     </label>
@@ -67,30 +67,30 @@ section {
   cursor: pointer;
   margin: 0 5px;
 }
-.title {
+.toggle__label {
   display: inline-block;
   line-height: 2em;
   vertical-align: middle;
 }
-.title::selection {
+.toggle__label::selection {
   background: none;
 }
-.disabled .title:hover {
+.disabled .toggle__label:hover {
   cursor: not-allowed;
 }
-.dark .title {
+.dark .toggle__label {
   color: white;
 }
 input {
   display: none;
 }
-input:after, .toggle + .toggler {
+input:after, .toggle + .toggle__content {
   box-sizing: border-box;
 }
-input:after::selection, .toggle + .toggler::selection {
+input:after::selection, .toggle + .toggle__content::selection {
   background: none;
 }
-input + .toggler {
+input + .toggle__content {
   background: #f0f0f0;
   border-radius: 2em;
   display: block;
@@ -103,7 +103,7 @@ input + .toggler {
   width: 4em;
   will-change: background;
 }
-.toggle + .toggler:after {
+.toggle + .toggle__content:after {
   background: white;
   border-radius: 50%;
   content: "";
@@ -115,16 +115,16 @@ input + .toggler {
   width: 50%;
   will-change: left;
 }
-.disabled .toggle + .toggler {
+.disabled .toggle + .toggle__content {
   opacity: 50%;
 }
-.disabled .toggle + .toggler:hover {
+.disabled .toggle + .toggle__content:hover {
   cursor: not-allowed;
 }
-.dark .toggle + .toggler {
+.dark .toggle + .toggle__content {
   background: #374151;
 }
-.toggle:checked + .toggler:after {
+.toggle:checked + .toggle__content:after {
   left: 50%;
 }