mirror of
https://code.castopod.org/adaures/castopod.git
synced 2024-08-17 07:13:22 +02:00
- add rounded classes with conditional border-radius depending on screen width - add ring-castopod class to use on focus states
64 lines
1.8 KiB
CSS
64 lines
1.8 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-castopod;
|
|
}
|
|
|
|
&: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 bg-gray-400 border-black rounded-full cursor-pointer 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 bg-white rounded-full shadow 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;
|
|
}
|
|
}
|
|
}
|