test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 20:28:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Card: add chalk theme

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/docs/en-US/card.md
View File

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

14
examples/docs/zh-CN/card.md
View File

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

5
packages/theme-chalk/src/card.scss
View File

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

2
packages/theme-chalk/src/common/var.scss
View File

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

2
packages/theme-chalk/src/tree.scss
View File

@ -87,5 +87,5 @@
} }
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { .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%);
} }