74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
|
import {
|
||
|
|
component_styles_default
|
||
|
|
} from "./chunk.K23QWHWK.js";
|
||
|
|
import {
|
||
|
|
i
|
||
|
|
} from "./chunk.CXZZ2LVK.js";
|
||
|
|
|
||
|
|
// src/components/popup/popup.styles.ts
|
||
|
|
var popup_styles_default = i`
|
||
|
|
${component_styles_default}
|
||
|
|
|
||
|
|
:host {
|
||
|
|
--arrow-color: var(--sl-color-neutral-1000);
|
||
|
|
--arrow-size: 6px;
|
||
|
|
|
||
|
|
/*
|
||
|
|
* These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
|
||
|
|
* 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
|
||
|
|
*/
|
||
|
|
--arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
|
||
|
|
--arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
|
||
|
|
|
||
|
|
display: contents;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup {
|
||
|
|
position: absolute;
|
||
|
|
isolation: isolate;
|
||
|
|
max-width: var(--auto-size-available-width, none);
|
||
|
|
max-height: var(--auto-size-available-height, none);
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup--fixed {
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup:not(.popup--active) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup__arrow {
|
||
|
|
position: absolute;
|
||
|
|
width: calc(var(--arrow-size-diagonal) * 2);
|
||
|
|
height: calc(var(--arrow-size-diagonal) * 2);
|
||
|
|
rotate: 45deg;
|
||
|
|
background: var(--arrow-color);
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hover bridge */
|
||
|
|
.popup-hover-bridge:not(.popup-hover-bridge--visible) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-hover-bridge {
|
||
|
|
position: fixed;
|
||
|
|
z-index: calc(var(--sl-z-index-dropdown) - 1);
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
clip-path: polygon(
|
||
|
|
var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
|
||
|
|
var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
|
||
|
|
var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
|
||
|
|
var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export {
|
||
|
|
popup_styles_default
|
||
|
|
};
|