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 e1d60f84..02f9b36d 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass +++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass @@ -1,7 +1,24 @@ /* Thanks to Guus Lieben for the Material Design Switch */ +.switch-ctn + margin: 20px 16px + position: relative + + &.compact + margin: 0 + .switch-input - display: none + -moz-appearance: none + -webkit-appearance: none + appearance: none + height: 20px + left: -3px + position: absolute + top: calc(50% - 3px) + -ms-transform: translate(0, (-50%)) + -webkit-transform: translate(0, -50%) + transform: translate(0, -50%) + width: 34px .switch-label position: relative @@ -10,12 +27,7 @@ cursor: pointer font-weight: 500 text-align: left - margin: 16px - padding: 16px 0 16px 44px - - &.compact - margin: 0px - padding: 12px 0 12px 44px + padding: 12px 0 12px 44px &:before, &:after content: "" diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue index 6672eed5..56bdb321 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue +++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue @@ -1,5 +1,8 @@