first commit
This commit is contained in:
rayd1o
146
frontend/node_modules/antd/es/tabs/style/index.d.ts
generated
vendored
Normal file
146
frontend/node_modules/antd/es/tabs/style/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,146 @@
|
||||
import type { FullToken, GetDefaultToken } from '../../theme/internal';
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 下拉菜单 z-index
|
||||
* @descEN z-index of dropdown menu
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
/**
|
||||
* @desc 卡片标签页背景色
|
||||
* @descEN Background color of card tab
|
||||
*/
|
||||
cardBg: string;
|
||||
/**
|
||||
* @desc 卡片标签页高度
|
||||
* @descEN Height of card tab
|
||||
*/
|
||||
cardHeight: number;
|
||||
/**
|
||||
* @desc 小尺寸卡片标签页高度
|
||||
* @descEN Height of small card tab
|
||||
*/
|
||||
cardHeightSM: number;
|
||||
/**
|
||||
* @desc 大尺寸卡片标签页高度
|
||||
* @descEN Height of large card tab
|
||||
*/
|
||||
cardHeightLG: number;
|
||||
/**
|
||||
* @desc 卡片标签页内间距
|
||||
* @descEN Padding of card tab
|
||||
*/
|
||||
cardPadding: string;
|
||||
/**
|
||||
* @desc 小号卡片标签页内间距
|
||||
* @descEN Padding of small card tab
|
||||
*/
|
||||
cardPaddingSM: string;
|
||||
/**
|
||||
* @desc 大号卡片标签页内间距
|
||||
* @descEN Padding of large card tab
|
||||
*/
|
||||
cardPaddingLG: string;
|
||||
/**
|
||||
* @desc 标签页标题文本大小
|
||||
* @descEN Font size of title
|
||||
*/
|
||||
titleFontSize: number;
|
||||
/**
|
||||
* @desc 大号标签页标题文本大小
|
||||
* @descEN Font size of large title
|
||||
*/
|
||||
titleFontSizeLG: number;
|
||||
/**
|
||||
* @desc 小号标签页标题文本大小
|
||||
* @descEN Font size of small title
|
||||
*/
|
||||
titleFontSizeSM: number;
|
||||
/**
|
||||
* @desc 指示条颜色
|
||||
* @descEN Color of indicator
|
||||
*/
|
||||
inkBarColor: string;
|
||||
/**
|
||||
* @desc 横向标签页外间距
|
||||
* @descEN Horizontal margin of horizontal tab
|
||||
*/
|
||||
horizontalMargin: string;
|
||||
/**
|
||||
* @desc 横向标签页标签间距
|
||||
* @descEN Horizontal gutter of horizontal tab
|
||||
*/
|
||||
horizontalItemGutter: number;
|
||||
/**
|
||||
* @desc 横向标签页标签外间距
|
||||
* @descEN Horizontal margin of horizontal tab item
|
||||
*/
|
||||
horizontalItemMargin: string;
|
||||
/**
|
||||
* @desc 横向标签页标签外间距（RTL）
|
||||
* @descEN Horizontal margin of horizontal tab item (RTL)
|
||||
*/
|
||||
horizontalItemMarginRTL: string;
|
||||
/**
|
||||
* @desc 横向标签页标签内间距
|
||||
* @descEN Horizontal padding of horizontal tab item
|
||||
*/
|
||||
horizontalItemPadding: string;
|
||||
/**
|
||||
* @desc 大号横向标签页标签内间距
|
||||
* @descEN Horizontal padding of large horizontal tab item
|
||||
*/
|
||||
horizontalItemPaddingLG: string;
|
||||
/**
|
||||
* @desc 小号横向标签页标签内间距
|
||||
* @descEN Horizontal padding of small horizontal tab item
|
||||
*/
|
||||
horizontalItemPaddingSM: string;
|
||||
/**
|
||||
* @desc 纵向标签页标签内间距
|
||||
* @descEN Vertical padding of vertical tab item
|
||||
*/
|
||||
verticalItemPadding: string;
|
||||
/**
|
||||
* @desc 纵向标签页标签外间距
|
||||
* @descEN Vertical margin of vertical tab item
|
||||
*/
|
||||
verticalItemMargin: string;
|
||||
/**
|
||||
* @desc 标签文本颜色
|
||||
* @descEN Text color of tab
|
||||
*/
|
||||
itemColor: string;
|
||||
/**
|
||||
* @desc 标签激活态文本颜色
|
||||
* @descEN Text color of active tab
|
||||
*/
|
||||
itemActiveColor: string;
|
||||
/**
|
||||
* @desc 标签悬浮态文本颜色
|
||||
* @descEN Text color of hover tab
|
||||
*/
|
||||
itemHoverColor: string;
|
||||
/**
|
||||
* @desc 标签选中态文本颜色
|
||||
* @descEN Text color of selected tab
|
||||
*/
|
||||
itemSelectedColor: string;
|
||||
/**
|
||||
* @desc 卡片标签间距
|
||||
* @descEN Gutter of card tab
|
||||
*/
|
||||
cardGutter: number;
|
||||
}
|
||||
export interface TabsToken extends FullToken<'Tabs'> {
|
||||
tabsCardPadding: string;
|
||||
dropdownEdgeChildVerticalPadding: number;
|
||||
tabsNavWrapPseudoWidth: number;
|
||||
tabsActiveTextShadow: string;
|
||||
tabsDropdownHeight: number | string;
|
||||
tabsDropdownWidth: number | string;
|
||||
tabsHorizontalItemMargin: string;
|
||||
tabsHorizontalItemMarginRTL: string;
|
||||
}
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Tabs'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
|
||||
export default _default;
|
||||
864
frontend/node_modules/antd/es/tabs/style/index.js
generated
vendored
Normal file
864
frontend/node_modules/antd/es/tabs/style/index.js
generated
vendored
Normal file
@@ -0,0 +1,864 @@
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from '../../style';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import genMotionStyle from './motion';
|
||||
const genCardStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
tabsCardPadding,
|
||||
cardBg,
|
||||
cardGutter,
|
||||
colorBorderSecondary,
|
||||
itemSelectedColor
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-card`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
margin: 0,
|
||||
padding: tabsCardPadding,
|
||||
background: cardBg,
|
||||
border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`
|
||||
},
|
||||
[`${componentCls}-tab-active`]: {
|
||||
color: itemSelectedColor,
|
||||
background: token.colorBgContainer
|
||||
},
|
||||
[`${componentCls}-tab-focus:has(${componentCls}-tab-btn:focus-visible)`]: genFocusOutline(token, -3),
|
||||
[`& ${componentCls}-tab${componentCls}-tab-focus ${componentCls}-tab-btn:focus-visible`]: {
|
||||
outline: 'none'
|
||||
},
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
visibility: 'hidden'
|
||||
}
|
||||
},
|
||||
// ========================== Top & Bottom ==========================
|
||||
[`&${componentCls}-top, &${componentCls}-bottom`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: unit(cardGutter)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-top`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`
|
||||
},
|
||||
[`${componentCls}-tab-active`]: {
|
||||
borderBottomColor: token.colorBgContainer
|
||||
}
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-bottom`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`
|
||||
},
|
||||
[`${componentCls}-tab-active`]: {
|
||||
borderTopColor: token.colorBgContainer
|
||||
}
|
||||
}
|
||||
},
|
||||
// ========================== Left & Right ==========================
|
||||
[`&${componentCls}-left, &${componentCls}-right`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
||||
marginTop: unit(cardGutter)
|
||||
}
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-left`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: {
|
||||
_skip_check_: true,
|
||||
value: `${unit(token.borderRadiusLG)} 0 0 ${unit(token.borderRadiusLG)}`
|
||||
}
|
||||
},
|
||||
[`${componentCls}-tab-active`]: {
|
||||
borderRightColor: {
|
||||
_skip_check_: true,
|
||||
value: token.colorBgContainer
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-right`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: {
|
||||
_skip_check_: true,
|
||||
value: `0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0`
|
||||
}
|
||||
},
|
||||
[`${componentCls}-tab-active`]: {
|
||||
borderLeftColor: {
|
||||
_skip_check_: true,
|
||||
value: token.colorBgContainer
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genDropdownStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
itemHoverColor,
|
||||
dropdownEdgeChildVerticalPadding
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-dropdown`]: Object.assign(Object.assign({}, resetComponent(token)), {
|
||||
position: 'absolute',
|
||||
top: -9999,
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: -9999
|
||||
},
|
||||
zIndex: token.zIndexPopup,
|
||||
display: 'block',
|
||||
'&-hidden': {
|
||||
display: 'none'
|
||||
},
|
||||
[`${componentCls}-dropdown-menu`]: {
|
||||
maxHeight: token.tabsDropdownHeight,
|
||||
margin: 0,
|
||||
padding: `${unit(dropdownEdgeChildVerticalPadding)} 0`,
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
textAlign: {
|
||||
_skip_check_: true,
|
||||
value: 'left'
|
||||
},
|
||||
listStyleType: 'none',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
backgroundClip: 'padding-box',
|
||||
borderRadius: token.borderRadiusLG,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
'&-item': Object.assign(Object.assign({}, textEllipsis), {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minWidth: token.tabsDropdownWidth,
|
||||
margin: 0,
|
||||
padding: `${unit(token.paddingXXS)} ${unit(token.paddingSM)}`,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
'> span': {
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
'&-remove': {
|
||||
flex: 'none',
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: token.marginSM
|
||||
},
|
||||
color: token.colorIcon,
|
||||
fontSize: token.fontSizeSM,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
color: itemHoverColor
|
||||
}
|
||||
},
|
||||
'&:hover': {
|
||||
background: token.controlItemBgHover
|
||||
},
|
||||
'&-disabled': {
|
||||
'&, &:hover': {
|
||||
color: token.colorTextDisabled,
|
||||
background: 'transparent',
|
||||
cursor: 'not-allowed'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
};
|
||||
const genPositionStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
margin,
|
||||
colorBorderSecondary,
|
||||
horizontalMargin,
|
||||
verticalItemPadding,
|
||||
verticalItemMargin,
|
||||
calc
|
||||
} = token;
|
||||
return {
|
||||
// ========================== Top & Bottom ==========================
|
||||
[`${componentCls}-top, ${componentCls}-bottom`]: {
|
||||
flexDirection: 'column',
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
margin: horizontalMargin,
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
|
||||
content: "''"
|
||||
},
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
height: token.lineWidthBold,
|
||||
'&-animated': {
|
||||
transition: `width ${token.motionDurationSlow}, left ${token.motionDurationSlow},
|
||||
right ${token.motionDurationSlow}`
|
||||
}
|
||||
},
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
'&::before, &::after': {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: token.controlHeight
|
||||
},
|
||||
'&::before': {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
boxShadow: token.boxShadowTabsOverflowLeft
|
||||
},
|
||||
'&::after': {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
boxShadow: token.boxShadowTabsOverflowRight
|
||||
},
|
||||
[`&${componentCls}-nav-wrap-ping-left::before`]: {
|
||||
opacity: 1
|
||||
},
|
||||
[`&${componentCls}-nav-wrap-ping-right::after`]: {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-top`]: {
|
||||
[`> ${componentCls}-nav,
|
||||
> div > ${componentCls}-nav`]: {
|
||||
'&::before': {
|
||||
bottom: 0
|
||||
},
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
bottom: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-bottom`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
order: 1,
|
||||
marginTop: margin,
|
||||
marginBottom: 0,
|
||||
'&::before': {
|
||||
top: 0
|
||||
},
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
top: 0
|
||||
}
|
||||
},
|
||||
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
|
||||
order: 0
|
||||
}
|
||||
},
|
||||
// ========================== Left & Right ==========================
|
||||
[`${componentCls}-left, ${componentCls}-right`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
flexDirection: 'column',
|
||||
minWidth: calc(token.controlHeight).mul(1.25).equal(),
|
||||
// >>>>>>>>>>> Tab
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: verticalItemPadding,
|
||||
textAlign: 'center'
|
||||
},
|
||||
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
||||
margin: verticalItemMargin
|
||||
},
|
||||
// >>>>>>>>>>> Nav
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
flexDirection: 'column',
|
||||
'&::before, &::after': {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
height: token.controlHeight
|
||||
},
|
||||
'&::before': {
|
||||
top: 0,
|
||||
boxShadow: token.boxShadowTabsOverflowTop
|
||||
},
|
||||
'&::after': {
|
||||
bottom: 0,
|
||||
boxShadow: token.boxShadowTabsOverflowBottom
|
||||
},
|
||||
[`&${componentCls}-nav-wrap-ping-top::before`]: {
|
||||
opacity: 1
|
||||
},
|
||||
[`&${componentCls}-nav-wrap-ping-bottom::after`]: {
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
// >>>>>>>>>>> Ink Bar
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
width: token.lineWidthBold,
|
||||
'&-animated': {
|
||||
transition: `height ${token.motionDurationSlow}, top ${token.motionDurationSlow}`
|
||||
}
|
||||
},
|
||||
[`${componentCls}-nav-list, ${componentCls}-nav-operations`]: {
|
||||
flex: '1 0 auto',
|
||||
// fix safari scroll problem
|
||||
flexDirection: 'column'
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-left`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: unit(calc(token.lineWidth).mul(-1).equal())
|
||||
},
|
||||
borderLeft: {
|
||||
_skip_check_: true,
|
||||
value: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
|
||||
},
|
||||
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
|
||||
paddingLeft: {
|
||||
_skip_check_: true,
|
||||
value: token.paddingLG
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-right`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
order: 1,
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
|
||||
order: 0,
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: calc(token.lineWidth).mul(-1).equal()
|
||||
},
|
||||
borderRight: {
|
||||
_skip_check_: true,
|
||||
value: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
|
||||
},
|
||||
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
|
||||
paddingRight: {
|
||||
_skip_check_: true,
|
||||
value: token.paddingLG
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genSizeStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
cardPaddingSM,
|
||||
cardPaddingLG,
|
||||
cardHeightSM,
|
||||
cardHeightLG,
|
||||
horizontalItemPaddingSM,
|
||||
horizontalItemPaddingLG
|
||||
} = token;
|
||||
return {
|
||||
// >>>>> shared
|
||||
[componentCls]: {
|
||||
'&-small': {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: horizontalItemPaddingSM,
|
||||
fontSize: token.titleFontSizeSM
|
||||
}
|
||||
}
|
||||
},
|
||||
'&-large': {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: horizontalItemPaddingLG,
|
||||
fontSize: token.titleFontSizeLG,
|
||||
lineHeight: token.lineHeightLG
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// >>>>> card
|
||||
[`${componentCls}-card`]: {
|
||||
// Small
|
||||
[`&${componentCls}-small`]: {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: cardPaddingSM
|
||||
},
|
||||
[`${componentCls}-nav-add`]: {
|
||||
minWidth: cardHeightSM,
|
||||
minHeight: cardHeightSM
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-bottom`]: {
|
||||
[`> ${componentCls}-nav ${componentCls}-tab`]: {
|
||||
borderRadius: `0 0 ${unit(token.borderRadius)} ${unit(token.borderRadius)}`
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-top`]: {
|
||||
[`> ${componentCls}-nav ${componentCls}-tab`]: {
|
||||
borderRadius: `${unit(token.borderRadius)} ${unit(token.borderRadius)} 0 0`
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-right`]: {
|
||||
[`> ${componentCls}-nav ${componentCls}-tab`]: {
|
||||
borderRadius: {
|
||||
_skip_check_: true,
|
||||
value: `0 ${unit(token.borderRadius)} ${unit(token.borderRadius)} 0`
|
||||
}
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-left`]: {
|
||||
[`> ${componentCls}-nav ${componentCls}-tab`]: {
|
||||
borderRadius: {
|
||||
_skip_check_: true,
|
||||
value: `${unit(token.borderRadius)} 0 0 ${unit(token.borderRadius)}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// Large
|
||||
[`&${componentCls}-large`]: {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: cardPaddingLG
|
||||
},
|
||||
[`${componentCls}-nav-add`]: {
|
||||
minWidth: cardHeightLG,
|
||||
minHeight: cardHeightLG
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genTabStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
itemActiveColor,
|
||||
itemHoverColor,
|
||||
iconCls,
|
||||
tabsHorizontalItemMargin,
|
||||
horizontalItemPadding,
|
||||
itemSelectedColor,
|
||||
itemColor
|
||||
} = token;
|
||||
const tabCls = `${componentCls}-tab`;
|
||||
return {
|
||||
[tabCls]: {
|
||||
position: 'relative',
|
||||
WebkitTouchCallout: 'none',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: horizontalItemPadding,
|
||||
fontSize: token.titleFontSize,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
color: itemColor,
|
||||
'&-btn, &-remove': {
|
||||
'&:focus:not(:focus-visible), &:active': {
|
||||
color: itemActiveColor
|
||||
}
|
||||
},
|
||||
'&-btn': {
|
||||
outline: 'none',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
[`${tabCls}-icon:not(:last-child)`]: {
|
||||
marginInlineEnd: token.marginSM
|
||||
}
|
||||
},
|
||||
'&-remove': Object.assign({
|
||||
flex: 'none',
|
||||
lineHeight: 1,
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: token.calc(token.marginXXS).mul(-1).equal()
|
||||
},
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: token.marginXS
|
||||
},
|
||||
color: token.colorIcon,
|
||||
fontSize: token.fontSizeSM,
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
'&:hover': {
|
||||
color: token.colorTextHeading
|
||||
}
|
||||
}, genFocusStyle(token)),
|
||||
'&:hover': {
|
||||
color: itemHoverColor
|
||||
},
|
||||
[`&${tabCls}-active ${tabCls}-btn`]: {
|
||||
color: itemSelectedColor,
|
||||
textShadow: token.tabsActiveTextShadow
|
||||
},
|
||||
[`&${tabCls}-focus ${tabCls}-btn:focus-visible`]: genFocusOutline(token),
|
||||
[`&${tabCls}-disabled`]: {
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed'
|
||||
},
|
||||
[`&${tabCls}-disabled ${tabCls}-btn, &${tabCls}-disabled ${componentCls}-remove`]: {
|
||||
'&:focus, &:active': {
|
||||
color: token.colorTextDisabled
|
||||
}
|
||||
},
|
||||
[`& ${tabCls}-remove ${iconCls}`]: {
|
||||
margin: 0,
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
[`${iconCls}:not(:last-child)`]: {
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: token.marginSM
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${tabCls} + ${tabCls}`]: {
|
||||
margin: {
|
||||
_skip_check_: true,
|
||||
value: tabsHorizontalItemMargin
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genRtlStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
tabsHorizontalItemMarginRTL,
|
||||
iconCls,
|
||||
cardGutter,
|
||||
calc
|
||||
} = token;
|
||||
const rtlCls = `${componentCls}-rtl`;
|
||||
return {
|
||||
[rtlCls]: {
|
||||
direction: 'rtl',
|
||||
[`${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
margin: {
|
||||
_skip_check_: true,
|
||||
value: tabsHorizontalItemMarginRTL
|
||||
},
|
||||
[`${componentCls}-tab:last-of-type`]: {
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
[iconCls]: {
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: unit(token.marginSM)
|
||||
}
|
||||
},
|
||||
[`${componentCls}-tab-remove`]: {
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: unit(token.marginXS)
|
||||
},
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: unit(calc(token.marginXXS).mul(-1).equal())
|
||||
},
|
||||
[iconCls]: {
|
||||
margin: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-left`]: {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
order: 1
|
||||
},
|
||||
[`> ${componentCls}-content-holder`]: {
|
||||
order: 0
|
||||
}
|
||||
},
|
||||
[`&${componentCls}-right`]: {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
order: 0
|
||||
},
|
||||
[`> ${componentCls}-content-holder`]: {
|
||||
order: 1
|
||||
}
|
||||
},
|
||||
// ====================== Card ======================
|
||||
[`&${componentCls}-card${componentCls}-top, &${componentCls}-card${componentCls}-bottom`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: cardGutter
|
||||
},
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
[`${componentCls}-dropdown-rtl`]: {
|
||||
direction: 'rtl'
|
||||
},
|
||||
[`${componentCls}-menu-item`]: {
|
||||
[`${componentCls}-dropdown-rtl`]: {
|
||||
textAlign: {
|
||||
_skip_check_: true,
|
||||
value: 'right'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genTabsStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
tabsCardPadding,
|
||||
cardHeight,
|
||||
cardGutter,
|
||||
itemHoverColor,
|
||||
itemActiveColor,
|
||||
colorBorderSecondary
|
||||
} = token;
|
||||
return {
|
||||
[componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({}, resetComponent(token)), {
|
||||
display: 'flex',
|
||||
// ========================== Navigation ==========================
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flex: 'none',
|
||||
alignItems: 'center',
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flex: 'auto',
|
||||
alignSelf: 'stretch',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
transform: 'translate(0)',
|
||||
// Fix chrome render bug
|
||||
// >>>>> Ping shadow
|
||||
'&::before, &::after': {
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
opacity: 0,
|
||||
transition: `opacity ${token.motionDurationSlow}`,
|
||||
content: "''",
|
||||
pointerEvents: 'none'
|
||||
}
|
||||
},
|
||||
[`${componentCls}-nav-list`]: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
transition: `opacity ${token.motionDurationSlow}`
|
||||
},
|
||||
// >>>>>>>> Operations
|
||||
[`${componentCls}-nav-operations`]: {
|
||||
display: 'flex',
|
||||
alignSelf: 'stretch'
|
||||
},
|
||||
[`${componentCls}-nav-operations-hidden`]: {
|
||||
position: 'absolute',
|
||||
visibility: 'hidden',
|
||||
pointerEvents: 'none'
|
||||
},
|
||||
[`${componentCls}-nav-more`]: {
|
||||
position: 'relative',
|
||||
padding: tabsCardPadding,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
color: token.colorText,
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
bottom: 0,
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0
|
||||
},
|
||||
height: token.calc(token.controlHeightLG).div(8).equal(),
|
||||
transform: 'translateY(100%)',
|
||||
content: "''"
|
||||
}
|
||||
},
|
||||
[`${componentCls}-nav-add`]: Object.assign({
|
||||
minWidth: cardHeight,
|
||||
minHeight: cardHeight,
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: cardGutter
|
||||
},
|
||||
background: 'transparent',
|
||||
border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
|
||||
borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
color: token.colorText,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
'&:hover': {
|
||||
color: itemHoverColor
|
||||
},
|
||||
'&:active, &:focus:not(:focus-visible)': {
|
||||
color: itemActiveColor
|
||||
}
|
||||
}, genFocusStyle(token, -3))
|
||||
},
|
||||
[`${componentCls}-extra-content`]: {
|
||||
flex: 'none'
|
||||
},
|
||||
// ============================ InkBar ============================
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
position: 'absolute',
|
||||
background: token.inkBarColor,
|
||||
pointerEvents: 'none'
|
||||
}
|
||||
}), genTabStyle(token)), {
|
||||
// =========================== TabPanes ===========================
|
||||
[`${componentCls}-content`]: {
|
||||
position: 'relative',
|
||||
width: '100%'
|
||||
},
|
||||
[`${componentCls}-content-holder`]: {
|
||||
flex: 'auto',
|
||||
minWidth: 0,
|
||||
minHeight: 0
|
||||
},
|
||||
[`${componentCls}-tabpane`]: Object.assign(Object.assign({}, genFocusStyle(token)), {
|
||||
'&-hidden': {
|
||||
display: 'none'
|
||||
}
|
||||
})
|
||||
}),
|
||||
[`${componentCls}-centered`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
[`&:not([class*='${componentCls}-nav-wrap-ping']) > ${componentCls}-nav-list`]: {
|
||||
margin: 'auto'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
export const prepareComponentToken = token => {
|
||||
const {
|
||||
cardHeight,
|
||||
cardHeightSM,
|
||||
cardHeightLG,
|
||||
controlHeight,
|
||||
controlHeightLG
|
||||
} = token;
|
||||
const mergedCardHeight = cardHeight || controlHeightLG;
|
||||
const mergedCardHeightSM = cardHeightSM || controlHeight;
|
||||
// `controlHeight` missing XL variable, so we directly write it here:
|
||||
const mergedCardHeightLG = cardHeightLG || controlHeightLG + 8;
|
||||
return {
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
cardBg: token.colorFillAlter,
|
||||
// We can not pass this as valid value,
|
||||
// Since `cardHeight` will lock nav add button height.
|
||||
cardHeight: mergedCardHeight,
|
||||
cardHeightSM: mergedCardHeightSM,
|
||||
cardHeightLG: mergedCardHeightLG,
|
||||
// Initialize with empty string, because cardPadding will be calculated with cardHeight by default.
|
||||
cardPadding: `${(mergedCardHeight - token.fontHeight) / 2 - token.lineWidth}px ${token.padding}px`,
|
||||
cardPaddingSM: `${(mergedCardHeightSM - token.fontHeight) / 2 - token.lineWidth}px ${token.paddingXS}px`,
|
||||
cardPaddingLG: `${(mergedCardHeightLG - token.fontHeightLG) / 2 - token.lineWidth}px ${token.padding}px`,
|
||||
titleFontSize: token.fontSize,
|
||||
titleFontSizeLG: token.fontSizeLG,
|
||||
titleFontSizeSM: token.fontSize,
|
||||
inkBarColor: token.colorPrimary,
|
||||
horizontalMargin: `0 0 ${token.margin}px 0`,
|
||||
horizontalItemGutter: 32,
|
||||
// Fixed Value
|
||||
// Initialize with empty string, because horizontalItemMargin will be calculated with horizontalItemGutter by default.
|
||||
horizontalItemMargin: ``,
|
||||
horizontalItemMarginRTL: ``,
|
||||
horizontalItemPadding: `${token.paddingSM}px 0`,
|
||||
horizontalItemPaddingSM: `${token.paddingXS}px 0`,
|
||||
horizontalItemPaddingLG: `${token.padding}px 0`,
|
||||
verticalItemPadding: `${token.paddingXS}px ${token.paddingLG}px`,
|
||||
verticalItemMargin: `${token.margin}px 0 0 0`,
|
||||
itemColor: token.colorText,
|
||||
itemSelectedColor: token.colorPrimary,
|
||||
itemHoverColor: token.colorPrimaryHover,
|
||||
itemActiveColor: token.colorPrimaryActive,
|
||||
cardGutter: token.marginXXS / 2
|
||||
};
|
||||
};
|
||||
// ============================== Export ==============================
|
||||
export default genStyleHooks('Tabs', token => {
|
||||
const tabsToken = mergeToken(token, {
|
||||
// `cardPadding` is empty by default, so we could calculate with dynamic `cardHeight`
|
||||
tabsCardPadding: token.cardPadding,
|
||||
dropdownEdgeChildVerticalPadding: token.paddingXXS,
|
||||
tabsActiveTextShadow: '0 0 0.25px currentcolor',
|
||||
tabsDropdownHeight: 200,
|
||||
tabsDropdownWidth: 120,
|
||||
tabsHorizontalItemMargin: `0 0 0 ${unit(token.horizontalItemGutter)}`,
|
||||
tabsHorizontalItemMarginRTL: `0 0 0 ${unit(token.horizontalItemGutter)}`
|
||||
});
|
||||
return [genSizeStyle(tabsToken), genRtlStyle(tabsToken), genPositionStyle(tabsToken), genDropdownStyle(tabsToken), genCardStyle(tabsToken), genTabsStyle(tabsToken), genMotionStyle(tabsToken)];
|
||||
}, prepareComponentToken);
|
||||
4
frontend/node_modules/antd/es/tabs/style/motion.d.ts
generated
vendored
Normal file
4
frontend/node_modules/antd/es/tabs/style/motion.d.ts
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
import type { TabsToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
declare const genMotionStyle: GenerateStyle<TabsToken>;
|
||||
export default genMotionStyle;
|
||||
38
frontend/node_modules/antd/es/tabs/style/motion.js
generated
vendored
Normal file
38
frontend/node_modules/antd/es/tabs/style/motion.js
generated
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
import { initSlideMotion } from '../../style/motion';
|
||||
const genMotionStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
motionDurationSlow
|
||||
} = token;
|
||||
return [{
|
||||
[componentCls]: {
|
||||
[`${componentCls}-switch`]: {
|
||||
'&-appear, &-enter': {
|
||||
transition: 'none',
|
||||
'&-start': {
|
||||
opacity: 0
|
||||
},
|
||||
'&-active': {
|
||||
opacity: 1,
|
||||
transition: `opacity ${motionDurationSlow}`
|
||||
}
|
||||
},
|
||||
'&-leave': {
|
||||
position: 'absolute',
|
||||
transition: 'none',
|
||||
inset: 0,
|
||||
'&-start': {
|
||||
opacity: 1
|
||||
},
|
||||
'&-active': {
|
||||
opacity: 0,
|
||||
transition: `opacity ${motionDurationSlow}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// Follow code may reuse in other components
|
||||
[initSlideMotion(token, 'slide-up'), initSlideMotion(token, 'slide-down')]];
|
||||
};
|
||||
export default genMotionStyle;
|
||||
Reference in New Issue
Block a user