encapsulating checkboxes only for front

This commit is contained in:
Antoine M 2023-12-21 17:02:27 +01:00
parent 08a56ba310
commit 47a6efb090

View File

@ -1,4 +1,5 @@
input[type='checkbox'] {
.homegrade-frontend-page {
input[type='checkbox'] {
@apply border-2 rounded-md border-neutral-800;
/* border-color: rgb(156 163 175 / 1); */
-webkit-appearance: none;
@ -12,9 +13,9 @@ input[type='checkbox'] {
transform: translateY(-0.075em);
display: grid;
place-content: center;
}
}
input[type='checkbox']::before {
input[type='checkbox']::before {
content: '';
width: 0.65em;
height: 0.65em;
@ -25,27 +26,28 @@ input[type='checkbox']::before {
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em theme('colors.secondary');
/* Windows High Contrast Mode */
}
}
input[type='checkbox']:checked {
input[type='checkbox']:checked {
/* --tw-border-opacity: 1;
--tw-bg-opacity: 1; */
@apply bg-white border-neutral-800;
/* border-color: rgb(255 193 37 / var(--tw-border-opacity)); */
/* background-color: rgb(255 193 37 / var(--tw-bg-opacity)); */
}
}
input[type='checkbox']:checked::before {
input[type='checkbox']:checked::before {
transform: scale(1);
/* background-color: yellow; */
}
}
input[type='checkbox']:focus {
input[type='checkbox']:focus {
/* outline: max(2px, 0.15em) solid currentColor;
outline-offset: max(2px, 0.15em); */
}
}
input[type='checkbox']:disabled {
input[type='checkbox']:disabled {
cursor: not-allowed;
opacity: 0.2;
}
}