@mapsight/ui 7.0.0

package/src/scss/blocks/_switcher-header.scss

@@ -0,0 +1,17 @@
+@use "../variables";
+
+.ms3-switcher-header {
+	&__count {
+		@if variables.$ms3-option-showFeatureCountsInTagSwitcherGroups != always {
+			display: none;
+		} @else {
+			display: inline-block;
+		}
+
+		@if variables.$ms3-option-showFeatureCountsInTagSwitcherGroups == moreThanOne {
+			&:not([data-ms3-count=""]):not([data-ms3-count="1"]) {
+				display: inline-block;
+			}
+		}
+	}
+}

package/src/scss/blocks/_tool-overlay.scss

@@ -0,0 +1,38 @@
+@use "../variables";
+
+.ms3-tool-overlay {
+	position: relative;
+
+	min-width: 240px;
+	margin-left: 15px;
+
+	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+	background-color: white;
+
+	pointer-events: auto;
+	user-select: none;
+	touch-action: manipulation;
+
+	.ms3-wrapper--mobile & {
+		display: none;
+	}
+
+	.ms3-wrapper--mapOnly & {
+		position: absolute;
+		top: 0;
+		left: 0;
+		margin: 5px;
+	}
+
+	&__header {
+		margin: 0;
+		padding: 4px 6px;
+		font-weight: bold;
+		color: variables.$ms3-secondaryColor;
+	}
+
+	&__text {
+		margin: 10px 0;
+		padding: 0 6px;
+	}
+}

package/src/scss/blocks/_tooltip.scss

