encapsulating checkboxes only for front
This commit is contained in:
parent
08a56ba310
commit
47a6efb090
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user