Files
ueblueprint/scss/ueb-link.scss
2022-10-18 20:25:42 +02:00

58 lines
1.8 KiB
SCSS

@use "style.scss";
ueb-link {
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
/* when from-y > to-y */
--ueb-y-reflected: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
display: block;
margin-left: calc(var(--ueb-link-start) * -1px);
min-width: calc(var(--ueb-link-min-width) * 1px);
/*
* This makes the element transparent to the hover events so that multiple path elements can stand nearby and have
* their hover behavior correctly firing.
*/
visibility: hidden;
@extend .ueb-positioned;
}
ueb-link svg {
--ueb-y-reflected-coefficient: calc(2 * var(--ueb-y-reflected) - 1);
position: absolute;
width: 100%;
height: 100%;
min-height: 1px;
transform: scaleY(calc(var(--ueb-y-reflected-coefficient) * var(--ueb-from-input-coefficient)));
}
ueb-link svg path {
visibility: visible;
stroke: var(--ueb-link-color);
stroke-width: calc(3px / var(--ueb-scale));
}
ueb-link[data-dragging="true"] svg path,
ueb-link svg g:hover path {
stroke-width: calc(6px / var(--ueb-scale));
transition: stroke-width 0.8s;
}
.ueb-link-message {
display: block;
visibility: visible;
position: absolute;
top: calc(100% * (1 - var(--ueb-y-reflected)) + 22px);
left: calc(
/* If originates from an output pin, start with 100% */
(1 - var(--ueb-from-input)) * 100%
/* If originates from an input pin, then sum, otherwise subtract */
+ (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage)
/* Fixed offset */
+ 15px);
border: 1px solid #000;
padding: 4px 8px;
border-radius: 2px;
background: linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
color: var(--ueb-pin-dim-color);
white-space: nowrap;
z-index: 1000000;
}