96 lines
2.5 KiB
SCSS
96 lines
2.5 KiB
SCSS
@use 'mixins/mixins' as *;
|
|
@use 'mixins/var' as *;
|
|
@use 'common/var' as *;
|
|
|
|
@include b(tooltip-v2) {
|
|
@include e(content) {
|
|
--#{$namespace}-tooltip-v2-padding: 5px 10px;
|
|
--#{$namespace}-tooltip-v2-border-radius: 4px;
|
|
|
|
@include css-var-from-global(
|
|
('tooltip-v2', 'border-color'),
|
|
('border-color')
|
|
);
|
|
|
|
border-radius: getCssVar('tooltip-v2-border-radius');
|
|
color: getCssVar('color-black');
|
|
background-color: getCssVar('color-white');
|
|
padding: getCssVar('tooltip-v2-padding');
|
|
border: 1px solid getCssVar('border-color');
|
|
|
|
$content-selector: &;
|
|
|
|
$sides: (
|
|
'top': 'bottom',
|
|
'bottom': 'top',
|
|
'left': 'right',
|
|
'right': 'left',
|
|
);
|
|
|
|
@include e(arrow) {
|
|
position: absolute;
|
|
color: getCssVar('color-white');
|
|
width: var(--#{$namespace}-tooltip-v2-arrow-width);
|
|
height: var(--#{$namespace}-tooltip-v2-arrow-height);
|
|
pointer-events: none;
|
|
left: var(--#{$namespace}-tooltip-v2-arrow-x);
|
|
top: var(--#{$namespace}-tooltip-v2-arrow-y);
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
|
|
transparent;
|
|
position: absolute;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
|
|
transparent;
|
|
position: absolute;
|
|
}
|
|
|
|
@each $side, $opposite in $sides {
|
|
#{$content-selector}[data-side^='#{$side}'] & {
|
|
#{$opposite}: 0;
|
|
}
|
|
|
|
#{$content-selector}[data-side^='#{$side}'] &::before {
|
|
border-#{$side}-color: var(--#{$namespace}-color-white);
|
|
border-#{$side}-width: var(
|
|
--#{$namespace}-tooltip-v2-arrow-border-width
|
|
);
|
|
border-#{$opposite}: 0;
|
|
#{$side}: calc(100% - 1px);
|
|
}
|
|
|
|
#{$content-selector}[data-side^='#{$side}'] &::after {
|
|
border-#{$side}-color: var(--#{$namespace}-border-color);
|
|
border-#{$side}-width: var(
|
|
--#{$namespace}-tooltip-v2-arrow-border-width
|
|
);
|
|
border-#{$opposite}: 0;
|
|
#{$side}: 100%;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-dark {
|
|
--#{$namespace}-tooltip-v2-border-color: transparent;
|
|
background-color: getCssVar('color-black');
|
|
color: getCssVar('color-white');
|
|
border-color: transparent;
|
|
|
|
@include e(arrow) {
|
|
background-color: getCssVar('color-black');
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|