lasers/FreeTube
1
0
Fork 0
mirror of https://github.com/FreeTubeApp/FreeTube synced 2024-12-01 22:51:18 +01:00
Code Issues Projects Releases Wiki Activity

Refactor ft-toggle-switch

Browse Source
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
&.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%)