mirror of
https://code.castopod.org/adaures/castopod.git
synced 2024-07-15 10:01:13 +02:00
40 lines
1.5 KiB
CSS
40 lines
1.5 KiB
CSS
@layer components {
|
|
.form-switch {
|
|
@apply absolute w-0 h-0 opacity-0;
|
|
|
|
&:checked + .form-switch-slider {
|
|
@apply bg-pine-500;
|
|
}
|
|
|
|
&:focus + .form-switch-slider {
|
|
@apply ring ring-offset-2 ring-pine-500 ring-offset-pine-100;
|
|
}
|
|
|
|
&:checked + .form-switch-slider::before {
|
|
@apply transform translate-x-8;
|
|
}
|
|
|
|
&:checked + .form-switch-slider::after {
|
|
@apply transform translate-x-1;
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ffffff'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z'/%3E%3C/svg%3E%0A");
|
|
}
|
|
}
|
|
|
|
.form-switch-slider {
|
|
@apply relative inset-0 flex-shrink-0 w-[72px] h-10 transition duration-200 bg-gray-400 border-black rounded-full cursor-pointer border-3;
|
|
|
|
&::before {
|
|
@apply absolute z-10 w-[28px] h-[28px] transition duration-200 bg-white rounded-full ring-1 ring-black ring-opacity-5 shadow;
|
|
content: "";
|
|
left: 3px;
|
|
bottom: 3px;
|
|
}
|
|
|
|
&::after {
|
|
@apply absolute w-6 h-6 transition duration-150 transform translate-x-8 top-1 left-1;
|
|
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/%3E%3C/svg%3E%0A");
|
|
}
|
|
}
|
|
}
|