fix: tabs inkbar border lost (#24643)

* fix: tabs inkbar border lost

* fix
This commit is contained in:
xrkffgg 2020-06-02 11:31:03 +08:00 committed by GitHub
parent a51439cbba
commit da0afdf4ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 19 deletions

View File

@ -3,7 +3,8 @@
@import './index';
.@{tab-prefix-cls}-card {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-tab {
margin: 0;
padding: @tabs-card-horizontal-padding;
@ -25,7 +26,8 @@
// ========================== Top & Bottom ==========================
&.@{tab-prefix-cls}-top,
&.@{tab-prefix-cls}-bottom {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-tab:not(:last-of-type) {
margin-right: @tabs-card-gutter;
}
@ -33,7 +35,8 @@
}
&.@{tab-prefix-cls}-top {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-tab {
border-radius: @border-radius-base @border-radius-base 0 0;
@ -44,7 +47,8 @@
}
}
&.@{tab-prefix-cls}-bottom {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-tab {
border-radius: 0 0 @border-radius-base @border-radius-base;
@ -58,7 +62,8 @@
// ========================== Left & Right ==========================
&.@{tab-prefix-cls}-left,
&.@{tab-prefix-cls}-right {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-tab:not(:last-of-type) {
margin-bottom: @tabs-card-gutter;
}
@ -66,7 +71,8 @@
}
&.@{tab-prefix-cls}-left {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-tab {
border-radius: @border-radius-base 0 0 @border-radius-base;
@ -77,7 +83,8 @@
}
}
&.@{tab-prefix-cls}-right {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-tab {
border-radius: 0 @border-radius-base @border-radius-base 0;

View File

@ -15,7 +15,8 @@
overflow: hidden;
// ========================== Navigation ==========================
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
position: relative;
display: flex;
flex: none;

View File

@ -6,7 +6,8 @@
&-bottom {
flex-direction: column;
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
margin: @tabs-bar-margin;
&::before {
@ -54,7 +55,8 @@
}
&-top {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
&::before {
bottom: 0;
}
@ -66,7 +68,8 @@
}
&-bottom {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
order: 1;
margin-top: @margin-md;
margin-bottom: 0;
@ -80,7 +83,8 @@
}
}
> .@{tab-prefix-cls}-content-holder {
> .@{tab-prefix-cls}-content-holder,
> div > .@{tab-prefix-cls}-content-holder {
order: 0;
}
}
@ -88,7 +92,8 @@
// ========================== Left & Right ==========================
&-left,
&-right {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
flex-direction: column;
min-width: 50px;
@ -148,13 +153,15 @@
}
&-left {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-ink-bar {
right: 0;
}
}
> .@{tab-prefix-cls}-content-holder {
> .@{tab-prefix-cls}-content-holder,
> div > .@{tab-prefix-cls}-content-holder {
margin-left: -@border-width-base;
border-left: @border-width-base @border-style-base @border-color-split;
@ -165,7 +172,8 @@
}
&-right {
> .@{tab-prefix-cls}-nav {
> .@{tab-prefix-cls}-nav,
> div > .@{tab-prefix-cls}-nav {
order: 1;
.@{tab-prefix-cls}-ink-bar {
@ -173,7 +181,8 @@
}
}
> .@{tab-prefix-cls}-content-holder {
> .@{tab-prefix-cls}-content-holder,
> div > .@{tab-prefix-cls}-content-holder {
order: 0;
margin-right: -@border-width-base;
border-right: @border-width-base @border-style-base @border-color-split;

View File

@ -1,11 +1,12 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './index';
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
.@{tab-prefix-cls}-rtl {
direction: rtl;
> .@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-nav {
.@{tab-prefix-cls}-tab {
margin: @tabs-horizontal-margin-rtl;