diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass index 946cd67c..e1d60f84 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass +++ b/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%)