Skip to content

Commit

Permalink
refactor(transfer): migrate css var (element-plus#2639)
Browse files Browse the repository at this point in the history
  • Loading branch information
@YunYouJun
YunYouJun authored Jul 23, 2021
1 parent 02f3c7d commit 7e3b9df
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 44 deletions.
18 changes: 2 additions & 16 deletions packages/theme-chalk/src/common/var.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
--------------------------*/
Expand Down
71 changes: 43 additions & 28 deletions packages/theme-chalk/src/transfer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -38,42 +50,45 @@
}

@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);
}
}

@include e(list) {
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;

Expand All @@ -82,7 +97,7 @@
}

&.#{$namespace}-checkbox {
color: $--color-text-regular;
color: var(--el-color-text-regular);
}

&:hover {
Expand All @@ -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 {
Expand All @@ -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;
}
Expand All @@ -132,28 +147,28 @@
}

.#{$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;
line-height: 40px;

.#{$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;
}
Expand All @@ -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;
Expand All @@ -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;
}

Expand Down

0 comments on commit 7e3b9df

Please sign in to comment.