mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(transfer): migrate css var (#2639)

Browse Source
This commit is contained in:
云游君 2021-07-23 23:11:41 +08:00 committed by GitHub
parent 02f3c7d66d
commit 7e3b9df2da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/theme-chalk/src/common/var.scss
View File

@ -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
--------------------------*/

71
packages/theme-chalk/src/transfer.scss
View File

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