@@ -0,0 +1,51 @@
+@use "../variables";
+
+.ms3-tooltip {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translate(0, 0);
+	transition:
+		opacity 200ms ease-out,
+		translate 20ms ease-out;
+	z-index: 3;
+	cursor: default;
+	user-select: none;
+
+	&__inner {
+		position: absolute;
+		top: 0;
+		left: 0;
+		max-width: 300px;
+		margin: 20px 0 0 10px;
+		border-radius: variables.$ms3-borderRadius;
+		border: 1px solid variables.$ms3-tooltipBorderColor;
+		box-shadow: 10px 10px 20px -3px rgba(0, 0, 0, 0.33);
+		background: variables.$ms3-tooltipBackgroundColor;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		text-align: center;
+		padding: 4px 8px;
+		min-width: 180px;
+
+		h3 {
+			padding: 0;
+			margin: 2px 0 4px;
+			text-align: center;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	&--active {
+		transition-delay: 600ms, 0ms;
+		opacity: 1;
+	}
+
+	&--inactive {
+		transition-delay: 0ms, 0ms;
+		opacity: 0;
+	}
+}

package/src/scss/blocks/_viewport-button.scss

@@ -0,0 +1,101 @@
+@use "breakpoint-sass/stylesheets/breakpoint";
+@use "../mixins/visually-hidden";
+@use "../variables";
+
+.ms3-viewport-button {
+	position: fixed;
+
+	display: block;
+	width: 40px;
+	min-height: 40px;
+	padding: 0;
+	margin: 5px 7px;
+	background: variables.$ms3-backgroundColor;
+	border: 0;
+	border-radius: variables.$ms3-borderRadius;
+	box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
+
+	&::before {
+		display: block;
+		content: "";
+		width: 100%;
+		height: 40px;
+		background-repeat: no-repeat;
+		background-position: center center;
+	}
+
+	&--top-left {
+		top: 0;
+		left: 0;
+	}
+
+	&--top-right {
+		top: 0;
+		right: 0;
+	}
+
+	&--bottom-left {
+		bottom: 0;
+		left: 0;
+	}
+
+	&--bottom-right {
+		bottom: 0;
+		right: 0;
+		z-index: variables.$ms3-zIndexViewportButton;
+	}
+
+	&--mobile-view-toggle--mobile {
+		// FIXME use differnt icon if there is no list to close
+		&::before {
+			background-image: url(variables.$ms3-uiIconPath + "close-list.svg");
+			margin-top: -10px;
+			margin-left: 3px;
+		}
+
+		&.ms3-viewport-button--mobile-view-toggle--map-out-of-view::before {
+			background-image: url(variables.$ms3-uiIconPath + "map.svg");
+			margin-top: 0;
+			margin-left: 0;
+		}
+	}
+
+	@include breakpoint.breakpoint(variables.$ms3-breakpoint-mobile) {
+		&--desktop-view-toggle {
+			display: none;
+		}
+
+		&__label {
+			@include visually-hidden.visually-hidden;
+		}
+	}
+
+	@include breakpoint.breakpoint(variables.$ms3-breakpoint-desktop) {
+		&--mobile-view-toggle {
+			display: none;
+		}
+	}
+
+	.ms3-wrapper--mapOnly &--mobile-view-toggle--mapOnly {
+		display: none;
+	}
+
+	.no-js {
+		display: none !important;
+	}
+
+	@media print {
+		display: none !important;
+	}
+}
+
+// hide button if map is embedded as there will be an on-map-fullscreen-button. this will only hide the fullscreen button, but not the map-out-of-view button
+.ms3-wrapper--embedded {
+	.ms3-viewport-button--mobile-view-toggle--mobile {
+		display: none;
+	}
+
+	.ms3-viewport-button--mobile-view-toggle--mobile.ms3-viewport-button--mobile-view-toggle--map-out-of-view {
+		display: block;
+	}
+}

package/src/scss/blocks/_watermark.scss

@@ -0,0 +1,21 @@
+.ms3-watermark {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	padding: 10px;
+	user-select: none;
+	opacity: 0.8;
+	z-index: 2000;
+	transition: opacity 400ms ease-in-out;
+
+	&,
+	img {
+		margin: 0 !important;
+		border: 0 !important;
+	}
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+}

package/src/scss/blocks/_wrapper.scss

@@ -0,0 +1,22 @@
+@use "../variables";
+
+.ms3-wrapper {
+	background: white;
+	z-index: variables.$ms3-zIndexWrapper;
+
+	&--mapOnly,
+	&--fullscreen {
+		background: white;
+		position: fixed;
+		top: variables.$ms3-fullscreen-top;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: variables.$ms3-fullscreen-zIndexWrapper;
+		overflow: hidden;
+
+		.ms3-marginal {
+			display: none;
+		}
+	}
+}

package/src/scss/default.scss

@@ -0,0 +1,63 @@
+@use "variables";
+@use "ol/ol";
+
+// globals
+@use "global/no-scroll";
+
+// blocks, alphabetical order!
+@use "blocks/additional-container";
+@use "blocks/app-overlay";
+@use "blocks/attribution";
+@use "blocks/mini-legend";
+@use "blocks/dialog-close-button";
+@use "blocks/feature-link";
+@use "blocks/feature-selection-info";
+@use "blocks/features-sorting";
+@use "blocks/filter";
+@use "blocks/filter-button";
+@use "blocks/flex";
+@use "blocks/hint";
+@use "blocks/info-overlay";
+@use "blocks/input-container";
+@use "blocks/layer-switcher";
+@use "blocks/layer-switcher-overlay";
+@use "blocks/link-share";
+@use "blocks/list";
+@use "blocks/list-cycling-box";
+@use "blocks/list-header";
+@use "blocks/list-pagination";
+@use "blocks/list-toggle-button";
+@use "blocks/list-wrapper";
+@use "blocks/logo";
+@use "blocks/main-container";
+@use "blocks/map-overlay";
+@use "blocks/map-overlay-combined-buttons";
+@use "blocks/map-row";
+@use "blocks/map-synced-interlay";
+@use "blocks/map-target";
+@use "blocks/map-usage";
+@use "blocks/map-wrapper";
+@use "blocks/marginal";
+@use "blocks/modal";
+@use "blocks/page-title";
+@use "blocks/panel-container";
+@use "blocks/panel";
+@use "blocks/query-input-with-label";
+@use "blocks/region-selector";
+@use "blocks/search";
+@use "blocks/search-overlay";
+@use "blocks/search-result";
+@use "blocks/share-link";
+@use "blocks/sticky-header";
+@use "blocks/switcher-header";
+@use "blocks/tool-overlay";
+@use "blocks/tooltip";
+@use "blocks/viewport-button";
+@use "blocks/watermark";
+@use "blocks/wrapper";
+
+// openlayers overrides
+@use "ol/viewport";
+
+// helpers
+@use "helpers/visually-hidden";

package/src/scss/global/_no-scroll.scss

@@ -0,0 +1,6 @@
+.ms3--map-no-scroll,
+.ms3--map-no-scroll body {
+	overflow: hidden;
+	height: 100vh;
+	width: 100vw;
+}

package/src/scss/helpers/visually-hidden.scss

@@ -0,0 +1,8 @@
+@use "../mixins/visually-hidden";
+
+/*
+ * Hide only visually, but have it available for screen readers
+ */
+.ms3-visuallyhidden {
+	@include visually-hidden.visually-hidden();
+}

package/src/scss/mixins/_visually-hidden.scss

@@ -0,0 +1,31 @@
+/**
+ * Hide only visually, but have it available for screen readers:
+ * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ */
+
+@mixin visually-hidden($focusable: false) {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	/*
+	 * Extends the .visuallyhidden class to allow the element
+	 * to be focusable when navigated to via the keyboard:
+	 * https://www.drupal.org/node/897638
+	 */
+	@if ($focusable) {
+		&:active,
+		&:focus {
+			clip: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			position: static;
+			width: auto;
+		}
+	}
+}

package/src/scss/ol/_viewport.scss

@@ -0,0 +1,18 @@
+.ol-viewport {
+	.ol-layer,
+	.ol-layers,
+	.ol-layer canvas {
+		top: 0;
+		left: 0;
+
+		.ms3-map-wrapper--anchored-right & {
+			right: 0 !important;
+			left: auto !important;
+		}
+
+		.ms3-map-wrapper--anchored-bottom & {
+			bottom: 0 !important;
+			top: auto !important;
+		}
+	}
+}

package/src/scss/themes/2022-03.scss

@@ -0,0 +1,48 @@
+@use "../variables";
+
+$ms3-theme-font-family:
+	ui-sans-serif,
+	system-ui,
+	-apple-system,
+	BlinkMacSystemFont,
+	"Segoe UI",
+	Roboto,
+	"Helvetica Neue",
+	Arial,
+	"Noto Sans",
+	sans-serif,
+	"Apple Color Emoji",
+	"Segoe UI Emoji",
+	"Segoe UI Symbol",
+	"Noto Color Emoji";
+$ms3-theme-desktop-map-min-height: 500px !default;
+
+.ms3-wrapper {
+	font-family: $ms3-theme-font-family;
+	font-size: variables.$ms3-fontSizeBase;
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in i9OS
+}
+
+.ms3-map-row {
+	border: 1px solid variables.$ms3-borderColor;
+}
+
+.ms3-map-wrapper {
+	.ms3-wrapper--desktop & {
+		min-height: $ms3-theme-desktop-map-min-height;
+	}
+}
+
+.ms3-list {
+	&__item {
+		&:not(:first-of-type) {
+			border-top: 1px solid variables.$ms3-borderColor;
+		}
+
+		&__head {
+			display: flex;
+			flex-direction: row;
+		}
+	}
+}