Explorar o código

Collapse: add chalk theme

Leopoldthecoder %!s(int64=8) %!d(string=hai) anos
pai
achega
9aea008b25

+ 10 - 4
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);
       }

+ 4 - 5
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;