Card: add chalk theme

examples/docs/en-US/card.md

@@ -25,7 +25,7 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .button {
@@ -57,8 +57,8 @@ Card includes title, content and operations.
 ```html
 <el-card class="box-card">
   <div slot="header" class="clearfix">
-    <span style="line-height: 36px;">Card name</span>
-    <el-button style="float: right;" type="primary">Operation button</el-button>
+    <span>Card name</span>
+    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
   </div>
   <div v-for="o in 4" :key="o" class="text item">
     {{'List item ' + o }}
@@ -71,16 +71,16 @@ Card includes title, content and operations.
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .clearfix:before,
   .clearfix:after {
-      display: table;
-      content: "";
+    display: table;
+    content: "";
   }
   .clearfix:after {
-      clear: both
+    clear: both
   }
 
   .box-card {

examples/docs/zh-CN/card.md

@@ -25,7 +25,7 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .button {
@@ -58,8 +58,8 @@
 ```html
 <el-card class="box-card">
   <div slot="header" class="clearfix">
-    <span style="line-height: 36px;">卡片名称</span>
-    <el-button style="float: right;" type="primary">操作按钮</el-button>
+    <span>卡片名称</span>
+    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
   </div>
   <div v-for="o in 4" :key="o" class="text item">
     {{'列表内容 ' + o }}
@@ -72,16 +72,16 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .clearfix:before,
   .clearfix:after {
-      display: table;
-      content: "";
+    display: table;
+    content: "";
   }
   .clearfix:after {
-      clear: both
+    clear: both
   }
 
   .box-card {

packages/theme-chalk/src/card.scss

@@ -2,12 +2,11 @@
 @import "common/var";
 
 @include b(card) {
-  border: 1px solid $--card-border-color;
   border-radius: $--card-border-radius;
   background-color: $--color-white;
   overflow: hidden;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12),
-              0 0 6px 0 rgba(0, 0, 0, .04);
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
+  color: $--color-text-primary;
 
   @include e(header) {
     padding: #{$--card-padding - 2 $--card-padding};

packages/theme-chalk/src/common/var.scss

@@ -555,7 +555,7 @@ $--badge-size: 18px;
 
 /* Card
 --------------------------*/
-$--card-border-color: $--disabled-border-base;
+$--card-border-color: $--border-color-lighter;
 $--card-border-radius: 4px;
 $--card-padding: 20px;
 

packages/theme-chalk/src/tree.scss

@@ -87,5 +87,5 @@
 }
 
 .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-  background-color: mix($--color-primary, $--color-white, 92%);
+  background-color: mix($--color-white, $--color-primary, 92%);
 }