diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap index ab1d571ea4..b315a0f319 100644 --- a/components/card/__tests__/__snapshots__/demo.test.js.snap +++ b/components/card/__tests__/__snapshots__/demo.test.js.snap @@ -569,7 +569,7 @@ exports[`renders ./components/card/demo/simple.md correctly 1`] = ` exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
@@ -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;