41 lines
1.8 KiB
JavaScript
41 lines
1.8 KiB
JavaScript
/** Style constants for the layer dropdown UI */
|
|
export const DROPDOWN_CONTAINER_STYLES = {
|
|
position: "absolute",
|
|
backgroundColor: "#ffffff",
|
|
border: "1px solid #e2e8f0",
|
|
borderRadius: "6px",
|
|
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
|
|
fontSize: "12px",
|
|
minWidth: "120px",
|
|
maxHeight: "200px",
|
|
overflowY: "auto",
|
|
zIndex: "10001",
|
|
padding: "4px 0",
|
|
pointerEvents: "auto",
|
|
};
|
|
export const DROPDOWN_ITEM_BASE_STYLES = {
|
|
padding: "4px 12px",
|
|
cursor: "pointer",
|
|
color: "#334155",
|
|
backgroundColor: "transparent",
|
|
whiteSpace: "nowrap",
|
|
lineHeight: "1.5",
|
|
fontWeight: "400",
|
|
};
|
|
export const DROPDOWN_ITEM_ACTIVE_COLOR = "#526cff";
|
|
export const DROPDOWN_ITEM_ACTIVE_BG = "#DBEAFE";
|
|
export const DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT = "600";
|
|
export const DROPDOWN_ITEM_HOVER_BG = "#f1f5f9";
|
|
export const DEPTH_INDENT_PX = 10;
|
|
/** SVG chevron shown when dropdown is collapsed (click to expand) */
|
|
export const CHEVRON_COLLAPSED = `<svg width="12" height="12" viewBox="0 0 24 24" style="vertical-align:middle;margin-left:4px"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" fill="none"/></svg>`;
|
|
/** SVG chevron shown when dropdown is expanded (click to collapse) */
|
|
export const CHEVRON_EXPANDED = `<svg width="12" height="12" viewBox="0 0 24 24" style="vertical-align:middle;margin-left:4px"><path d="M18 15l-6-6-6 6" stroke="currentColor" stroke-width="2" fill="none"/></svg>`;
|
|
export const CHEVRON_ATTR = "data-chevron";
|
|
export const BASE_PADDING_PX = 12;
|
|
export const LAYER_DROPDOWN_ATTR = "data-layer-dropdown";
|
|
/** Max instrumented ancestors to show above the selected element */
|
|
export const MAX_PARENT_DEPTH = 2;
|
|
/** Max instrumented depth levels to show below the selected element */
|
|
export const MAX_CHILD_DEPTH = 2;
|
|
//# sourceMappingURL=consts.js.map
|