mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
refactor: cssinjs for Tabs (#34811)
* refactor: cssinjs for Tabs * doc: update demo css * refactor: use genHook * refactor: add skip check * fix: remove useless skip * refactor: remove rootPrefixCls
This commit is contained in:
miracles1919
GitHub
parent
aa9a36da43
commit
f581159cb5
@ -59,6 +59,7 @@ export interface OverrideToken {
|
||||
Tree?: {};
|
||||
TreeSelect?: {};
|
||||
Typography?: TypographyComponentToken;
|
||||
Tabs?: {};
|
||||
}
|
||||
|
||||
/** Final token which contains the components level override */
|
||||
|
||||
@ -57,13 +57,13 @@ ReactDOM.render(
|
||||
.card-container > .ant-tabs-card > .ant-tabs-nav::before {
|
||||
display: none;
|
||||
}
|
||||
.card-container > .ant-tabs-card .ant-tabs-tab,
|
||||
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
|
||||
.card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab,
|
||||
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.card-container > .ant-tabs-card .ant-tabs-tab-active,
|
||||
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
|
||||
.card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab-active,
|
||||
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab-active {
|
||||
background: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
||||
import devWarning from '../_util/devWarning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import SizeContext, { SizeType } from '../config-provider/SizeContext';
|
||||
import useStyle from './style';
|
||||
|
||||
export type TabsType = 'line' | 'card' | 'editable-card';
|
||||
export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
|
||||
@ -37,6 +38,7 @@ function Tabs({
|
||||
const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = props;
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
let editable: EditableConfig | undefined;
|
||||
if (type === 'editable-card') {
|
||||
@ -57,7 +59,7 @@ function Tabs({
|
||||
'`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
|
||||
);
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<SizeContext.Consumer>
|
||||
{contextSize => {
|
||||
const size = propSize !== undefined ? propSize : contextSize;
|
||||
@ -74,6 +76,7 @@ function Tabs({
|
||||
[`${prefixCls}-centered`]: centered,
|
||||
},
|
||||
className,
|
||||
hashId,
|
||||
)}
|
||||
editable={editable}
|
||||
moreIcon={moreIcon}
|
||||
@ -81,7 +84,7 @@ function Tabs({
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</SizeContext.Consumer>
|
||||
</SizeContext.Consumer>,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,98 +1,98 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
// @tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls}-card {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
margin: 0;
|
||||
padding: @tabs-card-horizontal-padding;
|
||||
background: @tabs-card-head-background;
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
transition: all @animation-duration-slow @ease-in-out;
|
||||
// .@{tab-prefix-cls}-card {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// margin: 0;
|
||||
// padding: @tabs-card-horizontal-padding;
|
||||
// background: @tabs-card-head-background;
|
||||
// border: @border-width-base @border-style-base @border-color-split;
|
||||
// transition: all @animation-duration-slow @ease-in-out;
|
||||
|
||||
&-active {
|
||||
color: @tabs-card-active-color;
|
||||
background: @component-background;
|
||||
}
|
||||
}
|
||||
// &-active {
|
||||
// color: @tabs-card-active-color;
|
||||
// background: @component-background;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
// .@{tab-prefix-cls}-ink-bar {
|
||||
// visibility: hidden;
|
||||
// }
|
||||
// }
|
||||
|
||||
// ========================== Top & Bottom ==========================
|
||||
&.@{tab-prefix-cls}-top,
|
||||
&.@{tab-prefix-cls}-bottom {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
margin-left: @tabs-card-gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // ========================== Top & Bottom ==========================
|
||||
// &.@{tab-prefix-cls}-top,
|
||||
// &.@{tab-prefix-cls}-bottom {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
// margin-left: @tabs-card-gutter;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&.@{tab-prefix-cls}-top {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
// &.@{tab-prefix-cls}-top {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
|
||||
&-active {
|
||||
border-bottom-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.@{tab-prefix-cls}-bottom {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
// &-active {
|
||||
// border-bottom-color: @component-background;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &.@{tab-prefix-cls}-bottom {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
|
||||
&-active {
|
||||
border-top-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-active {
|
||||
// border-top-color: @component-background;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// ========================== Left & Right ==========================
|
||||
&.@{tab-prefix-cls}-left,
|
||||
&.@{tab-prefix-cls}-right {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
margin-top: @tabs-card-gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // ========================== Left & Right ==========================
|
||||
// &.@{tab-prefix-cls}-left,
|
||||
// &.@{tab-prefix-cls}-right {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
// margin-top: @tabs-card-gutter;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&.@{tab-prefix-cls}-left {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
// &.@{tab-prefix-cls}-left {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
|
||||
&-active {
|
||||
border-right-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.@{tab-prefix-cls}-right {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
// &-active {
|
||||
// border-right-color: @component-background;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &.@{tab-prefix-cls}-right {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
|
||||
&-active {
|
||||
border-left-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-active {
|
||||
// border-left-color: @component-background;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,82 +1,82 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
// @tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls}-dropdown {
|
||||
.reset-component();
|
||||
// .@{tab-prefix-cls}-dropdown {
|
||||
// .reset-component();
|
||||
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: @zindex-dropdown;
|
||||
display: block;
|
||||
// position: absolute;
|
||||
// top: -9999px;
|
||||
// left: -9999px;
|
||||
// z-index: @zindex-dropdown;
|
||||
// display: block;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
// &-hidden {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
&-menu {
|
||||
max-height: 200px;
|
||||
margin: 0;
|
||||
padding: @dropdown-edge-child-vertical-padding 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
text-align: left;
|
||||
list-style-type: none;
|
||||
background-color: @dropdown-menu-bg;
|
||||
background-clip: padding-box;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
// &-menu {
|
||||
// max-height: 200px;
|
||||
// margin: 0;
|
||||
// padding: @dropdown-edge-child-vertical-padding 0;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: auto;
|
||||
// text-align: left;
|
||||
// list-style-type: none;
|
||||
// background-color: @dropdown-menu-bg;
|
||||
// background-clip: padding-box;
|
||||
// border-radius: @border-radius-base;
|
||||
// outline: none;
|
||||
// box-shadow: @box-shadow-base;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 120px;
|
||||
margin: 0;
|
||||
padding: @dropdown-vertical-padding @control-padding-horizontal;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @dropdown-font-size;
|
||||
line-height: @dropdown-line-height;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
// &-item {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// min-width: 120px;
|
||||
// margin: 0;
|
||||
// padding: @dropdown-vertical-padding @control-padding-horizontal;
|
||||
// overflow: hidden;
|
||||
// color: @text-color;
|
||||
// font-weight: normal;
|
||||
// font-size: @dropdown-font-size;
|
||||
// line-height: @dropdown-line-height;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// cursor: pointer;
|
||||
// transition: all 0.3s;
|
||||
|
||||
> span {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
// > span {
|
||||
// flex: 1;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
&-remove {
|
||||
flex: none;
|
||||
margin-left: @margin-sm;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-sm;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
// &-remove {
|
||||
// flex: none;
|
||||
// margin-left: @margin-sm;
|
||||
// color: @text-color-secondary;
|
||||
// font-size: @font-size-sm;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
// cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @tabs-hover-color;
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// color: @tabs-hover-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
background: @item-hover-bg;
|
||||
}
|
||||
// &:hover {
|
||||
// background: @item-hover-bg;
|
||||
// }
|
||||
|
||||
&-disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: @disabled-color;
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-disabled {
|
||||
// &,
|
||||
// &:hover {
|
||||
// color: @disabled-color;
|
||||
// background: transparent;
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,224 +1,224 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './size';
|
||||
@import './rtl';
|
||||
@import './position';
|
||||
@import './dropdown';
|
||||
@import './card';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
// @import './size';
|
||||
// @import './rtl';
|
||||
// @import './position';
|
||||
// @import './dropdown';
|
||||
// @import './card';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
// @tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
.reset-component();
|
||||
// .@{tab-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
// display: flex;
|
||||
// overflow: hidden;
|
||||
|
||||
// ========================== Navigation ==========================
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
// // ========================== Navigation ==========================
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// flex: none;
|
||||
// align-items: center;
|
||||
|
||||
.@{tab-prefix-cls}-nav-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
transform: translate(0); // Fix chrome render bug
|
||||
// .@{tab-prefix-cls}-nav-wrap {
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// display: flex;
|
||||
// flex: auto;
|
||||
// align-self: stretch;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// transform: translate(0); // Fix chrome render bug
|
||||
|
||||
// >>>>> Ping shadow
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity @animation-duration-slow;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
// // >>>>> Ping shadow
|
||||
// &::before,
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// z-index: 1;
|
||||
// opacity: 0;
|
||||
// transition: opacity @animation-duration-slow;
|
||||
// content: '';
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-nav-list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
transition: transform @animation-duration-slow;
|
||||
}
|
||||
// .@{tab-prefix-cls}-nav-list {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// transition: transform @animation-duration-slow;
|
||||
// }
|
||||
|
||||
// >>>>>>>> Operations
|
||||
.@{tab-prefix-cls}-nav-operations {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
// // >>>>>>>> Operations
|
||||
// .@{tab-prefix-cls}-nav-operations {
|
||||
// display: flex;
|
||||
// align-self: stretch;
|
||||
|
||||
&-hidden {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
// &-hidden {
|
||||
// position: absolute;
|
||||
// visibility: hidden;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-nav-more {
|
||||
position: relative;
|
||||
padding: @tabs-card-horizontal-padding;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
// .@{tab-prefix-cls}-nav-more {
|
||||
// position: relative;
|
||||
// padding: @tabs-card-horizontal-padding;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 5px;
|
||||
transform: translateY(100%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// height: 5px;
|
||||
// transform: translateY(100%);
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-nav-add {
|
||||
min-width: @tabs-card-height;
|
||||
margin-left: @tabs-card-gutter;
|
||||
padding: 0 @padding-xs;
|
||||
background: @tabs-card-head-background;
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: all @animation-duration-slow @ease-in-out;
|
||||
// .@{tab-prefix-cls}-nav-add {
|
||||
// min-width: @tabs-card-height;
|
||||
// margin-left: @tabs-card-gutter;
|
||||
// padding: 0 @padding-xs;
|
||||
// background: @tabs-card-head-background;
|
||||
// border: @border-width-base @border-style-base @border-color-split;
|
||||
// border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
// outline: none;
|
||||
// cursor: pointer;
|
||||
// transition: all @animation-duration-slow @ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: @tabs-hover-color;
|
||||
}
|
||||
// &:hover {
|
||||
// color: @tabs-hover-color;
|
||||
// }
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @tabs-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:active,
|
||||
// &:focus {
|
||||
// color: @tabs-active-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-extra-content {
|
||||
flex: none;
|
||||
}
|
||||
// &-extra-content {
|
||||
// flex: none;
|
||||
// }
|
||||
|
||||
&-centered {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-nav-wrap {
|
||||
&:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-centered {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-nav-wrap {
|
||||
// &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
|
||||
// justify-content: center;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// ============================ InkBar ============================
|
||||
&-ink-bar {
|
||||
position: absolute;
|
||||
background: @tabs-ink-bar-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
// // ============================ InkBar ============================
|
||||
// &-ink-bar {
|
||||
// position: absolute;
|
||||
// background: @tabs-ink-bar-color;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
|
||||
// ============================= Tabs =============================
|
||||
&-tab {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: @tabs-horizontal-padding;
|
||||
font-size: @tabs-title-font-size;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
// // ============================= Tabs =============================
|
||||
// &-tab {
|
||||
// position: relative;
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// padding: @tabs-horizontal-padding;
|
||||
// font-size: @tabs-title-font-size;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
// outline: none;
|
||||
// cursor: pointer;
|
||||
|
||||
&-btn,
|
||||
&-remove {
|
||||
&:focus,
|
||||
&:active {
|
||||
color: @tabs-active-color;
|
||||
}
|
||||
}
|
||||
// &-btn,
|
||||
// &-remove {
|
||||
// &:focus,
|
||||
// &:active {
|
||||
// color: @tabs-active-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-btn {
|
||||
outline: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
// &-btn {
|
||||
// outline: none;
|
||||
// transition: all 0.3s;
|
||||
// }
|
||||
|
||||
&-remove {
|
||||
flex: none;
|
||||
margin-right: -@margin-xss;
|
||||
margin-left: @margin-xs;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-sm;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: all @animation-duration-slow;
|
||||
// &-remove {
|
||||
// flex: none;
|
||||
// margin-right: -@margin-xss;
|
||||
// margin-left: @margin-xs;
|
||||
// color: @text-color-secondary;
|
||||
// font-size: @font-size-sm;
|
||||
// background: transparent;
|
||||
// border: none;
|
||||
// outline: none;
|
||||
// cursor: pointer;
|
||||
// transition: all @animation-duration-slow;
|
||||
|
||||
&:hover {
|
||||
color: @heading-color;
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// color: @heading-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
color: @tabs-hover-color;
|
||||
}
|
||||
// &:hover {
|
||||
// color: @tabs-hover-color;
|
||||
// }
|
||||
|
||||
&&-active &-btn {
|
||||
color: @tabs-highlight-color;
|
||||
text-shadow: 0 0 0.25px currentcolor;
|
||||
}
|
||||
// &&-active &-btn {
|
||||
// color: @tabs-highlight-color;
|
||||
// text-shadow: 0 0 0.25px currentcolor;
|
||||
// }
|
||||
|
||||
&&-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
// &&-disabled {
|
||||
// color: @disabled-color;
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
|
||||
&&-disabled &-btn,
|
||||
&&-disabled &-remove {
|
||||
&:focus,
|
||||
&:active {
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
// &&-disabled &-btn,
|
||||
// &&-disabled &-remove {
|
||||
// &:focus,
|
||||
// &:active {
|
||||
// color: @disabled-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
& &-remove .@{iconfont-css-prefix} {
|
||||
margin: 0;
|
||||
}
|
||||
// & &-remove .@{iconfont-css-prefix} {
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: @margin-sm;
|
||||
}
|
||||
}
|
||||
// .@{iconfont-css-prefix} {
|
||||
// margin-right: @margin-sm;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-tab + &-tab {
|
||||
margin: @tabs-horizontal-margin;
|
||||
}
|
||||
// &-tab + &-tab {
|
||||
// margin: @tabs-horizontal-margin;
|
||||
// }
|
||||
|
||||
// =========================== TabPanes ===========================
|
||||
&-content {
|
||||
&-holder {
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
// // =========================== TabPanes ===========================
|
||||
// &-content {
|
||||
// &-holder {
|
||||
// flex: auto;
|
||||
// min-width: 0;
|
||||
// min-height: 0;
|
||||
// }
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
|
||||
&-animated {
|
||||
transition: margin @animation-duration-slow;
|
||||
}
|
||||
}
|
||||
// &-animated {
|
||||
// transition: margin @animation-duration-slow;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-tabpane {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
// &-tabpane {
|
||||
// flex: none;
|
||||
// width: 100%;
|
||||
// outline: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,2 +1,891 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
|
||||
import { resetComponent, GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
|
||||
|
||||
interface TabsToken extends FullToken<'Tabs'> {
|
||||
tabsCardHorizontalPadding: string;
|
||||
tabsCardHeight: number;
|
||||
tabsCardGutter: number;
|
||||
tabsHoverColor: string;
|
||||
tabsActiveColor: string;
|
||||
disabledColor: string;
|
||||
tabsHorizontalGutter: number;
|
||||
tabsCardHeadBackground: string;
|
||||
dropdownLineHeight: number;
|
||||
dropdownEdgeChildVerticalPadding: number;
|
||||
marginMD: number;
|
||||
paddingMD: number;
|
||||
boxShadowColor: string;
|
||||
borderColorSplit: string;
|
||||
}
|
||||
|
||||
const genCardStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
|
||||
const {
|
||||
componentCls,
|
||||
tabsCardHorizontalPadding,
|
||||
tabsCardHeadBackground,
|
||||
tabsCardGutter,
|
||||
borderColorSplit,
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-card`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
margin: 0,
|
||||
padding: tabsCardHorizontalPadding,
|
||||
background: tabsCardHeadBackground,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-tab-active`]: {
|
||||
color: token.colorPrimary,
|
||||
background: token.colorBgComponent,
|
||||
},
|
||||
|
||||
[`${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: `${tabsCardGutter}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-top`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
|
||||
},
|
||||
|
||||
[`${componentCls}-tab-active`]: {
|
||||
borderBottomColor: token.colorBgComponent,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-bottom`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
|
||||
},
|
||||
|
||||
[`${componentCls}-tab-active`]: {
|
||||
borderTopColor: token.colorBgComponent,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Left & Right ==========================
|
||||
[`&${componentCls}-left, &${componentCls}-right`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
||||
marginTop: `${tabsCardGutter}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-left`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: {
|
||||
_skip_check_: true,
|
||||
value: `${token.radiusBase}px 0 0 ${token.radiusBase}px`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-tab-active`]: {
|
||||
borderRightColor: {
|
||||
_skip_check_: true,
|
||||
value: token.colorBgComponent,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-right`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
borderRadius: {
|
||||
_skip_check_: true,
|
||||
value: `0 ${token.radiusBase}px ${token.radiusBase}px 0`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-tab-active`]: {
|
||||
borderLeftColor: {
|
||||
_skip_check_: true,
|
||||
value: token.colorBgComponent,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
|
||||
const {
|
||||
componentCls,
|
||||
disabledColor,
|
||||
dropdownLineHeight,
|
||||
tabsHoverColor,
|
||||
dropdownEdgeChildVerticalPadding,
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-dropdown`]: {
|
||||
...resetComponent(token),
|
||||
|
||||
position: 'absolute',
|
||||
top: -9999,
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: -9999,
|
||||
},
|
||||
zIndex: 1050, // FIXME: hardcode in v4
|
||||
display: 'block',
|
||||
|
||||
'&-hidden': {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
'&-menu': {
|
||||
maxHeight: 200, // FIXME: hardcode in v4
|
||||
margin: 0,
|
||||
padding: `${dropdownEdgeChildVerticalPadding}px 0`,
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
textAlign: {
|
||||
_skip_check_: true,
|
||||
value: 'left',
|
||||
},
|
||||
listStyleType: 'none',
|
||||
backgroundColor: token.colorBgComponent,
|
||||
backgroundClip: 'padding-box',
|
||||
borderRadius: token.radiusBase,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadow,
|
||||
|
||||
'&-item': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minWidth: 120, // FIXME: hardcode in v4
|
||||
margin: 0,
|
||||
padding: `5px ${token.paddingSM}px`, // FIXME: hardcode in v4,
|
||||
overflow: 'hidden',
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSizeBase,
|
||||
lineHeight: dropdownLineHeight,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
'> span': {
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
|
||||
'&-remove': {
|
||||
flex: 'none',
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: token.marginSM,
|
||||
},
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeSM,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:hover': {
|
||||
color: tabsHoverColor,
|
||||
},
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
background: token.controlItemBgHover,
|
||||
},
|
||||
|
||||
'&-disabled': {
|
||||
'&, &:hover': {
|
||||
color: disabledColor,
|
||||
background: 'transparent',
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
|
||||
const { componentCls, marginMD, boxShadowColor, borderColorSplit } = token;
|
||||
return {
|
||||
// ========================== Top & Bottom ==========================
|
||||
[`${componentCls}-top, ${componentCls}-bottom`]: {
|
||||
flexDirection: 'column',
|
||||
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
margin: `0 0 ${marginMD}px 0`,
|
||||
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
content: "''",
|
||||
},
|
||||
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
height: 2, // FIXME: hardcode in v4
|
||||
|
||||
'&-animated': {
|
||||
transition: `width ${token.motionDurationSlow}, left ${token.motionDurationSlow},
|
||||
right ${token.motionDurationSlow}`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
'&::before, &::after': {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: 30, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&::before': {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
boxShadow: `inset 10px 0 8px -8px ${boxShadowColor}`, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
boxShadow: `inset -10px 0 8px -8px ${boxShadowColor}`, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`&${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: `${marginMD}px`,
|
||||
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: 50, // FIXME: hardcode in v4
|
||||
|
||||
// >>>>>>>>>>> Tab
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: `${token.paddingXS}px ${token.paddingLG}px`,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
||||
margin: `${token.marginMD}px 0 0 0`,
|
||||
},
|
||||
|
||||
// >>>>>>>>>>> Nav
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
flexDirection: 'column',
|
||||
|
||||
'&::before, &::after': {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
height: 30, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&::before': {
|
||||
top: 0,
|
||||
boxShadow: `inset 0 10px 8px -8px ${boxShadowColor}`,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
bottom: 0,
|
||||
boxShadow: `inset 0 -10px 8px -8px ${boxShadowColor}`,
|
||||
},
|
||||
|
||||
[`&${componentCls}-nav-wrap-ping-top::before`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
[`&${componentCls}-nav-wrap-ping-bottom::after`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
|
||||
// >>>>>>>>>>> Ink Bar
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
width: 2, // FIXME: hardcode in v4
|
||||
|
||||
'&-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: `-${token.controlLineWidth}px`,
|
||||
},
|
||||
borderLeft: {
|
||||
_skip_check_: true,
|
||||
value: `${token.controlLineWidth}px ${token.controlLineType} ${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: -token.controlLineWidth,
|
||||
},
|
||||
borderRight: {
|
||||
_skip_check_: true,
|
||||
value: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
},
|
||||
|
||||
[`> ${componentCls}-content > ${componentCls}-tabpane`]: {
|
||||
paddingRight: {
|
||||
_skip_check_: true,
|
||||
value: token.paddingLG,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genSizeStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
|
||||
const { componentCls, paddingMD } = token;
|
||||
return {
|
||||
[componentCls]: {
|
||||
'&-small': {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: `${token.paddingXS}px 0`,
|
||||
fontSize: token.fontSizeBase,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'&-large': {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: `${paddingMD}px 0`,
|
||||
fontSize: token.fontSizeLG,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-card`]: {
|
||||
[`&${componentCls}-small`]: {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: `6px ${paddingMD}px`, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-large`]: {
|
||||
[`> ${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: `7px ${paddingMD}px 6px`, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
|
||||
const {
|
||||
componentCls,
|
||||
tabsActiveColor,
|
||||
tabsHoverColor,
|
||||
disabledColor,
|
||||
iconCls,
|
||||
tabsHorizontalGutter,
|
||||
} = token;
|
||||
|
||||
const tabCls = `${componentCls}-tab`;
|
||||
|
||||
return {
|
||||
[tabCls]: {
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: `${token.paddingSM}px 0`,
|
||||
fontSize: `${token.fontSizeBase}px`,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
'&-btn, &-remove': {
|
||||
'&:focus, &:active': {
|
||||
color: tabsActiveColor,
|
||||
},
|
||||
},
|
||||
'&-btn': {
|
||||
outline: 'none',
|
||||
transition: 'all 0.3s',
|
||||
},
|
||||
'&-remove': {
|
||||
flex: 'none',
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: -token.marginXXS,
|
||||
},
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: token.marginXS,
|
||||
},
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeSM,
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
'&:hover': {
|
||||
color: token.colorTextHeading,
|
||||
},
|
||||
},
|
||||
'&:hover': {
|
||||
color: tabsHoverColor,
|
||||
},
|
||||
|
||||
[`&${tabCls}-active ${tabCls}-btn`]: {
|
||||
color: token.colorPrimary,
|
||||
textShadow: '0 0 0.25px currentcolor', // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`&${tabCls}-disabled`]: {
|
||||
color: disabledColor,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
[`&${tabCls}-disabled ${tabCls}-btn, &${tabCls}-disabled ${componentCls}-remove`]: {
|
||||
'&:focus, &:active': {
|
||||
color: disabledColor,
|
||||
},
|
||||
},
|
||||
[`& ${tabCls}-remove ${iconCls}`]: {
|
||||
margin: 0,
|
||||
},
|
||||
[iconCls]: {
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: token.marginSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${tabCls} + ${tabCls}`]: {
|
||||
margin: {
|
||||
_skip_check_: true,
|
||||
value: `0 0 0 ${tabsHorizontalGutter}px`,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
|
||||
const { componentCls, tabsHorizontalGutter, iconCls, tabsCardGutter } = token;
|
||||
const rtlCls = `${componentCls}-rtl`;
|
||||
return {
|
||||
[rtlCls]: {
|
||||
direction: 'rtl',
|
||||
|
||||
[`${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
margin: {
|
||||
_skip_check_: true,
|
||||
value: `0 0 0 ${tabsHorizontalGutter}px`,
|
||||
},
|
||||
|
||||
[`${componentCls}-tab:last-of-type`]: {
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[iconCls]: {
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: `${token.marginSM}px`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-tab-remove`]: {
|
||||
marginRight: {
|
||||
_skip_check_: true,
|
||||
value: `${token.marginXS}px`,
|
||||
},
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: `-${token.marginXXS}px`,
|
||||
},
|
||||
|
||||
[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: `${tabsCardGutter}px`,
|
||||
},
|
||||
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: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject => {
|
||||
const {
|
||||
componentCls,
|
||||
tabsCardHorizontalPadding,
|
||||
tabsCardHeight,
|
||||
tabsCardGutter,
|
||||
tabsHoverColor,
|
||||
tabsActiveColor,
|
||||
borderColorSplit,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
display: 'flex',
|
||||
overflow: 'hidden',
|
||||
|
||||
// ========================== 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: tabsCardHorizontalPadding,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
bottom: 0,
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
height: '5px',
|
||||
transform: 'translateY(100%)',
|
||||
content: "''",
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-nav-add`]: {
|
||||
minWidth: `${tabsCardHeight}px`,
|
||||
marginLeft: {
|
||||
_skip_check_: true,
|
||||
value: `${tabsCardGutter}px`,
|
||||
},
|
||||
padding: `0 ${token.paddingXS}px`,
|
||||
background: 'transparent',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
|
||||
'&:hover': {
|
||||
color: tabsHoverColor,
|
||||
},
|
||||
|
||||
'&:active, &:focus': {
|
||||
color: tabsActiveColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-extra-content`]: {
|
||||
flex: 'none',
|
||||
},
|
||||
|
||||
// ============================ InkBar ============================
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
position: 'absolute',
|
||||
background: token.colorPrimary,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
// ============================= Tabs =============================
|
||||
...genTabStyle(token),
|
||||
|
||||
// =========================== TabPanes ===========================
|
||||
[`${componentCls}-content`]: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
[`${componentCls}-content-holder`]: {
|
||||
flex: 'auto',
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-content-animated`]: {
|
||||
transition: `margin ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-tabpane`]: {
|
||||
flex: 'none',
|
||||
width: '100%',
|
||||
outline: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-centered`]: {
|
||||
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
[`&:not([class*='${componentCls}-nav-wrap-ping'])`]: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Tabs', token => {
|
||||
const paddingMD = 16; // FIXME: hardcode in v4
|
||||
const tabsCardHeight = 40; // FIXME: hardcode in v4
|
||||
|
||||
const tabsToken: TabsToken = {
|
||||
...token,
|
||||
|
||||
marginMD: 16, // FIXME: hardcode in v4
|
||||
paddingMD, // FIXME: hardcode in v4
|
||||
tabsHoverColor: '#40a9ff', // FIXME: hardcode in v4, primary-5
|
||||
tabsActiveColor: '#096dd9', // FIXME: hardcode in v4, primary-7
|
||||
|
||||
tabsCardHorizontalPadding: `
|
||||
${
|
||||
(tabsCardHeight - Math.floor(token.fontSizeBase * token.lineHeight)) / 2 -
|
||||
token.controlLineWidth
|
||||
}px ${paddingMD}px`,
|
||||
tabsCardHeight, // FIXME: hardcode in v4
|
||||
tabsCardGutter: 2, // FIXME: hardcode in v4
|
||||
tabsHorizontalGutter: 32, // FIXME: hardcode in v4
|
||||
tabsCardHeadBackground: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), // FIXME: hardcode in v4
|
||||
|
||||
dropdownLineHeight: 22, // FIXME: hardcode in v4
|
||||
dropdownEdgeChildVerticalPadding: 4, // FIXME: hardcode in v4
|
||||
disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // FIXME: hardcode in v4
|
||||
boxShadowColor: new TinyColor('rgba(0, 0, 0, 0.15)').setAlpha(0.08).toRgbString(), // FIXME: hardcode in v4
|
||||
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), // FIXME: hardcode in v4
|
||||
};
|
||||
|
||||
return [
|
||||
genSizeStyle(tabsToken),
|
||||
genRtlStyle(tabsToken),
|
||||
genPositionStyle(tabsToken),
|
||||
genDropdownStyle(tabsToken),
|
||||
genCardStyle(tabsToken),
|
||||
genTabsStyle(tabsToken),
|
||||
];
|
||||
});
|
||||
|
||||
@ -1,198 +1,198 @@
|
||||
@import '../../style/themes/index';
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
// @import '../../style/themes/index';
|
||||
// @tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
// ========================== Top & Bottom ==========================
|
||||
&-top,
|
||||
&-bottom {
|
||||
flex-direction: column;
|
||||
// .@{tab-prefix-cls} {
|
||||
// // ========================== Top & Bottom ==========================
|
||||
// &-top,
|
||||
// &-bottom {
|
||||
// flex-direction: column;
|
||||
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
margin: @tabs-bar-margin;
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// margin: @tabs-bar-margin;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
content: '';
|
||||
}
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
// content: '';
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
height: 2px;
|
||||
// .@{tab-prefix-cls}-ink-bar {
|
||||
// height: 2px;
|
||||
|
||||
&-animated {
|
||||
transition: width @animation-duration-slow, left @animation-duration-slow,
|
||||
right @animation-duration-slow;
|
||||
}
|
||||
}
|
||||
// &-animated {
|
||||
// transition: width @animation-duration-slow, left @animation-duration-slow,
|
||||
// right @animation-duration-slow;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-nav-wrap {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 30px;
|
||||
}
|
||||
// .@{tab-prefix-cls}-nav-wrap {
|
||||
// &::before,
|
||||
// &::after {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// width: 30px;
|
||||
// }
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
|
||||
}
|
||||
// &::before {
|
||||
// left: 0;
|
||||
// box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
|
||||
// }
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
|
||||
}
|
||||
// &::after {
|
||||
// right: 0;
|
||||
// box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
|
||||
// }
|
||||
|
||||
&.@{tab-prefix-cls}-nav-wrap-ping-left::before {
|
||||
opacity: 1;
|
||||
}
|
||||
&.@{tab-prefix-cls}-nav-wrap-ping-right::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-top {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
&::before {
|
||||
bottom: 0;
|
||||
}
|
||||
// &-top {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// &::before {
|
||||
// bottom: 0;
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{tab-prefix-cls}-ink-bar {
|
||||
// bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-bottom {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
order: 1;
|
||||
margin-top: @margin-md;
|
||||
margin-bottom: 0;
|
||||
// &-bottom {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// order: 1;
|
||||
// margin-top: @margin-md;
|
||||
// margin-bottom: 0;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
}
|
||||
// &::before {
|
||||
// top: 0;
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
// .@{tab-prefix-cls}-ink-bar {
|
||||
// top: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
> .@{tab-prefix-cls}-content-holder,
|
||||
> div > .@{tab-prefix-cls}-content-holder {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
// > .@{tab-prefix-cls}-content-holder,
|
||||
// > div > .@{tab-prefix-cls}-content-holder {
|
||||
// order: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// ========================== Left & Right ==========================
|
||||
&-left,
|
||||
&-right {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
flex-direction: column;
|
||||
min-width: 50px;
|
||||
// // ========================== Left & Right ==========================
|
||||
// &-left,
|
||||
// &-right {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// flex-direction: column;
|
||||
// min-width: 50px;
|
||||
|
||||
// >>>>>>>>>>> Tab
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: @tabs-vertical-padding;
|
||||
text-align: center;
|
||||
}
|
||||
// // >>>>>>>>>>> Tab
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// padding: @tabs-vertical-padding;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
margin: @tabs-vertical-margin;
|
||||
}
|
||||
// .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
// margin: @tabs-vertical-margin;
|
||||
// }
|
||||
|
||||
// >>>>>>>>>>> Nav
|
||||
.@{tab-prefix-cls}-nav-wrap {
|
||||
flex-direction: column;
|
||||
// // >>>>>>>>>>> Nav
|
||||
// .@{tab-prefix-cls}-nav-wrap {
|
||||
// flex-direction: column;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
}
|
||||
// &::before,
|
||||
// &::after {
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// height: 30px;
|
||||
// }
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
|
||||
}
|
||||
// &::before {
|
||||
// top: 0;
|
||||
// box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
|
||||
// }
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
|
||||
}
|
||||
// &::after {
|
||||
// bottom: 0;
|
||||
// box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
|
||||
// }
|
||||
|
||||
&.@{tab-prefix-cls}-nav-wrap-ping-top::before {
|
||||
opacity: 1;
|
||||
}
|
||||
&.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// >>>>>>>>>>> Ink Bar
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
width: 2px;
|
||||
// // >>>>>>>>>>> Ink Bar
|
||||
// .@{tab-prefix-cls}-ink-bar {
|
||||
// width: 2px;
|
||||
|
||||
&-animated {
|
||||
transition: height @animation-duration-slow, top @animation-duration-slow;
|
||||
}
|
||||
}
|
||||
// &-animated {
|
||||
// transition: height @animation-duration-slow, top @animation-duration-slow;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-nav-list,
|
||||
.@{tab-prefix-cls}-nav-operations {
|
||||
flex: 1 0 auto; // fix safari scroll problem
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{tab-prefix-cls}-nav-list,
|
||||
// .@{tab-prefix-cls}-nav-operations {
|
||||
// flex: 1 0 auto; // fix safari scroll problem
|
||||
// flex-direction: column;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-left {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
// &-left {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-ink-bar {
|
||||
// right: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
> .@{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;
|
||||
// > .@{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;
|
||||
|
||||
> .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
|
||||
padding-left: @padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
// > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
|
||||
// padding-left: @padding-lg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-right {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
order: 1;
|
||||
// &-right {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// order: 1;
|
||||
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
// .@{tab-prefix-cls}-ink-bar {
|
||||
// left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
> .@{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;
|
||||
// > .@{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;
|
||||
|
||||
> .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
|
||||
padding-right: @padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
|
||||
// padding-right: @padding-lg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,86 +1,86 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
// @tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
// .@{tab-prefix-cls} {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
|
||||
.@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
margin: @tabs-horizontal-margin-rtl;
|
||||
// .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// margin: @tabs-horizontal-margin-rtl;
|
||||
|
||||
&:last-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
// &:last-of-type {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: 0;
|
||||
margin-left: @margin-sm;
|
||||
}
|
||||
// .@{iconfont-css-prefix} {
|
||||
// margin-right: 0;
|
||||
// margin-left: @margin-sm;
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-tab-remove {
|
||||
margin-right: @margin-xs;
|
||||
margin-left: -@margin-xss;
|
||||
// .@{tab-prefix-cls}-tab-remove {
|
||||
// margin-right: @margin-xs;
|
||||
// margin-left: -@margin-xss;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{iconfont-css-prefix} {
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&.@{tab-prefix-cls}-left {
|
||||
> .@{tab-prefix-cls}-nav {
|
||||
order: 1;
|
||||
}
|
||||
> .@{tab-prefix-cls}-content-holder {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
// &.@{tab-prefix-cls}-left {
|
||||
// > .@{tab-prefix-cls}-nav {
|
||||
// order: 1;
|
||||
// }
|
||||
// > .@{tab-prefix-cls}-content-holder {
|
||||
// order: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&.@{tab-prefix-cls}-right {
|
||||
> .@{tab-prefix-cls}-nav {
|
||||
order: 0;
|
||||
}
|
||||
> .@{tab-prefix-cls}-content-holder {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &.@{tab-prefix-cls}-right {
|
||||
// > .@{tab-prefix-cls}-nav {
|
||||
// order: 0;
|
||||
// }
|
||||
// > .@{tab-prefix-cls}-content-holder {
|
||||
// order: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// ====================== Card ======================
|
||||
&-card {
|
||||
&.@{tab-prefix-cls}-top,
|
||||
&.@{tab-prefix-cls}-bottom {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
.@{tab-prefix-cls}-rtl& {
|
||||
margin-right: @tabs-card-gutter;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.@{tab-prefix-cls}-nav-add {
|
||||
.@{tab-prefix-cls}-rtl& {
|
||||
margin-right: @tabs-card-gutter;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// // ====================== Card ======================
|
||||
// &-card {
|
||||
// &.@{tab-prefix-cls}-top,
|
||||
// &.@{tab-prefix-cls}-bottom {
|
||||
// > .@{tab-prefix-cls}-nav,
|
||||
// > div > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
// .@{tab-prefix-cls}-rtl& {
|
||||
// margin-right: @tabs-card-gutter;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// .@{tab-prefix-cls}-nav-add {
|
||||
// .@{tab-prefix-cls}-rtl& {
|
||||
// margin-right: @tabs-card-gutter;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{tab-prefix-cls}-dropdown {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// .@{tab-prefix-cls}-dropdown {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
&-menu-item {
|
||||
.@{tab-prefix-cls}-dropdown-rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-menu-item {
|
||||
// .@{tab-prefix-cls}-dropdown-rtl & {
|
||||
// text-align: right;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
// @tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
&-small {
|
||||
> .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: @tabs-horizontal-padding-sm;
|
||||
font-size: @tabs-title-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{tab-prefix-cls} {
|
||||
// &-small {
|
||||
// > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// padding: @tabs-horizontal-padding-sm;
|
||||
// font-size: @tabs-title-font-size-sm;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-large {
|
||||
> .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: @tabs-horizontal-padding-lg;
|
||||
font-size: @tabs-title-font-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-large {
|
||||
// > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// padding: @tabs-horizontal-padding-lg;
|
||||
// font-size: @tabs-title-font-size-lg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-card {
|
||||
&.@{tab-prefix-cls}-small {
|
||||
> .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: @tabs-card-horizontal-padding-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-card {
|
||||
// &.@{tab-prefix-cls}-small {
|
||||
// > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// padding: @tabs-card-horizontal-padding-sm;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&.@{tab-prefix-cls}-large {
|
||||
> .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: @tabs-card-horizontal-padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &.@{tab-prefix-cls}-large {
|
||||
// > .@{tab-prefix-cls}-nav {
|
||||
// .@{tab-prefix-cls}-tab {
|
||||
// padding: @tabs-card-horizontal-padding-lg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user