mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
fix: Steps with process style in compact theme (#48251)
* fix: use css var for calc * fix: tail align * Update components/steps/style/index.ts Co-authored-by: 红 <wxh1220@gmail.com> Signed-off-by: afc163 <afc163@gmail.com> * test: update snapshot * chore: fix lint * chore: adjust style --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: 红 <wxh1220@gmail.com>
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
502dac12aa
commit
8fc4fa06c8
@ -2703,7 +2703,7 @@ Array [
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-steps ant-steps-vertical ant-steps-small"
|
||||
class="ant-steps ant-steps-vertical ant-steps-with-progress ant-steps-small"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
@ -2769,11 +2769,64 @@ Array [
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
<div
|
||||
class="ant-steps-progress-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
<div
|
||||
aria-valuenow="80"
|
||||
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info"
|
||||
role="progressbar"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
style="width: 32px; height: 32px; font-size: 10.8px;"
|
||||
>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="48"
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="48"
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 62.31857894892403; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="48"
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
|
||||
@ -2363,7 +2363,7 @@ Array [
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-vertical"
|
||||
class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-small ant-steps-label-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
@ -2429,11 +2429,64 @@ Array [
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
<div
|
||||
class="ant-steps-progress-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
<div
|
||||
aria-valuenow="80"
|
||||
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info"
|
||||
role="progressbar"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
style="width:32px;height:32px;font-size:10.8px"
|
||||
>
|
||||
<svg
|
||||
class="ant-progress-circle"
|
||||
role="presentation"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
class="ant-progress-circle-trail"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="48"
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="1"
|
||||
r="48"
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:62.31857894892403;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
<circle
|
||||
class="ant-progress-circle-path"
|
||||
cx="50"
|
||||
cy="50"
|
||||
opacity="0"
|
||||
r="48"
|
||||
stroke-linecap="round"
|
||||
stroke-width="4"
|
||||
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
|
||||
@ -22,7 +22,7 @@ const App: React.FC = () => (
|
||||
<br />
|
||||
<Steps current={1} percent={60} labelPlacement="vertical" items={items} />
|
||||
<br />
|
||||
<Steps current={1} size="small" labelPlacement="vertical" items={items} />
|
||||
<Steps current={1} percent={80} size="small" labelPlacement="vertical" items={items} />
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
19
components/steps/style/horizontal.ts
Normal file
19
components/steps/style/horizontal.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
const genHorizontalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const { componentCls } = token;
|
||||
const stepsItemCls = `${componentCls}-item`; // .ant-steps-item
|
||||
|
||||
return {
|
||||
[`${componentCls}-horizontal`]: {
|
||||
[`${stepsItemCls}-tail`]: {
|
||||
transform: 'translateY(-50%)',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genHorizontalStyle;
|
||||
@ -6,6 +6,7 @@ import { genFocusOutline, resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import genStepsCustomIconStyle from './custom-icon';
|
||||
import genStepsHorizontalStyle from './horizontal';
|
||||
import genStepsInlineStyle from './inline';
|
||||
import genStepsLabelPlacementStyle from './label-placement';
|
||||
import genStepsNavStyle from './nav';
|
||||
@ -241,7 +242,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
},
|
||||
[`${stepsItemCls}-tail`]: {
|
||||
position: 'absolute',
|
||||
top: token.calc(token.iconSize).div(2).sub(token.paddingXXS).equal(),
|
||||
top: token.calc(token.iconSize).div(2).equal(),
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
|
||||
@ -383,6 +384,8 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
...genStepsSmallStyle(token),
|
||||
// vertical
|
||||
...genStepsVerticalStyle(token),
|
||||
// horizontal
|
||||
...genStepsHorizontalStyle(token),
|
||||
// label-placement
|
||||
...genStepsLabelPlacementStyle(token),
|
||||
// progress-dot
|
||||
|
||||
@ -14,7 +14,7 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
|
||||
|
||||
'&-tail': {
|
||||
marginInlineStart: token.calc(iconSize).div(2).add(token.controlHeightLG).equal(),
|
||||
padding: `${unit(token.paddingXXS)} ${unit(token.paddingLG)}`,
|
||||
padding: `0 ${unit(token.paddingLG)}`,
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
|
||||
@ -4,53 +4,57 @@ import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const { antCls, componentCls } = token;
|
||||
const {
|
||||
antCls,
|
||||
componentCls,
|
||||
iconSize,
|
||||
iconSizeSM,
|
||||
processIconColor,
|
||||
marginXXS,
|
||||
lineWidthBold,
|
||||
lineWidth,
|
||||
paddingXXS,
|
||||
} = token;
|
||||
|
||||
const progressSize = token.calc(iconSize).add(token.calc(lineWidthBold).mul(4).equal()).equal();
|
||||
const progressSizeSM = token
|
||||
.calc(iconSizeSM)
|
||||
.add(token.calc(token.lineWidth).mul(4).equal())
|
||||
.equal();
|
||||
|
||||
return {
|
||||
[`&${componentCls}-with-progress`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
paddingTop: token.paddingXXS,
|
||||
paddingTop: paddingXXS,
|
||||
|
||||
[`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]:
|
||||
{
|
||||
color: token.processIconColor,
|
||||
color: processIconColor,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-vertical > ${componentCls}-item `]: {
|
||||
paddingInlineStart: token.paddingXXS,
|
||||
paddingInlineStart: paddingXXS,
|
||||
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
top: token.marginXXS,
|
||||
insetInlineStart: token
|
||||
.calc(token.iconSize)
|
||||
.div(2)
|
||||
.sub(token.lineWidth)
|
||||
.add(token.paddingXXS)
|
||||
.equal(),
|
||||
top: marginXXS,
|
||||
insetInlineStart: token.calc(iconSize).div(2).sub(lineWidth).add(paddingXXS).equal(),
|
||||
},
|
||||
},
|
||||
|
||||
[`&, &${componentCls}-small`]: {
|
||||
[`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
|
||||
paddingBottom: token.paddingXXS,
|
||||
paddingInlineStart: token.paddingXXS,
|
||||
paddingBottom: paddingXXS,
|
||||
paddingInlineStart: paddingXXS,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
|
||||
{
|
||||
insetInlineStart: token
|
||||
.calc(token.iconSizeSM)
|
||||
.div(2)
|
||||
.sub(token.lineWidth)
|
||||
.add(token.paddingXXS)
|
||||
.equal(),
|
||||
insetInlineStart: token.calc(iconSizeSM).div(2).sub(lineWidth).add(paddingXXS).equal(),
|
||||
},
|
||||
|
||||
[`&${componentCls}-label-vertical`]: {
|
||||
[`${componentCls}-item ${componentCls}-item-tail`]: {
|
||||
top: token.calc(token.margin).sub(token.calc(token.lineWidth).mul(2).equal()).equal(),
|
||||
},
|
||||
[`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
|
||||
top: token.calc(iconSize).div(2).add(paddingXXS).equal(),
|
||||
},
|
||||
|
||||
[`${componentCls}-item-icon`]: {
|
||||
@ -58,26 +62,26 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
|
||||
[`${antCls}-progress`]: {
|
||||
position: 'absolute',
|
||||
insetBlockStart: token
|
||||
.calc(
|
||||
token
|
||||
.calc(token.iconSize)
|
||||
.sub(token.stepsProgressSize)
|
||||
.sub(token.calc(token.lineWidth).mul(2).equal())
|
||||
.equal(),
|
||||
)
|
||||
.div(2)
|
||||
.equal(),
|
||||
insetInlineStart: token
|
||||
.calc(
|
||||
token
|
||||
.calc(token.iconSize)
|
||||
.sub(token.stepsProgressSize)
|
||||
.sub(token.calc(token.lineWidth).mul(2).equal())
|
||||
.equal(),
|
||||
)
|
||||
.div(2)
|
||||
.equal(),
|
||||
insetInlineStart: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
|
||||
'&-inner': {
|
||||
width: `${progressSize} !important`,
|
||||
height: `${progressSize} !important`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ============================== Small size ==============================
|
||||
[`&${componentCls}-small`]: {
|
||||
[`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
|
||||
top: token.calc(iconSizeSM).div(2).add(paddingXXS).equal(),
|
||||
},
|
||||
|
||||
[`${componentCls}-item-icon ${antCls}-progress-inner`]: {
|
||||
width: `${progressSizeSM} !important`,
|
||||
height: `${progressSizeSM} !important`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user