@mapsight/ui 7.0.0

package/src/scss/blocks/_list-cycling-box.scss

@@ -0,0 +1,143 @@
+@use "breakpoint-sass/stylesheets/breakpoint";
+@use "../variables";
+
+.ms3-list-cycling-box {
+	display: flex;
+	width: 100%;
+
+	&__dot,
+	&__button {
+		display: block;
+		border: 0;
+		padding: 0;
+
+		background: transparent;
+	}
+
+	&__button {
+		display: block;
+		width: 40px;
+		height: 40px;
+		position: relative;
+
+		// TODO: Replace css border arrow magic with SVG
+		&::before {
+			content: "";
+
+			display: block;
+			width: 10px;
+			height: 10px;
+			margin: -5px;
+
+			position: absolute;
+			left: 50%;
+			top: 50%;
+
+			border-top: 2px solid variables.$ms3-primaryColor;
+			border-left: 2px solid variables.$ms3-primaryColor;
+
+			transform-origin: center center;
+		}
+
+		&--prev::before {
+			transform: rotate(-45deg);
+			margin-left: -3px;
+		}
+
+		&--next::before {
+			transform: rotate(135deg);
+			margin-left: -7px;
+		}
+
+		@include breakpoint.breakpoint(variables.$ms3-breakpoint-desktop) {
+			&:hover {
+				background-color: transparent;
+
+				&::before {
+					border-top: 2px solid variables.$ms3-themeColorB;
+					border-left: 2px solid variables.$ms3-themeColorB;
+				}
+			}
+		}
+	}
+
+	&__dots-shadows {
+		display: flex;
+		position: relative;
+		flex-grow: 1;
+
+		&::before,
+		&::after {
+			content: "";
+			display: block;
+			height: 100%;
+			width: 20px;
+			position: absolute;
+			top: 0;
+			pointer-events: none;
+			z-index: 1;
+			opacity: 0;
+			transition: opacity variables.$ms3-transition-fast variables.$ms3-easing-default;
+		}
+
+		&::before {
+			left: 0;
+			box-shadow: inset 20px 0 20px -20px variables.$ms3-dotsShadowColor;
+		}
+
+		&::after {
+			right: 0;
+			box-shadow: inset -20px 0 20px -20px variables.$ms3-dotsShadowColor;
+		}
+
+		&--overflow-left::before {
+			opacity: 1;
+		}
+
+		&--overflow-right::after {
+			opacity: 1;
+		}
+	}
+
+	&__dots-scroller {
+		width: 0;
+		position: relative;
+		overflow: hidden;
+		flex-grow: 1;
+	}
+
+	&__dots {
+		display: flex;
+		width: fit-content;
+		height: 100%;
+		margin: 0 auto;
+	}
+
+	&__dot {
+		&::before {
+			content: "";
+			display: block;
+			height: 1em;
+			width: 1em;
+			background-color: variables.$ms3-primaryColor;
+			border-radius: 50%;
+			box-sizing: border-box;
+		}
+
+		&--selected {
+			&::before {
+				background-color: variables.$ms3-themeColorB;
+			}
+		}
+
+		@include breakpoint.breakpoint(variables.$ms3-breakpoint-desktop) {
+			&:hover,
+			&--highlight:nth-child(odd),
+			&--highlight:nth-child(even) {
+				&::before {
+					background-color: variables.$ms3-themeColorB;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,20 @@
+@use "../variables";
+
+.ms3-list-header {
+	display: flex;
+	background: variables.$ms3-backgroundColor;
+	z-index: variables.$ms3-zIndexListHeader;
+
+	&.js-is-sticky,
+	&.js-is-stuck {
+		margin: 0 -5px;
+		padding: 2px 5px;
+		box-shadow: 0 10px 12px -12px rgba(0, 0, 0, 0.5);
+	}
+
+	@media print {
+		& {
+			display: none !important;
+		}
+	}
+}

package/src/scss/blocks/_list-pagination.scss

@@ -0,0 +1,41 @@
+.ms3-list-pagination {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	justify-content: center;
+
+	&__page,
+	&__break,
+	&__page-link {
+		display: block;
+	}
+
+	&__page-link,
+	&__break {
+		padding: 7px;
+	}
+
+	&__page-link {
+		&:hover,
+		&:focus {
+		}
+	}
+
+	&__page--active {
+		font-weight: bold;
+	}
+
+	&__page--disabled {
+		color: #555;
+		cursor: default;
+	}
+
+	&__break {
+		cursor: default;
+	}
+
+	&__page-link {
+		cursor: pointer;
+	}
+}

package/src/scss/blocks/_list-toggle-button.scss

@@ -0,0 +1,57 @@
+@use "../variables";
+
+$buttonWidth: 25px;
+$buttonHeight: 70px;
+$transitionTime: 400ms;
+
+.ms3-list-toggle-button {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: $buttonWidth;
+	height: $buttonHeight;
+	margin: 0 (-$buttonWidth) 80px 0;
+	border: 0;
+	border-radius: 0 variables.$ms3-borderRadius variables.$ms3-borderRadius 0;
+	z-index: variables.$ms3-zIndexListToggleButton;
+	background-color: variables.$ms3-backgroundColor;
+	transition: margin-left $transitionTime ease-out;
+	box-shadow: 3px 4px 4px -2px rgba(0, 0, 0, 0.4);
+
+	&::after {
+		// arrow
+		content: "";
+		border: 7px solid transparent;
+		border-left-color: variables.$ms3-themeColorA;
+		display: block;
+		left: 2px;
+		position: relative;
+	}
+
+	&:hover,
+	&:focus {
+		background: variables.$ms3-backgroundHighlightColor;
+		color: variables.$ms3-themeColorB;
+		outline: 0;
+	}
+
+	&:hover::after {
+		// arrow
+		border-left-color: variables.$ms3-themeColorB;
+	}
+
+	&--active {
+		&::after {
+			// arrow
+			left: -6px;
+			border-right-color: variables.$ms3-themeColorA;
+			border-left-color: transparent;
+		}
+
+		&:hover::after {
+			// arrow
+			border-left-color: transparent;
+			border-right-color: variables.$ms3-themeColorB;
+		}
+	}
+}

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

@@ -0,0 +1,25 @@
+@use "../variables";
+
+.ms3-list-wrapper {
+	position: relative;
+	padding: 10px 0;
+
+	.ms3-panel--docked-left & {
+		width: variables.$ms3-verticalPanelContentWidth;
+		height: calc(100% - #{2 * variables.$ms3-verticalPanelPadding});
+		padding: 0;
+		margin: variables.$ms3-verticalPanelPadding;
+
+		overflow-y: scroll;
+		overflow-x: hidden;
+		overflow-scrolling: touch;
+		-webkit-overflow-scrolling: touch;
+
+		border-radius: variables.$ms3-verticalPanelBorderRadius;
+		background: variables.$ms3-pageBackgroundColor;
+	}
+
+	.ms3-panel--hide-list & {
+		display: none;
+	}
+}

package/src/scss/blocks/_list.scss

@@ -0,0 +1,100 @@
+@use "../mixins/visually-hidden";
+@use "../variables";
+
+.ms3-list {
+	$b: &;
+
+	width: 100%;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	&__filter-box {
+	}
+
+	&__item,
+	&__head {
+		display: flex;
+		width: 100%;
+		flex-direction: row;
+	}
+
+	&__item {
+		$i: &;
+
+		width: 100%;
+		flex-wrap: wrap;
+
+		@media print {
+			.ms3--print-feature-selection-info-only & {
+				display: none !important;
+
+				&--selected {
+					display: block !important;
+				}
+			}
+		}
+	}
+
+	&__button,
+	&__link {
+		display: block;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		border: 0;
+
+		font-family: inherit;
+		font-size: inherit;
+		appearance: none;
+		text-align: left;
+
+		background: transparent;
+		color: inherit;
+
+		cursor: default;
+		text-decoration: none;
+
+		&--selectable {
+			cursor: pointer;
+		}
+	}
+
+	&__link,
+	&__button--selectable {
+		cursor: pointer;
+	}
+
+	&__icon,
+	&__main,
+	&__info {
+		display: block;
+		width: auto;
+	}
+
+	&__icon {
+		width: variables.$ms3-listIconWidth + 12px;
+	}
+
+	&__main {
+		white-space: pre-line;
+	}
+
+	&__info {
+		.ms3-wrapper--mobile &,
+		.ms3-wrapper--fullscreen & {
+			@if (variables.$ms3-option-listInfoShowInFullscreen == false) {
+				display: none;
+			} @else {
+				display: block;
+				width: 100%;
+			}
+		}
+	}
+
+	&__details {
+		display: block;
+		width: 100%;
+		overflow: auto;
+	}
+}

package/src/scss/blocks/_logo.scss

@@ -0,0 +1,27 @@
+@use "../variables";
+
+.ms3-logo {
+	pointer-events: auto;
+	display: block;
+	margin: 7px;
+	opacity: 0.7;
+	transition: opacity 300ms ease-in-out;
+	width: 120px;
+	height: 40px;
+
+	background: transparent url(variables.$ms3-uiIconPath + "watermark.svg") no-repeat 0 0;
+	background-size: 120px 40px;
+	cursor: pointer;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+
+	.ms3-wrapper--mobile &,
+	.ms3-wrapper--mapOnly & {
+		width: 90px;
+		height: 30px;
+		background-size: 90px 30px;
+	}
+}

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

@@ -0,0 +1,9 @@
+.ms3-main-container {
+	display: flex;
+	flex-direction: column;
+
+	.ms3-wrapper--mapOnly &,
+	.ms3-wrapper--fullscreen & {
+		height: 100%;
+	}
+}

package/src/scss/blocks/_map-overlay-combined-buttons.scss

@@ -0,0 +1,45 @@
+@use "breakpoint-sass/stylesheets/breakpoint";
+@use "../variables";
+
+.ms3-map-overlay-combined-buttons {
+	width: 40px;
+	margin: 5px 15px;
+	background: variables.$ms3-backgroundColor;
+	border: 0;
+	border-radius: variables.$ms3-borderRadius;
+	transition: margin 300ms ease-in-out;
+
+	.ms3-map-overlay__button {
+		margin: 0;
+		border-radius: 0;
+		border: 0;
+
+		&:first-child {
+			border-top-left-radius: variables.$ms3-borderRadius;
+			border-top-right-radius: variables.$ms3-borderRadius;
+		}
+
+		&:last-child {
+			border-bottom-left-radius: variables.$ms3-borderRadius;
+			border-bottom-right-radius: variables.$ms3-borderRadius;
+		}
+	}
+
+	@include breakpoint.breakpoint(variables.$ms3-breakpoint-mobile) {
+		margin: 5px 7px;
+		background: rgba(255, 255, 255, 0.9);
+		border-radius: 50%;
+
+		.ms3-map-overlay__button {
+			&:first-child {
+				border-top-left-radius: 50%;
+				border-top-right-radius: 50%;
+			}
+
+			&:last-child {
+				border-bottom-left-radius: 50%;
+				border-bottom-right-radius: 50%;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,224 @@
+@use "breakpoint-sass/stylesheets/breakpoint";
+@use "../mixins/visually-hidden";
+@use "../variables";
+
+.ms3-map-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+
+	.ms3-wrapper--fullscreen & {
+		overflow: hidden;
+	}
+
+	&__area {
+		position: absolute;
+
+		&--top-left {
+			top: 0;
+			left: 0;
+
+			// "align" each child to the left
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		&--top-right {
+			top: 0;
+			right: 0;
+
+			// "align" each child to the right
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+		}
+
+		&--bottom-left {
+			bottom: 0;
+			left: 0;
+
+			// "align" each child to the left
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		&--bottom-right {
+			bottom: 0;
+			right: 0;
+
+			// "align" each child to the right
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+		}
+	}
+
+	&__button {
+		display: block;
+		@if (variables.$ms3-option-mapOverlayButtonsShowLabel) {
+			width: 80px;
+			min-height: 50px;
+		} @else {
+			width: 40px;
+			min-height: 40px;
+		}
+		padding: 0;
+		margin: 5px 15px;
+		background: variables.$ms3-backgroundColor;
+		border: 0;
+		border-radius: variables.$ms3-borderRadius;
+		pointer-events: auto;
+
+		transition: margin 300ms ease-in-out;
+
+		@if (variables.$ms3-option-mapOverlayButtonsShowLabel == false) {
+			&__label {
+				@include visually-hidden.visually-hidden;
+			}
+		}
+
+		&--with-icon {
+			&::before {
+				display: block;
+				content: "";
+				width: 100%;
+				height: 26px;
+				background-repeat: no-repeat;
+				background-position: center center;
+			}
+		}
+
+		&--search {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "search.svg");
+			}
+		}
+
+		&--layers {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "layers.svg");
+			}
+		}
+
+		&--info {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "info.svg");
+			}
+		}
+
+		&--desktop-view-toggle--desktop {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "fullscreen.svg");
+			}
+		}
+
+		&--desktop-view-toggle--fullscreen {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "fullscreen-close.svg");
+			}
+		}
+
+		&--mobile-view-toggle--mapOnly {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "open-list.svg");
+			}
+		}
+
+		&--zoom--zoomIn {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "zoom-in.svg");
+			}
+		}
+
+		&--zoom--zoomOut {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "zoom-out.svg");
+			}
+		}
+
+		&--geo-location--active {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "geo-active.svg");
+			}
+		}
+
+		&--geo-location--inactive {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "geo-inactive.svg");
+			}
+		}
+
+		&--geo-location--error {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "geo-error.svg");
+			}
+		}
+
+		&--share-link {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "place-marker.svg");
+			}
+
+			.ms3-wrapper--mobile & {
+				display: none;
+			}
+		}
+
+		&--measure-distance {
+			&::before {
+				background-image: url(variables.$ms3-uiIconPath + "measure-distance.svg");
+			}
+		}
+
+		@include breakpoint.breakpoint(variables.$ms3-breakpoint-mobile) {
+			margin: 5px 7px;
+			width: 40px;
+			min-height: 40px;
+			background: rgba(255, 255, 255, 0.9);
+			border-radius: 20px;
+
+			&--desktop-view-toggle {
+				display: none;
+			}
+
+			@if (variables.$ms3-option-mapOverlayButtonsShowLabel) {
+				&--with-icon &__label {
+					@include visually-hidden.visually-hidden;
+				}
+			}
+		}
+
+		@include breakpoint.breakpoint(variables.$ms3-breakpoint-desktop) {
+			&--mobile-view-toggle {
+				display: none;
+			}
+		}
+
+		.ms3-wrapper--mobile &--mobile-view-toggle--mobile {
+			display: none;
+		}
+	}
+}
+
+// override for embedded mode
+.ms3-wrapper--embedded {
+	.ms3-map-overlay__button--mobile-view-toggle--mapOnly {
+		&::before {
+			background-image: url(variables.$ms3-uiIconPath + "fullscreen-close.svg");
+		}
+	}
+
+	.ms3-map-overlay__button--mobile-view-toggle--mobile {
+		display: block;
+
+		&::before {
+			background-position: 51% 65%;
+			background-image: url(variables.$ms3-uiIconPath + "fullscreen.svg");
+		}
+	}
+}

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

@@ -0,0 +1,13 @@
+@use "../variables";
+
+.ms3-map-row {
+	position: relative;
+	display: flex;
+	flex-grow: 1;
+	flex-direction: row;
+
+	.ms3-wrapper--mapOnly &,
+	.ms3-wrapper--fullscreen & {
+		height: auto;
+	}
+}