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"; @import "common/var";
@include b(collapse) { @include b(collapse) {
border: 1px solid $--collapse-border-color; border-top: 1px solid $--collapse-border-color;
border-radius: $--collapse-border-radius; border-bottom: 1px solid $--collapse-border-color;
} }
@include b(collapse-item) { @include b(collapse-item) {
@include e(header) { @include e(header) {
height: $--collapse-header-height; height: $--collapse-header-height;
line-height: $--collapse-header-height; line-height: $--collapse-header-height;
padding-left: 15px;
background-color: $--collapse-header-fill; background-color: $--collapse-header-fill;
color: $--collapse-header-color; color: $--collapse-header-color;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid $--collapse-border-color; border-bottom: 1px solid $--collapse-border-color;
font-size: $--collapse-header-size; font-size: $--collapse-header-size;
font-weight: 500;
transition: border-bottom-color .3s;
@include e(arrow) { @include e(arrow) {
margin-right: 8px; margin-right: 8px;
transition: transform .3s; transition: transform .3s;
float: right;
line-height: 48px;
font-weight: 300;
} }
} }
@ -31,7 +35,7 @@
} }
@include e(content) { @include e(content) {
padding: 10px 15px; padding-bottom: 25px;
font-size: $--collapse-content-size; font-size: $--collapse-content-size;
color: $--collapse-content-color; color: $--collapse-content-color;
line-height: 1.769230769230769; line-height: 1.769230769230769;
@ -39,6 +43,8 @@
@include when(active) { @include when(active) {
> .el-collapse-item__header { > .el-collapse-item__header {
border-bottom-color: transparent;
.el-collapse-item__arrow { .el-collapse-item__arrow {
transform: rotate(90deg); 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
--------------------------*/ --------------------------*/
$--collapse-border-color: $--border-color-base; $--collapse-border-color: $--border-color-lighter;
$--collapse-header-height: 43px; $--collapse-header-height: 48px;
$--collapse-border-radius: 0;
$--collapse-header-padding: 20px; $--collapse-header-padding: 20px;
$--collapse-header-fill: $--color-white; $--collapse-header-fill: $--color-white;
$--collapse-header-color: $--color-text-placeholder; $--collapse-header-color: $--color-text-primary;
$--collapse-header-size: 13px; $--collapse-header-size: 13px;
$--collapse-content-fill: $--color-text-secondary; $--collapse-content-fill: $--color-white;
$--collapse-content-size: 13px; $--collapse-content-size: 13px;
$--collapse-content-color: $--color-text-primary; $--collapse-content-color: $--color-text-primary;