Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

encapsulating checkboxes only for front

Browse Source
This commit is contained in:
Antoine M 2023-12-21 17:02:27 +01:00
parent 08a56ba310
commit 47a6efb090
1 changed files with 47 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
resources/css/components/checkboxes.css
View File

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