mirror of
https://github.com/joinmarket-webui/jam.git
synced 2026-08-18 13:09:10 +02:00
51 lines
1 KiB
CSS
51 lines
1 KiB
CSS
|
/* Adapted from https://medium.com/front-end-weekly/build-a-css-only-toggle-switch-using-tailwindcss-d2739882934 */
|
||
|
|
|
||
|
|
.toggle-switch-label {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch-input {
|
||
|
|
appearance: none;
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 0.375rem;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch {
|
||
|
|
width: 2.75rem;
|
||
|
|
height: 1.75rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
padding: 0.25rem;
|
||
|
|
margin-right: 1rem;
|
||
|
|
background-color: rgba(222, 222, 222, 1);
|
||
|
|
border-radius: 9999px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch:after {
|
||
|
|
content: '';
|
||
|
|
width: 1.25rem;
|
||
|
|
height: 1.25rem;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 9999px;
|
||
|
|
box-shadow: 0 3px 5px rgb(0, 0, 0, 0.25);
|
||
|
|
transition-duration: 300ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.peer:checked ~ .toggle-switch {
|
||
|
|
background-color: rgba(39, 174, 96, 1);
|
||
|
|
transition-duration: 300ms;
|
||
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.peer:checked ~ .toggle-switch:after {
|
||
|
|
transform: translateX(1rem);
|
||
|
|
}
|