n8n/packages/design-system/src/css/tooltip.scss
Alex Grozav e6e6216b5d
fix(editor): Fix post-migration CSS inconsistencies (no-changelog) (#6902)
* fix: fix node execute button spacing

* fix: minor css fixes

* fix: fix node-parameters-wrapper height
2023-08-10 11:09:55 +03:00

136 lines
2.9 KiB
SCSS

@use 'mixins/mixins';
@use './common/var';
@include mixins.b(tooltip) {
max-width: 200px;
&:focus:not(.focusing),
&:focus:hover {
outline-width: 0;
}
@include mixins.e(popper) {
position: absolute;
border-radius: 4px;
padding: var.$tooltip-padding;
z-index: var.$index-popper;
font-size: var.$tooltip-font-size;
line-height: 1.2;
min-width: 10px;
word-wrap: break-word;
font-weight: var(--font-weight-regular);
a {
color: var(--color-primary);
font-weight: var(--font-weight-bold);
}
.el-popper__arrow,
.el-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.el-popper__arrow {
border-width: var.$tooltip-arrow-size;
}
.el-popper__arrow::after {
content: ' ';
border-width: 5px;
}
&[data-popper-placement^='top'] .el-popper__arrow {
bottom: -(var.$tooltip-arrow-size);
border-top-color: var.$tooltip-border-color;
border-bottom-width: 0;
&::after {
bottom: 1px;
margin-left: -5px;
border-top-color: var.$tooltip-fill;
border-bottom-width: 0;
}
}
&[data-popper-placement^='bottom'] .el-popper__arrow {
top: -(var.$tooltip-arrow-size);
border-top-width: 0;
border-bottom-color: var.$tooltip-border-color;
&::after {
top: 1px;
margin-left: -5px;
border-top-width: 0;
border-bottom-color: var.$tooltip-fill;
}
}
&[data-popper-placement^='right'] .el-popper__arrow {
left: -(var.$tooltip-arrow-size);
border-right-color: var.$tooltip-border-color;
border-left-width: 0;
&::after {
bottom: -5px;
left: 1px;
border-right-color: var.$tooltip-fill;
border-left-width: 0;
}
}
&[data-popper-placement^='left'] .el-popper__arrow {
right: -(var.$tooltip-arrow-size);
border-right-width: 0;
border-left-color: var.$tooltip-border-color;
&::after {
right: 1px;
bottom: -5px;
margin-left: -5px;
border-right-width: 0;
border-left-color: var.$tooltip-fill;
}
}
@include mixins.when(is-dark) {
background: var.$tooltip-fill;
color: var.$tooltip-color;
}
@include mixins.when(is-light) {
background: var.$tooltip-color;
border: 1px solid var.$tooltip-fill;
&[data-popper-placement^='top'] .el-popper__arrow {
border-top-color: var.$tooltip-fill;
&::after {
border-top-color: var.$tooltip-color;
}
}
&[data-popper-placement^='bottom'] .el-popper__arrow {
border-bottom-color: var.$tooltip-fill;
&::after {
border-bottom-color: var.$tooltip-color;
}
}
&[data-popper-placement^='left'] .el-popper__arrow {
border-left-color: var.$tooltip-fill;
&::after {
border-left-color: var.$tooltip-color;
}
}
&[data-popper-placement^='right'] .el-popper__arrow {
border-right-color: var.$tooltip-fill;
&::after {
border-right-color: var.$tooltip-color;
}
}
}
}
}