1 line
5.1 KiB
Plaintext
1 line
5.1 KiB
Plaintext
|
{"version":3,"sources":["../../../src/presets/material/checkbox/index.ts"],"sourcesContent":["import type { CheckboxDesignTokens, CheckboxTokenSections } from '@primeuix/themes/types/checkbox';\n\nexport const root: CheckboxTokenSections.Root = {\n borderRadius: '{border.radius.xs}',\n width: '18px',\n height: '18px',\n background: '{form.field.background}',\n checkedBackground: '{primary.color}',\n checkedHoverBackground: '{primary.color}',\n disabledBackground: '{form.field.disabled.background}',\n filledBackground: '{form.field.filled.background}',\n borderColor: '{form.field.border.color}',\n hoverBorderColor: '{form.field.hover.border.color}',\n focusBorderColor: '{form.field.focus.border.color}',\n checkedBorderColor: '{primary.color}',\n checkedHoverBorderColor: '{primary.color}',\n checkedFocusBorderColor: '{primary.color}',\n checkedDisabledBorderColor: '{form.field.border.color}',\n invalidBorderColor: '{form.field.invalid.border.color}',\n shadow: '{form.field.shadow}',\n focusRing: {\n width: '0',\n style: 'none',\n color: 'unset',\n offset: '0',\n shadow: 'none'\n },\n transitionDuration: '{form.field.transition.duration}',\n sm: {\n width: '14px',\n height: '14px'\n },\n lg: {\n width: '22px',\n height: '22px'\n }\n};\n\nexport const icon: CheckboxTokenSections.Icon = {\n size: '0.875rem',\n color: '{form.field.color}',\n checkedColor: '{primary.contrast.color}',\n checkedHoverColor: '{primary.contrast.color}',\n disabledColor: '{form.field.disabled.color}',\n sm: {\n size: '0.75rem'\n },\n lg: {\n size: '1rem'\n }\n};\n\nexport const css: CheckboxTokenSections.CSS = /*css*/ `\n.p-checkbox {\n border-radius: 50%;\n transition: box-shadow dt('checkbox.transition.duration');\n}\n\n.p-checkbox-box {\n border-width: 2px;\n}\n\n.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) {\n box-shadow: 0 0 1px 10px color-mix(in srgb, dt('text.color'), transparent 96%);\n}\n\n.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {\n box-shadow: 0 0 1px 10px color-mix(in srgb, dt('text.color'), transparent 88%);\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) {\n box-shadow: 0 0 1px 10px color-mix(in srgb, dt('checkbox.checked.background'), transparent 92%);\n}\n\n.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) {\n box-shadow: 0 0 1px 10px color-mix(in srgb, dt('checkbox.checked.background'), transparent 84%);\n}\n\n.p-checkbox-checked .p-checkbox-box:before {\n content: \"\";\n position: absolute;\n top: var(--p-md-check-icon-t);\n left: 2px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: p-md-check 125ms 50ms linear forwards;\n}\n\n.p-checkbox-checked .p-checkbox-icon {\n display: none;\n}\n\n.p-checkbox {\n --p-md-check-icon-t: 10px;\n --p-md-check-icon-w: 6px;\n --p-md-check-icon-h: 12px;\n}\n\n.p-checkbox-sm {\n --p-md-check-icon-t: 8px;\n --p-md-check-icon-w: 4px;\n --p-md-check-icon-h: 10px;\n}\n\n.p-checkbox-lg {\n --p-md-check-icon-t: 12px;\n --p-md-check-icon-w: 8px;\n --p-md-check-icon-h: 16px;\n}\n\n@keyframes p-md-check {\n 0%{\n width: 0;\n height: 0;\n border-color: dt('checkbox.icon.checked.color');\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 33%{\n width: var(--p-md-check-icon-w);\n height: 0;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 100%{\n width: var(--p-md-check-icon-w);\n height: var(--p-md-check-icon-h);\n border-color: dt('checkbox.icon.checked.color');\n transform: translate3d(0,calc(-1 * var(--p-md-check-icon-h)),0) rotate(45deg);\n }\n}\n`;\n\nexport default {\n root,\n icon,\n css\n} satisfies CheckboxDesignTokens;\n"],"mappings":";AAEO,IAAM,OAAmC;AAAA,EAC5C,cAAc;AAAA,EACd,OAA
|