You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
903 B
44 lines
903 B
3 years ago
|
.material-switch > input[type='checkbox']
|
||
|
display: none
|
||
|
|
||
|
.material-switch > label
|
||
|
cursor: pointer
|
||
|
margin-top: 0.8rem
|
||
|
float: right
|
||
|
height: 0px
|
||
|
position: relative
|
||
|
width: 40px
|
||
|
|
||
|
.material-switch > label::before
|
||
|
background: rgb(0, 0, 0)
|
||
|
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5)
|
||
|
border-radius: 8px
|
||
|
content: ''
|
||
|
height: 16px
|
||
|
margin-top: -8px
|
||
|
position: absolute
|
||
|
opacity: 0.3
|
||
|
transition: all 0.4s ease-in-out
|
||
|
width: 40px
|
||
|
|
||
|
.material-switch > label::after
|
||
|
background: rgb(255, 255, 255)
|
||
|
border-radius: 16px
|
||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3)
|
||
|
content: ''
|
||
|
height: 24px
|
||
|
left: -4px
|
||
|
margin-top: -8px
|
||
|
position: absolute
|
||
|
top: -4px
|
||
|
transition: all 0.3s ease-in-out
|
||
|
width: 24px
|
||
|
|
||
|
.material-switch > input[type='checkbox']:checked + label::before
|
||
|
background: #007bff
|
||
|
opacity: 0.5
|
||
|
|
||
|
.material-switch > input[type='checkbox']:checked + label::after
|
||
|
background: #007bff
|
||
|
left: 20px
|