UNPKG

antd

Version:

An enterprise-class UI design language and React components implementation

230 lines 6.61 kB
import { unit } from '@ant-design/cssinjs'; import { genStyleHooks, mergeToken } from '../../theme/internal'; import genColorBlockStyle from './color-block'; import genInputStyle from './input'; import genPickerStyle from './picker'; import genPresetsStyle from './presets'; export const genActiveStyle = (token, borderColor, outlineColor) => ({ borderInlineEndWidth: token.lineWidth, borderColor, boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${outlineColor}`, outline: 0 }); const genRtlStyle = token => { const { componentCls } = token; return { '&-rtl': { [`${componentCls}-presets-color`]: { '&::after': { direction: 'ltr' } }, [`${componentCls}-clear`]: { '&::after': { direction: 'ltr' } } } }; }; const genClearStyle = (token, size, extraStyle) => { const { componentCls, borderRadiusSM, lineWidth, colorSplit, red6 } = token; return { [`${componentCls}-clear`]: Object.assign(Object.assign({ width: size, height: size, borderRadius: borderRadiusSM, border: `${unit(lineWidth)} solid ${colorSplit}`, position: 'relative', cursor: 'pointer', overflow: 'hidden' }, extraStyle), { '&::after': { content: '""', position: 'absolute', insetInlineEnd: lineWidth, top: 0, display: 'block', width: 40, // maximum height: 2, // fixed transformOrigin: 'right', transform: 'rotate(-45deg)', backgroundColor: red6 } }) }; }; const genStatusStyle = token => { const { componentCls, colorError, colorWarning, colorErrorHover, colorWarningHover, colorErrorOutline, colorWarningOutline } = token; return { [`&${componentCls}-status-error`]: { borderColor: colorError, '&:hover': { borderColor: colorErrorHover }, [`&${componentCls}-trigger-active`]: Object.assign({}, genActiveStyle(token, colorError, colorErrorOutline)) }, [`&${componentCls}-status-warning`]: { borderColor: colorWarning, '&:hover': { borderColor: colorWarningHover }, [`&${componentCls}-trigger-active`]: Object.assign({}, genActiveStyle(token, colorWarning, colorWarningOutline)) } }; }; const genSizeStyle = token => { const { componentCls, controlHeightLG, controlHeightSM, controlHeight, controlHeightXS, borderRadius, borderRadiusSM, borderRadiusXS, borderRadiusLG, fontSizeLG } = token; return { [`&${componentCls}-lg`]: { minWidth: controlHeightLG, height: controlHeightLG, borderRadius: borderRadiusLG, [`${componentCls}-color-block, ${componentCls}-clear`]: { width: controlHeight, height: controlHeight, borderRadius }, [`${componentCls}-trigger-text`]: { fontSize: fontSizeLG } }, [`&${componentCls}-sm`]: { minWidth: controlHeightSM, height: controlHeightSM, borderRadius: borderRadiusSM, [`${componentCls}-color-block, ${componentCls}-clear`]: { width: controlHeightXS, height: controlHeightXS, borderRadius: borderRadiusXS } } }; }; const genColorPickerStyle = token => { const { antCls, componentCls, colorPickerWidth, colorPrimary, motionDurationMid, colorBgElevated, colorTextDisabled, colorText, colorBgContainerDisabled, borderRadius, marginXS, marginSM, controlHeight, controlHeightSM, colorBgTextActive, colorPickerPresetColorSize, colorPickerPreviewSize, lineWidth, colorBorder, paddingXXS, fontSize, colorPrimaryHover, controlOutline } = token; return [{ [componentCls]: Object.assign({ [`${componentCls}-inner`]: Object.assign(Object.assign(Object.assign(Object.assign({ '&-content': { display: 'flex', flexDirection: 'column', width: colorPickerWidth, [`& > ${antCls}-divider`]: { margin: `${unit(marginSM)} 0 ${unit(marginXS)}` } }, [`${componentCls}-panel`]: Object.assign({}, genPickerStyle(token)) }, genColorBlockStyle(token, colorPickerPreviewSize)), genInputStyle(token)), genPresetsStyle(token)), genClearStyle(token, colorPickerPresetColorSize, { marginInlineStart: 'auto', marginBottom: marginXS })), '&-trigger': Object.assign(Object.assign(Object.assign(Object.assign({ minWidth: controlHeight, height: controlHeight, borderRadius, border: `${unit(lineWidth)} solid ${colorBorder}`, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: `all ${motionDurationMid}`, background: colorBgElevated, padding: token.calc(paddingXXS).sub(lineWidth).equal(), [`${componentCls}-trigger-text`]: { marginInlineStart: marginXS, marginInlineEnd: token.calc(marginXS).sub(token.calc(paddingXXS).sub(lineWidth)).equal(), fontSize, color: colorText }, '&:hover': { borderColor: colorPrimaryHover }, [`&${componentCls}-trigger-active`]: Object.assign({}, genActiveStyle(token, colorPrimary, controlOutline)), '&-disabled': { color: colorTextDisabled, background: colorBgContainerDisabled, cursor: 'not-allowed', '&:hover': { borderColor: colorBgTextActive }, [`${componentCls}-trigger-text`]: { color: colorTextDisabled } } }, genClearStyle(token, controlHeightSM)), genColorBlockStyle(token, controlHeightSM)), genStatusStyle(token)), genSizeStyle(token)) }, genRtlStyle(token)) }]; }; export default genStyleHooks('ColorPicker', token => { const { colorTextQuaternary, marginSM } = token; const colorPickerSliderHeight = 8; const colorPickerToken = mergeToken(token, { colorPickerWidth: 234, colorPickerHandlerSize: 16, colorPickerHandlerSizeSM: 12, colorPickerAlphaInputWidth: 44, colorPickerInputNumberHandleWidth: 16, colorPickerPresetColorSize: 18, colorPickerInsetShadow: `inset 0 0 1px 0 ${colorTextQuaternary}`, colorPickerSliderHeight, colorPickerPreviewSize: token.calc(colorPickerSliderHeight).mul(2).add(marginSM).equal() }); return [genColorPickerStyle(colorPickerToken)]; });