fix: Tabs border should not overlay with other border (#41381)

* fix: Tabs border should not overlay with other border

* fix: more border
pull/41391/head
MadCcc 2 years ago committed by GitHub
parent af5f9950f7
commit f9c31435ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -29,7 +29,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
tabsCardHorizontalPadding, tabsCardHorizontalPadding,
tabsCardHeadBackground, tabsCardHeadBackground,
tabsCardGutter, tabsCardGutter,
colorSplit, colorBorderSecondary,
} = token; } = token;
return { return {
[`${componentCls}-card`]: { [`${componentCls}-card`]: {
@ -38,7 +38,7 @@ const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
margin: 0, margin: 0,
padding: tabsCardHorizontalPadding, padding: tabsCardHorizontalPadding,
background: tabsCardHeadBackground, background: tabsCardHeadBackground,
border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`, border: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`, transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
}, },
@ -226,7 +226,7 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
}; };
const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => { const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
const { componentCls, margin, colorSplit } = token; const { componentCls, margin, colorBorderSecondary } = token;
return { return {
// ========================== Top & Bottom ========================== // ========================== Top & Bottom ==========================
[`${componentCls}-top, ${componentCls}-bottom`]: { [`${componentCls}-top, ${componentCls}-bottom`]: {
@ -245,7 +245,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
_skip_check_: true, _skip_check_: true,
value: 0, value: 0,
}, },
borderBottom: `${token.lineWidth}px ${token.lineType} ${colorSplit}`, borderBottom: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
content: "''", content: "''",
}, },
@ -714,7 +714,7 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
tabsCardGutter, tabsCardGutter,
tabsHoverColor, tabsHoverColor,
tabsActiveColor, tabsActiveColor,
colorSplit, colorBorderSecondary,
} = token; } = token;
return { return {
@ -799,7 +799,7 @@ const genTabsStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject =>
}, },
padding: `0 ${token.paddingXS}px`, padding: `0 ${token.paddingXS}px`,
background: 'transparent', background: 'transparent',
border: `${token.lineWidth}px ${token.lineType} ${colorSplit}`, border: `${token.lineWidth}px ${token.lineType} ${colorBorderSecondary}`,
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`, borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
outline: 'none', outline: 'none',
cursor: 'pointer', cursor: 'pointer',

Loading…
Cancel
Save