From 7e3b9df2da8753ebddcd3a65c7dddf134b411d32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Fri, 23 Jul 2021 23:11:41 +0800 Subject: [PATCH] refactor(transfer): migrate css var (#2639) --- packages/theme-chalk/src/common/var.scss | 18 +----- packages/theme-chalk/src/transfer.scss | 71 ++++++++++++++---------- 2 files changed, 45 insertions(+), 44 deletions(-) diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 8f2a8999aa..d4d7320f95 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -640,22 +640,8 @@ $--collapse-content-font-color: $--color-text-primary !default; /* Transfer --------------------------*/ -$--transfer-border-color: map.get($--border-color, 'lighter') !default; -$--transfer-border-radius: $--border-radius-base !default; -/// height||Other|4 -$--transfer-panel-width: 200px !default; -/// height||Other|4 -$--transfer-panel-header-height: 40px !default; -/// color||Color|0 -$--transfer-panel-header-background-color: $--background-color-base !default; -/// height||Other|4 -$--transfer-panel-footer-height: 40px !default; -/// height||Other|4 -$--transfer-panel-body-height: 246px !default; -/// height||Other|4 -$--transfer-item-height: 30px !default; -/// height||Other|4 -$--transfer-filter-height: 32px !default; +// refactor with css3 var +// See packages/theme-chalk/src/transfer.scss /* Timeline --------------------------*/ diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss index 83e895f1e1..c04a5a68c7 100644 --- a/packages/theme-chalk/src/transfer.scss +++ b/packages/theme-chalk/src/transfer.scss @@ -8,6 +8,18 @@ @import 'checkbox'; @import 'checkbox-group'; +:root { + --el-transfer-border-color: var(--el-border-color-lighter); + --el-transfer-border-radius: var(--el-border-radius-base); + --el-transfer-panel-width: 200px; + --el-transfer-panel-header-height: 40px; + --el-transfer-panel-header-background-color: var(--el-background-color-base); + --el-transfer-panel-footer-height: 40px; + --el-transfer-panel-body-height: 246px; + --el-transfer-item-height: 30px; + --el-transfer-filter-height: 32px; +} + @include b(transfer) { font-size: var(--el-font-size-base); @@ -38,22 +50,22 @@ } @include b(transfer-panel) { - border: 1px solid $--transfer-border-color; - border-radius: $--transfer-border-radius; + border: 1px solid var(--el-transfer-border-color); + border-radius: var(--el-transfer-border-radius); overflow: hidden; - background: $--color-white; + background: var(--el-color-white); display: inline-block; vertical-align: middle; - width: $--transfer-panel-width; + width: var(--el-transfer-panel-width); max-height: 100%; box-sizing: border-box; position: relative; @include e(body) { - height: $--transfer-panel-body-height; + height: var(--el-transfer-panel-body-height); @include when(with-footer) { - padding-bottom: $--transfer-panel-footer-height; + padding-bottom: var(--el-transfer-panel-footer-height); } } @@ -61,19 +73,22 @@ margin: 0; padding: 6px 0; list-style: none; - height: $--transfer-panel-body-height; + height: var(--el-transfer-panel-body-height); overflow: auto; box-sizing: border-box; @include when(filterable) { - height: #{$--transfer-panel-body-height - $--transfer-filter-height - 20px}; + height: calc( + var(--el-transfer-panel-body-height) - var(--el-transfer-filter-height) - + 20px + ); padding-top: 0; } } @include e(item) { - height: $--transfer-item-height; - line-height: $--transfer-item-height; + height: var(--el-transfer-item-height); + line-height: var(--el-transfer-item-height); padding-left: 15px; display: block !important; @@ -82,7 +97,7 @@ } &.#{$namespace}-checkbox { - color: $--color-text-regular; + color: var(--el-color-text-regular); } &:hover { @@ -95,7 +110,7 @@ display: block; box-sizing: border-box; padding-left: 24px; - line-height: $--transfer-item-height; + line-height: var(--el-transfer-item-height); } .#{$namespace}-checkbox__input { @@ -112,12 +127,12 @@ width: auto; .#{$namespace}-input__inner { - height: $--transfer-filter-height; + height: var(--el-transfer-filter-height); width: 100%; font-size: 12px; display: inline-block; box-sizing: border-box; - border-radius: #{math.div($--transfer-filter-height, 2)}; + border-radius: calc(var(--el-transfer-filter-height) / 2); padding-right: 10px; padding-left: 30px; } @@ -132,14 +147,14 @@ } .#{$namespace}-transfer-panel__header { - height: $--transfer-panel-header-height; - line-height: $--transfer-panel-header-height; - background: $--transfer-panel-header-background-color; + height: var(--el-transfer-panel-header-height); + line-height: var(--el-transfer-panel-header-height); + background: var(--el-transfer-panel-header-background-color); margin: 0; padding-left: 15px; - border-bottom: 1px solid $--transfer-border-color; + border-bottom: 1px solid var(--el-transfer-border-color); box-sizing: border-box; - color: $--color-black; + color: var(--el-color-black); .#{$namespace}-checkbox { display: block; @@ -147,13 +162,13 @@ .#{$namespace}-checkbox__label { font-size: 16px; - color: $--color-text-primary; + color: var(--el-color-text-primary); font-weight: normal; span { position: absolute; right: 15px; - color: $--color-text-secondary; + color: var(--el-color-text-secondary); font-size: 12px; font-weight: normal; } @@ -162,11 +177,11 @@ } .#{$namespace}-transfer-panel__footer { - height: $--transfer-panel-footer-height; - background: $--color-white; + height: var(--el-transfer-panel-footer-height); + background: var(--el-color-white); margin: 0; padding: 0; - border-top: 1px solid $--transfer-border-color; + border-top: 1px solid var(--el-transfer-border-color); position: absolute; bottom: 0; left: 0; @@ -176,16 +191,16 @@ .#{$namespace}-checkbox { padding-left: 20px; - color: $--color-text-regular; + color: var(--el-color-text-regular); } } .#{$namespace}-transfer-panel__empty { margin: 0; - height: $--transfer-item-height; - line-height: $--transfer-item-height; + height: var(--el-transfer-item-height); + line-height: var(--el-transfer-item-height); padding: 6px 15px 0; - color: $--color-text-secondary; + color: var(--el-color-text-secondary); text-align: center; }