antd
Version:
An enterprise-class UI design language and React components implementation
57 lines • 1.71 kB
JavaScript
import { genCssVar } from '../../theme/util/genStyleUtils';
import { getItemWithWidthStyle } from './util';
const genDotStyle = token => {
const {
componentCls,
iconSize,
dotSize,
dotCurrentSize,
marginXXS,
lineWidthBold,
fontSizeSM,
antCls
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = genCssVar(antCls, 'cmp-steps');
return {
[`${componentCls}${componentCls}-dot`]: {
[varName('icon-size-active')]: dotCurrentSize,
[varName('icon-size')]: dotSize,
[varName('dot-icon-size')]: dotSize,
[varName('dot-icon-border-width')]: lineWidthBold,
[varName('rail-size')]: lineWidthBold,
[varName('icon-border-width')]: lineWidthBold,
// ========================= Shared ==========================
// Icon
[`${itemCls}-custom ${itemCls}-icon`]: {
fontSize: fontSizeSM
},
[`${itemCls}-icon`]: {
position: 'relative',
'&:after': {
content: '""',
width: iconSize,
height: iconSize,
display: 'block',
position: 'absolute',
top: '50%',
left: {
_skip_check_: true,
value: '50%'
},
transform: 'translate(-50%, -50%)'
}
},
// // >>> active
[`${itemCls}-active ${itemCls}-icon`]: {
[varName('icon-size')]: varRef('icon-size-active')
},
// ======================= Horizontal ========================
[`&${componentCls}-horizontal`]: {
// With descriptionMaxWidth
[`&, &${componentCls}-small`]: getItemWithWidthStyle(token, marginXXS)
}
}
};
};
export default genDotStyle;