调整卡片样式 (#7286)

* 调整卡片样式

* improve

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`] = `
 <div>
   <div
-    class="ant-card ant-card-bordered"
+    class="ant-card ant-card-bordered ant-card-contain-tabs"
     style="width:100%;"
   >
     <div>
@@ -681,7 +681,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
   <br />
   <br />
   <div
-    class="ant-card ant-card-bordered"
+    class="ant-card ant-card-bordered ant-card-contain-tabs"
     style="width:100%;"
   >
     <div>

components/card/index.tsx

@@ -112,6 +112,7 @@ export default class Card extends Component<CardProps, {}> {
       [`${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,
     });
 

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 {

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

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;