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

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

@ -1,4 +1,5 @@
input[type='checkbox'] { .homegrade-frontend-page {
input[type='checkbox'] {
@apply border-2 rounded-md border-neutral-800; @apply border-2 rounded-md border-neutral-800;
/* border-color: rgb(156 163 175 / 1); */ /* border-color: rgb(156 163 175 / 1); */
-webkit-appearance: none; -webkit-appearance: none;
@ -12,9 +13,9 @@ input[type='checkbox'] {
transform: translateY(-0.075em); transform: translateY(-0.075em);
display: grid; display: grid;
place-content: center; 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;
@ -25,27 +26,28 @@ input[type='checkbox']::before {
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;
}
} }