diff --git a/packages/theme-chalk/src/collapse.scss b/packages/theme-chalk/src/collapse.scss index c4f832100..d9a97d44c 100644 --- a/packages/theme-chalk/src/collapse.scss +++ b/packages/theme-chalk/src/collapse.scss @@ -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); } diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 54001abf4..0e4fabb18 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -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;