SCSS variables

SCSS Variables

HSLayers uses CSS custom properties (variables) to maintain consistent styling and enable easy customization of some UI components/elements. These variables control various aspects of the application's layout, particularly for mobile views, panel spaces, and popup dimensions.

Available Variables

Variable Name	Default Value	Description
--hs-panelspace-normal-height	70vh	Height of expanded panel space in mobile view
--hs-panelspace-collapsed-height	20vh	Height of collapsed panel space in mobile view
--hs-ol-popup-content-min-width	15rem	Minimum width of map popup content
--hs-ol-popup-content-max-height	25rem	Maximum height of map popup content
--hs-mobile-view-font-size-base	0.875rem	Base font size for mobile view (screens <= 767px)

To customize these values, override them in your application's CSS using the :root selector:

:root {
  --hs-panelspace-normal-height: 80vh;
  --hs-mobile-view-font-size-base: 1rem;
}