mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(switch): migrate css var (#2584)

Browse Source 
* refactor(switch): migrate css var

* refactor(switch): remove switch var in common
This commit is contained in:
云游君 2021-07-20 12:53:09 +08:00 committed by GitHub
parent 2663d7e219
commit c2661e9363
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -429,19 +429,8 @@ $--button-active-shade-percent: 10% !default;
/* Switch
-------------------------- */
/// color||Color|0
$--switch-on-color: $--color-primary !default;
/// color||Color|0
$--switch-off-color: map.get($--border-color, 'base') !default;
/// fontSize||Font|1
$--switch-font-size: map.get($--font-size, 'base') !default;
$--switch-core-border-radius: 10px !default;
// height||Other|4
$--switch-width: 40px !default;
// height||Other|4
$--switch-height: 20px !default;
// height||Other|4
$--switch-button-size: 16px !default;
// refactor with css3 var
// See packages/theme-chalk/src/switch.scss
/* Dialog
-------------------------- */

57
packages/theme-chalk/src/switch.scss
View File

@ -1,13 +1,23 @@
@import 'mixins/mixins';
@import 'common/var';
:root {
--el-switch-on-color: var(--el-color-primary);
--el-switch-off-color: var(--el-border-color-base);
--el-switch-font-size: var(--el-font-size-base);
--el-switch-core-border-radius: 10px;
--el-switch-width: 40px;
--el-switch-height: 20px;
--el-switch-button-size: 16px;
}
@include b(switch) {
display: inline-flex;
align-items: center;
position: relative;
font-size: $--switch-font-size;
line-height: $--switch-height;
height: $--switch-height;
font-size: var(--el-switch-font-size);
line-height: var(--el-switch-height);
height: var(--el-switch-height);
vertical-align: middle;
@include when(disabled) {
& .#{$namespace}-switch__core,
@ -18,16 +28,16 @@
@include e(label) {
transition: var(--el-transition-duration-fast);
height: $--switch-height;
height: var(--el-switch-height);
display: inline-block;
font-size: $--switch-font-size;
font-size: var(--el-switch-font-size);
font-weight: 500;
cursor: pointer;
vertical-align: middle;
color: $--color-text-primary;
color: var(--el-color-text-primary);
@include when(active) {
color: $--color-primary;
color: var(--el-color-primary);
}
@include m(left) {
@ -38,7 +48,7 @@
}
& * {
line-height: 1;
font-size: $--switch-font-size;
font-size: var(--el-switch-font-size);
display: inline-block;
}
}
@ -55,41 +65,42 @@
margin: 0;
display: inline-block;
position: relative;
width: $--switch-width;
height: $--switch-height;
border: 1px solid $--switch-off-color;
width: var(--el-switch-width);
height: var(--el-switch-height);
border: 1px solid var(--el-switch-off-color);
outline: none;
border-radius: $--switch-core-border-radius;
border-radius: var(--el-switch-core-border-radius);
box-sizing: border-box;
background: $--switch-off-color;
background: var(--el-switch-off-color);
cursor: pointer;
transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
transition: border-color var(--el-transition-duration),
background-color var(--el-transition-duration);
vertical-align: middle;
.#{$namespace}-switch__action {
position: absolute;
top: 1px;
left: 1px;
border-radius: $--border-radius-circle;
border-radius: var(--el-border-radius-circle);
transition: all var(--el-transition-duration);
width: $--switch-button-size;
height: $--switch-button-size;
background-color: $--color-white;
width: var(--el-switch-button-size);
height: var(--el-switch-button-size);
background-color: var(--el-color-white);
display: flex;
justify-content: center;
align-items: center;
color: $--switch-off-color;
color: var(--el-switch-off-color);
}
}
@include when(checked) {
.#{$namespace}-switch__core {
border-color: $--switch-on-color;
background-color: $--switch-on-color;
border-color: var(--el-switch-on-color);
background-color: var(--el-switch-on-color);
.#{$namespace}-switch__action {
left: 100%;
margin-left: -$--switch-button-size - 1px;
color: $--switch-on-color;
margin-left: calc(0px - var(--el-switch-button-size) - 1px);
color: var(--el-switch-on-color);
}
}
}