1 line
12 KiB
JSON
1 line
12 KiB
JSON
|
{"ast":null,"code":"import { unit } from '@ant-design/cssinjs';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { resetComponent } from '../../style';\nimport { genStyleHooks, mergeToken } from '../../theme/internal';\n// ============================== Styles ==============================\nconst genBaseStyle = token => {\n const {\n paddingXXS,\n lineWidth,\n tagPaddingHorizontal,\n componentCls,\n calc\n } = token;\n const paddingInline = calc(tagPaddingHorizontal).sub(lineWidth).equal();\n const iconMarginInline = calc(paddingXXS).sub(lineWidth).equal();\n return {\n // Result\n [componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {\n display: 'inline-block',\n height: 'auto',\n // https://github.com/ant-design/ant-design/pull/47504\n marginInlineEnd: token.marginXS,\n paddingInline,\n fontSize: token.tagFontSize,\n lineHeight: token.tagLineHeight,\n whiteSpace: 'nowrap',\n background: token.defaultBg,\n border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,\n borderRadius: token.borderRadiusSM,\n opacity: 1,\n transition: `all ${token.motionDurationMid}`,\n textAlign: 'start',\n position: 'relative',\n // RTL\n [`&${componentCls}-rtl`]: {\n direction: 'rtl'\n },\n '&, a, a:hover': {\n color: token.defaultColor\n },\n [`${componentCls}-close-icon`]: {\n marginInlineStart: iconMarginInline,\n fontSize: token.tagIconSize,\n color: token.colorTextDescription,\n cursor: 'pointer',\n transition: `all ${token.motionDurationMid}`,\n '&:hover': {\n color: token.colorTextHeading\n }\n },\n [`&${componentCls}-has-color`]: {\n borderColor: 'transparent',\n [`&, a, a:hover, ${token.iconCls}-close, ${token.iconCls}-close:hover`]: {\n color: token.colorTextLightSolid\n }\n },\n '&-checkable': {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n cursor: 'pointer',\n [`&:not(${componentCls}-checkable-checked):hover`]: {\n color: token.colorPrimary,\n backgroundColor: token.colorFillSecondary\n },\n '&:active, &-checked': {\n color: token.colorTextLightSolid\n },\n '&-checked': {\n backgroundColor: token.colorPrimary,\n '&:hover': {\n backgroundColor: token.colorPrimaryHover\n }\n },\n '&:active': {\n backgroundColor: token.colorPrimaryActive\n }\n },\n '&-hidden': {\n display: 'none'\n },\n // To ensure that a space will be placed between character and `Icon`.\n [`> ${token.iconCls} + span, > span + ${token.iconCls}`]: {\n marginInlineStart: paddingInline\n }\n }),\n [`${componentCls}-borderless`]: {\n borderColor: 'transparent',\n background: token.tagBorderlessBg\n }\n };\n};\n// ============================== Export ==============================\nexport const prepareToken = token => {\n const {\n lineWidth,\n fontSizeIcon,\n calc\n } = token;\n const tagFontSize = token.fontSizeSM;\n const tagToken = mergeToken(token, {\n tagFontSize,\n tagLineHeight: unit(calc(token.lineHeightSM).mul(tagFontSize).equal()),\n tagIconSize: calc(fontSizeIcon).sub(calc(lineWidth).mul(2)).equal(),\n // Tag icon is much smaller\n tagPaddingHorizontal: 8,\n // Fixed padding.\n tagBorderlessBg: token.defaultBg\n });\n return tagToken;\n};\nexport const prepareComponentToken = token => ({\n defaultBg: new TinyColor(token.colorFillQuaternary).onBackground(token.colorBgContainer).toHexString(),\n defaultColor: token.colorText\n});\nexport default genStyleHooks('Tag', token => {\n const tagToken = prepareToken(token);\n return genBaseStyle(tagToken);\n}, prepareComponentToken);","map":{"version":3,"names":["unit","TinyColor","resetComponent","genStyleHooks","mergeToken","genBaseStyle","token","paddi
|