@@ -681,7 +681,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
diff --git a/components/card/index.tsx b/components/card/index.tsx
index fbcb6852f6..a87edca71b 100644
--- a/components/card/index.tsx
+++ b/components/card/index.tsx
@@ -112,6 +112,7 @@ export default class Card extends Component {
[`${prefixCls}-wider-padding`]: this.state.widerPadding,
[`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
[`${prefixCls}-contain-grid`]: this.isContainGrid(),
+ [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-type-${type}`]: !!type,
});
diff --git a/components/card/style/index.less b/components/card/style/index.less
index e3157c5f3c..8c7a53e5ab 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -34,8 +34,8 @@
&-title {
font-size: @font-size-lg;
- height: @card-head-height;
- line-height: @card-head-height;
+ min-height: @card-head-height;
+ padding: @card-head-padding 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -46,18 +46,9 @@
.@{ant-prefix}-tabs {
margin-bottom: -17px;
- margin-top: -8px;
+ margin-top: 4px;
clear: both;
- // For align with extra
- &:only-child {
- margin-top: 0;
-
- .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
- padding: 13px 20px 15px;
- }
- }
-
&-bar {
border-bottom: @border-width-base @border-style-base @border-color-split;
}
@@ -66,7 +57,7 @@
&-extra {
float: right;
- line-height: @card-head-height;
+ padding: @card-head-padding + 1.5px 0;
}
&-body {
@@ -113,6 +104,15 @@
}
}
+ &-contain-tabs &-head-title {
+ padding-bottom: 0;
+ min-height: @card-head-height - @card-head-padding;
+ }
+
+ &-contain-tabs &-extra {
+ padding-bottom: 0;
+ }
+
&-cover > * {
width: 100%;
display: block;
@@ -172,10 +172,6 @@
padding: @card-padding-base @card-padding-wider;
}
- &-wider-padding &-extra {
- right: @card-padding-wider;
- }
-
&-padding-transition &-head,
&-padding-transition &-body {
transition: padding .3s;
@@ -190,8 +186,8 @@
background: @background-color-base;
&-title {
- height: @card-inner-head-height;
- line-height: @card-inner-head-height;
+ min-height: @card-inner-head-height;
+ padding: @card-inner-head-padding 0;
}
}
@@ -200,7 +196,7 @@
}
&-type-inner &-extra {
- right: @card-padding-base;
+ padding: @card-inner-head-padding + 1.5px 0;
}
&-meta {
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 63e2cb6e61..8f1e86083f 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -338,9 +338,11 @@
// Card
// ---
@card-head-height: 48px;
+@card-inner-head-height: 46px;
@card-head-color: @heading-color;
@card-head-background: @component-background;
-@card-inner-head-height: 46px;
+@card-head-padding: 16px;
+@card-inner-head-padding: 12px;
@card-actions-background: @background-color-base;
// Tabs
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index a15b4bc16f..952e333b7b 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -167,7 +167,7 @@
margin-right: 0;
}
- padding: 8px 20px;
+ padding: 12px 20px;
transition: color 0.3s @ease-in-out;
cursor: pointer;
text-decoration: none;