TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 06:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix checkbox

Browse Source
This commit is contained in:
peintnermax
2024-09-09 10:31:31 +02:00
parent f38d66e0a0
commit b7fd7f6c0b
3 changed files with 21 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/login/public/checkbox.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 208 B

56
apps/login/src/styles/globals.scss
View File

@@ -21,56 +21,6 @@ html {
--dark-background-color: #000000;
}
// $types: "background", "primary", "warn";
// $shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
// @each $type in $types {
// @each $shade in $shades {
// .bg-#{$type}-light-#{$shade} {
// background-color: var(--theme-light-#{$type}-#{$shade}) !important;
// }
// .dark .dark\:bg-#{$type}-dark-#{$shade} {
// background-color: var(--theme-dark-#{$type}-#{$shade}) !important;
// }
// .text-#{$type}-light-#{$shade} {
// color: var(--theme-light-#{$type}-#{$shade}) !important;
// }
// .dark .dark\:text-#{$type}-dark-#{$shade} {
// color: var(--theme-dark-#{$type}-#{$shade}) !important;
// }
// .text-#{$type}-light-contrast-#{$shade} {
// color: var(--theme-light-#{$type}-contrast-#{$shade}) !important;
// }
// .dark .dark\:text-#{$type}-dark-contrast-#{$shade} {
// color: var(--theme-dark-#{$type}-contrast-#{$shade}) !important;
// }
// }
// }
// $alphatypes: "text", "link";
// @each $alphatype in $alphatypes {
// .text-#{$alphatype}-light,
// .hover\:text-#{$alphatype}-light {
// color: var(--theme-light-#{$alphatype}) !important;
// }
// .text-#{$alphatype}-light-contrast {
// color: var(--theme-light-#{$alphatype}-contrast) !important;
// }
// .text-#{$alphatype}-light-secondary {
// color: var(--theme-light-#{$alphatype}-secondary) !important;
// }
// .dark .dark\:text-#{$alphatype}-dark,
// .dark .hover\:text-#{$alphatype}-dark {
// color: var(--theme-dark-#{$alphatype}) !important;
// }
// .dark .dark\:text-#{$alphatype}-dark-contrast {
// color: var(--theme-dark-#{$alphatype}-contrast) !important;
// }
// .dark .dark\:text-#{$alphatype}-dark-secondary {
// color: var(--theme-dark-#{$alphatype}-secondary) !important;
// }
// }
.form-checkbox:checked {
background-image: url("/checkbox.svg");
}

37
apps/login/src/ui/Checkbox.tsx
View File

@@ -37,26 +37,23 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
return (
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
ref={ref}
checked={enabled}
onChange={(event) => {
setEnabled(event.target?.checked);
onChangeVal && onChangeVal(event.target?.checked);
}}
disabled={disabled}
type="checkbox"
className={classNames(
enabled
? "border-none text-primary-light-500 dark:text-primary-dark-500 bg-primary-light-500 active:bg-primary-light-500 dark:bg-primary-dark-500 active:dark:bg-primary-dark-500"
: "border-2 border-gray-500 dark:border-white bg-transparent dark:bg-transparent",
"focus:border-gray-500 focus:dark:border-white focus:ring-opacity-40 focus:dark:ring-opacity-40 focus:ring-offset-0 focus:ring-2 dark:focus:ring-offset-0 dark:focus:ring-2 focus:ring-gray-500 focus:dark:ring-white",
"h-4 w-4 rounded-sm ring-0 outline-0 checked:ring-0 checked:dark:ring-0 active:border-none active:ring-0",
"disabled:bg-gray-500 disabled:text-gray-500 disabled:border-gray-200 disabled:cursor-not-allowed",
className,
)}
{...props}
/>
<div className="box-sizing block">
<input
ref={ref}
checked={enabled}
onChange={(event) => {
setEnabled(event.target?.checked);
onChangeVal && onChangeVal(event.target?.checked);
}}
disabled={disabled}
type="checkbox"
className={classNames(
"form-checkbox rounded border-gray-300 text-primary-light-500 dark:text-primary-dark-500 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50",
className,
)}
{...props}
/>
</div>
</div>
{children}
</div>