Refactor ft-toggle-switch

src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass

@@ -14,55 +14,41 @@
   padding: 16px 0 16px 44px
 
   &.compact
-    padding: 12px 0 12px 44px
     margin: 0px
+    padding: 12px 0 12px 44px
 
+  &:before, &:after
+    content: ""
+    position: absolute
+    margin: 0
+    outline: 0
+    top: 50%
+    -ms-transform: translate(0, -50%)
+    -webkit-transform: translate(0, -50%)
+    transform: translate(0, -50%)
+    -webkit-transition: all 0.3s ease
+    transition: all 0.3s ease
 
-.switch-label:before,
-.switch-label:after
-  content: ""
-  position: absolute
-  margin: 0
-  outline: 0
-  top: 50%
-  -ms-transform: translate(0, -50%)
-  -webkit-transform: translate(0, -50%)
-  transform: translate(0, -50%)
-  -webkit-transition: all 0.3s ease
-  transition: all 0.3s ease
+  &:before
+    left: 1px
+    width: 34px
+    height: 14px
+    background-color: #9E9E9E
+    border-radius: 8px
 
-.switch-label:before
-  left: 1px
-  width: 34px
-  height: 14px
-  background-color: #9E9E9E
-  border-radius: 8px
+    .switch-input:checked + &
+      background-color: var(--accent-color-light)
 
-.switch-label:after
-  left: 0
-  width: 20px
-  height: 20px
-  background-color: #FAFAFA
-  border-radius: 50%
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)
+  &:after
+    left: 0
+    width: 20px
+    height: 20px
+    background-color: #FAFAFA
+    border-radius: 50%
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)
 
-.switch-label .toggle--on
-  display: none
-
-.switch-label .toggle--off
-  display: inline-block
-
-.switch-input:checked+.switch-label:before
-  background-color: var(--accent-color-light)
-
-.switch-input:checked+.switch-label:after
-  background-color: var(--accent-color)
-  -ms-transform: translate(80%, -50%)
-  -webkit-transform: translate(80%, -50%)
-  transform: translate(80%, -50%)
-
-.switch-input:checked+.switch-label .toggle--on
-  display: inline-block
-
-.switch-input:checked+.switch-label .toggle--off
-  display: none
+    .switch-input:checked + &
+      background-color: var(--accent-color)
+      -ms-transform: translate(80%, -50%)
+      -webkit-transform: translate(80%, -50%)
+      transform: translate(80%, -50%)