github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Collapse: add chalk theme

pull/6985/head
Leopoldthecoder 2017-09-11 19:08:08 +08:00 committed by 杨奕
parent a6016a5cc4
commit 9aea008b25
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/theme-chalk/src/collapse.scss
View File

@ -2,23 +2,27 @@
@import "common/var";
@include b(collapse) {
border: 1px solid $--collapse-border-color;
border-radius: $--collapse-border-radius;
border-top: 1px solid $--collapse-border-color;
border-bottom: 1px solid $--collapse-border-color;
}
@include b(collapse-item) {
@include e(header) {
height: $--collapse-header-height;
line-height: $--collapse-header-height;
padding-left: 15px;
background-color: $--collapse-header-fill;
color: $--collapse-header-color;
cursor: pointer;
border-bottom: 1px solid $--collapse-border-color;
font-size: $--collapse-header-size;
font-weight: 500;
transition: border-bottom-color .3s;
@include e(arrow) {
margin-right: 8px;
transition: transform .3s;
float: right;
line-height: 48px;
font-weight: 300;
}
}
@ -31,7 +35,7 @@
}
@include e(content) {
padding: 10px 15px;
padding-bottom: 25px;
font-size: $--collapse-content-size;
color: $--collapse-content-color;
line-height: 1.769230769230769;
@ -39,6 +43,8 @@
@include when(active) {
> .el-collapse-item__header {
border-bottom-color: transparent;
.el-collapse-item__arrow {
transform: rotate(90deg);
}

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

@ -616,14 +616,13 @@ $--carousel-indicator-out-color: $--border-color-hover;
/* Collapse
--------------------------*/
$--collapse-border-color: $--border-color-base;
$--collapse-header-height: 43px;
$--collapse-border-radius: 0;
$--collapse-border-color: $--border-color-lighter;
$--collapse-header-height: 48px;
$--collapse-header-padding: 20px;
$--collapse-header-fill: $--color-white;
$--collapse-header-color: $--color-text-placeholder;
$--collapse-header-color: $--color-text-primary;
$--collapse-header-size: 13px;
$--collapse-content-fill: $--color-text-secondary;
$--collapse-content-fill: $--color-white;
$--collapse-content-size: 13px;
$--collapse-content-color: $--color-text-primary;