54 lines
1.5 KiB
CSS
54 lines
1.5 KiB
CSS
.homegrade-frontend-page {
|
|
input[type='checkbox'] {
|
|
@apply border-2 rounded-md border-neutral-800;
|
|
/* border-color: rgb(156 163 175 / 1); */
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
/* Not removed via appearance */
|
|
margin: 0;
|
|
font: inherit;
|
|
width: 1.15em;
|
|
height: 1.15em;
|
|
transform: translateY(-0.075em);
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
input[type='checkbox']::before {
|
|
content: '';
|
|
width: 0.65em;
|
|
height: 0.65em;
|
|
-webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
|
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
|
transform: scale(0);
|
|
transform-origin: bottom left;
|
|
transition: 120ms transform ease-in-out;
|
|
box-shadow: inset 1em 1em theme('colors.secondary');
|
|
/* Windows High Contrast Mode */
|
|
}
|
|
|
|
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 {
|
|
transform: scale(1);
|
|
/* background-color: yellow; */
|
|
}
|
|
|
|
input[type='checkbox']:focus-visible {
|
|
/* outline: max(2px, 0.15em) solid currentColor;
|
|
outline-offset: max(2px, 0.15em); */
|
|
}
|
|
|
|
input[type='checkbox']:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.2;
|
|
}
|
|
}
|