1 line
22 KiB
JSON
1 line
22 KiB
JSON
|
{"ast":null,"code":"import { unit } from '@ant-design/cssinjs';\nimport { genFocusOutline, resetComponent } from '../../style';\nimport { genStyleHooks, mergeToken } from '../../theme/internal';\n// ============================== Styles ==============================\nexport const genCheckboxStyle = token => {\n const {\n checkboxCls\n } = token;\n const wrapperCls = `${checkboxCls}-wrapper`;\n return [\n // ===================== Basic =====================\n {\n // Group\n [`${checkboxCls}-group`]: Object.assign(Object.assign({}, resetComponent(token)), {\n display: 'inline-flex',\n flexWrap: 'wrap',\n columnGap: token.marginXS,\n // Group > Grid\n [`> ${token.antCls}-row`]: {\n flex: 1\n }\n }),\n // Wrapper\n [wrapperCls]: Object.assign(Object.assign({}, resetComponent(token)), {\n display: 'inline-flex',\n alignItems: 'baseline',\n cursor: 'pointer',\n // Fix checkbox & radio in flex align #30260\n '&:after': {\n display: 'inline-block',\n width: 0,\n overflow: 'hidden',\n content: \"'\\\\a0'\"\n },\n // Checkbox near checkbox\n [`& + ${wrapperCls}`]: {\n marginInlineStart: 0\n },\n [`&${wrapperCls}-in-form-item`]: {\n 'input[type=\"checkbox\"]': {\n width: 14,\n // FIXME: magic\n height: 14 // FIXME: magic\n }\n }\n }),\n // Wrapper > Checkbox\n [checkboxCls]: Object.assign(Object.assign({}, resetComponent(token)), {\n position: 'relative',\n whiteSpace: 'nowrap',\n lineHeight: 1,\n cursor: 'pointer',\n borderRadius: token.borderRadiusSM,\n // To make alignment right when `controlHeight` is changed\n // Ref: https://github.com/ant-design/ant-design/issues/41564\n alignSelf: 'center',\n // Wrapper > Checkbox > input\n [`${checkboxCls}-input`]: {\n position: 'absolute',\n // Since baseline align will get additional space offset,\n // we need to move input to top to make it align with text.\n // Ref: https://github.com/ant-design/ant-design/issues/38926#issuecomment-1486137799\n inset: 0,\n zIndex: 1,\n cursor: 'pointer',\n opacity: 0,\n margin: 0,\n [`&:focus-visible + ${checkboxCls}-inner`]: Object.assign({}, genFocusOutline(token))\n },\n // Wrapper > Checkbox > inner\n [`${checkboxCls}-inner`]: {\n boxSizing: 'border-box',\n display: 'block',\n width: token.checkboxSize,\n height: token.checkboxSize,\n direction: 'ltr',\n backgroundColor: token.colorBgContainer,\n border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,\n borderRadius: token.borderRadiusSM,\n borderCollapse: 'separate',\n transition: `all ${token.motionDurationSlow}`,\n '&:after': {\n boxSizing: 'border-box',\n position: 'absolute',\n top: '50%',\n insetInlineStart: '25%',\n display: 'table',\n width: token.calc(token.checkboxSize).div(14).mul(5).equal(),\n height: token.calc(token.checkboxSize).div(14).mul(8).equal(),\n border: `${unit(token.lineWidthBold)} solid ${token.colorWhite}`,\n borderTop: 0,\n borderInlineStart: 0,\n transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',\n opacity: 0,\n content: '\"\"',\n transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`\n }\n },\n // Wrapper > Checkbox + Text\n '& + span': {\n paddingInlineStart: token.paddingXS,\n paddingInlineEnd: token.paddingXS\n }\n })\n },\n // ===================== Hover =====================\n {\n // Wrapper & Wrapper > Checkbox\n [`\n ${wrapperCls}:not(${wrapperCls}-disabled),\n ${checkboxCls}:not(${checkboxCls}-disabled)\n `]: {\n [`&:hover ${checkboxCls}-inner`]: {\n borderColor: token.
|