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

refactor(popover): migrate css var (#2687)

Browse Source
This commit is contained in:
云游君 2021-07-26 15:06:05 +08:00 committed by GitHub
parent 426bbf2afe
commit d4cfd29248
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -457,20 +457,8 @@ $--popup-modal-opacity: 0.5 !default;
/* Popover
-------------------------- */
/// color||Color|0
$--popover-background-color: $--color-white !default;
/// fontSize||Font|1
$--popover-font-size: map.get($--font-size, 'base') !default;
/// color||Color|0
$--popover-border-color: map.get($--border-color, 'lighter') !default;
/// padding||Spacing|3
$--popover-padding: 12px !default;
$--popover-padding-large: 18px 20px !default;
/// fontSize||Font|1
$--popover-title-font-size: 16px !default;
/// color||Color|0
$--popover-title-font-color: var(--el-color-text-primary) !default;
$--popover-border-radius: 4px !default;
// refactor with css3 var
// See packages/theme-chalk/src/popover.scss
/* Tooltip
-------------------------- */

27
packages/theme-chalk/src/popover.scss
View File

@ -2,28 +2,39 @@
@import 'common/var';
@import 'popper';
:root {
--el-popover-background-color: var(--el-color-white);
--el-popover-font-size: var(--el-font-size-base);
--el-popover-border-color: var(--el-border-color-lighter);
--el-popover-padding: 12px;
--el-popover-padding-large: 18px 20px;
--el-popover-title-font-size: 16px;
--el-popover-title-font-color: var(--el-color-text-primary);
--el-popover-border-radius: 4px;
}
@include b(popover) {
&.#{$namespace}-popper {
background: $--popover-background-color;
background: var(--el-popover-background-color);
min-width: 150px;
border-radius: $--popover-border-radius;
border: 1px solid $--popover-border-color;
padding: $--popover-padding;
border-radius: var(--el-popover-border-radius);
border: 1px solid var(--el-popover-border-color);
padding: var(--el-popover-padding);
z-index: var(--el-index-popper);
color: var(--el-color-text-regular);
line-height: 1.4;
text-align: justify;
font-size: $--popover-font-size;
font-size: var(--el-popover-font-size);
box-shadow: var(--el-box-shadow-light);
word-break: break-all;
@include m(plain) {
padding: $--popover-padding-large;
padding: var(--el-popover-padding-large);
}
@include e(title) {
color: $--popover-title-font-color;
font-size: $--popover-title-font-size;
color: var(--el-popover-title-font-color);
font-size: var(--el-popover-title-font-size);
line-height: 1;
margin-bottom: 12px;
}

12
packages/theme-chalk/src/popper.scss
View File

@ -1,9 +1,13 @@
@import 'mixins/mixins';
@import 'common/var';
:root {
--el-popper-border-radius: var(--el-popover-border-radius, 4px);
}
@include b(popper) {
position: absolute;
border-radius: $--popover-border-radius;
border-radius: var(--el-popper-border-radius);
padding: 10px;
z-index: 2000;
font-size: 12px;
@ -15,7 +19,7 @@
$arrow-selector: #{& + '__arrow'};
@include when(dark) {
color: $--color-white;
color: var(--el-color-white);
background: var(--el-color-text-primary);
#{$arrow-selector}::before {
background: var(--el-color-text-primary);
@ -24,12 +28,12 @@
}
@include when(light) {
background: $--color-white;
background: var(--el-color-white);
border: 1px solid var(--el-border-color-light);
#{$arrow-selector}::before {
border: 1px solid var(--el-border-color-light);
background: $--color-white;
background: var(--el-color-white);
right: 0;
}
}