mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
fix: tabs inkbar border lost (#24643)
* fix: tabs inkbar border lost * fix
This commit is contained in:
parent
a51439cbba
commit
da0afdf4ef
@ -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;
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user