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
.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
|