67 lines
1.9 KiB
CSS
67 lines
1.9 KiB
CSS
@layer components {
|
|
.form-switch {
|
|
@apply absolute w-0 h-0 opacity-0;
|
|
|
|
&:checked + .form-switch-slider {
|
|
@apply bg-accent-base;
|
|
}
|
|
|
|
&:focus + .form-switch-slider {
|
|
@apply ring-accent;
|
|
}
|
|
|
|
&:checked + .form-switch-slider::before {
|
|
@apply transform translate-x-8;
|
|
}
|
|
|
|
&:checked + .form-switch-slider::after {
|
|
@apply transform translate-x-0 left-2;
|
|
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 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");
|
|
}
|
|
|
|
&:checked + .form-switch-slider.form-switch-slider--small::before {
|
|
@apply translate-x-6;
|
|
}
|
|
|
|
&:checked + .form-switch-slider.form-switch-slider--small::after {
|
|
@apply left-1;
|
|
}
|
|
}
|
|
|
|
.form-switch-slider {
|
|
@apply relative inset-0 flex-shrink-0 w-16 h-8 transition duration-200 rounded-full cursor-pointer bg-highlight border-contrast border-3;
|
|
|
|
&.form-switch-slider--small {
|
|
@apply w-12 h-6;
|
|
|
|
&::before {
|
|
@apply w-4 h-4;
|
|
}
|
|
|
|
&::after {
|
|
@apply translate-x-5;
|
|
|
|
left: 0;
|
|
top: -1px;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
@apply absolute z-10 w-6 h-6 transition duration-200 rounded-full shadow bg-elevated ring-1 ring-black ring-opacity-5;
|
|
|
|
content: "";
|
|
left: 1px;
|
|
bottom: 1px;
|
|
}
|
|
|
|
&::after {
|
|
@apply absolute w-5 h-5 transition duration-150 transform translate-x-5;
|
|
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 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");
|
|
top: 3px;
|
|
left: 10px;
|
|
}
|
|
}
|
|
}
|