mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-02 20:28:52 +08:00
Card: add chalk theme
This commit is contained in:
parent
5e8dfd0738
commit
34dc51bb8b
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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};
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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%);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user