[tabs] :less to cssinjs (#6288)
* update * switch * Style adjustment * refactor(Card): less to cssinjs * tabs: less to cssinjs 开发ing * add function cssinjs * Eliminate irrelevant code * Eliminate irrelevant code 2 * update components * Eliminate irrelevant input codepull/6295/head
yang
GitHub
parent
328e42a9be
commit
6240ab2885
|
|
@ -8,7 +8,7 @@ import './radio/style';
|
|||
// import './pagination/style';
|
||||
// import './avatar/style';
|
||||
// import './badge/style';
|
||||
import './tabs/style';
|
||||
//import './tabs/style';
|
||||
// import './input/style';
|
||||
// import './tooltip/style';
|
||||
// import './popover/style';
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ import pick from 'lodash-es/pick';
|
|||
import PropTypes from '../../_util/vue-types';
|
||||
import type { MouseEventHandler } from '../../_util/EventInterface';
|
||||
import omit from '../../_util/omit';
|
||||
|
||||
import useStyle from '../style';
|
||||
export type TabsType = 'line' | 'card' | 'editable-card';
|
||||
export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
|
||||
|
||||
|
|
@ -155,6 +155,7 @@ const InternalTabs = defineComponent({
|
|||
'`tabBarExtraContent` slot is deprecated. Please use `rightExtra` slot instead.',
|
||||
);
|
||||
const { prefixCls, direction, size, rootPrefixCls } = useConfigInject('tabs', props);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
const rtl = computed(() => direction.value === 'rtl');
|
||||
const mergedAnimated = computed<AnimatedConfig>(() => {
|
||||
const { animated, tabPosition } = props;
|
||||
|
|
@ -297,7 +298,7 @@ const InternalTabs = defineComponent({
|
|||
}
|
||||
const pre = prefixCls.value;
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<div
|
||||
{...attrs}
|
||||
id={id}
|
||||
|
|
@ -305,6 +306,7 @@ const InternalTabs = defineComponent({
|
|||
pre,
|
||||
`${pre}-${mergedTabPosition.value}`,
|
||||
{
|
||||
[hashId.value]: true,
|
||||
[`${pre}-${size.value}`]: size.value,
|
||||
[`${pre}-card`]: ['card', 'editable-card'].includes(type as string),
|
||||
[`${pre}-editable-card`]: type === 'editable-card',
|
||||
|
|
@ -322,7 +324,7 @@ const InternalTabs = defineComponent({
|
|||
{...sharedProps}
|
||||
animated={mergedAnimated.value}
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@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;
|
||||
|
||||
&-active {
|
||||
color: @tabs-card-active-color;
|
||||
background: @component-background;
|
||||
}
|
||||
}
|
||||
|
||||
.@{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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{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-left-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
|
||||
export const tabsCardStyle:{tabsCardGutter:string}={
|
||||
tabsCardGutter: '2px'
|
||||
}
|
||||
export const genTabscardStyle = (token): CSSObject => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[` ${componentCls}-nav,
|
||||
div > ${componentCls}-nav `]: {
|
||||
[`${componentCls}-tab `]: {
|
||||
margin: 0,
|
||||
background: `${token.colorFillAlter}`,
|
||||
padding: `${token.paddingXS}px ${token.padding}px`,
|
||||
border:`${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut} `,
|
||||
|
||||
[`&-active `]: {
|
||||
color: ` ${token.colorInfoActive}`,
|
||||
background: `${token.colorBgContainer}`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
visibility: `hidden`,
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Top & Bottom ==========================
|
||||
[`&${componentCls}-top,
|
||||
&${componentCls}-bottom`]: {
|
||||
[`${componentCls}-nav,
|
||||
div > ${componentCls}-nav `]: {
|
||||
[` ${componentCls}-tab + ${componentCls}-tab `]: {
|
||||
marginLeft: `${tabsCardStyle.tabsCardGutter} `,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-top `]: {
|
||||
[`${componentCls}-nav,
|
||||
div > ${componentCls}-nav `]: {
|
||||
[`${componentCls}-tab `]: {
|
||||
borderRadius: ` ${token.radiusBase}px ${token.radiusBase}px 0 0`,
|
||||
[`&-active `]: {
|
||||
borderBottomColor: `${token.colorBgContainer}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-bottom`]: {
|
||||
[`${componentCls}-nav,
|
||||
div > ${componentCls}-nav`]: {
|
||||
[` ${componentCls}-tab `]: {
|
||||
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
|
||||
|
||||
[` &-active `]: {
|
||||
borderTopColor: `${token.colorBgContainer}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Left & Right ==========================
|
||||
[`&${componentCls}-left,
|
||||
&${componentCls}-right`]: {
|
||||
[` ${componentCls}-nav,
|
||||
div > ${componentCls}-nav `]: {
|
||||
[` ${componentCls}-tab + ${componentCls}-tab`]: {
|
||||
marginTop: `${tabsCardStyle.tabsCardGutter}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-left`]: {
|
||||
[` > ${componentCls}-nav,
|
||||
> div > ${componentCls}-nav`]: {
|
||||
[` ${componentCls}-tab`]: {
|
||||
borderRadius: `${token.radiusBase}px 0 0 ${token.radiusBase}px`,
|
||||
|
||||
[` &-active`]: {
|
||||
borderRightColor: `${token.colorBgContainer}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[` &${componentCls}-right `]: {
|
||||
[` ${componentCls}-nav,
|
||||
div > ${componentCls}-nav `]: {
|
||||
[` ${componentCls}-tab `]: {
|
||||
borderRadius: `0 ${token.radiusBase}px ${token.radiusBase}px 0`,
|
||||
|
||||
[` &-active `]: {
|
||||
borderLeftColor:`${token.colorBgContainer}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls}-dropdown {
|
||||
.reset-component();
|
||||
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: @zindex-dropdown;
|
||||
display: block;
|
||||
|
||||
&-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;
|
||||
|
||||
&-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;
|
||||
}
|
||||
|
||||
&-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 {
|
||||
background: @item-hover-bg;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: @disabled-color;
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
import { resetComponent, clearFix } from '../../_style';
|
||||
const dropdownStyle={
|
||||
dropdownVerticalPadding:'5px',
|
||||
itemHoverBg:'#f5f5f5',
|
||||
}
|
||||
export const genTabsDropdownStyle = (token): CSSObject => {
|
||||
return {
|
||||
...resetComponent(token),
|
||||
position: `absolute`,
|
||||
top: `-9999px`,
|
||||
left: `-9999px`,
|
||||
zIndex:` ${token.zIndexPopupBase}`,
|
||||
display: `block`,
|
||||
[` &-hidden`] :{
|
||||
display: `none`,
|
||||
},
|
||||
|
||||
[` &-menu `]:{
|
||||
maxHeight:' 200px',
|
||||
margin: 0,
|
||||
padding: `${token.padding}px 0`,
|
||||
overflowx: 'hidden',
|
||||
overflowY: 'auto',
|
||||
textAlign: 'left',
|
||||
listStyleType: 'none',
|
||||
backgroundColor: ` ${token.colorBgBase}`,
|
||||
backgroundClip: `padding-box`,
|
||||
borderRadius: ` ${token.radiusBase}px`,
|
||||
outline: `none`,
|
||||
boxShadow: `${token.boxShadow}`,
|
||||
|
||||
[`&-item`]: {
|
||||
display: `flex`,
|
||||
alignItems: `center`,
|
||||
minWidth: `120px`,
|
||||
margin: 0,
|
||||
padding: `${dropdownStyle.dropdownVerticalPadding} ${token.paddingSM}px`,
|
||||
overflow: `hidden`,
|
||||
color:` ${token.colorText}`,
|
||||
fontWeight: `normal`,
|
||||
fontSize:` ${token.fontSize}px`,
|
||||
lineHeight: `${token.lineHeight} `,
|
||||
whiteSpace: `nowrap`,
|
||||
textOverflow: `ellipsis`,
|
||||
cursor: `pointer`,
|
||||
transition: `all 0.3s`,
|
||||
|
||||
[` > span`] :{
|
||||
flex: 1,
|
||||
whiteSpace: `nowrap`,
|
||||
},
|
||||
|
||||
[` &-remove `]:{
|
||||
flex: `none`,
|
||||
marginLeft:` ${token.marginSM}px`,
|
||||
color:` ${token.colorTextSecondary}`,
|
||||
fontSize: `${token.fontSizeSM}px`,
|
||||
background: `transparent`,
|
||||
border: 0,
|
||||
cursor: `pointer`,
|
||||
[` &:hover `]:{
|
||||
color:`${token.colorInfoHover}`,
|
||||
}
|
||||
},
|
||||
|
||||
[`&:hover `]:{
|
||||
background:` ${dropdownStyle.itemHoverBg}`,
|
||||
},
|
||||
|
||||
[` &-disabled `]:{
|
||||
[` &,
|
||||
&:hover`]: {
|
||||
color:` ${token.colorTextDisabled}`,
|
||||
background: `transparent`,
|
||||
cursor: `not-allowed`,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
@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} {
|
||||
.reset-component();
|
||||
|
||||
display: flex;
|
||||
|
||||
// ========================== 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
|
||||
|
||||
// >>>>> 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;
|
||||
}
|
||||
|
||||
// >>>>>>>> Operations
|
||||
.@{tab-prefix-cls}-nav-operations {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
|
||||
&-hidden {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.@{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: '';
|
||||
}
|
||||
}
|
||||
|
||||
.@{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;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @tabs-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================ 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;
|
||||
|
||||
&-btn,
|
||||
&-remove {
|
||||
&:focus,
|
||||
&:active {
|
||||
color: @tabs-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-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;
|
||||
|
||||
&:hover {
|
||||
color: @heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @tabs-hover-color;
|
||||
}
|
||||
|
||||
&&-active &-btn {
|
||||
color: @tabs-highlight-color;
|
||||
text-shadow: 0 0 0.25px currentcolor;
|
||||
}
|
||||
|
||||
&&-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&&-disabled &-btn,
|
||||
&&-disabled &-remove {
|
||||
&:focus,
|
||||
&:active {
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
& &-remove .@{iconfont-css-prefix} {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: @margin-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&-tab + &-tab {
|
||||
margin: @tabs-horizontal-margin;
|
||||
}
|
||||
|
||||
// =========================== TabPanes ===========================
|
||||
&-content {
|
||||
&-holder {
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
&-animated {
|
||||
transition: margin @animation-duration-slow;
|
||||
}
|
||||
}
|
||||
|
||||
&-tabpane {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,258 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// import '../../style/index.less';
|
||||
// import './index.less';
|
||||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { resetComponent, clearFix } from '../../_style';
|
||||
import Token from 'markdown-it/lib/token';
|
||||
import { genTabsPositionStyle } from './position';
|
||||
import { genTabsSizeStyle } from './size';
|
||||
import { genRtlStyle } from './rtl';
|
||||
import { genTabsDropdownStyle } from './dropdown';
|
||||
import { genTabscardStyle } from './card';
|
||||
import {tabsCardStyle } from './card'
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {}
|
||||
interface tabsToken extends FullToken<'Tabs'> {
|
||||
tabsCardHeight: string;
|
||||
tabsCardGutter: string;
|
||||
tabsHorizontalMarginRtl: string;
|
||||
}
|
||||
// ============================== Shared ==============================
|
||||
|
||||
export const genTabsSmallStyle = (token: tabsToken): CSSObject => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...genTabsSizeStyle(token),
|
||||
...genTabsPositionStyle(token),
|
||||
...resetComponent(token),
|
||||
display: 'flex',
|
||||
// ========================== Navigation ==========================
|
||||
[`&-card`]: {
|
||||
...genTabscardStyle(token),
|
||||
},
|
||||
[`&-rtl`]: {
|
||||
...genRtlStyle(token),
|
||||
},
|
||||
|
||||
[`&-dropdown`]: {
|
||||
...genTabsDropdownStyle(token),
|
||||
},
|
||||
[`${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: `transform ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
// >>>>>>>> Operations
|
||||
[`${componentCls}-nav-operations`]: {
|
||||
display: 'flex',
|
||||
alignSelf: 'stretch',
|
||||
[`&-hidden`]: {
|
||||
position: 'absolute',
|
||||
visibility: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-nav-more`]: {
|
||||
position: 'relative',
|
||||
padding: `${token.paddingXS}px ${token.padding}px`,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
[`&::after`]: {
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
height: '5px',
|
||||
transform: 'translateY(100%)',
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
[`${componentCls}-nav-add`]: {
|
||||
minWidth: `${token.tabsCardHeight}`,
|
||||
marginLeft: `${token.tabsCardGutter}`,
|
||||
padding: `0 ${token.paddingXS}px `,
|
||||
background: `${token.colorFillAlter}`,
|
||||
border: `${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
|
||||
borderRadius: ` ${token.borderRadius}e ${token.borderRadius} 0 0`,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut} `,
|
||||
[` &:hover `]: {
|
||||
color: `${token.colorPrimaryActive}`,
|
||||
},
|
||||
|
||||
[` &:active,
|
||||
&:focus`]: {
|
||||
color: `${token.colorPrimaryActive}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-extra-content `]: {
|
||||
flex: 'none',
|
||||
},
|
||||
[`&-centered`]: {
|
||||
[`${componentCls}-nav,
|
||||
div > ${componentCls}-nav`]: {
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
[`&:not([class*='@:${componentCls}-nav-wrap-ping'])`]: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// ============================ InkBar ============================
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
position: 'absolute',
|
||||
background: `${token.colorPrimary}`,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
// ============================= Tabs =============================
|
||||
[`${componentCls}-tab `]: {
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: `${token.paddingSM}px 0`,
|
||||
fontSize: `${token.fontSize}px`,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
|
||||
[`&-btn,
|
||||
&-remove`]: {
|
||||
[` &:focus,
|
||||
&:active `]: {
|
||||
color: `${token.colorInfoActive}`,
|
||||
},
|
||||
},
|
||||
|
||||
[` &-btn `]: {
|
||||
outline: 'none',
|
||||
transition: `all 0.3s`,
|
||||
},
|
||||
|
||||
[`&-remove `]: {
|
||||
flex: 'none',
|
||||
marginRight: `-${token.marginXXS}px`,
|
||||
marginLeft: `${tabsCardStyle.tabsCardGutter}`,
|
||||
color: `${token.colorTextSecondary} `,
|
||||
fontSize: ` ${token.fontSizeSM}px`,
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationSlow} `,
|
||||
|
||||
[` &:hover `]: {
|
||||
color: `${token.colorTextHeading} `,
|
||||
},
|
||||
},
|
||||
|
||||
[` &:hover `]: {
|
||||
color: `${token.colorLinkHover}`,
|
||||
},
|
||||
|
||||
[`${componentCls}-active &-btn `]: {
|
||||
color: `${token.colorHighlight}`,
|
||||
textShadow: '0 0 0.25px currentcolor',
|
||||
},
|
||||
|
||||
[`&-disabled `]: {
|
||||
color: `${token.colorTextDisabled}`,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
[`&-disabled &-btn,
|
||||
&-disabled &-remove`]: {
|
||||
[` &:focus,
|
||||
&:active `]: {
|
||||
color: `${token.colorTextDisabled}`,
|
||||
},
|
||||
},
|
||||
|
||||
[` &-remove ${token.iconCls}`]: {
|
||||
margin: 0,
|
||||
},
|
||||
|
||||
[` ${token.iconCls} `]: {
|
||||
marginRight: `${token.marginSM}px`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-tab + ${componentCls}-tab `]: {
|
||||
margin: `${token.tabsHorizontalMarginRtl}`,
|
||||
},
|
||||
|
||||
// =========================== TabPanes ===========================
|
||||
[`${componentCls}-content`]: {
|
||||
[`&-holder`]: {
|
||||
flex: 'auto',
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
|
||||
},
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
[`${componentCls}-animated`]: {
|
||||
transition: `margin ${token.motionDurationSlow}`,
|
||||
},
|
||||
},
|
||||
|
||||
[` ${componentCls}-tabpane `]: {
|
||||
flex: 'none',
|
||||
width: ' 100%',
|
||||
outline: 'none',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Tabs',
|
||||
token => {
|
||||
const tabsToken = mergeToken<tabsToken>(token, {
|
||||
tabsCardHeight: '40px',
|
||||
tabsCardGutter: '5px',
|
||||
tabsHorizontalMarginRtl: '0 0 0 32px',
|
||||
});
|
||||
return [genTabsSmallStyle(tabsToken)];
|
||||
},
|
||||
{},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,198 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
// ========================== Top & Bottom ==========================
|
||||
&-top,
|
||||
&-bottom {
|
||||
flex-direction: column;
|
||||
|
||||
> .@{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: '';
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
height: 2px;
|
||||
|
||||
&-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;
|
||||
}
|
||||
|
||||
&::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%);
|
||||
}
|
||||
|
||||
&.@{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;
|
||||
}
|
||||
|
||||
.@{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;
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-ink-bar {
|
||||
top: 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;
|
||||
|
||||
// >>>>>>>>>>> Tab
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: @tabs-vertical-padding;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
|
||||
margin: @tabs-vertical-margin;
|
||||
}
|
||||
|
||||
// >>>>>>>>>>> Nav
|
||||
.@{tab-prefix-cls}-nav-wrap {
|
||||
flex-direction: column;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&::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%);
|
||||
}
|
||||
|
||||
&.@{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;
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-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 > .@{tab-prefix-cls}-tabpane {
|
||||
padding-left: @padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
> .@{tab-prefix-cls}-nav,
|
||||
> div > .@{tab-prefix-cls}-nav {
|
||||
order: 1;
|
||||
|
||||
.@{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 > .@{tab-prefix-cls}-tabpane {
|
||||
padding-right: @padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
|
||||
export const genTabsPositionStyle = (token): CSSObject => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`&-top,
|
||||
&-bottom`]: {
|
||||
flexDirection: 'column',
|
||||
[`${componentCls}-nav, div >${componentCls}-nav`]: {
|
||||
margin: ` 0 0 ${token.margin}px `,
|
||||
[`&::before`]: {
|
||||
position: 'absolute',
|
||||
right:0,
|
||||
left: 0,
|
||||
borderBottom: `${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
|
||||
content: '""',
|
||||
},
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
height: ' 2px',
|
||||
[`&-animated`]: {
|
||||
transition: `width ${token.motionDurationSlow} , left ${token.motionDurationSlow},
|
||||
right `,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
[`&::before,
|
||||
&::after`]: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width:'30px',
|
||||
},
|
||||
|
||||
[` &::before`]: {
|
||||
left: 0,
|
||||
boxShadow: `${token.boxShadowTabsOverflowBottom}`,
|
||||
},
|
||||
|
||||
[` &::after`]: {
|
||||
right: 0,
|
||||
boxShadow: `${token.boxShadowTabsOverflowRight}`,
|
||||
},
|
||||
|
||||
[`&${componentCls}-nav-wrap-ping-left::before`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
[`&${componentCls}-nav-wrap-ping-right::after`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&-top`]: {
|
||||
[`${componentCls}-nav,
|
||||
div >${componentCls}-nav`]: {
|
||||
[`&::before`]: {
|
||||
bottom: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
bottom: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&-bottom`]: {
|
||||
|
||||
[`${componentCls}-nav,
|
||||
div >${componentCls}-nav`]: {
|
||||
order: 1,
|
||||
marginTop: ` ${token.margin}px`,
|
||||
marginBottom: 0,
|
||||
[` &::before`]: {
|
||||
top: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
top: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-content-holder,
|
||||
div >${componentCls}-content-holder`]: {
|
||||
order: 0,
|
||||
},
|
||||
},
|
||||
|
||||
// ========================== Left & Right ==========================
|
||||
[`&-left,
|
||||
&-right`]: {
|
||||
[`${componentCls}-nav, div>${componentCls}-nav`]: {
|
||||
flexDirection: 'column',
|
||||
minWidth: '50px',
|
||||
// >>>>>>>>>>> Tab
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: ` ${token.padding}px`,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
[`${componentCls}-tab + ${componentCls}-tab`]: {
|
||||
margin: ` ${token.margin}px 0 0 0`,
|
||||
},
|
||||
|
||||
// >>>>>>>>>>> Nav
|
||||
[`${componentCls}-nav-wrap`]: {
|
||||
flexDirection: 'column',
|
||||
[`&::before,
|
||||
&::after`]: {
|
||||
right: 0,
|
||||
left: 0,
|
||||
height: '30px',
|
||||
},
|
||||
|
||||
[`&::before`]: {
|
||||
top: 0,
|
||||
boxShadow: `${token.boxShadowTabsOverflowTop}`,
|
||||
},
|
||||
|
||||
[`&::after`]: {
|
||||
bottom: 0,
|
||||
boxShadow: `${token.boxShadowTabsOverflowBottom}`,
|
||||
},
|
||||
|
||||
[`&${componentCls}-nav-wrap-ping-top::before`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
[`&${componentCls}-nav-wrap-ping-bottom::after`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
|
||||
// >>>>>>>>>>> Ink Bar
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
width: `2px`,
|
||||
|
||||
[`&-animated`]: {
|
||||
transition: `height ${token.motionDurationSlow}, top ${token.motionDurationSlow}`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-nav-list,
|
||||
${componentCls}-nav-operations`]: {
|
||||
// color: '#fff',
|
||||
flex: `1 0 auto`, // fix safari scroll problem
|
||||
flexDirection: `column`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&-left`]: {
|
||||
[`${componentCls}-nav,
|
||||
div >${componentCls}-nav`]: {
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-content-holder,
|
||||
div >&-content-holder`]: {
|
||||
marginLeft: `-${token.lineWidth}px`,
|
||||
borderLeft: `${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
|
||||
[` ${componentCls}-content > ${componentCls}-tabpane`]: {
|
||||
paddingLeft: `${token.paddingLG}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&-right`]: {
|
||||
[` ${componentCls}-nav,
|
||||
div >${componentCls}-nav`]: {
|
||||
order: 1,
|
||||
|
||||
[`${componentCls}-ink-bar`]: {
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-content-holder,
|
||||
div >${componentCls}-content-holder`]: {
|
||||
order: 0,
|
||||
marginLeft: ` -${token.lineWidth}px`,
|
||||
borderRight: `${token.lineWidth}px ${token.colorBorder} ${token.lineType} `,
|
||||
|
||||
[`${componentCls}-content >${componentCls}-tabpane`]: {
|
||||
paddingLeft: ` ${token.paddingLG}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
|
||||
.@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
margin: @tabs-horizontal-margin-rtl;
|
||||
|
||||
&:last-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: 0;
|
||||
margin-left: @margin-sm;
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-tab-remove {
|
||||
margin-right: @margin-xs;
|
||||
margin-left: -@margin-xss;
|
||||
|
||||
.@{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}-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-dropdown {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-menu-item {
|
||||
.@{tab-prefix-cls}-dropdown-rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
import {tabsCardStyle } from './card'
|
||||
export const genRtlStyle = (token): CSSObject => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`&-rtl `]: {
|
||||
direction: 'rtl',
|
||||
[`${componentCls}-nav `]: {
|
||||
[` ${componentCls}-tab `]: {
|
||||
margin: ` ${token.tabsHorizontalMarginRtl}`,
|
||||
|
||||
[` &:last-of-type`]: {
|
||||
marginLeft: 0,
|
||||
},
|
||||
|
||||
[` ${token.iconCls}`]: {
|
||||
marginRight: 0,
|
||||
marginLeft: `${token.marginSM}`,
|
||||
},
|
||||
|
||||
[` ${componentCls}-tab-remove `]: {
|
||||
marginRight: `${token.marginXS}`,
|
||||
marginLeft: `${token.marginXXS}`,
|
||||
[` ${token.iconCls} ${token.ico}`]: {
|
||||
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 ======================
|
||||
[`&-card`]: {
|
||||
[` & ${componentCls}-top,
|
||||
& ${componentCls}-bottom`]: {
|
||||
[` ${componentCls}-nav,
|
||||
div >${componentCls}-nav `]: {
|
||||
[` ${componentCls}-tab +${componentCls}-tab`]: {
|
||||
[` ${componentCls}-rtl& `]: {
|
||||
marginRight: `${tabsCardStyle.tabsCardGutter}`,
|
||||
marginLeft: 0,
|
||||
},
|
||||
},
|
||||
[` ${componentCls}-nav-add`]: {
|
||||
[` ${componentCls}-rtl& `]: {
|
||||
marginRight: `${tabsCardStyle.tabsCardGutter}`,
|
||||
marginLeft: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[` ${componentCls}-dropdown `]: {
|
||||
[` &-rtl `]: {
|
||||
direction: 'rtl',
|
||||
},
|
||||
[` &-menu-item `]: {
|
||||
[`${componentCls}-dropdown-rtl & `]: {
|
||||
textAlign: 'right',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{tab-prefix-cls}-large {
|
||||
> .@{tab-prefix-cls}-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
padding: @tabs-card-horizontal-padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import type { CSSObject } from '../../_util/cssinjs';
|
||||
|
||||
export const genTabsSizeStyle = (token): CSSObject => {
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[`&-small`]: {
|
||||
[`${componentCls}-nav`]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: ` ${token.paddingXS}px 0`,
|
||||
fontSize: ` ${token.fontSize}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&-large`]: {
|
||||
[`${componentCls}-nav `]: {
|
||||
[` ${componentCls}-tab`]: {
|
||||
padding: ` ${token.paddingLG}px 0`,
|
||||
fontSize: ` ${token.fontSizeLG}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&-card `]: {
|
||||
[`& ${componentCls}-small `]: {
|
||||
[`${componentCls}-nav`]: {
|
||||
[` ${componentCls}-tab`]: {
|
||||
padding: ` ${token.paddingSM}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`&-large`]: {
|
||||
[` > ${componentCls}-nav `]: {
|
||||
[`${componentCls}-tab`]: {
|
||||
padding: ` ${token.paddingLG}px 0`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -38,7 +38,7 @@ import type { ComponentToken as SpaceComponentToken } from '../../space/style';
|
|||
import type { ComponentToken as SpinComponentToken } from '../../spin/style';
|
||||
import type { ComponentToken as StepsComponentToken } from '../../steps/style';
|
||||
import type { ComponentToken as TableComponentToken } from '../../table/style';
|
||||
// import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
|
||||
import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
|
||||
import type { ComponentToken as TagComponentToken } from '../../tag/style';
|
||||
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
|
||||
import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
|
||||
|
|
@ -101,7 +101,7 @@ export interface ComponentTokenMap {
|
|||
Typography?: TypographyComponentToken;
|
||||
Timeline?: TimelineComponentToken;
|
||||
Transfer?: TransferComponentToken;
|
||||
// Tabs?: TabsComponentToken;
|
||||
Tabs?: TabsComponentToken;
|
||||
Calendar?: CalendarComponentToken;
|
||||
Steps?: StepsComponentToken;
|
||||
Menu?: MenuComponentToken;
|
||||
|
|
|
|||
Loading…
Reference in New Issue