tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor ft-toggle-switch

This commit is contained in:
Cadence Ember 2020-04-12 15:18:38 +12:00
parent 0ecabbd373
commit fec233fab7
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
1 changed files with 32 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
View File

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