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.
54 lines
1.1 KiB
54 lines
1.1 KiB
// *, *:after, *:before { |
|
// // box-sizing: border-box; |
|
// } |
|
|
|
// body { |
|
// min-height: 100vh; |
|
// display: flex; |
|
// align-items: center; |
|
// justify-content: center; |
|
// } |
|
|
|
.switchbox { |
|
position: relative; |
|
input[type="checkbox"] { |
|
visibility: hidden; |
|
position: absolute; |
|
&:checked + label { |
|
transform: rotate(0deg); |
|
background-color: rgb(18, 207, 127); |
|
border-color: rgb(18, 207, 127) !important; |
|
&:before { |
|
transform: translateX(24px); |
|
background-color: #fff; |
|
border-color: rgb(18, 207, 127) !important; |
|
} |
|
} |
|
} |
|
|
|
label { |
|
display: flex; |
|
width: 50px; |
|
height: 25px; |
|
border: 3px solid #aaa; |
|
border-radius: 99em; |
|
position: relative; |
|
transition: transform 0.3s ease-in-out; |
|
transform-origin: 50% 50%; |
|
cursor: pointer; |
|
|
|
&:before { |
|
transition: transform 0.3s ease; |
|
transition-delay: 0s; |
|
content: ""; |
|
display: block; |
|
position: absolute; |
|
width: 17px; |
|
height: 17px; |
|
background-color: #aaa; |
|
border-radius: 50%; |
|
top: 1px; |
|
left: 1px; |
|
} |
|
} |
|
}
|
|
|