1
This commit is contained in:
+130
@@ -0,0 +1,130 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _genStyleUtils = require("../../theme/util/genStyleUtils");
|
||||
const genLegacyNavStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
fontSizeIcon,
|
||||
navContentMaxWidth,
|
||||
navArrowColor,
|
||||
colorPrimary,
|
||||
motionDurationSlow,
|
||||
antCls,
|
||||
calc
|
||||
} = token;
|
||||
const itemCls = `${componentCls}-item`;
|
||||
const stepsNavActiveColor = colorPrimary;
|
||||
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
|
||||
return {
|
||||
[`${componentCls}${componentCls}-navigation`]: {
|
||||
// ==========================================================
|
||||
// == Shared ==
|
||||
// ==========================================================
|
||||
// ========================== Item ==========================
|
||||
[itemCls.repeat(4)]: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
flex: 1,
|
||||
marginInlineStart: 0,
|
||||
[`${itemCls}-wrapper`]: {
|
||||
paddingBlock: token.paddingSM
|
||||
},
|
||||
// Section
|
||||
[`${itemCls}-section`]: {
|
||||
maxWidth: navContentMaxWidth
|
||||
},
|
||||
// Rail
|
||||
[`${itemCls}-rail`]: {
|
||||
display: 'none'
|
||||
},
|
||||
// ======================== Active ========================
|
||||
'&:before': {
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
backgroundColor: stepsNavActiveColor,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
transitionTimingFunction: 'ease-out',
|
||||
content: '""'
|
||||
},
|
||||
'&:not(:last-child):after': {
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
borderTop: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
|
||||
borderBottom: 'none',
|
||||
borderInlineStart: 'none',
|
||||
borderInlineEnd: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
|
||||
content: '""'
|
||||
},
|
||||
// Reset active item style to same as default
|
||||
[`&${itemCls}-active`]: {
|
||||
[varName('item-content-active-color')]: varRef('item-content-color'),
|
||||
[varName('item-icon-active-bg-color')]: varRef('item-icon-bg-color'),
|
||||
[varName('item-icon-active-border-color')]: varRef('item-icon-border-color'),
|
||||
[varName('item-icon-active-text-color')]: varRef('item-icon-text-color')
|
||||
}
|
||||
},
|
||||
// ==========================================================
|
||||
// == Horizontal ==
|
||||
// ==========================================================
|
||||
[`&${componentCls}-horizontal`]: {
|
||||
[itemCls]: {
|
||||
'&:before': {
|
||||
bottom: 0,
|
||||
insetInlineStart: '50%',
|
||||
width: 0,
|
||||
height: token.lineWidthBold
|
||||
},
|
||||
[`&${itemCls}-active:before`]: {
|
||||
insetInlineStart: 0,
|
||||
width: '100%'
|
||||
},
|
||||
'&:not(:last-child):after': {
|
||||
top: `50%`,
|
||||
insetInlineStart: calc(fontSizeIcon).div(2).mul(-1).add('100%').equal(),
|
||||
width: fontSizeIcon,
|
||||
height: fontSizeIcon,
|
||||
transform: 'translateY(-50%) rotate(45deg)'
|
||||
}
|
||||
}
|
||||
},
|
||||
// ==========================================================
|
||||
// == Vertical ==
|
||||
// ==========================================================
|
||||
[`&${componentCls}-vertical`]: {
|
||||
[itemCls.repeat(4)]: {
|
||||
[`${itemCls}-content`]: {
|
||||
padding: 0
|
||||
},
|
||||
'&:before': {
|
||||
insetInlineEnd: 0,
|
||||
top: '50%',
|
||||
width: token.lineWidthBold,
|
||||
height: 0
|
||||
},
|
||||
[`&${itemCls}-active::before`]: {
|
||||
top: 0,
|
||||
height: '100%'
|
||||
},
|
||||
'&:not(:last-child):after': {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: '50%'
|
||||
},
|
||||
top: '100%',
|
||||
width: calc(fontSizeIcon).div(3).mul(2).equal(),
|
||||
height: calc(fontSizeIcon).div(3).mul(2).equal(),
|
||||
transform: 'translateY(-50%) translateX(-50%) rotate(135deg)'
|
||||
}
|
||||
}
|
||||
}
|
||||
// ========================= Legacy =========================
|
||||
}
|
||||
};
|
||||
};
|
||||
var _default = exports.default = genLegacyNavStyle;
|
||||
Reference in New Issue
Block a user