diff --git a/components/steps/style/progress-dot.ts b/components/steps/style/progress-dot.ts index 2152bc3d1a..a29ac50b42 100644 --- a/components/steps/style/progress-dot.ts +++ b/components/steps/style/progress-dot.ts @@ -6,13 +6,13 @@ import type { GenerateStyle } from '../../theme/internal'; import { getItemWithWidthStyle } from './util'; const genDotStyle: GenerateStyle = (token) => { - const { componentCls, iconSize, dotSize, dotCurrentSize, marginXXS, lineWidthBold } = token; + const { componentCls, iconSize, dotSize, dotCurrentSize, marginXXS, lineWidthBold, fontSizeSM } = + token; const itemCls = `${componentCls}-item`; return { [`${componentCls}${componentCls}-dot`]: { - // '--steps-icon-size': dotCurrentSize, '--steps-icon-size-active': dotCurrentSize, '--steps-icon-size': dotSize, '--steps-dot-icon-size': dotSize, @@ -22,9 +22,11 @@ const genDotStyle: GenerateStyle = (token) => { // ========================= Shared ========================== // Icon + [`${itemCls}-custom ${itemCls}-icon`]: { + fontSize: fontSizeSM, + }, + [`${itemCls}-icon`]: { - // background: 'transparent', - // border: 0, position: 'relative', '&:after': { @@ -42,36 +44,8 @@ const genDotStyle: GenerateStyle = (token) => { }, }, - // [`${itemCls}-icon-dot`]: { - // width: 'var(--steps-dot-icon-size)', - // height: 'var(--steps-dot-icon-size)', - // borderRadius: '100%', - // border: `var(--steps-dot-icon-border-width) ${token.lineType} transparent`, - // position: 'relative', - // transition: `all ${token.motionDurationSlow}`, - // display: 'flex', - // justifyContent: 'center', - // alignItems: 'center', - // fontSize: fontSizeSM, - - // '&: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`]: { - // '--steps-dot-icon-size': 'var(--steps-icon-size)', '--steps-icon-size': 'var(--steps-icon-size-active)', }, diff --git a/components/timeline/style/index.ts b/components/timeline/style/index.ts index 5a2b682b19..77d77c65f8 100644 --- a/components/timeline/style/index.ts +++ b/components/timeline/style/index.ts @@ -57,7 +57,7 @@ const genTimelineStyle: GenerateStyle = (token) => { '--steps-title-horizontal-title-height': token.fontHeight, // Root Level: Record Steps icon size and support fallback - '--steps-icon-dot-size-origin': 'var(--steps-icon-size)', + '--steps-icon-dot-size-origin': 'var(--steps-icon-size-active)', '--steps-icon-dot-size-custom': token.dotSize, ...resetComponent(token),