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

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

@ -14,55 +14,41 @@
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
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, &:before
.switch-label:after left: 1px
content: "" width: 34px
position: absolute height: 14px
margin: 0 background-color: #9E9E9E
outline: 0 border-radius: 8px
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-input:checked + &
left: 1px background-color: var(--accent-color-light)
width: 34px
height: 14px
background-color: #9E9E9E
border-radius: 8px
.switch-label:after &:after
left: 0 left: 0
width: 20px width: 20px
height: 20px height: 20px
background-color: #FAFAFA background-color: #FAFAFA
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 background-color: var(--accent-color)
-ms-transform: translate(80%, -50%)
.switch-label .toggle--off -webkit-transform: translate(80%, -50%)
display: inline-block transform: translate(80%, -50%)
.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