mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-19 06:43:16 +08:00
refactor: cssinjs for Card (#35008)
* refactor: cssinjs for Card * refactor: remove float skip * chore: fix lint
This commit is contained in:
miracles1919
GitHub
parent
139bfe152a
commit
9f0397c585
@ -75,6 +75,7 @@ export interface OverrideToken {
|
||||
Typography?: TypographyComponentToken;
|
||||
Timeline?: TimelineComponentToken;
|
||||
Tabs?: {};
|
||||
Card?: {};
|
||||
}
|
||||
|
||||
/** Final token which contains the components level override */
|
||||
|
||||
@ -8,6 +8,7 @@ import Row from '../row';
|
||||
import Col from '../col';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import SizeContext from '../config-provider/SizeContext';
|
||||
import useStyle from './style';
|
||||
|
||||
function getAction(actions: React.ReactNode[]) {
|
||||
const actionList = actions.map((action, index) => (
|
||||
@ -103,6 +104,7 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
|
||||
} = props;
|
||||
|
||||
const prefixCls = getPrefixCls('card', customizePrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const loadingBlockStyle =
|
||||
bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: 24 } : undefined;
|
||||
@ -193,15 +195,16 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
hashId,
|
||||
);
|
||||
|
||||
return (
|
||||
return wrapSSR(
|
||||
<div ref={ref} {...divProps} className={classString}>
|
||||
{head}
|
||||
{coverDom}
|
||||
{body}
|
||||
{actionDom}
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
}) as CardInterface;
|
||||
|
||||
|
||||
@ -1,308 +1,308 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
|
||||
@card-prefix-cls: ~'@{ant-prefix}-card';
|
||||
@card-hoverable-hover-border: transparent;
|
||||
@card-action-icon-size: 16px;
|
||||
// @card-prefix-cls: ~'@{ant-prefix}-card';
|
||||
// @card-hoverable-hover-border: transparent;
|
||||
// @card-action-icon-size: 16px;
|
||||
|
||||
@gradient-min: fade(@card-skeleton-bg, 20%);
|
||||
@gradient-max: fade(@card-skeleton-bg, 40%);
|
||||
// @gradient-min: fade(@card-skeleton-bg, 20%);
|
||||
// @gradient-max: fade(@card-skeleton-bg, 40%);
|
||||
|
||||
.@{card-prefix-cls} {
|
||||
.reset-component();
|
||||
// .@{card-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
position: relative;
|
||||
background: @card-background;
|
||||
border-radius: @card-radius;
|
||||
// position: relative;
|
||||
// background: @card-background;
|
||||
// border-radius: @card-radius;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
&-hoverable {
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s, border-color 0.3s;
|
||||
// &-hoverable {
|
||||
// cursor: pointer;
|
||||
// transition: box-shadow 0.3s, border-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: @card-hoverable-hover-border;
|
||||
box-shadow: @card-shadow;
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// border-color: @card-hoverable-hover-border;
|
||||
// box-shadow: @card-shadow;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-bordered {
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
// &-bordered {
|
||||
// border: @border-width-base @border-style-base @border-color-split;
|
||||
// }
|
||||
|
||||
&-head {
|
||||
min-height: @card-head-height;
|
||||
margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
|
||||
padding: 0 @card-padding-base;
|
||||
color: @card-head-color;
|
||||
font-weight: 500;
|
||||
font-size: @card-head-font-size;
|
||||
background: @card-head-background;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @card-radius @card-radius 0 0;
|
||||
.clearfix();
|
||||
// &-head {
|
||||
// min-height: @card-head-height;
|
||||
// margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
|
||||
// padding: 0 @card-padding-base;
|
||||
// color: @card-head-color;
|
||||
// font-weight: 500;
|
||||
// font-size: @card-head-font-size;
|
||||
// background: @card-head-background;
|
||||
// border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
// border-radius: @card-radius @card-radius 0 0;
|
||||
// .clearfix();
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
// &-wrapper {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
&-title {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
padding: @card-head-padding 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
// &-title {
|
||||
// display: inline-block;
|
||||
// flex: 1;
|
||||
// padding: @card-head-padding 0;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
|
||||
> .@{ant-prefix}-typography,
|
||||
> .@{ant-prefix}-typography-edit-content {
|
||||
left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
// > .@{ant-prefix}-typography,
|
||||
// > .@{ant-prefix}-typography-edit-content {
|
||||
// left: 0;
|
||||
// margin-top: 0;
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{ant-prefix}-tabs-top {
|
||||
clear: both;
|
||||
margin-bottom: @card-head-tabs-margin-bottom;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
// .@{ant-prefix}-tabs-top {
|
||||
// clear: both;
|
||||
// margin-bottom: @card-head-tabs-margin-bottom;
|
||||
// color: @text-color;
|
||||
// font-weight: normal;
|
||||
// font-size: @font-size-base;
|
||||
|
||||
&-bar {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-bar {
|
||||
// border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-extra {
|
||||
float: right;
|
||||
// https://stackoverflow.com/a/22429853/3040605
|
||||
margin-left: auto;
|
||||
padding: @card-head-padding 0;
|
||||
color: @card-head-extra-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
// &-extra {
|
||||
// float: right;
|
||||
// // https://stackoverflow.com/a/22429853/3040605
|
||||
// margin-left: auto;
|
||||
// padding: @card-head-padding 0;
|
||||
// color: @card-head-extra-color;
|
||||
// font-weight: normal;
|
||||
// font-size: @font-size-base;
|
||||
|
||||
.@{card-prefix-cls}-rtl & {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// .@{card-prefix-cls}-rtl & {
|
||||
// margin-right: auto;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-body {
|
||||
padding: @card-padding-base;
|
||||
.clearfix();
|
||||
}
|
||||
// &-body {
|
||||
// padding: @card-padding-base;
|
||||
// .clearfix();
|
||||
// }
|
||||
|
||||
&-contain-grid:not(&-loading) &-body {
|
||||
margin: -1px 0 0 -1px;
|
||||
padding: 0;
|
||||
}
|
||||
// &-contain-grid:not(&-loading) &-body {
|
||||
// margin: -1px 0 0 -1px;
|
||||
// padding: 0;
|
||||
// }
|
||||
|
||||
&-grid {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
padding: @card-padding-base;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
|
||||
1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
|
||||
0 1px 0 0 @border-color-split inset;
|
||||
transition: all 0.3s;
|
||||
// &-grid {
|
||||
// float: left;
|
||||
// width: 33.33%;
|
||||
// padding: @card-padding-base;
|
||||
// border: 0;
|
||||
// border-radius: 0;
|
||||
// box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
|
||||
// 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
|
||||
// 0 1px 0 0 @border-color-split inset;
|
||||
// transition: all 0.3s;
|
||||
|
||||
.@{card-prefix-cls}-rtl & {
|
||||
float: right;
|
||||
}
|
||||
// .@{card-prefix-cls}-rtl & {
|
||||
// float: right;
|
||||
// }
|
||||
|
||||
&-hoverable {
|
||||
&:hover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: @card-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-hoverable {
|
||||
// &:hover {
|
||||
// position: relative;
|
||||
// z-index: 1;
|
||||
// box-shadow: @card-shadow;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-contain-tabs > &-head &-head-title {
|
||||
min-height: @card-head-height - @card-head-padding;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
// &-contain-tabs > &-head &-head-title {
|
||||
// min-height: @card-head-height - @card-head-padding;
|
||||
// padding-bottom: 0;
|
||||
// }
|
||||
|
||||
&-contain-tabs > &-head &-extra {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
// &-contain-tabs > &-head &-extra {
|
||||
// padding-bottom: 0;
|
||||
// }
|
||||
|
||||
&-bordered &-cover {
|
||||
margin-top: -1px;
|
||||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
// &-bordered &-cover {
|
||||
// margin-top: -1px;
|
||||
// margin-right: -1px;
|
||||
// margin-left: -1px;
|
||||
// }
|
||||
|
||||
&-cover {
|
||||
> * {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
// &-cover {
|
||||
// > * {
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
img {
|
||||
border-radius: @card-radius @card-radius 0 0;
|
||||
}
|
||||
}
|
||||
// img {
|
||||
// border-radius: @card-radius @card-radius 0 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-actions {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: @card-actions-background;
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
.clearfix();
|
||||
// &-actions {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// list-style: none;
|
||||
// background: @card-actions-background;
|
||||
// border-top: @border-width-base @border-style-base @border-color-split;
|
||||
// .clearfix();
|
||||
|
||||
& > li {
|
||||
float: left;
|
||||
margin: @card-actions-li-margin;
|
||||
color: @text-color-secondary;
|
||||
text-align: center;
|
||||
// & > li {
|
||||
// float: left;
|
||||
// margin: @card-actions-li-margin;
|
||||
// color: @text-color-secondary;
|
||||
// text-align: center;
|
||||
|
||||
.@{card-prefix-cls}-rtl & {
|
||||
float: right;
|
||||
}
|
||||
// .@{card-prefix-cls}-rtl & {
|
||||
// float: right;
|
||||
// }
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 32px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
// > span {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// min-width: 32px;
|
||||
// font-size: @font-size-base;
|
||||
// line-height: @line-height-base;
|
||||
// cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
// &:hover {
|
||||
// color: @primary-color;
|
||||
// transition: color 0.3s;
|
||||
// }
|
||||
|
||||
a:not(.@{ant-prefix}-btn),
|
||||
> .@{iconfont-css-prefix} {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: @text-color-secondary;
|
||||
line-height: 22px;
|
||||
transition: color 0.3s;
|
||||
// a:not(.@{ant-prefix}-btn),
|
||||
// > .@{iconfont-css-prefix} {
|
||||
// display: inline-block;
|
||||
// width: 100%;
|
||||
// color: @text-color-secondary;
|
||||
// line-height: 22px;
|
||||
// transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// color: @primary-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
font-size: @card-action-icon-size;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
// > .@{iconfont-css-prefix} {
|
||||
// font-size: @card-action-icon-size;
|
||||
// line-height: 22px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: @border-width-base @border-style-base @border-color-split;
|
||||
// &:not(:last-child) {
|
||||
// border-right: @border-width-base @border-style-base @border-color-split;
|
||||
|
||||
.@{card-prefix-cls}-rtl & {
|
||||
border-right: none;
|
||||
border-left: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{card-prefix-cls}-rtl & {
|
||||
// border-right: none;
|
||||
// border-left: @border-width-base @border-style-base @border-color-split;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-type-inner &-head {
|
||||
padding: 0 @card-padding-base;
|
||||
background: @background-color-light;
|
||||
// &-type-inner &-head {
|
||||
// padding: 0 @card-padding-base;
|
||||
// background: @background-color-light;
|
||||
|
||||
&-title {
|
||||
padding: @card-inner-head-padding 0;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
// &-title {
|
||||
// padding: @card-inner-head-padding 0;
|
||||
// font-size: @font-size-base;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-type-inner &-body {
|
||||
padding: 16px @card-padding-base;
|
||||
}
|
||||
// &-type-inner &-body {
|
||||
// padding: 16px @card-padding-base;
|
||||
// }
|
||||
|
||||
&-type-inner &-extra {
|
||||
padding: @card-inner-head-padding + 1.5px 0;
|
||||
}
|
||||
// &-type-inner &-extra {
|
||||
// padding: @card-inner-head-padding + 1.5px 0;
|
||||
// }
|
||||
|
||||
&-meta {
|
||||
margin: -4px 0;
|
||||
.clearfix();
|
||||
// &-meta {
|
||||
// margin: -4px 0;
|
||||
// .clearfix();
|
||||
|
||||
&-avatar {
|
||||
float: left;
|
||||
padding-right: 16px;
|
||||
// &-avatar {
|
||||
// float: left;
|
||||
// padding-right: 16px;
|
||||
|
||||
.@{card-prefix-cls}-rtl & {
|
||||
float: right;
|
||||
padding-right: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
// .@{card-prefix-cls}-rtl & {
|
||||
// float: right;
|
||||
// padding-right: 0;
|
||||
// padding-left: 16px;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-detail {
|
||||
overflow: hidden;
|
||||
// &-detail {
|
||||
// overflow: hidden;
|
||||
|
||||
> div:not(:last-child) {
|
||||
margin-bottom: @margin-xs;
|
||||
}
|
||||
}
|
||||
// > div:not(:last-child) {
|
||||
// margin-bottom: @margin-xs;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-title {
|
||||
overflow: hidden;
|
||||
color: @card-head-color;
|
||||
font-weight: 500;
|
||||
font-size: @font-size-lg;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// &-title {
|
||||
// overflow: hidden;
|
||||
// color: @card-head-color;
|
||||
// font-weight: 500;
|
||||
// font-size: @font-size-lg;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// }
|
||||
|
||||
&-description {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
// &-description {
|
||||
// color: @text-color-secondary;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-loading {
|
||||
overflow: hidden;
|
||||
}
|
||||
// &-loading {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
|
||||
&-loading &-body {
|
||||
user-select: none;
|
||||
}
|
||||
// &-loading &-body {
|
||||
// user-select: none;
|
||||
// }
|
||||
|
||||
&-loading-content {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
// &-loading-content {
|
||||
// p {
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-loading-block {
|
||||
height: 14px;
|
||||
margin: 4px 0;
|
||||
background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
|
||||
background-size: 600% 600%;
|
||||
border-radius: @card-radius;
|
||||
animation: card-loading 1.4s ease infinite;
|
||||
}
|
||||
}
|
||||
// &-loading-block {
|
||||
// height: 14px;
|
||||
// margin: 4px 0;
|
||||
// background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
|
||||
// background-size: 600% 600%;
|
||||
// border-radius: @card-radius;
|
||||
// animation: card-loading 1.4s ease infinite;
|
||||
// }
|
||||
// }
|
||||
|
||||
@keyframes card-loading {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
// @keyframes card-loading {
|
||||
// 0%,
|
||||
// 100% {
|
||||
// background-position: 0 50%;
|
||||
// }
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
// 50% {
|
||||
// background-position: 100% 50%;
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './size';
|
||||
// @import './size';
|
||||
|
||||
@ -1,7 +1,481 @@
|
||||
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';
|
||||
// import '../../tabs/style';
|
||||
// import '../../row/style';
|
||||
// import '../../col/style';
|
||||
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject, Keyframes } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
|
||||
import {
|
||||
resetComponent,
|
||||
GenerateStyle,
|
||||
genComponentStyleHook,
|
||||
FullToken,
|
||||
mergeToken,
|
||||
clearFix,
|
||||
} from '../../_util/theme';
|
||||
|
||||
interface CardToken extends FullToken<'Card'> {
|
||||
rootPrefixCls: string;
|
||||
cardHoverableHoverBorder: string;
|
||||
cardShadow: string;
|
||||
cardHeadHeight: number;
|
||||
cardHeadHeightSM: number;
|
||||
cardHeadPadding: number;
|
||||
cardPaddingBase: number;
|
||||
cardHeadTabsMarginBottom: number;
|
||||
cardInnerHeadPadding: number;
|
||||
cardActionsLiMargin: string;
|
||||
cardActionsIconSize: number;
|
||||
cardSkeletonBg: string;
|
||||
borderColorSplit: string;
|
||||
backgroundColorLight: string;
|
||||
gradientMin: string;
|
||||
gradientMax: string;
|
||||
}
|
||||
|
||||
// ============================== Motion ==============================
|
||||
const antCardLoading = new Keyframes('antCardLoading', {
|
||||
'0%, 100%': {
|
||||
backgroundPosition: '0 50%',
|
||||
},
|
||||
|
||||
'50%': {
|
||||
backgroundPosition: '100% 50%',
|
||||
},
|
||||
});
|
||||
|
||||
// ============================== Styles ==============================
|
||||
|
||||
// ============================== Head ==============================
|
||||
const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const {
|
||||
rootPrefixCls,
|
||||
componentCls,
|
||||
cardHoverableHoverBorder,
|
||||
cardHeadHeight,
|
||||
cardHeadPadding,
|
||||
cardPaddingBase,
|
||||
cardHeadTabsMarginBottom,
|
||||
borderColorSplit,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
minHeight: cardHeadHeight,
|
||||
marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
|
||||
padding: `0 ${cardPaddingBase}px`,
|
||||
color: token.colorTextHeading,
|
||||
fontWeight: 500, // FIXME: hardcode in v4
|
||||
fontSize: token.fontSizeLG,
|
||||
background: cardHoverableHoverBorder,
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
|
||||
|
||||
...clearFix(),
|
||||
|
||||
'&-wrapper': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
|
||||
'&-title': {
|
||||
display: 'inline-block',
|
||||
flex: 1,
|
||||
padding: `${cardHeadPadding}px 0`,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
[`
|
||||
> ${componentCls}-typography,
|
||||
> ${componentCls}-typography-edit-content
|
||||
`]: {
|
||||
left: 0,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`.${rootPrefixCls}-tabs-top`]: {
|
||||
clear: 'both',
|
||||
marginBottom: cardHeadTabsMarginBottom,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSizeBase,
|
||||
|
||||
'&-bar': {
|
||||
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Grid ==============================
|
||||
const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { cardPaddingBase, borderColorSplit, cardShadow } = token;
|
||||
return {
|
||||
float: {
|
||||
_skip_check_: true,
|
||||
value: 'left',
|
||||
},
|
||||
width: '33.33%', // FIXME: hardcode in v4
|
||||
padding: cardPaddingBase,
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
boxShadow: `
|
||||
1px 0 0 0 ${borderColorSplit},
|
||||
0 1px 0 0 ${borderColorSplit},
|
||||
1px 1px 0 0 ${borderColorSplit},
|
||||
1px 0 0 0 ${borderColorSplit} inset,
|
||||
0 1px 0 0 ${borderColorSplit} inset;
|
||||
transition: all ${token.motionDurationSlow}s
|
||||
`, // FIXME: hardcode in v4
|
||||
|
||||
'&-hoverable:hover': {
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
boxShadow: cardShadow,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Actions ==============================
|
||||
const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { componentCls, iconCls, cardActionsLiMargin, cardActionsIconSize, borderColorSplit } =
|
||||
token;
|
||||
return {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
listStyle: 'none',
|
||||
background: token.colorBgComponent,
|
||||
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
...clearFix(),
|
||||
|
||||
'& > li': {
|
||||
float: 'left',
|
||||
margin: cardActionsLiMargin,
|
||||
color: token.colorTextSecondary,
|
||||
textAlign: 'center',
|
||||
|
||||
'> span': {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
minWidth: 32, // FIXME: hardcode in v4
|
||||
fontSize: token.fontSizeBase,
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorPrimary,
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
[`a:not(${componentCls}-btn), > ${iconCls}`]: {
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
color: token.colorTextSecondary,
|
||||
lineHeight: '22px', // FIXME: hardcode in v4
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
|
||||
[`> ${iconCls}`]: {
|
||||
fontSize: cardActionsIconSize,
|
||||
lineHeight: '22px', // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
|
||||
'&:not(:last-child)': {
|
||||
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Meta ==============================
|
||||
const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
|
||||
margin: '-4px 0', // FIXME: hardcode in v4
|
||||
...clearFix(),
|
||||
|
||||
'&-avatar': {
|
||||
float: 'left',
|
||||
paddingInlineEnd: 16, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
'&-detail': {
|
||||
overflow: 'hidden',
|
||||
|
||||
'> div:not(:last-child)': {
|
||||
marginBottom: token.marginXS,
|
||||
},
|
||||
},
|
||||
|
||||
'&-title': {
|
||||
overflow: 'hidden',
|
||||
color: token.colorTextHeading,
|
||||
fontWeight: 500, // FIXME: hardcode in v4
|
||||
fontSize: token.fontSizeLG,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
|
||||
'&-description': {
|
||||
color: token.colorTextSecondary,
|
||||
},
|
||||
});
|
||||
|
||||
// ============================== Inner ==============================
|
||||
const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { componentCls, cardPaddingBase, backgroundColorLight, cardInnerHeadPadding } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-head`]: {
|
||||
padding: `0 ${cardPaddingBase}px`,
|
||||
background: backgroundColorLight,
|
||||
|
||||
'&-title': {
|
||||
padding: `${cardInnerHeadPadding}px 0`,
|
||||
fontSize: token.fontSizeBase,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-body`]: {
|
||||
padding: `16px ${cardPaddingBase}px`, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
[`${componentCls}-extra`]: {
|
||||
padding: `${cardInnerHeadPadding + 1.5}px 0`,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Loading ==============================
|
||||
const genCardLoadingStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject => {
|
||||
const { componentCls, gradientMin, gradientMax } = token;
|
||||
|
||||
return {
|
||||
overflow: 'hidden',
|
||||
|
||||
[`${componentCls}-body`]: {
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
[`${componentCls}-loading-content p`]: {
|
||||
margin: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-loading-block`]: {
|
||||
height: 14, // FIXME: hardcode in v4
|
||||
margin: '4px 0', // FIXME: hardcode in v4
|
||||
background: `linear-gradient(90deg, ${gradientMin}, ${gradientMax}, ${gradientMin})`,
|
||||
backgroundSize: '600% 600%',
|
||||
borderRadius: token.radiusBase,
|
||||
animation: `${antCardLoading.getName(hashId)} 1.4s ease infinite`, // FIXME: hardcode in v4
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Basic ==============================
|
||||
const genCardStyle: GenerateStyle<CardToken> = (token, hashId): CSSObject => {
|
||||
const {
|
||||
componentCls,
|
||||
cardHoverableHoverBorder,
|
||||
cardShadow,
|
||||
cardHeadHeight,
|
||||
cardHeadPadding,
|
||||
cardPaddingBase,
|
||||
borderColorSplit,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
|
||||
position: 'relative',
|
||||
background: token.colorBgComponent,
|
||||
borderRadius: token.radiusBase,
|
||||
|
||||
[`${componentCls}-head`]: genCardHeadStyle(token),
|
||||
|
||||
[`${componentCls}-extra`]: {
|
||||
float: 'right',
|
||||
// https://stackoverflow.com/a/22429853/3040605
|
||||
marginInlineStart: 'auto',
|
||||
padding: '',
|
||||
color: '',
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSizeBase,
|
||||
},
|
||||
|
||||
[`${componentCls}-body`]: {
|
||||
padding: cardPaddingBase,
|
||||
...clearFix(),
|
||||
},
|
||||
|
||||
[`${componentCls}-grid`]: genCardGridStyle(token),
|
||||
|
||||
[`${componentCls}-cover`]: {
|
||||
'> *': {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
img: {
|
||||
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-actions`]: genCardActionsStyle(token),
|
||||
|
||||
[`${componentCls}-meta`]: genCardMetaStyle(token),
|
||||
},
|
||||
|
||||
[`${componentCls}-bordered`]: {
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
||||
|
||||
[`${componentCls}-cover`]: {
|
||||
marginTop: -1,
|
||||
marginInlineStart: -1,
|
||||
marginInlineEnd: -1,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-hoverable`]: {
|
||||
cursor: 'pointer',
|
||||
transition: `box-shadow ${token.motionDurationSlow}s, border-color ${token.motionDurationSlow}s`,
|
||||
|
||||
'&:hover': {
|
||||
borderColor: cardHoverableHoverBorder,
|
||||
boxShadow: cardShadow,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-contain-grid:not(&-loading) ${componentCls}-body`]: {
|
||||
margin: {
|
||||
_skip_check_: true,
|
||||
value: '-1px 0 0 -1px', // FIXME: hardcode in v4
|
||||
},
|
||||
padding: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-contain-tabs`]: {
|
||||
[`> ${componentCls}-head`]: {
|
||||
[`${componentCls}-head-title`]: {
|
||||
minHeight: cardHeadHeight - cardHeadPadding,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
|
||||
[`${componentCls}-extra`]: {
|
||||
paddingBottom: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-type-inner`]: genCardTypeInnerStyle(token),
|
||||
|
||||
[`${componentCls}-loading`]: genCardLoadingStyle(token, hashId),
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== RTL ==============================
|
||||
const genCardRTLStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { componentCls } = token;
|
||||
return {
|
||||
// rtl
|
||||
[`${componentCls}-rtl`]: {
|
||||
direction: 'rtl',
|
||||
|
||||
[`${componentCls}-grid`]: {
|
||||
float: 'right',
|
||||
},
|
||||
|
||||
[`${componentCls}-actions`]: {
|
||||
'& > li': {
|
||||
float: 'right',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-meta`]: {
|
||||
'&-avatar': {
|
||||
float: 'right',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Size ==============================
|
||||
const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
|
||||
const { componentCls, cardHeadHeightSM, cardPaddingBase, cardHeadPadding } = token;
|
||||
const cardPaddingBaseSM = cardPaddingBase / 2;
|
||||
const cardHeadPaddingSM = cardHeadPadding / 2;
|
||||
|
||||
return {
|
||||
[`${componentCls}-small`]: {
|
||||
[`> ${componentCls}-head`]: {
|
||||
minHeight: cardHeadHeightSM,
|
||||
padding: `0 ${cardPaddingBaseSM}px`,
|
||||
fontSize: token.fontSizeBase,
|
||||
|
||||
[`> ${componentCls}-head-wrapper`]: {
|
||||
[`> ${componentCls}-head-title`]: {
|
||||
padding: `${cardHeadPaddingSM}px 0`,
|
||||
},
|
||||
|
||||
[`> ${componentCls}-extra`]: {
|
||||
padding: `${cardHeadPaddingSM}px 0`,
|
||||
fontSize: token.fontSizeBase,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`> ${componentCls}-body`]: {
|
||||
padding: cardPaddingBaseSM,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Card', (token, { rootPrefixCls, hashId }) => {
|
||||
const cardToken = mergeToken<CardToken>(token, {
|
||||
rootPrefixCls,
|
||||
|
||||
cardHoverableHoverBorder: 'transparent', // FIXME: hardcode in v4
|
||||
cardShadow: `
|
||||
0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
|
||||
0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
|
||||
0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
|
||||
`, // FIXME: hardcode in v4
|
||||
cardHeadHeight: 48, // FIXME: hardcode in v4
|
||||
cardHeadHeightSM: 30, // FIXME: hardcode in v4
|
||||
cardHeadPadding: 16, // FIXME: hardcode in v4
|
||||
cardPaddingBase: 24, // FIXME: hardcode in v4
|
||||
cardHeadTabsMarginBottom: -17, // FIXME: hardcode in v4
|
||||
cardInnerHeadPadding: 12, // FIXME: hardcode in v4
|
||||
cardActionsLiMargin: '12px 0', // FIXME: hardcode in v4
|
||||
cardActionsIconSize: 16, // FIXME: hardcode in v4
|
||||
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), // FIXME: hardcode in v4
|
||||
backgroundColorLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), // FIXME: hardcode in v4
|
||||
gradientMin: new TinyColor('#cfd8dc').setAlpha(0.2).toRgbString(), // FIXME: hardcode in v4
|
||||
gradientMax: new TinyColor('#cfd8dc').setAlpha(0.4).toRgbString(), // FIXME: hardcode in v4
|
||||
});
|
||||
|
||||
return [
|
||||
// Style
|
||||
genCardStyle(cardToken, hashId),
|
||||
|
||||
// Size
|
||||
genCardSizeStyle(cardToken),
|
||||
|
||||
// RTL
|
||||
genCardRTLStyle(cardToken),
|
||||
];
|
||||
});
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
.@{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}-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;
|
||||
}
|
||||
}
|
||||
// > .@{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;
|
||||
// }
|
||||
// }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user