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

View File

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

View File

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

View File

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