From e8ac750d8b633512dc9d0c6420276eb3e161619f Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 15:18:38 +0800 Subject: [PATCH 01/10] update --- components/card/Card.tsx | 20 +- components/card/Grid.tsx | 7 +- components/card/Meta.tsx | 8 +- components/card/style/index.ts | 335 +++++++++++++++++++++++ components/card/style/index.tsx | 12 +- components/style.ts | 4 +- components/theme/interface/components.ts | 7 +- package.json | 1 + 8 files changed, 371 insertions(+), 23 deletions(-) create mode 100644 components/card/style/index.ts diff --git a/components/card/Card.tsx b/components/card/Card.tsx index 41f4fd3857..2fc3a4d0ed 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -9,6 +9,7 @@ import type { SizeType } from '../config-provider'; import isPlainObject from 'lodash-es/isPlainObject'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; +import useStyle from './style'; export interface CardTabListType { key: string; tab: any; @@ -51,10 +52,13 @@ export type CardProps = Partial>>; const Card = defineComponent({ compatConfig: { MODE: 3 }, name: 'ACard', + inheritAttrs: false, props: cardProps(), slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'], - setup(props, { slots }) { - const { prefixCls, direction, size } = useConfigInject('card', props); + setup(props, { slots, attrs }) { + const { prefixCls, direction, size } = useConfigInject('card', props); //注入 + // console.log('prefixCls', prefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); //安装style const getAction = (actions: VNodeTypes[]) => { const actionList = actions.map((action, index) => (isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? ( @@ -97,8 +101,10 @@ const Card = defineComponent({ } = props; const children = flattenChildren(slots.default?.()); const pre = prefixCls.value; + // console.log('pre', pre); const classString = { [`${pre}`]: true, + [hashId.value]: true, [`${pre}-loading`]: loading, [`${pre}-bordered`]: bordered, [`${pre}-hoverable`]: !!hoverable, @@ -190,16 +196,18 @@ const Card = defineComponent({ const actionDom = actions && actions.length ? : null; - return ( -
+ return wrapSSR( +
{head} {coverDom} {children && children.length ? body : null} {actionDom} -
+
, ); }; }, }); - +{ + /*
*/ +} export default Card; diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index b6253c1bbd..c18bdecdb4 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -1,6 +1,7 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent, computed } from 'vue'; import useConfigInject from '../config-provider/hooks/useConfigInject'; +import useStyle from './style'; export const cardGridProps = () => ({ prefixCls: String, @@ -10,18 +11,18 @@ export type CardGridProps = Partial { return { [`${prefixCls.value}-grid`]: true, [`${prefixCls.value}-grid-hoverable`]: props.hoverable, }; }); - return () => { - return
{slots.default?.()}
; - }; + return wrapSSR(
{slots.default?.()}
); }, }); diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx index 129fb635d5..aa5b7fa1b4 100644 --- a/components/card/Meta.tsx +++ b/components/card/Meta.tsx @@ -3,6 +3,7 @@ import { defineComponent } from 'vue'; import PropTypes from '../_util/vue-types'; import { getPropsSlot } from '../_util/props-util'; import useConfigInject from '../config-provider/hooks/useConfigInject'; +import useStyle from './style'; export const cardMetaProps = () => ({ prefixCls: String, @@ -18,6 +19,7 @@ export default defineComponent({ slots: ['title', 'description', 'avatar'], setup(props, { slots }) { const { prefixCls } = useConfigInject('card', props); + const [wrapSSR, hashId] = useStyle(prefixCls); return () => { const classString = { [`${prefixCls.value}-meta`]: true, @@ -40,11 +42,11 @@ export default defineComponent({ {descriptionDom}
) : null; - return ( -
+ return wrapSSR( +
{avatarDom} {MetaDetail} -
+
, ); }; }, diff --git a/components/card/style/index.ts b/components/card/style/index.ts new file mode 100644 index 0000000000..bc9d99feee --- /dev/null +++ b/components/card/style/index.ts @@ -0,0 +1,335 @@ +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 type { GlobalToken } from '../../theme/interface'; +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + // sizePaddingEdgeHorizontal: number; +} +interface CardToken extends FullToken<'Card'> { + cardHeadFontSize: string; + CardHeadPadding: string; + cardPaddingBase: string; + cardPaddingBaseSm: string; + cardHeadHeightSm: string; + cardHeadPaddingSm: string; + cardActionsLiMargin: string; + cardHeadTabsMarginBottom: string; + cardHeadHeight: string; + cardShadow: string; +} +// ============================== Shared ============================== +const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { + // const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; + const { + cardHeadFontSize, + CardHeadPadding, + cardPaddingBase, + cardPaddingBaseSm, + cardHeadHeightSm, + cardHeadPaddingSm, + cardActionsLiMargin, + cardHeadTabsMarginBottom, + cardHeadHeight, + componentCls, + } = token; + return { + [componentCls]: { + ...resetComponent(token), + position: `relative`, + background: `${token.colorBgBase}`, + borderRadius: `${token.borderRadiusXS}px`, + '&-bordered': { + border: `1px solid #f0f0f0`, + }, + '&-rtl': { + direction: 'rtl', + }, + [`${componentCls}-hoverable`]: { + cursor: 'pointer', + transition: ` box-shadow 0.3s, ${token.colorBorder} 0.3s`, + border: 'solid red 1px', + '&::hover': { + border: 'solid red 1px', + borderColor: `${token.colorBgBase}`, + boxShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48), + 0 5px 12px 4px rgba(0, 0, 0, 0.36)`, + }, + }, + [`${componentCls}-head`]: { + minHeight: `${cardHeadHeight}`, + marginBottom: `-1px`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + fontWeight: 500, + fontSize: `${token.cardHeadFontSize}px`, + background: `transparent`, + borderBottom: '1px solid #f0f0f0', + border: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, + ...clearFix(), + // &-bordered { + // border: @border-width-base @border-style-base @border-color-split; + // } + '&-wrapper': { + display: 'flex', + alignItems: 'center', + }, + '&-title': { + display: 'inline-block', + flex: 1, + // padding: `${token.cardPaddingBase} 0`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + [`> ${componentCls}-typography ${componentCls}-typography-edit-content `]: { + left: 0, + marginTop: 0, + marginBottom: 0, + }, + }, + + [`${componentCls}-prefix-tabs-top`]: { + clear: 'both', + marginBottom: `${token.margin}`, + color: `${token.colorText}`, + // fontWeight: 'normal', + fontWeight: 400, + fontSize: `${token.fontSize}`, + '&-bar': { + // borderBottom:`${token.cardShadow}` + // @border-width-base @border-style-base @border-color-split; + }, + }, + }, + [`${componentCls}-extra`]: { + float: 'right', + // https://stackoverflow.com/a/22429853/3040605 + marginLeft: 'auto', + padding: `${cardHeadHeight} 0`, + color: `${token.colorText}`, + // fontWeight: `${token.}`, + fontWeight: 400, + fontSize: `${token.fontSize}`, + [`${componentCls}-prefix-rtl &`]: { + marginRight: 'auto', + marginLeft: 0, + }, + }, + [`${componentCls}-body`]: { + padding: `${cardPaddingBase}`, + ...clearFix(), + }, + [`${componentCls}-contain-grid:not(&-loading) &-body`]: { + margin: ' -1px 0 0 -1px', + padding: 0, + }, + [`${componentCls}-grid`]: { + float: 'left', + width: '33.33%', + padding: `${cardPaddingBase}`, + border: 0, + borderRadius: 0, + boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit}, + 1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset, + 0 1px 0 0 ${token.colorSplit} inset; + transition: all 0.3s`, + [`${componentCls}-cls-rtl &`]: { + float: 'right', + }, + + '&-hoverable': { + '&:hover': { + position: 'relative', + zIndex: 1, + boxShadow: `${token.boxShadow}`, + }, + }, + }, + + [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-head-title`]: { + minHeight: ` ${cardHeadHeight}- ${cardPaddingBase}`, + paddingBottom: 0, + }, + [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-extra`]: { + paddingBottom: 0, + }, + [` ${componentCls}-bordered > ${componentCls}-cover `]: { + marginTop: '-1px', + marginRight: '-1px', + marginLeft: '-1px', + }, + [`${componentCls}-cover`]: { + ' > *': { + display: 'block', + width: '100%', + }, + + img: { + borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0 `, + }, + }, + + ' &-actions': { + margin: 0, + padding: 0, + listStyle: 'none', + background: `${token.colorBgBase}`, + // @card-actions-background; + borderTop: `${token.BackTop}`, + // @border-width-base @border-style-base @border-color-split; + ...clearFix(), + + '& > li': { + float: 'left', + margin: `${cardActionsLiMargin}`, + color: `~@text-color-secondary`, + textAlign: 'center', + + [` ${componentCls}-rtl &`]: { + float: 'right', + }, + + ' > span': { + position: 'relative', + display: 'block', + minWidth: ' 32px', + fontSize: `${token.fontSize}`, + lineHeight: `${token.lineHeight}`, + cursor: 'pointer', + '&:hover': { + color: ` ${token.colorPrimary}`, + transition: 'color 0.3s', + }, + + [` a:not( ${componentCls}-btn), + > ${componentCls}-css-prefix}`]: { + display: ' inline-block', + width: '100%', + // color: ` $ @text-color-secondary`; + lineHeight: ' 22px', + transition: ' color 0.3s', + + '&:hover': { + color: `${token.colorPrimary}`, + }, + }, + + [`>${token.iconCls}`]: { + fontSize: `${token.fontSizeIcon}`, + lineHeight: '22px', + }, + }, + + ' &:not(:last-child)': { + borderRight: `${token.borderRadius}`, + // @border-width-base @border-style-base @border-color-split; + + [` ${componentCls}-rtl &`]: { + borderRight: 'none', + borderLeft: `${token.borderRadius}`, + // @border-width-base @border-style-base @border-color-split; + }, + }, + }, + }, + '&-type-inner &-head': { + padding: `0 ${cardPaddingBase}`, + color: 'red', + background: `${token.colorBgBase}`, + + ' &-title': { + padding: `${cardHeadPaddingSm} 0`, + fontSize: `${token.fontSize}`, + }, + }, + '&-type-inner &-body': { + padding: `16px ${cardPaddingBase}`, + }, + ' &-type-inner &-extra': { + padding: `${cardHeadPaddingSm} + 1.5px 0`, + }, + ' &-meta': { + margin: ' -4px 0', + ...clearFix(), + + '&-avatar': { + float: 'left', + paddingRight: '16px', + + [` ${componentCls}-rtl &`]: { + float: 'right', + paddingRight: 0, + paddingLeft: ' 16px', + }, + }, + + ' &-detail ': { + overflow: 'hidden', + + ' > div:not(:last-child)': { + marginBottom: `${token.marginXS}`, + }, + }, + + ' &-title': { + overflow: 'hidden', + color: `${token.colorBgBase}`, + fontWeight: '500', + fontSize: `${token.fontSizeLG}`, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + + ' &-description': { + color: ' @text-color-secondary', + }, + }, + '&-loading': { + overflow: 'hidden', + }, + '&-loading &-body': { + userSelect: 'none', + }, + + ' &-loading-content': { + p: { + margin: 0, + }, + }, + ' &-loading-block': { + height: '14px', + margin: ' 4px 0', + background: 'linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min)', + backgroundSize: '600% 600%', + borderRadius: `${token.borderRadius}`, + animation: 'card-loading 1.4s ease infinite', + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Card', + token => { + const cardToken = mergeToken(token, { + cardPaddingBase: '16px', + cardHeadHeight: ' 36px', + cardHeadFontSize: `${token.fontSizeHeading5}`, + CardHeadPadding: '8.5px', + cardPaddingBaseSm: '12px', + cardHeadHeightSm: '30px', + cardHeadPaddingSm: '6px', + cardActionsLiMargin: '4px 0', + cardHeadTabsMarginBottom: '-9px', + cardShadow: + '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', + }); + return [genSharedDividerStyle(cardToken)]; + }, + { + sizePaddingEdgeHorizontal: 0, + }, +); diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 1ab67bfcc5..4b25dbe868 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -1,7 +1,7 @@ -import '../../style/index.less'; -import './index.less'; +// import '../../style/index.less'; +// import './index.less'; -// style dependencies -import '../../tabs/style'; -import '../../row/style'; -import '../../col/style'; +// // style dependencies +// import '../../tabs/style'; +// import '../../row/style'; +// import '../../col/style'; diff --git a/components/style.ts b/components/style.ts index 338d6438b8..a76d363a6c 100644 --- a/components/style.ts +++ b/components/style.ts @@ -17,7 +17,7 @@ import './input/style'; import './mentions/style'; // import './dropdown/style'; // import './divider/style'; -import './card/style'; +// import './card/style'; import './collapse/style'; import './carousel/style'; // import './notification/style'; @@ -53,7 +53,7 @@ import './drawer/style'; import './comment/style'; // import './config-provider/style'; import './empty/style'; -import './statistic/style'; +// import './statistic/style'; import './result/style'; // import './descriptions/style'; import './page-header/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 8e7a5bf3cb..70c71f78a0 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -5,7 +5,7 @@ import type { ComponentToken as BackTopComponentToken } from '../../back-top/sty import type { ComponentToken as ButtonComponentToken } from '../../button/style'; // import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'; // import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'; -// import type { ComponentToken as CardComponentToken } from '../../card/style'; +import type { ComponentToken as CardComponentToken } from '../../card/style'; // import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'; // import type { ComponentToken as CascaderComponentToken } from '../../cascader/style'; // import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style'; @@ -49,6 +49,7 @@ import type { ComponentToken as TooltipComponentToken } from '../../tooltip/styl // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; // import type { ComponentToken as AppComponentToken } from '../../app/style'; // import type { ComponentToken as WaveToken } from '../../_util/wave/style'; +import type { ComponentToken as StatisticComponentToken } from '../../statistic/style'; export interface ComponentTokenMap { Affix?: {}; @@ -59,7 +60,7 @@ export interface ComponentTokenMap { Badge?: {}; Button?: ButtonComponentToken; Breadcrumb?: {}; - // Card?: CardComponentToken; + Card?: CardComponentToken; // Carousel?: CarouselComponentToken; // Cascader?: CascaderComponentToken; // Checkbox?: CheckboxComponentToken; @@ -91,7 +92,7 @@ export interface ComponentTokenMap { Skeleton?: SkeletonComponentToken; // Slider?: SliderComponentToken; Spin?: SpinComponentToken; - Statistic?: {}; + Statistic?: StatisticComponentToken; Switch?: {}; Tag?: TagComponentToken; Tree?: {}; diff --git a/package.json b/package.json index 0a8f9d8058..c1c9c9f26d 100644 --- a/package.json +++ b/package.json @@ -280,6 +280,7 @@ "@emotion/hash": "^0.9.0", "@emotion/unitless": "^0.8.0", "@simonwep/pickr": "~1.8.0", + "ant-design-vue": "link:", "array-tree-filter": "^2.1.0", "async-validator": "^4.0.0", "csstype": "^3.1.1", From 8331bcbe9f42a4e963c422e64d759685aeb54cab Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 17:33:01 +0800 Subject: [PATCH 02/10] switch --- components/card/Grid.tsx | 7 +- components/card/Meta.tsx | 6 +- components/card/style/index.ts | 335 ---------------------------- components/card/style/index.tsx | 378 +++++++++++++++++++++++++++++++- components/card/style/size.less | 20 -- 5 files changed, 378 insertions(+), 368 deletions(-) delete mode 100644 components/card/style/index.ts delete mode 100644 components/card/style/size.less diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index c18bdecdb4..aafff1ee26 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -1,7 +1,6 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent, computed } from 'vue'; import useConfigInject from '../config-provider/hooks/useConfigInject'; -import useStyle from './style'; export const cardGridProps = () => ({ prefixCls: String, @@ -16,13 +15,15 @@ export default defineComponent({ props: cardGridProps(), setup(props, { slots }) { const { prefixCls } = useConfigInject('card', props); - const [wrapSSR, hashId] = useStyle(prefixCls); //安装style const classNames = computed(() => { return { [`${prefixCls.value}-grid`]: true, [`${prefixCls.value}-grid-hoverable`]: props.hoverable, }; }); - return wrapSSR(
{slots.default?.()}
); + return () => { + return
{slots.default?.()}
; + }; + // return wrapSSR(
{slots.default?.()}
); }, }); diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx index aa5b7fa1b4..55b4bb06a9 100644 --- a/components/card/Meta.tsx +++ b/components/card/Meta.tsx @@ -3,7 +3,6 @@ import { defineComponent } from 'vue'; import PropTypes from '../_util/vue-types'; import { getPropsSlot } from '../_util/props-util'; import useConfigInject from '../config-provider/hooks/useConfigInject'; -import useStyle from './style'; export const cardMetaProps = () => ({ prefixCls: String, @@ -19,7 +18,6 @@ export default defineComponent({ slots: ['title', 'description', 'avatar'], setup(props, { slots }) { const { prefixCls } = useConfigInject('card', props); - const [wrapSSR, hashId] = useStyle(prefixCls); return () => { const classString = { [`${prefixCls.value}-meta`]: true, @@ -42,11 +40,11 @@ export default defineComponent({ {descriptionDom} ) : null; - return wrapSSR( + return (
{avatarDom} {MetaDetail} -
, + ); }; }, diff --git a/components/card/style/index.ts b/components/card/style/index.ts deleted file mode 100644 index bc9d99feee..0000000000 --- a/components/card/style/index.ts +++ /dev/null @@ -1,335 +0,0 @@ -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 type { GlobalToken } from '../../theme/interface'; -/** Component only token. Which will handle additional calculation of alias token */ -export interface ComponentToken { - // sizePaddingEdgeHorizontal: number; -} -interface CardToken extends FullToken<'Card'> { - cardHeadFontSize: string; - CardHeadPadding: string; - cardPaddingBase: string; - cardPaddingBaseSm: string; - cardHeadHeightSm: string; - cardHeadPaddingSm: string; - cardActionsLiMargin: string; - cardHeadTabsMarginBottom: string; - cardHeadHeight: string; - cardShadow: string; -} -// ============================== Shared ============================== -const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { - // const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; - const { - cardHeadFontSize, - CardHeadPadding, - cardPaddingBase, - cardPaddingBaseSm, - cardHeadHeightSm, - cardHeadPaddingSm, - cardActionsLiMargin, - cardHeadTabsMarginBottom, - cardHeadHeight, - componentCls, - } = token; - return { - [componentCls]: { - ...resetComponent(token), - position: `relative`, - background: `${token.colorBgBase}`, - borderRadius: `${token.borderRadiusXS}px`, - '&-bordered': { - border: `1px solid #f0f0f0`, - }, - '&-rtl': { - direction: 'rtl', - }, - [`${componentCls}-hoverable`]: { - cursor: 'pointer', - transition: ` box-shadow 0.3s, ${token.colorBorder} 0.3s`, - border: 'solid red 1px', - '&::hover': { - border: 'solid red 1px', - borderColor: `${token.colorBgBase}`, - boxShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48), - 0 5px 12px 4px rgba(0, 0, 0, 0.36)`, - }, - }, - [`${componentCls}-head`]: { - minHeight: `${cardHeadHeight}`, - marginBottom: `-1px`, - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - fontWeight: 500, - fontSize: `${token.cardHeadFontSize}px`, - background: `transparent`, - borderBottom: '1px solid #f0f0f0', - border: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, - ...clearFix(), - // &-bordered { - // border: @border-width-base @border-style-base @border-color-split; - // } - '&-wrapper': { - display: 'flex', - alignItems: 'center', - }, - '&-title': { - display: 'inline-block', - flex: 1, - // padding: `${token.cardPaddingBase} 0`, - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - [`> ${componentCls}-typography ${componentCls}-typography-edit-content `]: { - left: 0, - marginTop: 0, - marginBottom: 0, - }, - }, - - [`${componentCls}-prefix-tabs-top`]: { - clear: 'both', - marginBottom: `${token.margin}`, - color: `${token.colorText}`, - // fontWeight: 'normal', - fontWeight: 400, - fontSize: `${token.fontSize}`, - '&-bar': { - // borderBottom:`${token.cardShadow}` - // @border-width-base @border-style-base @border-color-split; - }, - }, - }, - [`${componentCls}-extra`]: { - float: 'right', - // https://stackoverflow.com/a/22429853/3040605 - marginLeft: 'auto', - padding: `${cardHeadHeight} 0`, - color: `${token.colorText}`, - // fontWeight: `${token.}`, - fontWeight: 400, - fontSize: `${token.fontSize}`, - [`${componentCls}-prefix-rtl &`]: { - marginRight: 'auto', - marginLeft: 0, - }, - }, - [`${componentCls}-body`]: { - padding: `${cardPaddingBase}`, - ...clearFix(), - }, - [`${componentCls}-contain-grid:not(&-loading) &-body`]: { - margin: ' -1px 0 0 -1px', - padding: 0, - }, - [`${componentCls}-grid`]: { - float: 'left', - width: '33.33%', - padding: `${cardPaddingBase}`, - border: 0, - borderRadius: 0, - boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit}, - 1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset, - 0 1px 0 0 ${token.colorSplit} inset; - transition: all 0.3s`, - [`${componentCls}-cls-rtl &`]: { - float: 'right', - }, - - '&-hoverable': { - '&:hover': { - position: 'relative', - zIndex: 1, - boxShadow: `${token.boxShadow}`, - }, - }, - }, - - [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-head-title`]: { - minHeight: ` ${cardHeadHeight}- ${cardPaddingBase}`, - paddingBottom: 0, - }, - [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-extra`]: { - paddingBottom: 0, - }, - [` ${componentCls}-bordered > ${componentCls}-cover `]: { - marginTop: '-1px', - marginRight: '-1px', - marginLeft: '-1px', - }, - [`${componentCls}-cover`]: { - ' > *': { - display: 'block', - width: '100%', - }, - - img: { - borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0 `, - }, - }, - - ' &-actions': { - margin: 0, - padding: 0, - listStyle: 'none', - background: `${token.colorBgBase}`, - // @card-actions-background; - borderTop: `${token.BackTop}`, - // @border-width-base @border-style-base @border-color-split; - ...clearFix(), - - '& > li': { - float: 'left', - margin: `${cardActionsLiMargin}`, - color: `~@text-color-secondary`, - textAlign: 'center', - - [` ${componentCls}-rtl &`]: { - float: 'right', - }, - - ' > span': { - position: 'relative', - display: 'block', - minWidth: ' 32px', - fontSize: `${token.fontSize}`, - lineHeight: `${token.lineHeight}`, - cursor: 'pointer', - '&:hover': { - color: ` ${token.colorPrimary}`, - transition: 'color 0.3s', - }, - - [` a:not( ${componentCls}-btn), - > ${componentCls}-css-prefix}`]: { - display: ' inline-block', - width: '100%', - // color: ` $ @text-color-secondary`; - lineHeight: ' 22px', - transition: ' color 0.3s', - - '&:hover': { - color: `${token.colorPrimary}`, - }, - }, - - [`>${token.iconCls}`]: { - fontSize: `${token.fontSizeIcon}`, - lineHeight: '22px', - }, - }, - - ' &:not(:last-child)': { - borderRight: `${token.borderRadius}`, - // @border-width-base @border-style-base @border-color-split; - - [` ${componentCls}-rtl &`]: { - borderRight: 'none', - borderLeft: `${token.borderRadius}`, - // @border-width-base @border-style-base @border-color-split; - }, - }, - }, - }, - '&-type-inner &-head': { - padding: `0 ${cardPaddingBase}`, - color: 'red', - background: `${token.colorBgBase}`, - - ' &-title': { - padding: `${cardHeadPaddingSm} 0`, - fontSize: `${token.fontSize}`, - }, - }, - '&-type-inner &-body': { - padding: `16px ${cardPaddingBase}`, - }, - ' &-type-inner &-extra': { - padding: `${cardHeadPaddingSm} + 1.5px 0`, - }, - ' &-meta': { - margin: ' -4px 0', - ...clearFix(), - - '&-avatar': { - float: 'left', - paddingRight: '16px', - - [` ${componentCls}-rtl &`]: { - float: 'right', - paddingRight: 0, - paddingLeft: ' 16px', - }, - }, - - ' &-detail ': { - overflow: 'hidden', - - ' > div:not(:last-child)': { - marginBottom: `${token.marginXS}`, - }, - }, - - ' &-title': { - overflow: 'hidden', - color: `${token.colorBgBase}`, - fontWeight: '500', - fontSize: `${token.fontSizeLG}`, - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - }, - - ' &-description': { - color: ' @text-color-secondary', - }, - }, - '&-loading': { - overflow: 'hidden', - }, - '&-loading &-body': { - userSelect: 'none', - }, - - ' &-loading-content': { - p: { - margin: 0, - }, - }, - ' &-loading-block': { - height: '14px', - margin: ' 4px 0', - background: 'linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min)', - backgroundSize: '600% 600%', - borderRadius: `${token.borderRadius}`, - animation: 'card-loading 1.4s ease infinite', - }, - }, - }; -}; - -// ============================== Export ============================== -export default genComponentStyleHook( - 'Card', - token => { - const cardToken = mergeToken(token, { - cardPaddingBase: '16px', - cardHeadHeight: ' 36px', - cardHeadFontSize: `${token.fontSizeHeading5}`, - CardHeadPadding: '8.5px', - cardPaddingBaseSm: '12px', - cardHeadHeightSm: '30px', - cardHeadPaddingSm: '6px', - cardActionsLiMargin: '4px 0', - cardHeadTabsMarginBottom: '-9px', - cardShadow: - '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', - }); - return [genSharedDividerStyle(cardToken)]; - }, - { - sizePaddingEdgeHorizontal: 0, - }, -); diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 4b25dbe868..d96664fe78 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -1,7 +1,373 @@ -// 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 type { GlobalToken } from '../../theme/interface'; +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + // sizePaddingEdgeHorizontal: number; +} +interface CardToken extends FullToken<'Card'> { + cardHeadFontSize: string; + CardHeadPadding: string; + cardPaddingBase: string; + cardPaddingBaseSm: string; + cardHeadHeightSm: string; + cardHeadPaddingSm: string; + cardActionsLiMargin: string; + cardHeadTabsMarginBottom: string; + cardHeadHeight: string; + cardShadow: string; + cardHeadFontSizeSm:string; +} +// ============================== Shared ============================== +const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { + // const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; + const { + cardHeadFontSize, + CardHeadPadding, + cardPaddingBase, + cardPaddingBaseSm, + cardHeadHeightSm, + cardHeadPaddingSm, + cardActionsLiMargin, + cardHeadFontSizeSm, + cardHeadTabsMarginBottom, + cardHeadHeight, + componentCls, + } = token; + return { + [`${componentCls}-small`]:{ + [` > ${componentCls}-head`]:{ + minHeight: `${cardHeadHeightSm}`, + padding: `0 ${cardPaddingBaseSm}`, + fontSize: `${cardHeadFontSizeSm}`, + [`> ${componentCls}-head-wrapper`]: { + [`> ${componentCls}-head-title`]: { + padding:`${cardHeadPaddingSm} 0`, + }, + [`> ${componentCls}-head-extra`]:{ + padding:`${cardHeadPaddingSm} 0`, + fontSize: `${cardHeadFontSizeSm}`, + } + } + }, + [`> ${componentCls}-body`]:{ + padding: `${cardPaddingBaseSm}` + } + }, + [componentCls]: { + ...resetComponent(token), + position: `relative`, + background: `${token.colorBgBase}`, + borderRadius: `${token.borderRadiusXS}px`, + '&-bordered': { + border: `1px solid #f0f0f0`, + }, + [`${componentCls}-rtl`]: { + direction: 'rtl', + }, + [`&-hoverable`]: { + cursor: 'pointer', + transition: ` box-shadow 0.3s, border-color 0.3s`, + '&:hover': { + borderColor: `${token.colorBgBase}`, + // boxShadow: `${token.boxShadow}`, + boxShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12)`, -// // style dependencies -// import '../../tabs/style'; -// import '../../row/style'; -// import '../../col/style'; + + }, + }, + [`${componentCls}-head`]: { + minHeight: `${cardHeadHeight}`, + marginBottom: `-1px`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + padding: ` 0 ${token.cardPaddingBase} `, + fontWeight: 500, + fontSize: `${cardHeadFontSize}px`, + background: `transparent`, + borderBottom: '1px solid #f0f0f0', + border: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, + ...clearFix(), + // &-bordered { + // border: @border-width-base @border-style-base @border-color-split; + // } + '&-wrapper': { + display: 'flex', + alignItems: 'center', + }, + '&-title': { + display: 'inline-block', + flex: 1, + padding: `${CardHeadPadding} 0`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + [`> ${componentCls}-typography ${componentCls}-typography-edit-content `]: { + left: 0, + marginTop: 0, + marginBottom: 0, + }, + }, + + [`${componentCls}-prefix-tabs-top`]: { + clear: 'both', + marginBottom: `${token.margin}`, + color: `${token.colorText}`, + // fontWeight: 'normal', + fontWeight: 400, + fontSize: `${token.fontSize}`, + '&-bar': { + // borderBottom:`${token.cardShadow}` + // @border-width-base @border-style-base @border-color-split; + }, + }, + }, + [`${componentCls}-extra`]: { + float: 'right', + // https://stackoverflow.com/a/22429853/3040605 + marginLeft: 'auto', + padding: `${CardHeadPadding} 0`, + color: `${token.colorText}`, + // fontWeight: `${token.}`, + fontWeight: 400, + fontSize: `${token.fontSize}`, + [`${componentCls}-prefix-rtl &`]: { + marginRight: 'auto', + marginLeft: 0, + }, + }, + [`${componentCls}-body`]: { + padding: `${cardPaddingBase}`, + ...clearFix(), + }, + [`${componentCls}-contain-grid:not(${componentCls}-loading) ${componentCls}-body`]: { + margin: ' -1px 0 0 -1px', + padding: 0, + }, + [`${componentCls}-grid`]: { + float: 'left', + width: '33.33%', + padding: `${cardPaddingBase}`, + border: 0, + borderRadius: 0, + boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit}, + 1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset, + 0 1px 0 0 ${token.colorSplit} inset; + transition: all 0.3s`, + [`${componentCls}-cls-rtl &`]: { + float: 'right', + }, + + '&-hoverable': { + '&:hover': { + position: 'relative', + zIndex: 1, + boxShadow: `${token.boxShadow}`, + }, + }, + }, + + [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-head-title`]: { + minHeight: ` ${cardHeadHeight}- ${cardPaddingBase}`, + paddingBottom: 0, + }, + [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-extra`]: { + paddingBottom: 0, + }, + [` ${componentCls}-bordered > ${componentCls}-cover `]: { + marginTop: '-1px', + marginRight: '-1px', + marginLeft: '-1px', + }, + [`${componentCls}-cover`]: { + ' > *': { + display: 'block', + width: '100%', + }, + + img: { + borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0 `, + }, + }, + + [`${componentCls}-actions`]: { + margin: 0, + padding: 0, + listStyle: 'none', + background: `${token.colorBgBase}`, + // @card-actions-background; + borderTop: `${token.BackTop}`, + // @border-width-base @border-style-base @border-color-split; + ...clearFix(), + + '& > li': { + float: 'left', + margin: `${cardActionsLiMargin}`, + color: `~@text-color-secondary`, + textAlign: 'center', + + [` ${componentCls}-rtl &`]: { + float: 'right', + }, + + ' > span': { + position: 'relative', + display: 'block', + minWidth: ' 32px', + fontSize: `${token.fontSize}`, + lineHeight: `${token.lineHeight}`, + cursor: 'pointer', + '&:hover': { + color: ` ${token.colorPrimary}`, + transition: 'color 0.3s', + }, + + [` a:not( ${componentCls}-btn), + > ${componentCls}-css-prefix}`]: { + display: ' inline-block', + width: '100%', + // color: ` $ @text-color-secondary`; + lineHeight: ' 22px', + transition: ' color 0.3s', + + '&:hover': { + color: `${token.colorPrimary}`, + }, + }, + + [`>${token.iconCls}`]: { + fontSize: `${token.fontSizeIcon}`, + lineHeight: '22px', + }, + }, + + ' &:not(:last-child)': { + borderRight: `${token.borderRadius}`, + // @border-width-base @border-style-base @border-color-split; + + [` ${componentCls}-rtl &`]: { + borderRight: 'none', + borderLeft: `${token.borderRadius}`, + // @border-width-base @border-style-base @border-color-split; + }, + }, + }, + }, + '&-type-inner &-head': { + padding: `0 ${cardPaddingBase}`, + color: 'red', + background: `${token.colorBgBase}`, + + ' &-title': { + padding: `${cardHeadPaddingSm} 0`, + fontSize: `${token.fontSize}`, + }, + }, + '&-type-inner &-body': { + padding: `16px ${cardPaddingBase}`, + }, + ' &-type-inner &-extra': { + padding: `${cardHeadPaddingSm} + 1.5px 0`, + }, + [`${componentCls}-meta`]: { + margin: ' -4px 0', + ...clearFix(), + + '&-avatar': { + float: 'left', + paddingRight: '16px', + + [` ${componentCls}-rtl &`]: { + float: 'right', + paddingRight: 0, + paddingLeft: ' 16px', + }, + }, + + ' &-detail ': { + overflow: 'hidden', + + ' > div:not(:last-child)': { + marginBottom: `${token.marginXS}`, + }, + }, + + ' &-title': { + overflow: 'hidden', + color: `${token.colorBgBase}`, + fontWeight: '500', + fontSize: `${token.fontSizeLG}`, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + + ' &-description': { + color: ' @text-color-secondary', + }, + }, + '&-loading': { + overflow: 'hidden', + }, + '&-loading &-body': { + userSelect: 'none', + }, + + ' &-loading-content': { + p: { + margin: 0, + }, + }, + [` ${componentCls}-loading-block`]: { + height: '14px', + margin: ' 4px 0', + background: 'linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min)', + backgroundSize: '600% 600%', + borderRadius: `${token.borderRadius}`, + animationName:"card-loading", + animationDuration:'1.4s', + animationTimingFunction:'ease', + animationIterationCount:'infinite' + + // animation: ' 1.4s ease infinite', + }, + '@keyframes card-loading': { + ' 0%,100% ':{ + backgroundPosition: '0 50%', + }, + '50%':{ + backgroundPosition: '100% 50%', + } + } + }, + + + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Card', + token => { + const cardToken = mergeToken(token, { + cardPaddingBase: '16px', + cardHeadHeight: ' 36px', + cardHeadFontSize: `${token.fontSizeHeading5}`, + cardHeadFontSizeSm: `${token.fontSize}`, + CardHeadPadding: '8.5px', + cardPaddingBaseSm: '12px', + cardHeadHeightSm: '30px', + cardHeadPaddingSm: '6px', + cardActionsLiMargin: '4px 0', + cardHeadTabsMarginBottom: '-9px', + cardShadow: + '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', + }); + return [genSharedDividerStyle(cardToken)]; + }, + { + sizePaddingEdgeHorizontal: 0, + }, +); diff --git a/components/card/style/size.less b/components/card/style/size.less deleted file mode 100644 index d78f464a7a..0000000000 --- a/components/card/style/size.less +++ /dev/null @@ -1,20 +0,0 @@ -.@{card-prefix-cls}-small { - > .@{card-prefix-cls}-head { - min-height: @card-head-height-sm; - padding: 0 @card-padding-base-sm; - font-size: @card-head-font-size-sm; - - > .@{card-prefix-cls}-head-wrapper { - > .@{card-prefix-cls}-head-title { - padding: @card-head-padding-sm 0; - } - > .@{card-prefix-cls}-extra { - padding: @card-head-padding-sm 0; - font-size: @card-head-font-size-sm; - } - } - } - > .@{card-prefix-cls}-body { - padding: @card-padding-base-sm; - } -} From f0d58e911ced399a6374ef6df6c0ad149213ac9b Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 19:41:43 +0800 Subject: [PATCH 03/10] Style adjustment --- components/card/style/index.tsx | 93 +++++++++++++++++---------------- components/input/style/index.ts | 1 - 2 files changed, 49 insertions(+), 45 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index d96664fe78..445c65cf0a 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -19,11 +19,14 @@ interface CardToken extends FullToken<'Card'> { cardHeadHeight: string; cardShadow: string; cardHeadFontSizeSm:string; + cardHeadColor:string; + gradientMin:string, + gradientMax:string, + cardInnerHeadPadding:string } // ============================== Shared ============================== const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { - // const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; - const { + const { cardHeadFontSize, CardHeadPadding, cardPaddingBase, @@ -35,6 +38,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { cardHeadTabsMarginBottom, cardHeadHeight, componentCls, + cardHeadColor, + cardShadow } = token; return { [`${componentCls}-small`]:{ @@ -72,9 +77,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { transition: ` box-shadow 0.3s, border-color 0.3s`, '&:hover': { borderColor: `${token.colorBgBase}`, - // boxShadow: `${token.boxShadow}`, - boxShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12)`, - + boxShadow: `${cardShadow}` }, }, @@ -83,6 +86,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { marginBottom: `-1px`, overflow: 'hidden', whiteSpace: 'nowrap', + color:`${cardHeadColor}`, textOverflow: 'ellipsis', padding: ` 0 ${token.cardPaddingBase} `, fontWeight: 500, @@ -114,7 +118,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-prefix-tabs-top`]: { clear: 'both', - marginBottom: `${token.margin}`, + marginBottom: `${cardHeadTabsMarginBottom}`, color: `${token.colorText}`, // fontWeight: 'normal', fontWeight: 400, @@ -165,7 +169,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { '&:hover': { position: 'relative', zIndex: 1, - boxShadow: `${token.boxShadow}`, + boxShadow: `${cardShadow}`, }, }, }, @@ -189,7 +193,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { }, img: { - borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0 `, + borderRadius: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, }, }, @@ -205,10 +209,11 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { '& > li': { float: 'left', - margin: `${cardActionsLiMargin}`, - color: `~@text-color-secondary`, + margin: `${cardActionsLiMargin} `, + color: `${token.colorTextDescription}`, textAlign: 'center', - + borderTop: ` 1px solid #f0f0f0;`, + [` ${componentCls}-rtl &`]: { float: 'right', }, @@ -217,7 +222,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { position: 'relative', display: 'block', minWidth: ' 32px', - fontSize: `${token.fontSize}`, + fontSize: `${token.fontSize}px`, lineHeight: `${token.lineHeight}`, cursor: 'pointer', '&:hover': { @@ -225,11 +230,10 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { transition: 'color 0.3s', }, - [` a:not( ${componentCls}-btn), - > ${componentCls}-css-prefix}`]: { + [`a:not(${componentCls}-btn), >${token.iconCls}-css-prefix}`]: { display: ' inline-block', width: '100%', - // color: ` $ @text-color-secondary`; + color: `${token.colorTextDescription}`, lineHeight: ' 22px', transition: ' color 0.3s', @@ -244,33 +248,33 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { }, }, - ' &:not(:last-child)': { - borderRight: `${token.borderRadius}`, + [`li:not(:last-child)`]: { + borderRight: `1px solid #f0f0f0;`, // @border-width-base @border-style-base @border-color-split; - [` ${componentCls}-rtl &`]: { borderRight: 'none', - borderLeft: `${token.borderRadius}`, + borderLeft: ` 1px solid #f0f0f0;`, // @border-width-base @border-style-base @border-color-split; }, }, }, }, - '&-type-inner &-head': { + [`${componentCls}-type-inner ${componentCls}-head`]: { padding: `0 ${cardPaddingBase}`, - color: 'red', background: `${token.colorBgBase}`, + border:'solid red 1px', ' &-title': { padding: `${cardHeadPaddingSm} 0`, - fontSize: `${token.fontSize}`, + fontSize: `${token.fontSize}px`, }, }, - '&-type-inner &-body': { + [`${componentCls}-type-inner ${componentCls}-body`]: { + border:'solid red 1px', padding: `16px ${cardPaddingBase}`, }, ' &-type-inner &-extra': { - padding: `${cardHeadPaddingSm} + 1.5px 0`, + padding: `${token.cardInnerHeadPadding} + 1.5px 0`, }, [`${componentCls}-meta`]: { margin: ' -4px 0', @@ -287,35 +291,34 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { }, }, - ' &-detail ': { + '&-detail ': { overflow: 'hidden', - - ' > div:not(:last-child)': { - marginBottom: `${token.marginXS}`, + '> div:not(:last-child)': { + marginBottom: `${token['magenta-8']}`, }, }, - ' &-title': { + '&-title': { overflow: 'hidden', - color: `${token.colorBgBase}`, + color: `${cardHeadColor}`, fontWeight: '500', - fontSize: `${token.fontSizeLG}`, + fontSize: `${token.fontSizeLG}px`, whiteSpace: 'nowrap', textOverflow: 'ellipsis', }, ' &-description': { - color: ' @text-color-secondary', + color: `${token.colorTextDescription}`, }, }, - '&-loading': { + [` ${componentCls}-loading`]: { overflow: 'hidden', }, - '&-loading &-body': { + [` ${componentCls}-loading ${componentCls}-body`]: { userSelect: 'none', }, - ' &-loading-content': { + [` ${componentCls}-loading-content`]: { p: { margin: 0, }, @@ -323,18 +326,16 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { [` ${componentCls}-loading-block`]: { height: '14px', margin: ' 4px 0', - background: 'linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min)', + background: `linear-gradient(90deg,${token.gradientMin},${token.gradientMax}, ${token.gradientMin})`, backgroundSize: '600% 600%', - borderRadius: `${token.borderRadius}`, + borderRadius: `${token.borderRadiusXS}px`, animationName:"card-loading", animationDuration:'1.4s', animationTimingFunction:'ease', animationIterationCount:'infinite' - - // animation: ' 1.4s ease infinite', }, '@keyframes card-loading': { - ' 0%,100% ':{ + '0%,100% ':{ backgroundPosition: '0 50%', }, '50%':{ @@ -360,10 +361,14 @@ export default genComponentStyleHook( cardPaddingBaseSm: '12px', cardHeadHeightSm: '30px', cardHeadPaddingSm: '6px', - cardActionsLiMargin: '4px 0', - cardHeadTabsMarginBottom: '-9px', - cardShadow: - '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', + cardActionsLiMargin: '12px 0', + cardHeadTabsMarginBottom: '-17px', + cardShadow:`0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), + 0 5px 12px 4px rgba(0, 0, 0, 0.09)`, + cardHeadColor:' fade(@black, 85%)', + gradientMin: 'rgba(207,216,220,.2)', + gradientMax:'rgba(207,216,220,.4)', + cardInnerHeadPadding:'12px', }); return [genSharedDividerStyle(cardToken)]; }, diff --git a/components/input/style/index.ts b/components/input/style/index.ts index edbcb16dd7..dd011183d4 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -904,7 +904,6 @@ const genTextAreaStyle: GenerateStyle = token => { [`> ${componentCls}`]: { height: '100%', }, - '&::after': { color: token.colorTextDescription, whiteSpace: 'nowrap', From 900b80310f94bd5f69692a5fb0abf64001406908 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 20:03:28 +0800 Subject: [PATCH 04/10] refactor(Card): less to cssinjs --- components/card/style/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 445c65cf0a..016ea10b4e 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -203,7 +203,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { listStyle: 'none', background: `${token.colorBgBase}`, // @card-actions-background; - borderTop: `${token.BackTop}`, + // borderTop: `${token.BackTop}`, + borderTop: `1px solid #f0f0f0`, // @border-width-base @border-style-base @border-color-split; ...clearFix(), @@ -212,8 +213,6 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { margin: `${cardActionsLiMargin} `, color: `${token.colorTextDescription}`, textAlign: 'center', - borderTop: ` 1px solid #f0f0f0;`, - [` ${componentCls}-rtl &`]: { float: 'right', }, From 17e5d12f0283cf9c3ce458a43712209fb77ffe49 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Tue, 14 Feb 2023 17:30:42 +0800 Subject: [PATCH 05/10] =?UTF-8?q?tabs:=20less=20to=20cssinjs=20=E5=BC=80?= =?UTF-8?q?=E5=8F=91ing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/style.ts | 2 +- components/tabs/src/Tabs.tsx | 8 +- components/tabs/style/index.less | 446 +++++++++++------------ components/tabs/style/index.tsx | 257 ++++++++++++- components/tabs/style/position.less | 222 +++++------ components/tabs/style/position.ts | 205 +++++++++++ components/theme/interface/components.ts | 4 +- 7 files changed, 802 insertions(+), 342 deletions(-) create mode 100644 components/tabs/style/position.ts diff --git a/components/style.ts b/components/style.ts index 50dd6b1a08..fe609f146b 100644 --- a/components/style.ts +++ b/components/style.ts @@ -8,7 +8,7 @@ import './checkbox/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'; diff --git a/components/tabs/src/Tabs.tsx b/components/tabs/src/Tabs.tsx index b15ccecf93..61ef4d7131 100644 --- a/components/tabs/src/Tabs.tsx +++ b/components/tabs/src/Tabs.tsx @@ -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(() => { const { animated, tabPosition } = props; @@ -297,7 +298,7 @@ const InternalTabs = defineComponent({ } const pre = prefixCls.value; - return ( + return wrapSSR(
-
+ , ); }; }, diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 0ff9cbc1ac..030fa7f4e0 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -1,223 +1,223 @@ -@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; - } -} +// @import '../../style/themes/index', +// @import '../../style/mixins/index', +// @import './size', +// @import './rtl', +// @import './position', +// @import './dropdown', +// @import './card', + +// @tab-prefix-cls: ~'@:{ant-prefix}-tabs', + +// ${componentCls} :{ +// .reset-component(), + +// display: flex, + +// // ========================== Navigation ========================== +// > ${componentCls}-nav, +// > div > ${componentCls}-nav :{ +// position: relative, +// display: flex, +// flex: none, +// alignItems: center, + +// ${componentCls}-nav-wrap :{ +// position: relative, +// display: inline-block, +// display: flex, +// flex: auto, +// alignSelf: 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: '', +// pointerEvents: none, +// } +// } + +// ${componentCls}-nav-list :{ +// position: relative, +// display: flex, +// transition: transform @animation-duration-slow, +// } + +// // >>>>>>>> Operations +// ${componentCls}-nav-operations :{ +// display: flex, +// alignSelf: stretch, + +// &-hidden :{ +// position: absolute, +// visibility: hidden, +// pointerEvents: none, +// } +// } + +// ${componentCls}-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: '', +// } +// } + +// ${componentCls}-nav-add :{ +// min-width: @tabs-card-height, +// marginLeft: @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 :{ +// > ${componentCls}-nav, +// > div > ${componentCls}-nav :{ +// ${componentCls}-nav-wrap :{ +// &:not([class*='@:{tab-prefix-cls}-nav-wrap-ping']) :{ +// justify-content: center, +// } +// } +// } +// } + +// // ============================ InkBar ============================ +// &-ink-bar :{ +// position: absolute, +// background: @tabs-ink-bar-color, +// pointerEvents: none, +// } + +// // ============================= Tabs ============================= +// &-tab :{ +// position: relative, +// display: inline-flex, +// alignItems: 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, +// marginLeft: @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, +// } +// } diff --git a/components/tabs/style/index.tsx b/components/tabs/style/index.tsx index 3a3ab0de59..fc5b8d364c 100644 --- a/components/tabs/style/index.tsx +++ b/components/tabs/style/index.tsx @@ -1,2 +1,255 @@ -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'; + +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken {} +interface tabsToken extends FullToken<'Tabs'> { + tabsCardHeight: string; + tabsCardGutter: string; + a: number; +} +// ============================== Shared ============================== + +export const genTabsSmallStyle = (token: tabsToken): CSSObject => { + const { componentCls } = token; + + return { + [`componentCls-yang`]: { + // ...genTabsPositionStyle(token), + }, + [componentCls]: { + ...resetComponent(token), + display: 'flex', + ...genTabsPositionStyle(token), + + // ========================== 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: `transform ${token.motionDurationSlow}`, + }, + + // >>>>>>>> Operations + [`${componentCls}-nav-operations `]: { + display: 'flex', + alignSelf: 'stretch', + + [` &-hidden `]: { + position: 'absolute', + visibility: 'hidden', + pointerEvents: 'none', + }, + }, + + [`${componentCls}-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: '""', + }, + }, + + [`${componentCls}-nav-add`]: { + minWidth: `${token.tabsCardHeight}`, + marginLeft: `${token.tabsCardGutter}`, + padding: `0 ${token.paddingXS} `, + // background: `${token.PageHeader}` @tabs-card-head-background, + border: `${token.lineWidth} ${token.borderRadius} ${token.colorSplit} `, + borderRadius: ` ${token.borderRadius}e ${token.borderRadius} 0 0`, + outline: 'none', + cursor: 'pointer', + transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut} `, + + [` &:hover `]: { + color: ' @tabs-hover-color', + }, + + [` &:active, + &:focus`]: { + color: `${token.colorPrimaryActive}`, + }, + }, + }, + + [` &-extra-content `]: { + flex: 'none', + }, + + ' &-centered': { + [` > ${componentCls}-nav, + > div > ${componentCls}-nav`]: { + [` ${componentCls}-nav-wrap `]: { + [` &:not([class*='@:{tab-prefix-cls}-nav-wrap-ping']) `]: { + justifyContent: 'center', + }, + }, + }, + }, + + // ============================ InkBar ============================ + [`&-ink-bar`]: { + position: 'absolute', + background: `${token.colorPrimary}`, + pointerEvents: 'none', + }, + + // ============================= Tabs ============================= + [`&-tab `]: { + position: 'relative', + display: 'inline-flex', + alignItems: 'center', + padding: `${token.padding}`, + fontSize: `${token.fontSize}`, + + 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}`, + marginLeft: `${token.marginXS}`, + color: `${token.colorTextSecondary} `, + fontSize: `@font-size-sm ${token.fontSizeSM}`, + background: 'transparent', + border: 'none', + outline: 'none', + cursor: 'pointer', + transition: `all ${token.motionDurationSlow} `, + + [` &:hover `]: { + color: `${token.colorTextHeading} `, + }, + }, + + [` &:hover `]: { + color: `@tabs-hover-color`, + }, + + [` &&-active &-btn `]: { + color: '@tabs-highlight-color', + textShadow: '0 0 0.25px currentcolor', + }, + + [` &&-disabled`]: { + color: `${token.colorTextDisabled}`, + cursor: 'not-allowed', + }, + + [`&&-disabled &-btn, + &&-disabled &-remove`]: { + [` &:focus, + &:active `]: { + color: `${token.colorTextDisabled}`, + }, + }, + + [` & &-remove .@:{iconfont-css-prefix} `]: { + margin: 0, + }, + + [` .@:{iconfont-css-prefix} `]: { + marginRight: `${token.marginSM}`, + }, + }, + + [` &-tab + &-tab `]: { + // @tabs-horizontal-margin + margin: `${token.margin} `, + }, + + // =========================== TabPanes =========================== + [` &-content `]: { + [` &-holder`]: { + flex: 'auto', + minWidth: 0, + minHeight: 0, + }, + + display: 'flex', + width: '100%', + + [` &-animated`]: { + transition: `margin ${token.motionDurationSlow}`, + }, + }, + + [` &-tabpane `]: { + flex: 'none', + width: ' 100%', + outline: 'none', + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Tabs', + token => { + const tabsToken = mergeToken(token, { + tabsCardHeight: '40px', + tabsCardGutter: '5px', + a: 1, + }); + return [genTabsSmallStyle(tabsToken)]; + }, + {}, +); diff --git a/components/tabs/style/position.less b/components/tabs/style/position.less index 9087f43ba2..13a49fd5d6 100644 --- a/components/tabs/style/position.less +++ b/components/tabs/style/position.less @@ -1,197 +1,197 @@ -@import '../../style/themes/index'; -@tab-prefix-cls: ~'@{ant-prefix}-tabs'; +@import '../../style/themes/index', +@tab-prefix-cls: ~'@{ant-prefix}-tabs', -.@{tab-prefix-cls} { +.@{tab-prefix-cls}:{ // ========================== Top & Bottom ========================== &-top, - &-bottom { - flex-direction: column; + &-bottom:{ + flex-direction: column, - > .@{tab-prefix-cls}-nav, - > div > .@{tab-prefix-cls}-nav { - margin: @tabs-bar-margin; + >${componentCls}-nav, + > div >${componentCls}-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; + ${componentCls}-ink-bar:{ + height: 2px, - &-animated { + &-animated:{ transition: width @animation-duration-slow, left @animation-duration-slow, - right @animation-duration-slow; + right @animation-duration-slow, } } - .@{tab-prefix-cls}-nav-wrap { + ${componentCls}-nav-wrap:{ &::before, - &::after { - top: 0; - bottom: 0; - width: 30px; + &::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-left::before:{ + opacity: 1, } - &.@{tab-prefix-cls}-nav-wrap-ping-right::after { - 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:{ + >${componentCls}-nav, + > div >${componentCls}-nav:{ + &::before:{ + bottom: 0, } - .@{tab-prefix-cls}-ink-bar { - bottom: 0; + ${componentCls}-ink-bar:{ + bottom: 0, } } } - &-bottom { - > .@{tab-prefix-cls}-nav, - > div > .@{tab-prefix-cls}-nav { - order: 1; - margin-top: @margin-md; - margin-bottom: 0; + &-bottom:{ + >${componentCls}-nav, + > div >${componentCls}-nav:{ + order: 1, + margin-top: @margin-md, + margin-bottom: 0, - &::before { - top: 0; + &::before:{ + top: 0, } - .@{tab-prefix-cls}-ink-bar { - top: 0; + ${componentCls}-ink-bar:{ + top: 0, } } - > .@{tab-prefix-cls}-content-holder, - > div > .@{tab-prefix-cls}-content-holder { - order: 0; + >${componentCls}-content-holder, + > div >${componentCls}-content-holder:{ + order: 0, } } // ========================== Left & Right ========================== &-left, - &-right { - > .@{tab-prefix-cls}-nav, - > div > .@{tab-prefix-cls}-nav { - flex-direction: column; - min-width: 50px; + &-right:{ + >${componentCls}-nav, + > div >${componentCls}-nav:{ + flex-direction: column, + minWidth: 50px, // >>>>>>>>>>> Tab - .@{tab-prefix-cls}-tab { - padding: @tabs-vertical-padding; - text-align: center; + ${componentCls}-tab:{ + padding: @tabs-vertical-padding, + text-align: center, } - .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab { - margin: @tabs-vertical-margin; + ${componentCls}-tab +${componentCls}-tab:{ + margin: @tabs-vertical-margin, } // >>>>>>>>>>> Nav - .@{tab-prefix-cls}-nav-wrap { - flex-direction: column; + ${componentCls}-nav-wrap:{ + flex-direction: column, &::before, - &::after { - right: 0; - left: 0; - height: 30px; + &::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-top::before:{ + opacity: 1, } - &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after { - opacity: 1; + &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after:{ + opacity: 1, } } // >>>>>>>>>>> Ink Bar - .@{tab-prefix-cls}-ink-bar { - width: 2px; + ${componentCls}-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; + ${componentCls}-nav-list, + ${componentCls}-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:{ + >${componentCls}-nav, + > div >${componentCls}-nav:{ + ${componentCls}-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; + >${componentCls}-content-holder, + > div >${componentCls}-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; + >${componentCls}-content >${componentCls}-tabpane:{ + padding-left: @padding-lg, } } } - &-right { - > .@{tab-prefix-cls}-nav, - > div > .@{tab-prefix-cls}-nav { - order: 1; + &-right:{ + >${componentCls}-nav, + > div >${componentCls}-nav:{ + order: 1, - .@{tab-prefix-cls}-ink-bar { - left: 0; + ${componentCls}-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; + >${componentCls}-content-holder, + > div >${componentCls}-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; + >${componentCls}-content >${componentCls}-tabpane:{ + padding-right: @padding-lg, } } } diff --git a/components/tabs/style/position.ts b/components/tabs/style/position.ts new file mode 100644 index 0000000000..8cf2e622f0 --- /dev/null +++ b/components/tabs/style/position.ts @@ -0,0 +1,205 @@ +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: `${token.margin}`, + [` &::before`]:{ + position: 'absolute', + right: 0, + left: 0, + borderBottom: `${token.lineWidth} ${token.colorBorder} `, + content: '"', + }, + + [` ${componentCls}-ink-bar`]:{ + height:' 2px', + + [` &-animated`]:{ + transition: `width ${token.motionDurationSlow} @animation-duration-slow, left ${token.motionDurationSlow}, + right @animation-duration-slow`, + } + }, + + [` ${componentCls}-nav-wrap`]:{ + [` &::before, + &::after`]:{ + top: 0, + bottom: 0, + width: '30px', + }, + + [`&::before`]:{ + left: 0, + boxShadow: ` ${token.boxShadowTabsOverflowBottom}`, + }, + + [` &::after`]:{ + right: 0, + boxShadow: `${token.boxShadowTabsOverflowLeft}`, + }, + + [`&.@{tab-prefix-cls}-nav-wrap-ping-left::before`]:{ + opacity: 1, + }, + [` &.@{tab-prefix-cls}-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:` @margin-md`, + 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} `, + textAlign: 'center', + }, + + [` ${componentCls}-tab +${componentCls}-tab`]:{ + margin:` ${token.margin}`, + }, + + // >>>>>>>>>>> Nav + [` ${componentCls}-nav-wrap`]:{ + flexDirection: 'column', + + [` &::before, + &::after`]:{ + right: 0, + left: 0, + height: '30px', + }, + + [` &::before`]:{ + top: 0, + boxShadow: ` ${token.boxShadowTabsOverflowLeft}`, + }, + + [`&::after`]:{ + bottom: 0, + boxShadow: `${token.boxShadowTabsOverflowRight}`, + }, + + [` &.@{tab-prefix-cls}-nav-wrap-ping-top::before`]:{ + opacity: 1, + }, + [` &.@{tab-prefix-cls}-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`]:{ + 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 >${componentCls}-content-holder`]:{ + marginLeft:` -@border-width-base`, + borderLeft: `@border-width-base @border-style-base @border-color-split`, + + [` >${componentCls}-content >${componentCls}-tabpane`]:{ + paddingLeft: `@padding-lg`, + } + } + }, + + [` &-right`]:{ + [` >${componentCls}-nav, + > div >${componentCls}-nav`]:{ + order: 1, + + [`${componentCls}-ink-bar`]:{ + left: 0, + } + }, + [`>${componentCls}-content-holder, + > div >${componentCls}-content-holder`]:{ + order: 0, + marginRight: `-@border-width-base`, + borderRight: `@border-width-base @border-style-base @border-color-split`, + + [` >${componentCls}-content >${componentCls}-tabpane`]:{ + paddingRight: `@padding-lg`, + } + + } + } + + + }; + }; \ No newline at end of file diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 893660896e..e089300aca 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -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'; @@ -102,7 +102,7 @@ export interface ComponentTokenMap { Typography?: TypographyComponentToken; // Timeline?: TimelineComponentToken; // Transfer?: TransferComponentToken; - // Tabs?: TabsComponentToken; + Tabs?: TabsComponentToken; // Calendar?: CalendarComponentToken; // Steps?: StepsComponentToken; Menu?: MenuComponentToken; From 898c2972436bc9da46ecfa37480e19e6d63fa318 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Fri, 17 Feb 2023 11:41:57 +0800 Subject: [PATCH 06/10] add function cssinjs --- components/tabs/style/card.less | 98 ------------ components/tabs/style/card.tsx | 101 +++++++++++++ components/tabs/style/dropdown.less | 82 ---------- components/tabs/style/dropdown.tsx | 81 ++++++++++ components/tabs/style/index.less | 223 ---------------------------- components/tabs/style/index.tsx | 126 ++++++++-------- components/tabs/style/position.less | 198 ------------------------ components/tabs/style/position.ts | 205 ------------------------- components/tabs/style/position.tsx | 191 ++++++++++++++++++++++++ components/tabs/style/rtl.less | 86 ----------- components/tabs/style/rtl.tsx | 83 +++++++++++ components/tabs/style/size.less | 42 ------ components/tabs/style/size.tsx | 43 ++++++ 13 files changed, 564 insertions(+), 995 deletions(-) delete mode 100644 components/tabs/style/card.less create mode 100644 components/tabs/style/card.tsx delete mode 100644 components/tabs/style/dropdown.less create mode 100644 components/tabs/style/dropdown.tsx delete mode 100644 components/tabs/style/index.less delete mode 100644 components/tabs/style/position.less delete mode 100644 components/tabs/style/position.ts create mode 100644 components/tabs/style/position.tsx delete mode 100644 components/tabs/style/rtl.less create mode 100644 components/tabs/style/rtl.tsx delete mode 100644 components/tabs/style/size.less create mode 100644 components/tabs/style/size.tsx diff --git a/components/tabs/style/card.less b/components/tabs/style/card.less deleted file mode 100644 index ccf23c4f3c..0000000000 --- a/components/tabs/style/card.less +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/components/tabs/style/card.tsx b/components/tabs/style/card.tsx new file mode 100644 index 0000000000..046562fe3a --- /dev/null +++ b/components/tabs/style/card.tsx @@ -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}`, + }, + }, + }, + }, + }; +}; diff --git a/components/tabs/style/dropdown.less b/components/tabs/style/dropdown.less deleted file mode 100644 index b0444afcb9..0000000000 --- a/components/tabs/style/dropdown.less +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/components/tabs/style/dropdown.tsx b/components/tabs/style/dropdown.tsx new file mode 100644 index 0000000000..314c256a39 --- /dev/null +++ b/components/tabs/style/dropdown.tsx @@ -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`, + } + } + } + } + }} \ No newline at end of file diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less deleted file mode 100644 index 030fa7f4e0..0000000000 --- a/components/tabs/style/index.less +++ /dev/null @@ -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', - -// ${componentCls} :{ -// .reset-component(), - -// display: flex, - -// // ========================== Navigation ========================== -// > ${componentCls}-nav, -// > div > ${componentCls}-nav :{ -// position: relative, -// display: flex, -// flex: none, -// alignItems: center, - -// ${componentCls}-nav-wrap :{ -// position: relative, -// display: inline-block, -// display: flex, -// flex: auto, -// alignSelf: 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: '', -// pointerEvents: none, -// } -// } - -// ${componentCls}-nav-list :{ -// position: relative, -// display: flex, -// transition: transform @animation-duration-slow, -// } - -// // >>>>>>>> Operations -// ${componentCls}-nav-operations :{ -// display: flex, -// alignSelf: stretch, - -// &-hidden :{ -// position: absolute, -// visibility: hidden, -// pointerEvents: none, -// } -// } - -// ${componentCls}-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: '', -// } -// } - -// ${componentCls}-nav-add :{ -// min-width: @tabs-card-height, -// marginLeft: @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 :{ -// > ${componentCls}-nav, -// > div > ${componentCls}-nav :{ -// ${componentCls}-nav-wrap :{ -// &:not([class*='@:{tab-prefix-cls}-nav-wrap-ping']) :{ -// justify-content: center, -// } -// } -// } -// } - -// // ============================ InkBar ============================ -// &-ink-bar :{ -// position: absolute, -// background: @tabs-ink-bar-color, -// pointerEvents: none, -// } - -// // ============================= Tabs ============================= -// &-tab :{ -// position: relative, -// display: inline-flex, -// alignItems: 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, -// marginLeft: @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, -// } -// } diff --git a/components/tabs/style/index.tsx b/components/tabs/style/index.tsx index fc5b8d364c..7178667fbb 100644 --- a/components/tabs/style/index.tsx +++ b/components/tabs/style/index.tsx @@ -6,36 +6,48 @@ 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; - a: number; + tabsHorizontalMarginRtl: string; } // ============================== Shared ============================== export const genTabsSmallStyle = (token: tabsToken): CSSObject => { const { componentCls } = token; - return { - [`componentCls-yang`]: { - // ...genTabsPositionStyle(token), - }, + return { [componentCls]: { + ...genTabsSizeStyle(token), + ...genTabsPositionStyle(token), ...resetComponent(token), display: 'flex', - ...genTabsPositionStyle(token), - // ========================== Navigation ========================== - [`> ${componentCls}-nav, - > div > ${componentCls}-nav`]: { + [`&-card`]: { + ...genTabscardStyle(token), + }, + [`&-rtl`]: { + ...genRtlStyle(token), + }, + + [`&-dropdown`]: { + ...genTabsDropdownStyle(token), + }, + [`${componentCls}-nav, + div > ${componentCls}-nav`]: { position: 'relative', display: 'flex', flex: 'none', alignItems: 'center', - + // color:'#fff', [`${componentCls}-nav-wrap`]: { position: 'relative', display: 'flex', @@ -44,9 +56,8 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { overflow: 'hidden', whiteSpace: 'nowrap', transform: 'translate(0)', // Fix chrome render bug - // >>>>> Ping shadow - [` &::before, + [`&::before , &::after `]: { position: 'absolute', zIndex: 1, @@ -57,18 +68,17 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { }, }, - [` ${componentCls}-nav-list`]: { + [`${componentCls}-nav-list`]: { position: 'relative', display: 'flex', transition: `transform ${token.motionDurationSlow}`, }, // >>>>>>>> Operations - [`${componentCls}-nav-operations `]: { + [`${componentCls}-nav-operations`]: { display: 'flex', alignSelf: 'stretch', - - [` &-hidden `]: { + [`&-hidden`]: { position: 'absolute', visibility: 'hidden', pointerEvents: 'none', @@ -77,11 +87,10 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { [`${componentCls}-nav-more`]: { position: 'relative', - padding: '@tabs-card-horizontal-padding', + padding: `${token.paddingXS}px ${token.padding}px`, background: 'transparent', border: 0, - - [` &::after`]: { + [`&::after`]: { position: 'absolute', right: 0, bottom: 0, @@ -91,20 +100,18 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { content: '""', }, }, - [`${componentCls}-nav-add`]: { minWidth: `${token.tabsCardHeight}`, marginLeft: `${token.tabsCardGutter}`, - padding: `0 ${token.paddingXS} `, - // background: `${token.PageHeader}` @tabs-card-head-background, - border: `${token.lineWidth} ${token.borderRadius} ${token.colorSplit} `, + 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: ' @tabs-hover-color', + color: `${token.colorPrimaryActive}`, }, [` &:active, @@ -114,15 +121,14 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { }, }, - [` &-extra-content `]: { + [`${componentCls}-extra-content `]: { flex: 'none', }, - - ' &-centered': { - [` > ${componentCls}-nav, - > div > ${componentCls}-nav`]: { - [` ${componentCls}-nav-wrap `]: { - [` &:not([class*='@:{tab-prefix-cls}-nav-wrap-ping']) `]: { + [`&-centered`]: { + [`${componentCls}-nav, + div > ${componentCls}-nav`]: { + [`${componentCls}-nav-wrap`]: { + [`&:not([class*='@:${componentCls}-nav-wrap-ping'])`]: { justifyContent: 'center', }, }, @@ -130,26 +136,25 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { }, // ============================ InkBar ============================ - [`&-ink-bar`]: { + [`${componentCls}-ink-bar`]: { position: 'absolute', background: `${token.colorPrimary}`, pointerEvents: 'none', }, // ============================= Tabs ============================= - [`&-tab `]: { + [`${componentCls}-tab `]: { position: 'relative', display: 'inline-flex', alignItems: 'center', - padding: `${token.padding}`, - fontSize: `${token.fontSize}`, - + padding: `${token.paddingSM}px 0`, + fontSize: `${token.fontSize}px`, background: 'transparent', border: 0, outline: 'none', cursor: 'pointer', - [` &-btn, + [`&-btn, &-remove`]: { [` &:focus, &:active `]: { @@ -162,12 +167,12 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { transition: `all 0.3s`, }, - [` &-remove `]: { + [`&-remove `]: { flex: 'none', - marginRight: `${token.marginXXS}`, - marginLeft: `${token.marginXS}`, + marginRight: `-${token.marginXXS}px`, + marginLeft: `${tabsCardStyle.tabsCardGutter}`, color: `${token.colorTextSecondary} `, - fontSize: `@font-size-sm ${token.fontSizeSM}`, + fontSize: ` ${token.fontSizeSM}px`, background: 'transparent', border: 'none', outline: 'none', @@ -180,64 +185,63 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { }, [` &:hover `]: { - color: `@tabs-hover-color`, + color: `${token.colorLinkHover}`, }, - [` &&-active &-btn `]: { - color: '@tabs-highlight-color', + [`${componentCls}-active &-btn `]: { + color: `${token.colorHighlight}`, textShadow: '0 0 0.25px currentcolor', }, - [` &&-disabled`]: { + [`&-disabled `]: { color: `${token.colorTextDisabled}`, cursor: 'not-allowed', }, - [`&&-disabled &-btn, - &&-disabled &-remove`]: { + [`&-disabled &-btn, + &-disabled &-remove`]: { [` &:focus, &:active `]: { color: `${token.colorTextDisabled}`, }, }, - [` & &-remove .@:{iconfont-css-prefix} `]: { + [` &-remove ${token.iconCls}`]: { margin: 0, }, - [` .@:{iconfont-css-prefix} `]: { - marginRight: `${token.marginSM}`, + [` ${token.iconCls} `]: { + marginRight: `${token.marginSM}px`, }, }, - [` &-tab + &-tab `]: { - // @tabs-horizontal-margin - margin: `${token.margin} `, + [`${componentCls}-tab + ${componentCls}-tab `]: { + margin: `${token.tabsHorizontalMarginRtl}`, }, // =========================== TabPanes =========================== - [` &-content `]: { - [` &-holder`]: { + [`${componentCls}-content`]: { + [`&-holder`]: { flex: 'auto', minWidth: 0, minHeight: 0, + }, - display: 'flex', width: '100%', - - [` &-animated`]: { + [`${componentCls}-animated`]: { transition: `margin ${token.motionDurationSlow}`, }, }, - [` &-tabpane `]: { + [` ${componentCls}-tabpane `]: { flex: 'none', width: ' 100%', outline: 'none', }, }, }; + }; // ============================== Export ============================== @@ -247,7 +251,7 @@ export default genComponentStyleHook( const tabsToken = mergeToken(token, { tabsCardHeight: '40px', tabsCardGutter: '5px', - a: 1, + tabsHorizontalMarginRtl: '0 0 0 32px', }); return [genTabsSmallStyle(tabsToken)]; }, diff --git a/components/tabs/style/position.less b/components/tabs/style/position.less deleted file mode 100644 index 13a49fd5d6..0000000000 --- a/components/tabs/style/position.less +++ /dev/null @@ -1,198 +0,0 @@ -@import '../../style/themes/index', -@tab-prefix-cls: ~'@{ant-prefix}-tabs', - -.@{tab-prefix-cls}:{ - // ========================== Top & Bottom ========================== - &-top, - &-bottom:{ - flex-direction: column, - - >${componentCls}-nav, - > div >${componentCls}-nav:{ - margin: @tabs-bar-margin, - - &::before:{ - position: absolute, - right: 0, - left: 0, - border-bottom: @border-width-base @border-style-base @border-color-split, - content: '', - } - - ${componentCls}-ink-bar:{ - height: 2px, - - &-animated:{ - transition: width @animation-duration-slow, left @animation-duration-slow, - right @animation-duration-slow, - } - } - - ${componentCls}-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:{ - >${componentCls}-nav, - > div >${componentCls}-nav:{ - &::before:{ - bottom: 0, - } - - ${componentCls}-ink-bar:{ - bottom: 0, - } - } - } - - &-bottom:{ - >${componentCls}-nav, - > div >${componentCls}-nav:{ - order: 1, - margin-top: @margin-md, - margin-bottom: 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:{ - flex-direction: column, - minWidth: 50px, - - // >>>>>>>>>>> Tab - ${componentCls}-tab:{ - padding: @tabs-vertical-padding, - text-align: center, - } - - ${componentCls}-tab +${componentCls}-tab:{ - margin: @tabs-vertical-margin, - } - - // >>>>>>>>>>> Nav - ${componentCls}-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 - ${componentCls}-ink-bar:{ - width: 2px, - - &-animated:{ - transition: height @animation-duration-slow, top @animation-duration-slow, - } - } - - ${componentCls}-nav-list, - ${componentCls}-nav-operations:{ - flex: 1 0 auto, // fix safari scroll problem - flex-direction: column, - } - } - } - - &-left:{ - >${componentCls}-nav, - > div >${componentCls}-nav:{ - ${componentCls}-ink-bar:{ - right: 0, - } - } - - >${componentCls}-content-holder, - > div >${componentCls}-content-holder:{ - margin-left: -@border-width-base, - border-left: @border-width-base @border-style-base @border-color-split, - - >${componentCls}-content >${componentCls}-tabpane:{ - padding-left: @padding-lg, - } - } - } - - &-right:{ - >${componentCls}-nav, - > div >${componentCls}-nav:{ - order: 1, - - ${componentCls}-ink-bar:{ - left: 0, - } - } - - >${componentCls}-content-holder, - > div >${componentCls}-content-holder:{ - order: 0, - margin-right: -@border-width-base, - border-right: @border-width-base @border-style-base @border-color-split, - - >${componentCls}-content >${componentCls}-tabpane:{ - padding-right: @padding-lg, - } - } - } -} diff --git a/components/tabs/style/position.ts b/components/tabs/style/position.ts deleted file mode 100644 index 8cf2e622f0..0000000000 --- a/components/tabs/style/position.ts +++ /dev/null @@ -1,205 +0,0 @@ -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: `${token.margin}`, - [` &::before`]:{ - position: 'absolute', - right: 0, - left: 0, - borderBottom: `${token.lineWidth} ${token.colorBorder} `, - content: '"', - }, - - [` ${componentCls}-ink-bar`]:{ - height:' 2px', - - [` &-animated`]:{ - transition: `width ${token.motionDurationSlow} @animation-duration-slow, left ${token.motionDurationSlow}, - right @animation-duration-slow`, - } - }, - - [` ${componentCls}-nav-wrap`]:{ - [` &::before, - &::after`]:{ - top: 0, - bottom: 0, - width: '30px', - }, - - [`&::before`]:{ - left: 0, - boxShadow: ` ${token.boxShadowTabsOverflowBottom}`, - }, - - [` &::after`]:{ - right: 0, - boxShadow: `${token.boxShadowTabsOverflowLeft}`, - }, - - [`&.@{tab-prefix-cls}-nav-wrap-ping-left::before`]:{ - opacity: 1, - }, - [` &.@{tab-prefix-cls}-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:` @margin-md`, - 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} `, - textAlign: 'center', - }, - - [` ${componentCls}-tab +${componentCls}-tab`]:{ - margin:` ${token.margin}`, - }, - - // >>>>>>>>>>> Nav - [` ${componentCls}-nav-wrap`]:{ - flexDirection: 'column', - - [` &::before, - &::after`]:{ - right: 0, - left: 0, - height: '30px', - }, - - [` &::before`]:{ - top: 0, - boxShadow: ` ${token.boxShadowTabsOverflowLeft}`, - }, - - [`&::after`]:{ - bottom: 0, - boxShadow: `${token.boxShadowTabsOverflowRight}`, - }, - - [` &.@{tab-prefix-cls}-nav-wrap-ping-top::before`]:{ - opacity: 1, - }, - [` &.@{tab-prefix-cls}-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`]:{ - 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 >${componentCls}-content-holder`]:{ - marginLeft:` -@border-width-base`, - borderLeft: `@border-width-base @border-style-base @border-color-split`, - - [` >${componentCls}-content >${componentCls}-tabpane`]:{ - paddingLeft: `@padding-lg`, - } - } - }, - - [` &-right`]:{ - [` >${componentCls}-nav, - > div >${componentCls}-nav`]:{ - order: 1, - - [`${componentCls}-ink-bar`]:{ - left: 0, - } - }, - [`>${componentCls}-content-holder, - > div >${componentCls}-content-holder`]:{ - order: 0, - marginRight: `-@border-width-base`, - borderRight: `@border-width-base @border-style-base @border-color-split`, - - [` >${componentCls}-content >${componentCls}-tabpane`]:{ - paddingRight: `@padding-lg`, - } - - } - } - - - }; - }; \ No newline at end of file diff --git a/components/tabs/style/position.tsx b/components/tabs/style/position.tsx new file mode 100644 index 0000000000..d3d6867e4d --- /dev/null +++ b/components/tabs/style/position.tsx @@ -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`, + }, + }, + }, + }; +}; diff --git a/components/tabs/style/rtl.less b/components/tabs/style/rtl.less deleted file mode 100644 index bfe4d84ffe..0000000000 --- a/components/tabs/style/rtl.less +++ /dev/null @@ -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; - } - } -} diff --git a/components/tabs/style/rtl.tsx b/components/tabs/style/rtl.tsx new file mode 100644 index 0000000000..3b8810acda --- /dev/null +++ b/components/tabs/style/rtl.tsx @@ -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', + }, + }, + }, + }; +}; diff --git a/components/tabs/style/size.less b/components/tabs/style/size.less deleted file mode 100644 index 03c0fea9a4..0000000000 --- a/components/tabs/style/size.less +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/components/tabs/style/size.tsx b/components/tabs/style/size.tsx new file mode 100644 index 0000000000..8432ef90d0 --- /dev/null +++ b/components/tabs/style/size.tsx @@ -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`, + }, + }, + }, + }, + }; +}; From 601c3c33d90bc9ce2884c30bf212325ec2610d48 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Fri, 17 Feb 2023 13:18:22 +0800 Subject: [PATCH 07/10] Eliminate irrelevant code --- components/card/Card.tsx | 5 +---- components/card/Grid.tsx | 4 +--- components/card/Meta.tsx | 2 +- package.json | 1 - 4 files changed, 3 insertions(+), 9 deletions(-) diff --git a/components/card/Card.tsx b/components/card/Card.tsx index e52ed40033..e4e81fe135 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -99,7 +99,6 @@ const Card = defineComponent({ } = props; const children = flattenChildren(slots.default?.()); const pre = prefixCls.value; - // console.log('pre', pre); const classString = { [`${pre}`]: true, [hashId.value]: true, @@ -181,7 +180,5 @@ const Card = defineComponent({ }; }, }); -{ - /*
*/ -} + export default Card; diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index aafff1ee26..b6253c1bbd 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -10,7 +10,6 @@ export type CardGridProps = Partial { - return
{slots.default?.()}
; + return
{slots.default?.()}
; }; - // return wrapSSR(
{slots.default?.()}
); }, }); diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx index 224da43327..40a54bae76 100644 --- a/components/card/Meta.tsx +++ b/components/card/Meta.tsx @@ -41,7 +41,7 @@ export default defineComponent({
) : null; return ( -
+
{avatarDom} {MetaDetail}
diff --git a/package.json b/package.json index c1c9c9f26d..0a8f9d8058 100644 --- a/package.json +++ b/package.json @@ -280,7 +280,6 @@ "@emotion/hash": "^0.9.0", "@emotion/unitless": "^0.8.0", "@simonwep/pickr": "~1.8.0", - "ant-design-vue": "link:", "array-tree-filter": "^2.1.0", "async-validator": "^4.0.0", "csstype": "^3.1.1", From 60338948f79736eaf8b3915e54cd9a5347ca6aed Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Fri, 17 Feb 2023 13:19:41 +0800 Subject: [PATCH 08/10] Eliminate irrelevant code 2 --- components/input/style/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/input/style/index.ts b/components/input/style/index.ts index dd011183d4..41a0e718d7 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -904,6 +904,7 @@ const genTextAreaStyle: GenerateStyle = token => { [`> ${componentCls}`]: { height: '100%', }, + '&::after': { color: token.colorTextDescription, whiteSpace: 'nowrap', From 7cd39b322555a2a316db52e432d6ae05cb3820ec Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Fri, 17 Feb 2023 13:30:37 +0800 Subject: [PATCH 09/10] update components --- components/theme/interface/components.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index f7746e2d4f..b388ec4a15 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -38,6 +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 TagComponentToken } from '../../tag/style'; import type { ComponentToken as TimelineComponentToken } from '../../timeline/style'; import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style'; @@ -48,7 +49,6 @@ import type { ComponentToken as UploadComponentToken } from '../../upload/style' // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; // import type { ComponentToken as AppComponentToken } from '../../app/style'; // import type { ComponentToken as WaveToken } from '../../_util/wave/style'; -import type { ComponentToken as StatisticComponentToken } from '../../statistic/style'; export interface ComponentTokenMap { Affix?: {}; @@ -93,7 +93,7 @@ export interface ComponentTokenMap { Skeleton?: SkeletonComponentToken; Slider?: SliderComponentToken; Spin?: SpinComponentToken; - Statistic?: StatisticComponentToken; + Statistic?: {}; Switch?: {}; Tag?: TagComponentToken; Tree?: {}; @@ -101,7 +101,7 @@ export interface ComponentTokenMap { Typography?: TypographyComponentToken; Timeline?: TimelineComponentToken; Transfer?: TransferComponentToken; - // Tabs?: TabsComponentToken; + Tabs?: TabsComponentToken; Calendar?: CalendarComponentToken; Steps?: StepsComponentToken; Menu?: MenuComponentToken; From d9738060a422491884e9885333cf2029587d8712 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Fri, 17 Feb 2023 13:40:58 +0800 Subject: [PATCH 10/10] Eliminate irrelevant input code --- components/input/style/index.ts | 2 +- components/tabs/style/index.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/components/input/style/index.ts b/components/input/style/index.ts index 41a0e718d7..edbcb16dd7 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -904,7 +904,7 @@ const genTextAreaStyle: GenerateStyle = token => { [`> ${componentCls}`]: { height: '100%', }, - + '&::after': { color: token.colorTextDescription, whiteSpace: 'nowrap', diff --git a/components/tabs/style/index.tsx b/components/tabs/style/index.tsx index 7178667fbb..da71ecf24e 100644 --- a/components/tabs/style/index.tsx +++ b/components/tabs/style/index.tsx @@ -47,7 +47,6 @@ export const genTabsSmallStyle = (token: tabsToken): CSSObject => { display: 'flex', flex: 'none', alignItems: 'center', - // color:'#fff', [`${componentCls}-nav-wrap`]: { position: 'relative', display: 'flex',