mirror of
https://github.com/element-plus/element-plus.git
synced 2025-03-13 15:57:11 +08:00
refactor(tooltip): migrate css var (#2686)
This commit is contained in:
云游君
GitHub
parent
d4cfd29248
commit
bf5e510f9f
@ -462,17 +462,8 @@ $--popup-modal-opacity: 0.5 !default;
|
||||
|
||||
/* Tooltip
|
||||
-------------------------- */
|
||||
/// color|1|Color|0
|
||||
$--tooltip-fill: var(--el-color-text-primary) !default;
|
||||
/// color|1|Color|0
|
||||
$--tooltip-color: $--color-white !default;
|
||||
/// fontSize||Font|1
|
||||
$--tooltip-font-size: 12px !default;
|
||||
/// color||Color|0
|
||||
$--tooltip-border-color: var(--el-color-text-primary) !default;
|
||||
$--tooltip-arrow-size: 6px !default;
|
||||
/// padding||Spacing|3
|
||||
$--tooltip-padding: 10px !default;
|
||||
// refactor with css3 var
|
||||
// See packages/theme-chalk/src/tooltip.scss
|
||||
|
||||
/* Tag
|
||||
-------------------------- */
|
||||
|
||||
@ -1,7 +1,27 @@
|
||||
@use "sass:map";
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'popper';
|
||||
|
||||
$positions: top, bottom, left, right;
|
||||
|
||||
$positionMap: (
|
||||
'top': 'bottom',
|
||||
'bottom': 'top',
|
||||
'left': 'right',
|
||||
'right': 'left',
|
||||
);
|
||||
|
||||
:root {
|
||||
--el-tooltip-fill: var(--el-color-text-primary);
|
||||
--el-tooltip-color: var(--el-color-white);
|
||||
--el-tooltip-font-size: 12px;
|
||||
--el-tooltip-border-color: var(--el-color-text-primary);
|
||||
--el-tooltip-arrow-size: 6px;
|
||||
--el-tooltip-padding: 10px;
|
||||
}
|
||||
|
||||
@include b(tooltip) {
|
||||
&:focus:not(.focusing),
|
||||
&:focus:hover {
|
||||
@ -10,9 +30,9 @@
|
||||
@include e(popper) {
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
padding: $--tooltip-padding;
|
||||
padding: var(--el-tooltip-padding);
|
||||
z-index: var(--el-index-popper);
|
||||
font-size: $--tooltip-font-size;
|
||||
font-size: var(--el-tooltip-font-size);
|
||||
line-height: 1.2;
|
||||
min-width: 10px;
|
||||
word-wrap: break-word;
|
||||
@ -28,7 +48,7 @@
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
border-width: $--tooltip-arrow-size;
|
||||
border-width: var(--el-tooltip-arrow-size);
|
||||
}
|
||||
|
||||
.popper__arrow::after {
|
||||
@ -36,106 +56,43 @@
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
&[x-placement^='top'] {
|
||||
margin-bottom: #{$--tooltip-arrow-size + 6px};
|
||||
}
|
||||
|
||||
&[x-placement^='top'] .popper__arrow {
|
||||
bottom: -$--tooltip-arrow-size;
|
||||
border-top-color: $--tooltip-border-color;
|
||||
border-bottom-width: 0;
|
||||
|
||||
&::after {
|
||||
bottom: 1px;
|
||||
margin-left: -5px;
|
||||
border-top-color: $--tooltip-fill;
|
||||
border-bottom-width: 0;
|
||||
@each $position in $positions {
|
||||
&[x-placement^='#{$position}'] {
|
||||
margin-#{map.get($positionMap, $position)}: calc(
|
||||
var(--el-tooltip-arrow-size + 6px)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^='bottom'] {
|
||||
margin-top: #{$--tooltip-arrow-size + 6px};
|
||||
}
|
||||
&[x-placement^='#{$position}'] .popper__arrow {
|
||||
#{map.get($positionMap, $position)}: calc(
|
||||
0px - var(--el-tooltip-arrow-size)
|
||||
);
|
||||
border-#{$position}-color: var(--el-tooltip-border-color);
|
||||
border-#{map.get($positionMap, $position)}-width: 0;
|
||||
|
||||
&[x-placement^='bottom'] .popper__arrow {
|
||||
top: -$--tooltip-arrow-size;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: $--tooltip-border-color;
|
||||
|
||||
&::after {
|
||||
top: 1px;
|
||||
margin-left: -5px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: $--tooltip-fill;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^='right'] {
|
||||
margin-left: #{$--tooltip-arrow-size + 6px};
|
||||
}
|
||||
|
||||
&[x-placement^='right'] .popper__arrow {
|
||||
left: -$--tooltip-arrow-size;
|
||||
border-right-color: $--tooltip-border-color;
|
||||
border-left-width: 0;
|
||||
|
||||
&::after {
|
||||
bottom: -5px;
|
||||
left: 1px;
|
||||
border-right-color: $--tooltip-fill;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^='left'] {
|
||||
margin-right: #{$--tooltip-arrow-size + 6px};
|
||||
}
|
||||
|
||||
&[x-placement^='left'] .popper__arrow {
|
||||
right: -$--tooltip-arrow-size;
|
||||
border-right-width: 0;
|
||||
border-left-color: $--tooltip-border-color;
|
||||
|
||||
&::after {
|
||||
right: 1px;
|
||||
bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-right-width: 0;
|
||||
border-left-color: $--tooltip-fill;
|
||||
&::after {
|
||||
#{map.get($positionMap, $position)}: 1px;
|
||||
border-#{$position}-color: var(--el-tooltip-fill);
|
||||
border-#{map.get($positionMap, $position)}-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dark) {
|
||||
background: $--tooltip-fill;
|
||||
color: $--tooltip-color;
|
||||
background: var(--el-tooltip-fill);
|
||||
color: var(--el-tooltip-color);
|
||||
}
|
||||
|
||||
@include when(light) {
|
||||
background: $--tooltip-color;
|
||||
border: 1px solid $--tooltip-fill;
|
||||
background: var(--el-tooltip-color);
|
||||
border: 1px solid var(--el-tooltip-fill);
|
||||
|
||||
&[x-placement^='top'] .popper__arrow {
|
||||
border-top-color: $--tooltip-fill;
|
||||
&::after {
|
||||
border-top-color: $--tooltip-color;
|
||||
}
|
||||
}
|
||||
&[x-placement^='bottom'] .popper__arrow {
|
||||
border-bottom-color: $--tooltip-fill;
|
||||
&::after {
|
||||
border-bottom-color: $--tooltip-color;
|
||||
}
|
||||
}
|
||||
&[x-placement^='left'] .popper__arrow {
|
||||
border-left-color: $--tooltip-fill;
|
||||
&::after {
|
||||
border-left-color: $--tooltip-color;
|
||||
}
|
||||
}
|
||||
&[x-placement^='right'] .popper__arrow {
|
||||
border-right-color: $--tooltip-fill;
|
||||
&::after {
|
||||
border-right-color: $--tooltip-color;
|
||||
@each $position in $positions {
|
||||
&[x-placement^='#{$position}'] .popper__arrow {
|
||||
border-top-color: var(--el-tooltip-fill);
|
||||
&::after {
|
||||
border-top-color: var(--el-tooltip-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user