mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-06 08:53:28 +08:00
Refactor:Component Steps Less to cssInJs (#35058)
* refactor: Steps cssInJs add basic structure * refactor: change Component Steps less into cssInJs * refactor: ♻️ steps cssInJs code formated * style: 💄 change Steps cssinjs left and right into Logical Properties * style: 💄 steps cssinjs add FIXME for number hardcode * style: 💄 steps cssinjs dismiss useless rtl style * style: 💄 step cssinjs fix the 'not compatible with RTL mode' warning and fix the style in RTL mode * style: code formated for FIXME * style: revert the change about _skip_check_ * style: step cssinjs margin/padding used with Logical properties * ci: fix lint check * style: fix the style on RTL * style: try fix the step subtitle order on RTL mode * style: optimization the style on RTL and dismiss duplicate styles with logical properties
This commit is contained in:
PCCCCCCC
GitHub
parent
617449ddd2
commit
f4411d9393
@ -76,6 +76,7 @@ export interface OverrideToken {
|
||||
Timeline?: TimelineComponentToken;
|
||||
Tabs?: {};
|
||||
Card?: {};
|
||||
Steps?: {};
|
||||
}
|
||||
|
||||
/** Final token which contains the components level override */
|
||||
|
||||
@ -90,15 +90,15 @@ export default Demo;
|
||||
```
|
||||
|
||||
```css
|
||||
[data-theme='compact'] .site-navigation-steps,
|
||||
.site-navigation-steps {
|
||||
[data-theme='compact'] .site-navigation-steps.ant-steps.ant-steps-navigation,
|
||||
.site-navigation-steps.ant-steps.ant-steps-navigation {
|
||||
margin-bottom: 60px;
|
||||
box-shadow: 0px -1px 0 0 #e8e8e8 inset;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-navigation-steps {
|
||||
[data-theme="dark"] .site-navigation-steps.ant-steps.ant-steps-navigation {
|
||||
border-bottom: 1px solid #303030;
|
||||
margin-bottom: 60px;
|
||||
box-shadow: none;
|
||||
|
||||
@ -7,6 +7,7 @@ import classNames from 'classnames';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import Progress from '../progress';
|
||||
import useBreakpoint from '../grid/hooks/useBreakpoint';
|
||||
import useStyle from './style';
|
||||
|
||||
export interface StepsProps {
|
||||
type?: 'default' | 'navigation';
|
||||
@ -53,6 +54,9 @@ const Steps: StepsType = props => {
|
||||
);
|
||||
|
||||
const prefixCls = getPrefixCls('steps', props.prefixCls);
|
||||
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const iconPrefix = getPrefixCls('', props.iconPrefix);
|
||||
const stepsClassName = classNames(
|
||||
{
|
||||
@ -60,6 +64,7 @@ const Steps: StepsType = props => {
|
||||
[`${prefixCls}-with-progress`]: percent !== undefined,
|
||||
},
|
||||
className,
|
||||
hashId,
|
||||
);
|
||||
const icons = {
|
||||
finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
|
||||
@ -94,7 +99,7 @@ const Steps: StepsType = props => {
|
||||
}
|
||||
return node;
|
||||
};
|
||||
return (
|
||||
return wrapSSR(
|
||||
<RcSteps
|
||||
icons={icons}
|
||||
{...restProps}
|
||||
@ -104,7 +109,7 @@ const Steps: StepsType = props => {
|
||||
prefixCls={prefixCls}
|
||||
iconPrefix={iconPrefix}
|
||||
className={stepsClassName}
|
||||
/>
|
||||
/>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
48
components/steps/style/custom-icon.ts
Normal file
48
components/steps/style/custom-icon.ts
Normal file
@ -0,0 +1,48 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
|
||||
const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsIconCustomTop,
|
||||
stepsIconCustomSize,
|
||||
stepsIconCustomFontSize,
|
||||
processIconColor,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-item-custom`]: {
|
||||
[`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
|
||||
height: 'auto',
|
||||
background: 'none',
|
||||
border: 0, // FIXME: hardcode in v4
|
||||
[`> ${componentCls}-icon`]: {
|
||||
top: stepsIconCustomTop,
|
||||
insetInlineStart: 0.5, // FIXME: hardcode in v4
|
||||
width: stepsIconCustomSize,
|
||||
height: stepsIconCustomSize,
|
||||
fontSize: stepsIconCustomFontSize,
|
||||
lineHeight: `${stepsIconCustomSize}px`,
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-item-process`]: {
|
||||
[`${componentCls}-item-icon > ${componentCls}-icon`]: {
|
||||
color: processIconColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Only adjust horizontal customize icon width
|
||||
[`&:not(${componentCls}-vertical)`]: {
|
||||
[`${componentCls}-item-custom`]: {
|
||||
[`${componentCls}-item-icon`]: {
|
||||
width: 'auto',
|
||||
background: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genStepsCustomIconStyle;
|
||||
@ -1,255 +1,257 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@steps-prefix-cls: ~'@{ant-prefix}-steps';
|
||||
@process-icon-color: @primary-color;
|
||||
@process-title-color: @heading-color;
|
||||
@process-description-color: @text-color;
|
||||
@process-icon-text-color: @text-color-inverse;
|
||||
@wait-icon-color: @disabled-color;
|
||||
@wait-title-color: @text-color-secondary;
|
||||
@wait-description-color: @wait-title-color;
|
||||
@wait-tail-color: @process-tail-color;
|
||||
@finish-icon-color: @process-icon-color;
|
||||
@finish-title-color: @text-color;
|
||||
@finish-description-color: @text-color-secondary;
|
||||
@finish-tail-color: @primary-color;
|
||||
@error-icon-color: @error-color;
|
||||
@error-title-color: @error-color;
|
||||
@error-description-color: @error-color;
|
||||
@error-tail-color: @wait-tail-color;
|
||||
@steps-nav-active-color: @primary-color;
|
||||
// @steps-prefix-cls: ~'@{ant-prefix}-steps';
|
||||
// @process-icon-color: @primary-color;
|
||||
// @process-title-color: @heading-color;
|
||||
// @process-description-color: @text-color;
|
||||
// @process-icon-text-color: @text-color-inverse;
|
||||
// @wait-icon-color: @disabled-color;
|
||||
// @wait-title-color: @text-color-secondary;
|
||||
// @wait-description-color: @wait-title-color;
|
||||
// @wait-tail-color: @process-tail-color;
|
||||
// @finish-icon-color: @process-icon-color;
|
||||
// @finish-title-color: @text-color;
|
||||
// @finish-description-color: @text-color-secondary;
|
||||
// @finish-tail-color: @primary-color;
|
||||
// @error-icon-color: @error-color;
|
||||
// @error-title-color: @error-color;
|
||||
// @error-description-color: @error-color;
|
||||
// @error-tail-color: @wait-tail-color;
|
||||
// @steps-nav-active-color: @primary-color;
|
||||
|
||||
.@{steps-prefix-cls} {
|
||||
.reset-component();
|
||||
//.ant-steps
|
||||
// .@{steps-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
text-align: initial;
|
||||
}
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
// font-size: 0;
|
||||
// text-align: initial;
|
||||
// }
|
||||
|
||||
.@{steps-prefix-cls}-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
// .@{steps-prefix-cls}-item {
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// flex: 1;
|
||||
// overflow: hidden;
|
||||
// vertical-align: top;
|
||||
|
||||
&-container {
|
||||
outline: none;
|
||||
}
|
||||
// &-container {
|
||||
// outline: none;
|
||||
// }
|
||||
|
||||
&:last-child {
|
||||
flex: none;
|
||||
}
|
||||
// &:last-child {
|
||||
// flex: none;
|
||||
// }
|
||||
|
||||
&:last-child > &-container > &-tail,
|
||||
&:last-child > &-container > &-content > &-title::after {
|
||||
display: none;
|
||||
}
|
||||
// &:last-child > &-container > &-tail,
|
||||
// &:last-child > &-container > &-content > &-title::after {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&-icon,
|
||||
&-content {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
// &-icon,
|
||||
// &-content {
|
||||
// display: inline-block;
|
||||
// vertical-align: top;
|
||||
// }
|
||||
|
||||
&-icon {
|
||||
width: @steps-icon-size;
|
||||
height: @steps-icon-size;
|
||||
margin: @steps-icon-margin;
|
||||
font-size: @steps-icon-font-size;
|
||||
font-family: @font-family;
|
||||
line-height: @steps-icon-size;
|
||||
text-align: center;
|
||||
border: @border-width-base @border-style-base @wait-icon-color;
|
||||
border-radius: @steps-icon-size;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
// &-icon {
|
||||
// width: @steps-icon-size;
|
||||
// height: @steps-icon-size;
|
||||
// margin: @steps-icon-margin;
|
||||
// font-size: @steps-icon-font-size;
|
||||
// font-family: @font-family;
|
||||
// line-height: @steps-icon-size;
|
||||
// text-align: center;
|
||||
// border: @border-width-base @border-style-base @wait-icon-color;
|
||||
// border-radius: @steps-icon-size;
|
||||
// transition: background-color 0.3s, border-color 0.3s;
|
||||
|
||||
.@{steps-prefix-cls}-icon {
|
||||
position: relative;
|
||||
top: @steps-icon-top;
|
||||
color: @primary-color;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
// .@{steps-prefix-cls}-icon {
|
||||
// position: relative;
|
||||
// top: @steps-icon-top;
|
||||
// color: @primary-color;
|
||||
// line-height: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-tail {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
// &-tail {
|
||||
// position: absolute;
|
||||
// top: 12px;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// padding: 0 10px;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: @border-color-split;
|
||||
border-radius: 1px;
|
||||
transition: background 0.3s;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
// &::after {
|
||||
// display: inline-block;
|
||||
// width: 100%;
|
||||
// height: 1px;
|
||||
// background: @border-color-split;
|
||||
// border-radius: 1px;
|
||||
// transition: background 0.3s;
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
|
||||
&-title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-right: 16px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-lg;
|
||||
line-height: @steps-title-line-height;
|
||||
// &-title {
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// padding-right: 16px;
|
||||
// color: @text-color;
|
||||
// font-size: @font-size-lg;
|
||||
// line-height: @steps-title-line-height;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: (@steps-title-line-height / 2);
|
||||
left: 100%;
|
||||
display: block;
|
||||
width: 9999px;
|
||||
height: 1px;
|
||||
background: @wait-tail-color;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: (@steps-title-line-height / 2);
|
||||
// left: 100%;
|
||||
// display: block;
|
||||
// width: 9999px;
|
||||
// height: 1px;
|
||||
// background: @wait-tail-color;
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
|
||||
&-subtitle {
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
color: @text-color-secondary;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
// &-subtitle {
|
||||
// display: inline;
|
||||
// margin-left: 8px;
|
||||
// color: @text-color-secondary;
|
||||
// font-weight: normal;
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
|
||||
&-description {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.step-item-status(wait);
|
||||
.step-item-status(process);
|
||||
// &-description {
|
||||
// color: @text-color-secondary;
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
// .step-item-status(wait);
|
||||
// .step-item-status(process);
|
||||
|
||||
&-process > &-container > &-icon {
|
||||
background: @process-icon-color;
|
||||
.@{steps-prefix-cls}-icon {
|
||||
color: @process-icon-text-color;
|
||||
}
|
||||
}
|
||||
// &-process > &-container > &-icon {
|
||||
// background: @process-icon-color;
|
||||
// .@{steps-prefix-cls}-icon {
|
||||
// color: @process-icon-text-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-process > &-container > &-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
.step-item-status(finish);
|
||||
.step-item-status(error);
|
||||
// &-process > &-container > &-title {
|
||||
// font-weight: 500;
|
||||
// }
|
||||
// .step-item-status(finish);
|
||||
// .step-item-status(error);
|
||||
|
||||
&.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
|
||||
background: @error-icon-color;
|
||||
}
|
||||
// &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
|
||||
// background: @error-icon-color;
|
||||
// }
|
||||
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
// &-disabled {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
|
||||
// ===================== Clickable =====================
|
||||
.@{steps-prefix-cls} .@{steps-prefix-cls}-item {
|
||||
&:not(.@{steps-prefix-cls}-item-active) {
|
||||
& > .@{steps-prefix-cls}-item-container[role='button'] {
|
||||
cursor: pointer;
|
||||
// .@{steps-prefix-cls} .@{steps-prefix-cls}-item {
|
||||
// &:not(.@{steps-prefix-cls}-item-active) {
|
||||
// & > .@{steps-prefix-cls}-item-container[role='button'] {
|
||||
// cursor: pointer;
|
||||
|
||||
.@{steps-prefix-cls}-item {
|
||||
&-title,
|
||||
&-subtitle,
|
||||
&-description,
|
||||
&-icon .@{steps-prefix-cls}-icon {
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
// .@{steps-prefix-cls}-item {
|
||||
// &-title,
|
||||
// &-subtitle,
|
||||
// &-description,
|
||||
// &-icon .@{steps-prefix-cls}-icon {
|
||||
// transition: color 0.3s;
|
||||
// }
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
.@{steps-prefix-cls}-item {
|
||||
&-title,
|
||||
&-subtitle,
|
||||
&-description {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// .@{steps-prefix-cls}-item {
|
||||
// &-title,
|
||||
// &-subtitle,
|
||||
// &-description {
|
||||
// color: @primary-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&:not(.@{steps-prefix-cls}-item-process) {
|
||||
& > .@{steps-prefix-cls}-item-container[role='button']:hover {
|
||||
.@{steps-prefix-cls}-item {
|
||||
&-icon {
|
||||
border-color: @primary-color;
|
||||
// &:not(.@{steps-prefix-cls}-item-process) {
|
||||
// & > .@{steps-prefix-cls}-item-container[role='button']:hover {
|
||||
// .@{steps-prefix-cls}-item {
|
||||
// &-icon {
|
||||
// border-color: @primary-color;
|
||||
|
||||
.@{steps-prefix-cls}-icon {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{steps-prefix-cls}-icon {
|
||||
// color: @primary-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
|
||||
.@{steps-prefix-cls}-item {
|
||||
padding-left: 16px;
|
||||
white-space: nowrap;
|
||||
// .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
|
||||
// .@{steps-prefix-cls}-item {
|
||||
// padding-left: 16px;
|
||||
// white-space: nowrap;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child .@{steps-prefix-cls}-item-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
// &:first-child {
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// &:last-child .@{steps-prefix-cls}-item-title {
|
||||
// padding-right: 0;
|
||||
// }
|
||||
|
||||
&-tail {
|
||||
display: none;
|
||||
}
|
||||
// &-tail {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&-description {
|
||||
max-width: @steps-description-max-width;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-description {
|
||||
// max-width: @steps-description-max-width;
|
||||
// white-space: normal;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.step-item-status(@status) {
|
||||
@icon-color: '@{status}-icon-color';
|
||||
@title-color: '@{status}-title-color';
|
||||
@description-color: '@{status}-description-color';
|
||||
@tail-color: '@{status}-tail-color';
|
||||
&-@{status} &-icon {
|
||||
background-color: @steps-background;
|
||||
border-color: @@icon-color;
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
color: @@icon-color;
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
background: @@icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-@{status} > &-container > &-content > &-title {
|
||||
color: @@title-color;
|
||||
// .step-item-status(@status) {
|
||||
// @icon-color: '@{status}-icon-color';
|
||||
// @title-color: '@{status}-title-color';
|
||||
// @description-color: '@{status}-description-color';
|
||||
// @tail-color: '@{status}-tail-color';
|
||||
|
||||
&::after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
}
|
||||
&-@{status} > &-container > &-content > &-description {
|
||||
color: @@description-color;
|
||||
}
|
||||
&-@{status} > &-container > &-tail::after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
}
|
||||
// &-@{status} &-icon {
|
||||
// background-color: @steps-background;
|
||||
// border-color: @@icon-color;
|
||||
// > .@{steps-prefix-cls}-icon {
|
||||
// color: @@icon-color;
|
||||
// .@{steps-prefix-cls}-icon-dot {
|
||||
// background: @@icon-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &-@{status} > &-container > &-content > &-title {
|
||||
// color: @@title-color;
|
||||
|
||||
@import './custom-icon';
|
||||
@import './small';
|
||||
@import './vertical';
|
||||
@import './label-placement';
|
||||
@import './progress-dot';
|
||||
@import './nav';
|
||||
@import './rtl';
|
||||
@import './progress.less';
|
||||
// &::after {
|
||||
// background-color: @@tail-color;
|
||||
// }
|
||||
// }
|
||||
// &-@{status} > &-container > &-content > &-description {
|
||||
// color: @@description-color;
|
||||
// }
|
||||
// &-@{status} > &-container > &-tail::after {
|
||||
// background-color: @@tail-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @import './custom-icon';
|
||||
// @import './small';
|
||||
// @import './vertical';
|
||||
// @import './label-placement';
|
||||
// @import './progress-dot';
|
||||
// @import './nav';
|
||||
// @import './rtl';
|
||||
// @import './progress.less';
|
||||
|
||||
@ -1,6 +1,370 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
// import '../../style/index.less';
|
||||
// import './index.less';
|
||||
|
||||
// style dependencies
|
||||
// deps-lint-skip: grid
|
||||
import '../../progress/style';
|
||||
// import '../../progress/style';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
import genStepsCustomIconStyle from './custom-icon';
|
||||
import genStepsSmallStyle from './small';
|
||||
import genStepsVerticalStyle from './vertical';
|
||||
import genStepsLabelPlacementStyle from './label-placement';
|
||||
import genStepsProgressDotStyle from './progress-dot';
|
||||
import genStepsProgressStyle from './progress';
|
||||
import genStepsNavStyle from './nav';
|
||||
import genStepsRTLStyle from './rtl';
|
||||
|
||||
export interface StepsToken extends FullToken<'Steps'> {
|
||||
// Steps variable default.less
|
||||
processTailColor: string;
|
||||
stepsNavArrowColor: string;
|
||||
stepsBackground: string;
|
||||
stepsIconSize: number;
|
||||
stepsIconCustomSize: number;
|
||||
stepsIconCustomTop: number;
|
||||
stepsIconCustomFontSize: number;
|
||||
stepsIconTop: number;
|
||||
stepsIconFontSize: number;
|
||||
stepsIconMargin: string;
|
||||
stepsTitleLineHeight: number;
|
||||
stepsSmallIconSize: number;
|
||||
stepsSmallIconMargin: string;
|
||||
stepsDotSize: number;
|
||||
stepsDotTop: number;
|
||||
stepsCurrentDotSize: number;
|
||||
stepsDescriptionMaxWidth: number;
|
||||
stepsNavContentMaxWidth: string;
|
||||
stepsVerticalIconWidth: number;
|
||||
stepsVerticalTailWidth: number;
|
||||
stepsVerticalTailWidthSm: number;
|
||||
// Steps component less variable
|
||||
processIconColor: string;
|
||||
processTitleColor: string;
|
||||
processDescriptionColor: string;
|
||||
processIconTextColor: string;
|
||||
waitIconColor: string;
|
||||
waitTitleColor: string;
|
||||
waitDescriptionColor: string;
|
||||
waitTailColor: string;
|
||||
finishIconColor: string;
|
||||
finishTitleColor: string;
|
||||
finishDescriptionColor: string;
|
||||
finishTailColor: string;
|
||||
errorIconColor: string;
|
||||
errorTitleColor: string;
|
||||
errorDescriptionColor: string;
|
||||
errorTailColor: string;
|
||||
stepsNavActiveColor: string;
|
||||
}
|
||||
|
||||
enum StepItemStatusEnum {
|
||||
wait = 'wait',
|
||||
process = 'process',
|
||||
finish = 'finish',
|
||||
error = 'error',
|
||||
}
|
||||
|
||||
const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): CSSObject => {
|
||||
const prefix = `${token.componentCls}-item`;
|
||||
const iconColorKey: keyof StepsToken = `${status}IconColor`;
|
||||
const titleColorKey: keyof StepsToken = `${status}TitleColor`;
|
||||
const descriptionColorKey: keyof StepsToken = `${status}DescriptionColor`;
|
||||
const tailColorKey: keyof StepsToken = `${status}TailColor`;
|
||||
const stepsBackground = '#fff'; // FIXME: hardcode in v4
|
||||
return {
|
||||
[`${prefix}-${status} ${prefix}-icon`]: {
|
||||
backgroundColor: stepsBackground,
|
||||
borderColor: token[iconColorKey],
|
||||
[`> ${token.componentCls}-icon`]: {
|
||||
color: token[iconColorKey],
|
||||
[`${token.componentCls}-icon-dot`]: {
|
||||
background: token[iconColorKey],
|
||||
},
|
||||
},
|
||||
},
|
||||
[`${prefix}-${status} > ${prefix}-container > ${prefix}-content > ${prefix}-title`]: {
|
||||
color: token[titleColorKey],
|
||||
|
||||
'&::after': {
|
||||
backgroundColor: token[tailColorKey],
|
||||
},
|
||||
},
|
||||
[`${prefix}-${status} > ${prefix}-container > ${prefix}-content > ${prefix}-description`]: {
|
||||
color: token[descriptionColorKey],
|
||||
},
|
||||
[`${prefix}-${status} > ${prefix}-container > ${prefix}-tail::after`]: {
|
||||
backgroundColor: token[tailColorKey],
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { componentCls, motionDurationSlow } = token;
|
||||
const stepsItemCls = `${componentCls}-item`; // .ant-steps-item
|
||||
|
||||
return {
|
||||
[stepsItemCls]: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
verticalAlign: 'top',
|
||||
'&:last-child': {
|
||||
flex: 'none',
|
||||
[`> ${stepsItemCls}-container > ${stepsItemCls}-tail, > ${stepsItemCls}-container > ${stepsItemCls}-content > ${stepsItemCls}-title::after`]:
|
||||
{
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
[`${stepsItemCls}-container`]: {
|
||||
outline: 'none',
|
||||
},
|
||||
[`${stepsItemCls}-icon, ${stepsItemCls}-content`]: {
|
||||
display: 'inline-block',
|
||||
verticalAlign: 'top',
|
||||
},
|
||||
[`${stepsItemCls}-icon`]: {
|
||||
width: token.stepsIconSize,
|
||||
height: token.stepsIconSize,
|
||||
// margin: token.stepsIconMargin,
|
||||
marginTop: 0, // FIXME: hardcode in v4
|
||||
marginBottom: 0, // FIXME: hardcode in v4
|
||||
marginInline: '0 8px', // FIXME: hardcode in v4
|
||||
fontSize: token.stepsIconFontSize,
|
||||
fontFamily: token.fontFamily,
|
||||
lineHeight: `${token.stepsIconSize}px`,
|
||||
textAlign: 'center',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${new TinyColor('#000')
|
||||
.setAlpha(0.25)
|
||||
.toRgbString()}`, // FIXME: hardcode in v4
|
||||
borderRadius: token.stepsIconSize,
|
||||
transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
|
||||
[`${componentCls}-icon`]: {
|
||||
position: 'relative',
|
||||
top: token.stepsIconTop,
|
||||
color: token.colorPrimary,
|
||||
lineHeight: 1,
|
||||
},
|
||||
},
|
||||
[`${stepsItemCls}-tail`]: {
|
||||
position: 'absolute',
|
||||
top: 12, // FIXME: hardcode in v4
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
padding: '0 10px', // FIXME: hardcode in v4
|
||||
|
||||
'&::after': {
|
||||
display: 'inline-block',
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
height: 1, // FIXME: hardcode in v4
|
||||
background: token.colorSplit,
|
||||
borderRadius: 1, // FIXME: hardcode in v4
|
||||
transition: `background ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
[`${stepsItemCls}-title`]: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
paddingInlineEnd: 16, // FIXME: hardcode in v4
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSizeLG,
|
||||
lineHeight: `${token.stepsTitleLineHeight}px`,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: token.stepsTitleLineHeight / 2,
|
||||
insetInlineStart: '100%', // FIXME: hardcode in v4
|
||||
display: 'block',
|
||||
width: 9999, // FIXME: hardcode in v4
|
||||
height: 1, // FIXME: hardcode in v4
|
||||
background: token.processTailColor,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
[`${stepsItemCls}-subtitle`]: {
|
||||
display: 'inline',
|
||||
marginInlineStart: 8, // FIXME: hardcode in v4
|
||||
color: token.colorTextSecondary,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSizeBase,
|
||||
},
|
||||
[`${stepsItemCls}-description`]: {
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeBase,
|
||||
},
|
||||
...genStepsItemStatusStyle(StepItemStatusEnum.wait, token),
|
||||
...genStepsItemStatusStyle(StepItemStatusEnum.process, token),
|
||||
[`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-icon`]: {
|
||||
background: token.processIconColor,
|
||||
|
||||
[`${componentCls}-icon`]: {
|
||||
color: token.processIconTextColor,
|
||||
},
|
||||
},
|
||||
[`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: {
|
||||
fontWeight: 500, // FIXME: hardcode in v4
|
||||
},
|
||||
...genStepsItemStatusStyle(StepItemStatusEnum.finish, token),
|
||||
...genStepsItemStatusStyle(StepItemStatusEnum.error, token),
|
||||
[`${stepsItemCls}${componentCls}-next-error > ${componentCls}-item-title::after`]: {
|
||||
background: token.colorError,
|
||||
},
|
||||
[`${stepsItemCls}-disabled`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================= Clickable ===========================
|
||||
const genStepsClickableStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { componentCls, motionDurationSlow } = token;
|
||||
|
||||
return {
|
||||
[`& ${componentCls}-item`]: {
|
||||
[`&:not(${componentCls}-item-active)`]: {
|
||||
[`& > ${componentCls}-item-container[role='button']`]: {
|
||||
cursor: 'pointer',
|
||||
[`${componentCls}-item`]: {
|
||||
[`&-title, &-subtitle, &-description, &-icon ${componentCls}-icon`]: {
|
||||
transition: `color ${motionDurationSlow}`,
|
||||
},
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
[`${componentCls}-item`]: {
|
||||
[`&-title, &-subtitle, &-description`]: {
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-item-process)`]: {
|
||||
[`& > ${componentCls}-item-container[role='button']:hover`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-icon': {
|
||||
borderColor: token.colorPrimary,
|
||||
|
||||
[`${componentCls}-icon`]: {
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
paddingInlineStart: 16, // FIXME: hardcode in v4
|
||||
whiteSpace: 'nowrap',
|
||||
|
||||
'&:first-child': {
|
||||
paddingInlineStart: 0, // FIXME: hardcode in v4
|
||||
},
|
||||
[`&:last-child ${componentCls}-item-title`]: {
|
||||
paddingInlineEnd: 0, // FIXME: hardcode in v4
|
||||
},
|
||||
'&-tail': {
|
||||
display: 'none',
|
||||
},
|
||||
'&-description': {
|
||||
maxWidth: token.stepsDescriptionMaxWidth,
|
||||
whiteSpace: 'normal',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { componentCls } = token; // .ant-steps
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
fontSize: 0, // FIXME: hardcode in v4
|
||||
textAlign: 'initial',
|
||||
// single Item
|
||||
...genStepsItemStyle(token),
|
||||
// Clickable
|
||||
...genStepsClickableStyle(token),
|
||||
// custom-icon
|
||||
...genStepsCustomIconStyle(token),
|
||||
// small
|
||||
...genStepsSmallStyle(token),
|
||||
// vertical
|
||||
...genStepsVerticalStyle(token),
|
||||
// label-placement
|
||||
...genStepsLabelPlacementStyle(token),
|
||||
// progress-dot
|
||||
...genStepsProgressDotStyle(token),
|
||||
// nav
|
||||
...genStepsNavStyle(token),
|
||||
// rtl
|
||||
...genStepsRTLStyle(token),
|
||||
// progress
|
||||
...genStepsProgressStyle(token),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Steps', token => {
|
||||
const stepsIconSize = 32; // FIXME: hardcode in v4
|
||||
const processTailColor = token.colorSplit;
|
||||
const processIconColor = token.colorPrimary;
|
||||
|
||||
const stepsToken = mergeToken<StepsToken>(token, {
|
||||
// Steps variable default.less
|
||||
processTailColor,
|
||||
stepsNavArrowColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // fade(@black, 25%),
|
||||
stepsBackground: token.colorBgComponent,
|
||||
stepsIconSize,
|
||||
stepsIconCustomSize: stepsIconSize,
|
||||
stepsIconCustomTop: 0, // FIXME: hardcode in v4
|
||||
stepsIconCustomFontSize: 24, // FIXME: hardcode in v4
|
||||
stepsIconTop: -0.5, // FIXME: hardcode in v4
|
||||
stepsIconFontSize: token.fontSizeLG,
|
||||
stepsIconMargin: '0 8px 0 0', // FIXME: hardcode in v4
|
||||
stepsTitleLineHeight: 32, // FIXME: hardcode in v4
|
||||
stepsSmallIconSize: 24, // FIXME: hardcode in v4
|
||||
stepsSmallIconMargin: '0 8px 0 0', // FIXME: hardcode in v4
|
||||
stepsDotSize: 8, // FIXME: hardcode in v4
|
||||
stepsDotTop: 2, // FIXME: hardcode in v4
|
||||
stepsCurrentDotSize: 10, // FIXME: hardcode in v4
|
||||
stepsDescriptionMaxWidth: 140, // FIXME: hardcode in v4
|
||||
stepsNavContentMaxWidth: 'auto',
|
||||
stepsVerticalIconWidth: 16, // FIXME: hardcode in v4
|
||||
stepsVerticalTailWidth: 16, // FIXME: hardcode in v4
|
||||
stepsVerticalTailWidthSm: 12, // FIXME: hardcode in v4
|
||||
// Steps component less variable
|
||||
processIconColor,
|
||||
processTitleColor: new TinyColor('#000').setAlpha(0.85).toRgbString(), // @heading-color: fade(@black, 85%) FIXME: hardcode in v4
|
||||
processDescriptionColor: token.colorText,
|
||||
processIconTextColor: '#fff', // FIXME: hardcode in v4
|
||||
waitIconColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // @disabled-color FIXME: hardcode in v4
|
||||
waitTitleColor: token.colorTextSecondary,
|
||||
waitDescriptionColor: token.colorTextSecondary,
|
||||
waitTailColor: processTailColor,
|
||||
finishIconColor: processIconColor,
|
||||
finishTitleColor: token.colorText,
|
||||
finishDescriptionColor: token.colorTextSecondary,
|
||||
finishTailColor: token.colorPrimary,
|
||||
errorIconColor: token.colorError,
|
||||
errorTitleColor: token.colorError,
|
||||
errorDescriptionColor: token.colorError,
|
||||
errorTailColor: processTailColor,
|
||||
stepsNavActiveColor: token.colorPrimary,
|
||||
});
|
||||
|
||||
return [genStepsStyle(stepsToken)];
|
||||
});
|
||||
|
||||
56
components/steps/style/label-placement.ts
Normal file
56
components/steps/style/label-placement.ts
Normal file
@ -0,0 +1,56 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
|
||||
const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { componentCls, stepsIconSize, lineHeight } = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-label-vertical`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
overflow: 'visible',
|
||||
|
||||
'&-tail': {
|
||||
marginInlineStart: 58, // FIXME: hardcode in v4
|
||||
padding: '3.5px 24px', // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
display: 'block',
|
||||
width: (stepsIconSize / 2 + 42) * 2, // FIXME: hardcode in v4
|
||||
marginTop: 8, // FIXME: hardcode in v4
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
'&-icon': {
|
||||
display: 'inline-block',
|
||||
marginInlineStart: 42, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&-title': {
|
||||
paddingInlineEnd: 0, // FIXME: hardcode in v4
|
||||
paddingInlineStart: 0, // FIXME: hardcode in v4
|
||||
|
||||
'&::after': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&-subtitle': {
|
||||
display: 'block',
|
||||
marginBottom: 4, // FIXME: hardcode in v4
|
||||
marginInlineStart: 0, // FIXME: hardcode in v4
|
||||
lineHeight,
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-small:not(${componentCls}-dot)`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-icon': {
|
||||
marginInlineStart: 46, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
export default genStepsLabelPlacementStyle;
|
||||
150
components/steps/style/nav.ts
Normal file
150
components/steps/style/nav.ts
Normal file
@ -0,0 +1,150 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
|
||||
const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsNavContentMaxWidth,
|
||||
stepsNavArrowColor,
|
||||
stepsNavActiveColor,
|
||||
motionDurationSlow,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-navigation`]: {
|
||||
paddingTop: 12, // FIXME: hardcode in v4
|
||||
|
||||
[`&${componentCls}-small`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-container': {
|
||||
marginInlineStart: -12, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item`]: {
|
||||
overflow: 'visible',
|
||||
textAlign: 'center',
|
||||
|
||||
'&-container': {
|
||||
display: 'inline-block',
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
marginInlineStart: -16, // FIXME: hardcode in v4
|
||||
paddingBottom: 12, // FIXME: hardcode in v4
|
||||
textAlign: 'start',
|
||||
transition: `opacity ${motionDurationSlow}`,
|
||||
|
||||
[`${componentCls}-item-content`]: {
|
||||
maxWidth: stepsNavContentMaxWidth,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-title`]: {
|
||||
maxWidth: '100%', // FIXME: hardcode in v4
|
||||
paddingInlineEnd: 0, // FIXME: hardcode in v4
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
'&::after': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-item-active)`]: {
|
||||
[`${componentCls}-item-container[role='button']`]: {
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:hover': {
|
||||
opacity: 0.85, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'&:last-child': {
|
||||
flex: 1,
|
||||
|
||||
'&::after': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
insetInlineStart: '100%',
|
||||
display: 'inline-block',
|
||||
width: 12, // FIXME: hardcode in v4
|
||||
height: 12, // FIXME: hardcode in v4
|
||||
marginTop: -14, // FIXME: hardcode in v4
|
||||
marginInlineStart: -2, // FIXME: hardcode in v4
|
||||
borderTop: `1px solid ${stepsNavArrowColor}`,
|
||||
borderBottom: 'none',
|
||||
borderInlineStart: 'none',
|
||||
borderInlineEnd: `1px solid ${stepsNavArrowColor}`,
|
||||
transform: 'rotate(45deg)',
|
||||
content: '""',
|
||||
},
|
||||
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
bottom: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: '50%',
|
||||
display: 'inline-block',
|
||||
width: 0, // FIXME: hardcode in v4
|
||||
height: 2, // FIXME: hardcode in v4
|
||||
backgroundColor: stepsNavActiveColor,
|
||||
transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`,
|
||||
transitionTimingFunction: 'ease-out',
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item${componentCls}-item-active::before`]: {
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-navigation${componentCls}-vertical`]: {
|
||||
[`> ${componentCls}-item`]: {
|
||||
marginInlineEnd: '0 !important',
|
||||
|
||||
'&::before': {
|
||||
display: 'none',
|
||||
},
|
||||
[`&${componentCls}-item-active::before`]: {
|
||||
top: 0, // FIXME: hardcode in v4
|
||||
insetInlineEnd: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: 'unset',
|
||||
display: 'block',
|
||||
width: 3, // FIXME: hardcode in v4
|
||||
height: 'calc(100% - 24px)',
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
position: 'relative',
|
||||
top: -2, // FIXME: hardcode in v4
|
||||
insetInlineStart: '50%',
|
||||
display: 'block',
|
||||
width: 8, // FIXME: hardcode in v4
|
||||
height: 8, // FIXME: hardcode in v4
|
||||
marginBottom: 8, // FIXME: hardcode in v4
|
||||
textAlign: 'center',
|
||||
transform: 'rotate(135deg)',
|
||||
},
|
||||
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-navigation${componentCls}-horizontal`]: {
|
||||
[`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
visibility: 'hidden',
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
export default genStepsNavStyle;
|
||||
130
components/steps/style/progress-dot.ts
Normal file
130
components/steps/style/progress-dot.ts
Normal file
@ -0,0 +1,130 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
|
||||
const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsDotTop,
|
||||
stepsDescriptionMaxWidth,
|
||||
lineHeight,
|
||||
stepsCurrentDotSize,
|
||||
stepsDotSize,
|
||||
motionDurationSlow,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-dot, &${componentCls}-dot${componentCls}-small`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-title': {
|
||||
lineHeight,
|
||||
},
|
||||
|
||||
'&-tail': {
|
||||
top: stepsDotTop,
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
// margin: `0 0 0 ${stepsDescriptionMaxWidth / 2}px`, // FIXME: hardcode in v4
|
||||
marginTop: 0, // FIXME: hardcode in v4
|
||||
marginBottom: 0, // FIXME: hardcode in v4
|
||||
marginInline: `${stepsDescriptionMaxWidth / 2}px 0`, // FIXME: hardcode in v4
|
||||
padding: 0, // FIXME: hardcode in v4
|
||||
|
||||
'&::after': {
|
||||
width: 'calc(100% - 20px)', // FIXME: hardcode in v4
|
||||
height: 3, // FIXME: hardcode in v4
|
||||
marginInlineStart: 12, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
[`&:first-child ${componentCls}-icon-dot`]: {
|
||||
insetInlineStart: 2, // FIXME: hardcode in v4
|
||||
},
|
||||
'&-icon': {
|
||||
width: stepsDotSize,
|
||||
height: stepsDotSize,
|
||||
marginInlineStart: 67, // FIXME: hardcode in v4
|
||||
paddingInlineEnd: 0, // FIXME: hardcode in v4
|
||||
lineHeight: `${stepsDotSize}px`,
|
||||
background: 'transparent',
|
||||
border: 0, // FIXME: hardcode in v4
|
||||
|
||||
[`${componentCls}-icon-dot`]: {
|
||||
position: 'relative',
|
||||
float: 'left',
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
borderRadius: 100, // FIXME: hardcode in v4
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
/* expand hover area */
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: -12, // FIXME: hardcode in v4
|
||||
insetInlineStart: -26, // FIXME: hardcode in v4
|
||||
width: 60, // FIXME: hardcode in v4
|
||||
height: 32, // FIXME: hardcode in v4
|
||||
background: new TinyColor('#000').setAlpha(0.001).toRgbString(), // FIXME: hardcode in v4
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
width: stepsDescriptionMaxWidth,
|
||||
},
|
||||
[`&-process ${componentCls}-item-icon`]: {
|
||||
position: 'relative',
|
||||
top: -1, // FIXME: hardcode in v4
|
||||
width: stepsCurrentDotSize,
|
||||
height: stepsCurrentDotSize,
|
||||
lineHeight: `${stepsCurrentDotSize}px`,
|
||||
background: 'none',
|
||||
},
|
||||
[`&-process ${componentCls}-icon`]: {
|
||||
[`&:first-child ${componentCls}-icon-dot`]: {
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-vertical${componentCls}-dot`]: {
|
||||
[`${componentCls}-item-icon`]: {
|
||||
marginTop: 13, // FIXME: hardcode in v4
|
||||
marginInlineStart: 0, // FIXME: hardcode in v4
|
||||
background: 'none',
|
||||
},
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/18354
|
||||
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
top: 6.5, // FIXME: hardcode in v4
|
||||
insetInlineStart: -9, // FIXME: hardcode in v4
|
||||
margin: 0, // FIXME: hardcode in v4
|
||||
padding: '22px 0 4px', // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`&${componentCls}-small`]: {
|
||||
[`${componentCls}-item-icon`]: {
|
||||
marginTop: 10, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
top: 3.5, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
},
|
||||
[`${componentCls}-item-content`]: {
|
||||
width: 'inherit',
|
||||
},
|
||||
[`${componentCls}-item-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon-dot`]:
|
||||
{
|
||||
top: -1, // FIXME: hardcode in v4
|
||||
insetInlineStart: -1, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genStepsProgressDotStyle;
|
||||
38
components/steps/style/progress.ts
Normal file
38
components/steps/style/progress.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
|
||||
const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { antCls, componentCls } = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-with-progress`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
paddingTop: 4, // FIXME: hardcode in v4
|
||||
|
||||
[`${componentCls}-item-tail`]: {
|
||||
top: '4px !important', // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
|
||||
paddingBottom: 4, // FIXME: hardcode in v4
|
||||
paddingInlineStart: 4, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`${componentCls}-item-icon`]: {
|
||||
position: 'relative',
|
||||
|
||||
[`${antCls}-progress`]: {
|
||||
position: 'absolute',
|
||||
top: -5, // FIXME: hardcode in v4
|
||||
insetInlineEnd: -5, // FIXME: hardcode in v4
|
||||
bottom: -5, // FIXME: hardcode in v4
|
||||
insetInlineStart: -5, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default genStepsProgressStyle;
|
||||
214
components/steps/style/rtl.ts
Normal file
214
components/steps/style/rtl.ts
Normal file
@ -0,0 +1,214 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
|
||||
const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-rtl`]: {
|
||||
direction: 'rtl',
|
||||
|
||||
[`${componentCls}-item`]: {
|
||||
// '&-icon': {
|
||||
// marginInlineEnd: 0,
|
||||
// marginInlineStart: 8,
|
||||
// },
|
||||
// '&-tail': {
|
||||
// insetInlineEnd: 0,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
'&-subtitle': {
|
||||
// marginInline: '0 8px',
|
||||
float: 'left',
|
||||
},
|
||||
// '&-title': {
|
||||
// paddingInlineEnd: 0,
|
||||
// paddingInlineStart: 16,
|
||||
|
||||
// '&::after': {
|
||||
// insetInlineEnd: '100%',
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
|
||||
// [`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
|
||||
// [`${componentCls}-item`]: {
|
||||
// paddingInlineEnd: 16,
|
||||
// paddingInlineStart: 0,
|
||||
|
||||
// '&:first-child': {
|
||||
// paddingInlineEnd: 0,
|
||||
// },
|
||||
|
||||
// [`&:last-child ${componentCls}-item-title`]: {
|
||||
// paddingInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// custom-icon
|
||||
// [`${componentCls}-item-custom`]: {
|
||||
// [`${componentCls}-item-icon`]: {
|
||||
// [`> ${componentCls}-icon`]: {
|
||||
// insetInlineEnd: 0.5,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// nav
|
||||
[`&${componentCls}-navigation`]: {
|
||||
// [`&${componentCls}-small`]: {
|
||||
// [`${componentCls}-item-container`]: {
|
||||
// marginInlineEnd: -12,
|
||||
// marginInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
// [`${componentCls}-item-container`]: {
|
||||
// marginInlineEnd: -16,
|
||||
// marginInlineStart: 0,
|
||||
// textAlign: 'right',
|
||||
|
||||
// [`${componentCls}-item-title`]: {
|
||||
// paddingInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
[`${componentCls}-item::after`]: {
|
||||
// insetInlineEnd: '100%',
|
||||
// insetInlineStart: 'auto',
|
||||
// marginInlineEnd: -2,
|
||||
// marginInlineStart: 0,
|
||||
transform: 'rotate(-45deg)',
|
||||
},
|
||||
},
|
||||
|
||||
// small
|
||||
// [`&${componentCls}-small`]: {
|
||||
// [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
|
||||
// paddingInlineEnd: 12,
|
||||
// paddingInlineStart: 0,
|
||||
|
||||
// '&:first-child': {
|
||||
// paddingInlineEnd: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
// [`${componentCls}-item-title`]: {
|
||||
// paddingInlineEnd: 0,
|
||||
// paddingInlineStart: 12,
|
||||
// },
|
||||
// },
|
||||
|
||||
// vertical
|
||||
[`&${componentCls}-vertical`]: {
|
||||
[`> ${componentCls}-item`]: {
|
||||
'&::after': {
|
||||
transform: 'rotate(225deg)',
|
||||
},
|
||||
[`${componentCls}-item-icon`]: {
|
||||
float: 'right',
|
||||
// marginInlineEnd: 0,
|
||||
// marginInlineStart: stepsVerticalIconWidth,
|
||||
},
|
||||
// [`${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
// insetInlineEnd: stepsVerticalTailWidth,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
},
|
||||
|
||||
// [`&${componentCls}-small`]: {
|
||||
// [`${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
// insetInlineEnd: stepsVerticalTailWidthSm,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
|
||||
// label
|
||||
// [`&${componentCls}-label-vertical`]: {
|
||||
// [`${componentCls}-item-title`]: {
|
||||
// paddingInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
// progress-dot
|
||||
[`&${componentCls}-dot`]: {
|
||||
// [`${componentCls}-item-tail, &${componentCls}-small ${componentCls}-item-tail`]: {
|
||||
// margin: `0 ${stepsDescriptionMaxWidth / 2}px 0 0`,
|
||||
// '&::after': {
|
||||
// marginInlineEnd: 12,
|
||||
// marginInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
// [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
|
||||
// insetInlineEnd: 2,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
|
||||
// [`&${componentCls}-small ${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
|
||||
// insetInlineEnd: 2,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
|
||||
// [`${componentCls}-item-icon, &${componentCls}-small ${componentCls}-item-icon`]: {
|
||||
// marginInlineEnd: 67,
|
||||
// marginInlineStart: 0,
|
||||
// },
|
||||
|
||||
[`${componentCls}-item-icon ${componentCls}-icon-dot, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot`]:
|
||||
{
|
||||
float: 'right',
|
||||
},
|
||||
|
||||
/* expand hover area */
|
||||
// [`${componentCls}-item-icon ${componentCls}-icon-dot::after, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot::after`]:
|
||||
// {
|
||||
// insetInlineEnd: -26,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
},
|
||||
|
||||
// [`&${componentCls}-vertical${componentCls}-dot`]: {
|
||||
// [`${componentCls}-item-icon`]: {
|
||||
// marginInlineEnd: 0,
|
||||
// marginInlineStart: 16,
|
||||
// },
|
||||
// [`${componentCls}-item`]: {
|
||||
// https://github.com/ant-design/ant-design/issues/18354
|
||||
// [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
// insetInlineEnd: -9,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// [`&:first-child ${componentCls}-icon-dot`]: {
|
||||
// insetInlineEnd: 0,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
// [`${componentCls}-item-process`]: {
|
||||
// [`${componentCls}-icon-dot`]: {
|
||||
// insetInlineEnd: -2,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// RTL Steps with progress
|
||||
// [`&${componentCls}-with-progress${componentCls}-horizontal${componentCls}-label-horizontal`]:
|
||||
// {
|
||||
// [`${componentCls}-item:first-child`]: {
|
||||
// paddingInlineEnd: 4,
|
||||
// paddingInlineStart: 0,
|
||||
// },
|
||||
// [`${componentCls}-item:first-child${componentCls}-item-active`]: {
|
||||
// paddingInlineEnd: 4,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
};
|
||||
};
|
||||
export default genStepsRTLStyle;
|
||||
68
components/steps/style/small.ts
Normal file
68
components/steps/style/small.ts
Normal file
@ -0,0 +1,68 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
|
||||
const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsSmallIconSize,
|
||||
// stepsSmallIconMargin,
|
||||
fontSizeSM,
|
||||
fontSizeBase,
|
||||
colorTextSecondary,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-small`]: {
|
||||
[`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
|
||||
paddingInlineStart: 12, // FIXME: hardcode in v4
|
||||
'&:first-child': {
|
||||
paddingInlineStart: 0, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item-icon`]: {
|
||||
width: stepsSmallIconSize,
|
||||
height: stepsSmallIconSize,
|
||||
// margin: stepsSmallIconMargin,
|
||||
marginTop: 0, // FIXME: hardcode in v4
|
||||
marginBottom: 0, // FIXME: hardcode in v4
|
||||
marginInline: '0 8px', // FIXME: hardcode in v4
|
||||
fontSize: fontSizeSM,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
textAlign: 'center',
|
||||
borderRadius: stepsSmallIconSize,
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
paddingInlineEnd: 12, // FIXME: hardcode in v4
|
||||
fontSize: fontSizeBase,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
|
||||
'&::after': {
|
||||
top: stepsSmallIconSize / 2, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
[`${componentCls}-item-description`]: {
|
||||
color: colorTextSecondary,
|
||||
fontSize: fontSizeBase,
|
||||
},
|
||||
[`${componentCls}-item-tail`]: {
|
||||
top: 8, // FIXME: hardcode in v4
|
||||
},
|
||||
[`${componentCls}-item-custom ${componentCls}-item-icon`]: {
|
||||
width: 'inherit',
|
||||
height: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
background: 'none',
|
||||
border: 0, // FIXME: hardcode in v4
|
||||
borderRadius: 0, // FIXME: hardcode in v4
|
||||
[`> ${componentCls}-icon`]: {
|
||||
fontSize: stepsSmallIconSize,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
transform: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
export default genStepsSmallStyle;
|
||||
79
components/steps/style/vertical.ts
Normal file
79
components/steps/style/vertical.ts
Normal file
@ -0,0 +1,79 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
|
||||
const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsSmallIconSize,
|
||||
stepsVerticalIconWidth,
|
||||
stepsVerticalTailWidth,
|
||||
stepsVerticalTailWidthSm,
|
||||
stepsIconSize,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-vertical`]: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
[`> ${componentCls}-item`]: {
|
||||
display: 'block',
|
||||
flex: '1 0 auto',
|
||||
paddingInlineStart: 0, // FIXME: hardcode in v4
|
||||
overflow: 'visible',
|
||||
|
||||
[`${componentCls}-item-icon`]: {
|
||||
float: 'left',
|
||||
marginInlineEnd: stepsVerticalIconWidth,
|
||||
},
|
||||
[`${componentCls}-item-content`]: {
|
||||
display: 'block',
|
||||
minHeight: 48, // FIXME: hardcode in v4
|
||||
overflow: 'hidden',
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
lineHeight: `${stepsIconSize}px`,
|
||||
},
|
||||
[`${componentCls}-item-description`]: {
|
||||
paddingBottom: 12, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
[`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
position: 'absolute',
|
||||
top: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: stepsVerticalTailWidth,
|
||||
width: 1, // FIXME: hardcode in v4
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
padding: `${stepsIconSize + 6}px 0 6px`, // FIXME: hardcode in v4
|
||||
|
||||
'&::after': {
|
||||
width: 1, // FIXME: hardcode in v4
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
[`> ${componentCls}-item:not(:last-child) > ${componentCls}-item-container > ${componentCls}-item-tail`]:
|
||||
{
|
||||
display: 'block',
|
||||
},
|
||||
[` > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-content > ${componentCls}-item-title`]:
|
||||
{
|
||||
'&::after': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-small ${componentCls}-item-container`]: {
|
||||
[`${componentCls}-item-tail`]: {
|
||||
position: 'absolute',
|
||||
top: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: stepsVerticalTailWidthSm,
|
||||
padding: `${stepsSmallIconSize + 6}px 0 6px`, // FIXME: hardcode in v4
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
export default genStepsVerticalStyle;
|
||||
@ -16,7 +16,9 @@ const Diff: FC<DiffProps> = ({ show }) => {
|
||||
title="master-diff"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100vw',
|
||||
width: document.body.scrollWidth,
|
||||
// width: `calc(100vw - 15px)`,
|
||||
// width: '100vw',
|
||||
height: document.body.scrollHeight,
|
||||
top: 0,
|
||||
left: 0,
|
||||
|
||||
@ -44,6 +44,7 @@ export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps
|
||||
boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)',
|
||||
padding: '8px 16px 8px 12px',
|
||||
cursor: 'pointer',
|
||||
zIndex: 1,
|
||||
}}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user