@mapsight/ui 7.0.0

package/src/scss/blocks/_map-synced-interlay.scss

@@ -0,0 +1,18 @@
+.ms3-map-synced-interlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	touch-action: none;
+	user-select: none;
+
+	.ms3-map-wrapper--anchored-right & {
+		right: 0;
+		left: auto;
+	}
+
+	.ms3-map-wrapper--anchored-bottom & {
+		bottom: 0;
+		top: auto;
+	}
+}

package/src/scss/blocks/_map-target.scss

@@ -0,0 +1,7 @@
+@use "../variables";
+
+.ms3-map-target {
+	width: 100%;
+	height: 100%;
+	background: variables.$ms3-mapBackgroundColor;
+}

package/src/scss/blocks/_map-usage.scss

@@ -0,0 +1,6 @@
+.ms3-map-usage {
+	dt {
+		height: 0; // sorgt für selbe Zeile, dd nach dt lässt links genug Platz
+		font-weight: bold;
+	}
+}

package/src/scss/blocks/_map-wrapper.scss

@@ -0,0 +1,27 @@
+@use "breakpoint-sass/stylesheets/breakpoint";
+@use "../variables";
+
+.ms3-map-wrapper {
+	position: relative;
+	clear: both;
+	flex-grow: 1;
+	height: calc(100vh - #{variables.$ms3-fullscreen-top});
+	max-height: #{variables.$ms3-mapMaxHeightDefault};
+	transition: max-height 200ms ease-out;
+
+	.ms3-wrapper--desktop & {
+		min-height: #{variables.$ms3-mapMinHeightDesktop};
+	}
+
+	.ms3-wrapper--mapOnly &,
+	.ms3-wrapper--fullscreen & {
+		height: auto;
+		max-height: calc(100vh - #{variables.$ms3-fullscreen-top});
+	}
+
+	@media print {
+		.ms3--print-feature-selection-info-only & {
+			display: none !important;
+		}
+	}
+}

package/src/scss/blocks/_marginal.scss

@@ -0,0 +1,32 @@
+@use "breakpoint-sass/stylesheets/breakpoint";
+@use "../variables";
+
+/*
+	Also see _additional-container.scss!
+	Structure:
+		<div class="ms3-additional-container">
+			<div class="ms3-marginal ms3-marginal--left"> … </div>
+			<div class="ms3-additional-container__content"> … </div>
+			<div class="ms3-marginal ms3-marginal--right"> … </div>
+		</div>
+ */
+
+.ms3-marginal {
+	font-size: variables.$ms3-fontSizeBase;
+
+	&:empty {
+		display: none;
+	}
+
+	@include breakpoint.breakpoint(variables.$ms3-breakpoint-desktop) {
+		width: 25%;
+
+		&--left {
+			margin-right: variables.$ms3-marginalGap;
+		}
+
+		&--right {
+			margin-right: variables.$ms3-marginalGap;
+		}
+	}
+}

package/src/scss/blocks/_mini-legend.scss

@@ -0,0 +1,51 @@
+@use "../variables";
+
+.ms3-mini-legend {
+	pointer-events: auto;
+	display: flex;
+	flex-direction: row;
+
+	//padding: 0;
+	border: 1px solid variables.$ms3-borderColor;
+	background: white;
+
+	// reset browser styles
+	select,
+	button {
+		background: white;
+		border: none;
+		margin: 0;
+	}
+
+	select {
+		height: 100%;
+
+		&[disabled] {
+			background-color: white;
+			-webkit-appearance: none;
+		}
+	}
+
+	&__legend,
+	&__select,
+	&__more {
+		display: inline-block;
+		padding: 5px;
+	}
+
+	&__select {
+		font-size: variables.$ms3-fontSizeInput;
+		border-right: 1px solid variables.$ms3-borderColor;
+	}
+
+	&__more {
+		border-left: 1px solid variables.$ms3-borderColor;
+		font-weight: bold;
+	}
+
+	&__legend {
+		display: flex;
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+}

package/src/scss/blocks/_modal.scss

@@ -0,0 +1,67 @@
+@use "breakpoint-sass/stylesheets/breakpoint";
+@use "../variables";
+
+.ms3-modal {
+	//width: 100%;
+	max-width: 480px;
+	max-height: 800px;
+
+	@include breakpoint.breakpoint(variables.$ms3-breakpoint-mobile) {
+		margin-top: 5vh;
+		max-width: 320px;
+	}
+
+	&:focus {
+		outline: 0;
+	}
+
+	&__inner {
+		//width: 100%;
+		height: 100%;
+		max-width: 90vw;
+		max-height: 90vh;
+		min-height: 34px;
+
+		position: relative;
+		overflow: auto;
+		-webkit-overflow-scrolling: touch;
+		overflow-scrolling: touch;
+		background: variables.$ms3-backgroundColor;
+		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+	}
+
+	&__header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+
+		.ms3-dialog-close-button {
+			// disable `position: absolute`
+			position: relative !important;
+		}
+	}
+
+	&__headline {
+		margin: 0;
+		padding: 7px;
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+
+	&__close {
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+
+	.ms3-layer-switcher-container {
+		min-width: 60vw;
+	}
+
+	.ms3-layer-switcher__button {
+		padding: 7px;
+	}
+
+	.ms3-layer-switcher__entry__label {
+		font-size: 110%;
+	}
+}

package/src/scss/blocks/_page-title.scss

@@ -0,0 +1,19 @@
+@use "breakpoint-sass/stylesheets/breakpoint";
+@use "../variables";
+
+.ms3-page-title {
+	h2 {
+		border: 0;
+		padding: 10px 10px 5px 10px;
+		margin: 0;
+	}
+
+	@include breakpoint.breakpoint(variables.$ms3-breakpoint-desktop) {
+		display: none;
+	}
+
+	.js .ms3-wrapper--desktop &,
+	.js .ms3-wrapper--fullscreen & {
+		display: none;
+	}
+}

package/src/scss/blocks/_panel-container.scss

@@ -0,0 +1,36 @@
+@use "../variables";
+
+.ms3-panel-container {
+	$b: &;
+
+	position: relative;
+	z-index: 2;
+
+	&--docked-left {
+		width: variables.$ms3-verticalPanelWidth;
+		transition:
+			width 300ms ease-in,
+			flex 300ms ease-in;
+
+		&#{$b}--empty {
+			width: 0;
+			transition:
+				width 300ms ease-out,
+				flex 300ms ease-out;
+		}
+	}
+
+	&--docked-below {
+		display: flex;
+		flex-shrink: 0;
+
+		width: 100%;
+		max-height: variables.$ms3-mobileFeatureSelectInfoHeight;
+		transition: max-height 300ms ease-in;
+
+		&#{$b}--empty {
+			max-height: 0;
+			transition: max-height 300ms ease-out;
+		}
+	}
+}

package/src/scss/blocks/_panel.scss

@@ -0,0 +1,30 @@
+@use "../variables";
+
+.ms3-panel {
+	$b: &;
+
+	background: variables.$ms3-backgroundColor;
+
+	&--docked-left {
+		position: absolute;
+		inset: 0;
+		background: variables.$ms3-backgroundColorOffset2;
+		overflow: hidden;
+
+		#{$b}__inner {
+			width: variables.$ms3-verticalPanelWidth;
+			height: 100%;
+			position: absolute;
+			left: 0;
+			top: 0;
+			overflow: auto;
+		}
+	}
+
+	&--docked-below {
+		width: 100%;
+		max-height: variables.$ms3-mobileFeatureSelectInfoHeight;
+		border-bottom: 1px solid variables.$ms3-borderColor;
+		overflow: auto;
+	}
+}

package/src/scss/blocks/_query-input-with-label.scss

@@ -0,0 +1,55 @@
+@use "../variables";
+
+.ms3-query-input-with-label {
+	&__label {
+		margin-right: 8px;
+	}
+
+	&__input-container {
+		border: 0;
+		flex-grow: 1;
+		padding: 0;
+		display: inline-block;
+		position: relative;
+	}
+
+	&__input {
+		box-sizing: border-box;
+		vertical-align: top;
+		color: #222;
+		background: #fff;
+		border: 1px solid #ccc;
+		border-radius: 0;
+		width: 100%;
+		padding: 6px 40px 2px 8px;
+		font-size: 1.23077rem;
+		display: block;
+		outline-offset: -2px;
+	}
+
+	&__reset-button {
+		position: absolute;
+		top: 0;
+		right: 0;
+		color: #fff;
+		text-transform: uppercase;
+		text-align: left;
+		cursor: pointer;
+		background: #0e78ad;
+		border: 0;
+		padding: 10px 16px;
+		font-size: 1rem;
+		font-weight: bold;
+		line-height: 1;
+		height: 33px;
+		width: 40px;
+		background: transparent url(variables.$ms3-uiIconPath + "/reset.svg") no-repeat
+			center;
+
+		&:hover,
+		&:focus {
+			background: transparent url(variables.$ms3-uiIconPath + "reset-active.svg")
+				no-repeat center;
+		}
+	}
+}

package/src/scss/blocks/_region-selector.scss

@@ -0,0 +1,44 @@
+@use "../variables";
+
+.ms3-region-selector {
+	display: inline-block;
+	padding: 0;
+	margin: variables.$ms3-mapOverlayPadding 0 0 variables.$ms3-mapOverlayPadding;
+	background: variables.$ms3-backgroundColor;
+	border-radius: variables.$ms3-borderRadius;
+	list-style: none;
+	pointer-events: auto;
+
+	li {
+		display: block;
+		padding: 0;
+		margin: 0;
+		border-bottom: 1px solid variables.$ms3-borderColor;
+
+		&:first-child {
+			border-top-left-radius: variables.$ms3-borderRadius;
+			border-top-right-radius: variables.$ms3-borderRadius;
+		}
+
+		&:last-child {
+			border-bottom: 0;
+			border-bottom-left-radius: variables.$ms3-borderRadius;
+			border-bottom-right-radius: variables.$ms3-borderRadius;
+		}
+	}
+
+	button {
+		display: block;
+		width: 100%;
+		padding: 4px 10px;
+		border: 0;
+		background: variables.$ms3-backgroundColor;
+		color: variables.$ms3-foregroundColor;
+		text-align: left;
+	}
+
+	.ms3-wrapper--mobile &,
+	.ms3-wrapper--mapOnly & {
+		display: none;
+	}
+}

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

@@ -0,0 +1,21 @@
+@use "../variables";
+
+.ms3-search-overlay {
+	pointer-events: auto;
+
+	.ms3-wrapper--desktop &,
+	.ms3-wrapper--fullscreen & {
+		margin: 10px 0 0 10px;
+		position: relative;
+		z-index: 2;
+		background: variables.$ms3-backgroundColor;
+	}
+
+	.ms3-wrapper--mobile & {
+		display: none;
+	}
+
+	.ms3-wrapper--mobile.ms3-wrapper--embedded & {
+		display: block;
+	}
+}

package/src/scss/blocks/_search-result.scss

@@ -0,0 +1,127 @@
+@use "../variables";
+
+@keyframes msSearchResultSpin {
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.ms3-search-result {
+	$b: &;
+
+	position: relative;
+	border-top: 1px solid variables.$ms3-borderColor;
+	max-height: variables.$ms3-searchResultMaxHeight;
+	overflow-x: hidden;
+	overflow-y: auto;
+
+	&__group {
+		max-height: variables.$ms3-searchResultMaxHeight - 50px;
+	}
+
+	&__group-head {
+		margin: 0;
+		padding: 4px 10px;
+
+		position: sticky;
+		top: 0;
+
+		background: variables.$ms3-backgroundColorOffset;
+		border-bottom: 1px solid variables.$ms3-borderColor;
+		font-size: inherit;
+
+		#{$b}__group:not(:first-child) & {
+			border-top: 1px solid variables.$ms3-borderColor;
+		}
+	}
+
+	&__entry {
+		display: block;
+		width: 100%;
+		border: 0;
+		margin: 0;
+		padding: 5px 20px 5px 10px;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		background: variables.$ms3-backgroundColor;
+
+		&__subline {
+			display: block;
+			margin-left: 1px;
+			margin-top: -2px;
+			font-size: variables.$ms3-fontSizeSmallest;
+			color: variables.$ms3-secondaryColor;
+		}
+
+		&:hover,
+		&:focus {
+			background: variables.$ms3-backgroundHighlightColor;
+			color: variables.$ms3-themeColorB;
+
+			// show overflow text on hover/focus
+			overflow: visible;
+			text-shadow:
+				1px 1px 2px variables.$ms3-backgroundHighlightColor,
+				-1px -1px 2px variables.$ms3-backgroundHighlightColor;
+		}
+	}
+
+	&__list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	&__list-item:not(:first-child) {
+		border-top: 1px solid variables.$ms3-borderColor;
+	}
+
+	&__empty-message,
+	&__error {
+		padding: 10px;
+		margin: 0;
+	}
+
+	&--inactive {
+		display: none;
+	}
+
+	&__error {
+		&::before {
+			content: "";
+			float: left;
+			width: 22px;
+			height: 22px;
+			background: transparent url(variables.$ms3-uiIconPath + "error.svg") no-repeat
+				0 3px;
+		}
+	}
+
+	&--loading {
+		&::after {
+			position: absolute;
+			top: 0;
+			right: 0;
+			margin: 10px;
+			content: "";
+			display: block;
+			width: 15px;
+			height: 15px;
+			background: transparent url(variables.$ms3-uiIconPath + "loading.svg")
+				no-repeat center center;
+			animation: msSearchResultSpin 4s linear infinite;
+		}
+	}
+
+	.ms3-search-overlay & {
+		background: variables.$ms3-backgroundColor;
+
+		&--empty,
+		&--loading,
+		&--found,
+		&--error {
+			min-height: 200px;
+		}
+	}
+}

package/src/scss/blocks/_search.scss

@@ -0,0 +1,84 @@
+@use "../variables";
+
+$ms3-search_totalHeight: variables.$ms3-searchHeight + 4px;
+
+.ms3-search {
+	&__query-input {
+		display: flex;
+		width: 100%;
+		position: relative;
+	}
+
+	&__input-group {
+		display: inline-block;
+		padding: 0;
+		border: 0;
+		position: relative;
+		flex-grow: 1;
+	}
+
+	&__input {
+		width: calc(100% - 20px);
+		border: 0;
+		background: variables.$ms3-backgroundColor;
+		border-radius: variables.$ms3-borderRadius;
+		padding: 8px 10px 8px 10px;
+		font-size: variables.$ms3-fontSizeInput;
+	}
+
+	&__reset-button {
+		position: absolute;
+		top: 0;
+		right: 0;
+		border: 0;
+		width: variables.$ms3-searchHeight;
+		height: variables.$ms3-searchHeight;
+		vertical-align: top;
+		background: transparent;
+
+		&::before {
+			content: "";
+			display: block;
+			width: 21px;
+			height: 21px;
+			background: #eee url(variables.$ms3-uiIconPath + "close.svg") no-repeat center;
+			border-radius: 50%;
+			margin-top: 3px;
+		}
+	}
+
+	&__send-button {
+		border: 0;
+		width: 42px;
+		flex-shrink: 0;
+		background: transparent url(variables.$ms3-uiIconPath + "search.svg") no-repeat
+			center;
+	}
+
+	.ms3-search-overlay & {
+		position: relative;
+		background: variables.$ms3-backgroundColor;
+
+		&__output {
+			position: absolute;
+			left: 0;
+			top: variables.$ms3-searchHeight + 5px;
+			width: 100%;
+			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+		}
+	}
+
+	.ms3-modal & {
+		min-height: 45vh;
+		min-width: 310px;
+
+		&__query-input {
+			padding: 0 10px;
+			border-bottom: 1px solid variables.$ms3-borderColor;
+		}
+
+		&-result {
+			border-top: 0;
+		}
+	}
+}

package/src/scss/blocks/_share-link.scss

@@ -0,0 +1,15 @@
+@use "../variables";
+
+.ms3-share-link {
+	padding: 20px;
+
+	&__head {
+		margin-top: 0;
+		color: variables.$ms3-primaryColor;
+	}
+
+	&__input {
+		display: block;
+		width: 100%;
+	}
+}

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

@@ -0,0 +1,50 @@
+@use "../variables";
+
+.ms3-sticky-header {
+	&__container {
+		position: relative;
+		background: variables.$ms3-backgroundColor;
+		transition: background 600ms ease-in-out;
+	}
+
+	&__container--stuck {
+		background: variables.$ms3-backgroundColorOffset;
+	}
+
+	&__header {
+		background: transparent;
+		transition:
+			background 200ms ease-in-out,
+			border 200ms ease-in-out,
+			opacity 200ms ease-in-out;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.01);
+		opacity: 1;
+
+		&--stuck,
+		&--stuck-placeholder {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			line-height: 1;
+			background: variables.$ms3-backgroundColor;
+		}
+
+		&--sticky-placeholder,
+		&--stuck-placeholder {
+			opacity: 0;
+		}
+
+		&--stuck-placeholder {
+			z-index: 0;
+		}
+
+		&--stuck {
+			z-index: 2;
+			border-bottom: 1px solid variables.$ms3-borderColor;
+		}
+	}
+}