Refactor ft-toggle-switch

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

@@ -14,12 +14,10 @@
   padding: 16px 0 16px 44px
 
   &.compact
-    padding: 12px 0 12px 44px
     margin: 0px
+    padding: 12px 0 12px 44px
 
-
-.switch-label:before,
-.switch-label:after
+  &:before, &:after
     content: ""
     position: absolute
     margin: 0
@@ -31,14 +29,17 @@
     -webkit-transition: all 0.3s ease
     transition: all 0.3s ease
 
-.switch-label:before
+  &:before
     left: 1px
     width: 34px
     height: 14px
     background-color: #9E9E9E
     border-radius: 8px
 
-.switch-label:after
+    .switch-input:checked + &
+      background-color: var(--accent-color-light)
+
+  &:after
     left: 0
     width: 20px
     height: 20px
@@ -46,23 +47,8 @@
     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
+    .switch-input:checked + &
       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