Card: add chalk theme

This commit is contained in:
Leopoldthecoder 2017-09-14 12:14:35 +08:00 committed by 杨奕
parent 5e8dfd0738
commit 34dc51bb8b
5 changed files with 18 additions and 19 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -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};

View File

@ -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;

View File

@ -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%);
}