mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-17 23:50:52 +08:00
8db39e34a7
* basic flex * chore: style basic * chore: status style * chore: small size * chore: label vertical * chore: more style * chore: hover disabled * chore: variant * chore: dot variant * chore: max width * chore: hover dot * chore: update style * chore: click style * chore: init percent * chore: pass detail * chore: for progress * chore: clean up * chore: clean up * chore: multiple css var * chore: status text * chore: status use var * chore: fix nest * chore: use svg * chore: type of panel * chore: offset support * chore: inline offset * chore: warning of steps * docs: add semantic preview * chore: semantic transition * chore: hover * chore: adjust style * chore: update semantic preview * chore: fix nav style * chore: patch panel motion * chore: update semantic preview * docs: update config provider doc * chore: fix part ts def * chore: fix test ts * test: update test case * test: coverage * chore: fix lint * test: update test case * test: update snapshot * chore: adjust style * chore: fix rtl * docs: update design * chore: update sctructure * chore: update comment * chore: clean up * chore: clean up * chore: cursor style * chore: coverage * docs: add missing part * chore: order * test: add test case * chore: fix ts * chore: clean up
308 lines
12 KiB
TypeScript
308 lines
12 KiB
TypeScript
import type { CSSObject } from '@ant-design/cssinjs';
|
|
|
|
import type { StepsToken } from '.';
|
|
import type { GenerateStyle } from '../../theme/internal';
|
|
|
|
export const STATUS_WAIT = 'wait';
|
|
export const STATUS_PROCESS = 'process';
|
|
export const STATUS_FINISH = 'finish';
|
|
export const STATUS_ERROR = 'error';
|
|
|
|
const genStatusStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
|
const {
|
|
componentCls,
|
|
colorTextDisabled,
|
|
colorTextLightSolid,
|
|
colorPrimary,
|
|
colorTextLabel,
|
|
colorError,
|
|
colorText,
|
|
colorTextDescription,
|
|
colorBgContainer,
|
|
colorPrimaryHover,
|
|
} = token;
|
|
|
|
const itemCls = `${componentCls}-item`;
|
|
|
|
return {
|
|
[componentCls]: [
|
|
{
|
|
// ========================= Variable =========================
|
|
[itemCls]: {
|
|
// Normal
|
|
// >>> line
|
|
'--steps-item-solid-line-color': '#000',
|
|
|
|
// >>> text
|
|
'--steps-item-title-color': '#000',
|
|
'--steps-item-content-color': '#000',
|
|
'--steps-item-subtitle-color': 'var(--steps-item-content-color)',
|
|
|
|
// >>> icon
|
|
'--steps-item-icon-custom-color': '#000',
|
|
'--steps-item-icon-bg-color': '#000',
|
|
'--steps-item-icon-border-color': '#000',
|
|
'--steps-item-icon-text-color': '#fff',
|
|
|
|
// >>> dot
|
|
'--steps-item-icon-dot-bg-color': '#000',
|
|
'--steps-item-icon-dot-border-color': '#000',
|
|
|
|
// Hover
|
|
// >>> text
|
|
'--steps-item-text-hover-color': '#000',
|
|
|
|
// >>> icon
|
|
'--steps-item-icon-bg-hover-color': `var(--steps-item-icon-bg-color)`,
|
|
'--steps-item-icon-border-hover-color': `var(--steps-item-icon-border-color)`,
|
|
'--steps-item-icon-text-hover-color': `var(--steps-item-icon-text-color)`,
|
|
|
|
// Active
|
|
// >>> text
|
|
'--steps-item-content-active-color': `var(--steps-item-content-color)`,
|
|
|
|
// >>> icon
|
|
'--steps-item-icon-active-bg-color': 'var(--steps-item-icon-bg-color)',
|
|
'--steps-item-icon-active-border-color': 'var(--steps-item-icon-border-color)',
|
|
'--steps-item-icon-active-text-color': 'var(--steps-item-icon-text-color)',
|
|
},
|
|
|
|
// ========================= Template =========================
|
|
// Normal
|
|
// >>> line
|
|
[`${itemCls}-rail`]: {
|
|
background: `var(--steps-item-solid-line-color)`,
|
|
},
|
|
|
|
// >>> icon
|
|
[`${itemCls}-custom ${itemCls}-icon`]: {
|
|
color: `var(--steps-item-icon-custom-color)`,
|
|
},
|
|
|
|
// >>> text
|
|
[`${itemCls}-title`]: {
|
|
color: `var(--steps-item-title-color)`,
|
|
},
|
|
|
|
[`${itemCls}-subtitle`]: {
|
|
color: `var(--steps-item-subtitle-color)`,
|
|
},
|
|
|
|
[`${itemCls}-content`]: {
|
|
color: `var(--steps-item-content-color)`,
|
|
},
|
|
|
|
// Active
|
|
// >>> icon
|
|
[`${itemCls}-active ${itemCls}-icon`]: {},
|
|
|
|
// >>> text
|
|
[`${itemCls}-active ${itemCls}-content`]: {
|
|
color: `var(--steps-item-content-active-color)`,
|
|
},
|
|
|
|
// Hover
|
|
// >>> text
|
|
[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: {
|
|
[`${itemCls}-title, ${itemCls}-content`]: {
|
|
color: `var(--steps-item-text-hover-color)`,
|
|
},
|
|
},
|
|
|
|
// Not dot
|
|
[`&:not(${componentCls}-dot)`]: {
|
|
[`${itemCls}:not(${itemCls}-custom)`]: {
|
|
[`${itemCls}-icon`]: {
|
|
background: `var(--steps-item-icon-bg-color)`,
|
|
borderColor: `var(--steps-item-icon-border-color)`,
|
|
color: `var(--steps-item-icon-text-color)`,
|
|
},
|
|
|
|
// Hover
|
|
[`&[role='button']:not(${itemCls}-active):hover`]: {
|
|
[`${itemCls}-icon`]: {
|
|
background: `var(--steps-item-icon-bg-hover-color)`,
|
|
borderColor: `var(--steps-item-icon-border-hover-color)`,
|
|
color: `var(--steps-item-icon-text-hover-color)`,
|
|
},
|
|
},
|
|
|
|
// Active
|
|
[`&${itemCls}-active`]: {
|
|
[`${itemCls}-icon`]: {
|
|
background: `var(--steps-item-icon-active-bg-color)`,
|
|
borderColor: `var(--steps-item-icon-active-border-color)`,
|
|
color: `var(--steps-item-icon-active-text-color)`,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// Dot
|
|
[`&${componentCls}-dot`]: {
|
|
[`${itemCls}-icon-dot`]: {
|
|
background: `var(--steps-item-icon-dot-bg-color)`,
|
|
borderColor: `var(--steps-item-icon-dot-border-color)`,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
// ========================== Shared ==========================
|
|
// Wait
|
|
[`${itemCls}-${STATUS_WAIT}`]: {
|
|
'--steps-item-icon-custom-color': colorTextDisabled,
|
|
'--steps-item-title-color': colorTextDescription,
|
|
'--steps-item-content-color': colorTextDescription,
|
|
'--steps-item-content-active-color': colorText,
|
|
'--steps-item-text-hover-color': colorPrimaryHover,
|
|
},
|
|
[`${itemCls}-rail-${STATUS_WAIT}`]: {
|
|
'--steps-item-solid-line-color': colorTextDisabled,
|
|
},
|
|
|
|
// Process
|
|
[`${itemCls}-${STATUS_PROCESS}`]: {
|
|
'--steps-item-icon-custom-color': colorPrimary,
|
|
'--steps-item-title-color': colorText,
|
|
'--steps-item-content-color': colorTextDescription,
|
|
'--steps-item-content-active-color': colorText,
|
|
'--steps-item-text-hover-color': colorPrimaryHover,
|
|
},
|
|
[`${itemCls}-rail-${STATUS_PROCESS}`]: {
|
|
'--steps-item-solid-line-color': colorPrimary,
|
|
},
|
|
|
|
// Finish
|
|
[`${itemCls}-${STATUS_FINISH}`]: {
|
|
'--steps-item-icon-custom-color': colorPrimary,
|
|
'--steps-item-title-color': colorText,
|
|
'--steps-item-content-color': colorTextDescription,
|
|
'--steps-item-content-active-color': colorText,
|
|
'--steps-item-text-hover-color': colorPrimaryHover,
|
|
},
|
|
[`${itemCls}-rail-${STATUS_FINISH}`]: {
|
|
'--steps-item-solid-line-color': colorPrimary,
|
|
},
|
|
|
|
// Error
|
|
[`${itemCls}-${STATUS_ERROR}`]: {
|
|
'--steps-item-icon-custom-color': colorError,
|
|
'--steps-item-title-color': colorError,
|
|
'--steps-item-content-color': colorError,
|
|
'--steps-item-content-active-color': colorError,
|
|
'--steps-item-text-hover-color': token.colorErrorHover,
|
|
},
|
|
[`${itemCls}-rail-${STATUS_ERROR}`]: {
|
|
'--steps-item-solid-line-color': colorError,
|
|
},
|
|
},
|
|
{
|
|
// ========================== Filled ==========================
|
|
[`&${componentCls}-filled`]: {
|
|
// Wait
|
|
[`${itemCls}-${STATUS_WAIT}`]: {
|
|
'--steps-item-icon-bg-color': token.colorFillTertiary,
|
|
'--steps-item-icon-border-color': 'transparent',
|
|
'--steps-item-icon-text-color': colorTextLabel,
|
|
'--steps-item-icon-dot-bg-color': colorTextDisabled,
|
|
'--steps-item-icon-dot-border-color': 'transparent',
|
|
// Hover
|
|
'--steps-item-icon-bg-hover-color': token.colorPrimaryBgHover,
|
|
'--steps-item-icon-border-hover-color': 'transparent',
|
|
'--steps-item-icon-text-hover-color': colorPrimary,
|
|
// Active
|
|
'--steps-item-icon-active-bg-color': colorPrimary,
|
|
'--steps-item-icon-active-border-color': 'transparent',
|
|
'--steps-item-icon-active-text-color': colorTextLightSolid,
|
|
},
|
|
|
|
// Finish & Process
|
|
[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
|
|
'--steps-item-icon-bg-color': token.colorPrimaryBg,
|
|
'--steps-item-icon-border-color': 'transparent',
|
|
'--steps-item-icon-text-color': colorPrimary,
|
|
'--steps-item-icon-dot-bg-color': colorPrimary,
|
|
'--steps-item-icon-dot-border-color': 'transparent',
|
|
// Hover
|
|
'--steps-item-icon-bg-hover-color': token.colorPrimaryBgHover,
|
|
'--steps-item-icon-border-hover-color': 'transparent',
|
|
'--steps-item-icon-text-hover-color': colorPrimary,
|
|
// Active
|
|
'--steps-item-icon-active-bg-color': colorPrimary,
|
|
'--steps-item-icon-active-border-color': 'transparent',
|
|
'--steps-item-icon-active-text-color': colorTextLightSolid,
|
|
},
|
|
|
|
// Error
|
|
[`${itemCls}-${STATUS_ERROR}`]: {
|
|
'--steps-item-icon-bg-color': token.colorErrorBg,
|
|
'--steps-item-icon-border-color': 'transparent',
|
|
'--steps-item-icon-text-color': colorError,
|
|
'--steps-item-icon-dot-bg-color': colorError,
|
|
'--steps-item-icon-dot-border-color': 'transparent',
|
|
// Hover
|
|
'--steps-item-icon-bg-hover-color': token.colorErrorBgFilledHover,
|
|
'--steps-item-icon-border-hover-color': 'transparent',
|
|
'--steps-item-icon-text-hover-color': colorError,
|
|
// Active
|
|
'--steps-item-icon-active-bg-color': colorError,
|
|
'--steps-item-icon-active-border-color': 'transparent',
|
|
'--steps-item-icon-active-text-color': colorTextLightSolid,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
// ========================= Outlined =========================
|
|
[`&${componentCls}-outlined`]: {
|
|
// Wait
|
|
[`${itemCls}-${STATUS_WAIT}`]: {
|
|
'--steps-item-icon-bg-color': colorBgContainer,
|
|
'--steps-item-icon-border-color': colorTextDisabled,
|
|
'--steps-item-icon-text-color': colorTextDisabled,
|
|
'--steps-item-icon-dot-bg-color': 'transparent',
|
|
'--steps-item-icon-dot-border-color': colorTextDisabled,
|
|
// Hover
|
|
'--steps-item-icon-bg-hover-color': 'transparent',
|
|
'--steps-item-icon-border-hover-color': colorPrimaryHover,
|
|
'--steps-item-icon-text-hover-color': colorPrimaryHover,
|
|
// Active
|
|
'--steps-item-icon-active-bg-color': token.colorFillTertiary,
|
|
},
|
|
|
|
// Finish & Process
|
|
[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
|
|
'--steps-item-icon-bg-color': colorBgContainer,
|
|
'--steps-item-icon-border-color': colorPrimary,
|
|
'--steps-item-icon-text-color': colorPrimary,
|
|
'--steps-item-icon-dot-bg-color': 'transparent',
|
|
'--steps-item-icon-dot-border-color': colorPrimary,
|
|
// Hover
|
|
'--steps-item-icon-bg-hover-color': 'transparent',
|
|
'--steps-item-icon-border-hover-color': token.colorPrimaryHover,
|
|
'--steps-item-icon-text-hover-color': token.colorPrimaryHover,
|
|
// Active
|
|
'--steps-item-icon-active-bg-color': token.colorPrimaryBg,
|
|
},
|
|
|
|
// Error
|
|
[`${itemCls}-${STATUS_ERROR}`]: {
|
|
'--steps-item-icon-bg-color': colorBgContainer,
|
|
'--steps-item-icon-border-color': colorError,
|
|
'--steps-item-icon-text-color': colorError,
|
|
'--steps-item-icon-dot-bg-color': 'transparent',
|
|
'--steps-item-icon-dot-border-color': colorError,
|
|
// Hover
|
|
'--steps-item-icon-bg-hover-color': 'transparent',
|
|
'--steps-item-icon-border-hover-color': token.colorErrorHover,
|
|
'--steps-item-icon-text-hover-color': token.colorErrorHover,
|
|
// Active
|
|
'--steps-item-icon-active-bg-color': token.colorErrorBg,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
};
|
|
|
|
export default genStatusStyle;
|