LiveAtlas/src/scss/leaflet/_controls.scss

/*!
 * Copyright 2021 James Lyne
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.leaflet-control {
	background-color: var(--background-base);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	margin: 0;
	box-sizing: border-box;
	overflow: visible;
	font-size: 1.5rem;

	a, button {
		@extend %button;
	}

	/* Avoid applying the base background colour twice, in case its semi-transparent */
	> a:not(:hover):not(:focus):not([aria-expanded=true]),
	> button:not(:hover):not(:focus):not([aria-expanded=true]) {
		background-color: transparent;
	}

	@media print {
		display: none !important;
	}
}

.leaflet-bar {
	display: flex;
	align-items: center;
	padding: 0;
	border: none;
	box-shadow: var(--box-shadow);

	a {
		border-radius: 0;
		border-bottom: 0.1rem solid var(--border-color);

		&:first-child {
			border-top-left-radius: var(--border-radius);
			border-top-right-radius: var(--border-radius);
		}

		&:last-child {
			border-bottom-left-radius: var(--border-radius);
			border-bottom-right-radius: var(--border-radius);
			border-bottom: none;
		}

		&.leaflet-disabled {
			background-color: var(--background-disabled);
			cursor: not-allowed;

			&:hover {
				color: var(--text-disabled);
				border-bottom-color: var(--border-color);
			}
		}

		&:hover {
			border-bottom-color: var(--border-color);
		}
	}

	@media print {
		display: none !important;
	}
}

.leaflet-control-button,
.leaflet-control-layers-toggle,
.leaflet-control-logo,
.leaflet-bar a {
	@extend %button;
	line-height: 3.5rem;
	width: var(--ui-button-size);
	height: var(--ui-button-size);
}

.leaflet-control-zoom {
	flex-shrink: 0;

	a {
		font-family: sans-serif; /* +/- look better */
	}
}

.leaflet-control-coordinates {
	display: flex;
	align-items: center;
	padding: 0.5rem 1.5rem;

	.value {
		line-height: 1;
		font-family: monospace;
		white-space: pre;
		font-size: 2rem;

		&[data-label]:before {
			content: attr(data-label);
			display: block;
			line-height: 1;
			margin-bottom: 0.5rem;
			font-size: 1.25rem;
			font-family: Raleway, sans-serif;;
		}

		& + .value {
			margin-left: 2rem;
		}
	}

	@media (max-width: 600px) {
		.region {
			display: none;
		}
	}

	@media (max-width: 480px), (max-height: 480px) {
		.value {
			font-size: 1.6rem;
		}
	}

	@media (max-width: 384px) {
		.chunk {
			display: none;
		}
	}
}

.leaflet-control-layers {
	width: auto;
	border: none;
	color: var(--text-base);
	position: relative;

	.leaflet-control-layers-list {
		@extend %panel;
		display: block;
		position: absolute;
		top: 0;
		left: calc(var(--ui-element-spacing) + var(--ui-button-size));
		overflow: auto;
		max-width: calc(100vw - 14rem);
		box-sizing: border-box;

		@media screen and (max-width: 400px) {
			max-width: calc(100vw - 13rem);
		}

		.leaflet-control-layers-overlays {
			width: 100%;
			max-width: 30rem;
		}

		.layer {
			cursor: pointer;
			padding: 0.8rem 0 0.7rem;

			&:first-child {
				margin-top: -0.4rem;
			}

			&:last-child {
				margin-bottom: -0.4rem;
			}
		}
	}
}

.leaflet-control-logo {
	flex-shrink: 0;

	a {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.leaflet-top, .leaflet-bottom,
.leaflet-left, .leaflet-right {
	display: flex;
}

.leaflet-left {
	padding-left: var(--ui-element-spacing);
}

.leaflet-right {
	padding-right: var(--ui-element-spacing);
}

.leaflet-top {
	padding-top: var(--ui-element-spacing);
	flex-direction: column;
	top: 0;
	bottom: calc((var(--ui-element-spacing) * 2) + var(--ui-button-size));
	align-items: flex-start;
	z-index: 1003;

	.leaflet-control {
		order: 2;
		min-width: var(--ui-button-size);
		margin-bottom: var(--ui-element-spacing);

		&:first-child {
			margin-top: 0;
		}
	}

	/* Always show below other controls */
	.leaflet-control-loading {
		order: 3;
	}

	.leaflet-bar {
		flex-direction: column;
	}

	.leaflet-control-logo {
		order: 1;
		margin-top: 0 !important;

		& + .leaflet-control-logo {
			margin-top: var(--ui-element-spacing) !important;
		}
	}

	.leaflet-control-bottom {
		margin-top: auto;

		&:last-child {
			margin-bottom: 0;
		}

		& ~ .leaflet-control-bottom {
			margin-top: 0;
		}
	}

	.leaflet-control-chat {
		order: 1000;
	}

	.leaflet-control-login {
		order: 900;
	}

	.leaflet-control-zoom {
		@media (max-width: 480px) and (pointer: coarse), (max-height: 480px) and (pointer: coarse), (max-height: 400px) {
			display: none;

			& + .leaflet-control {
				margin-top: 0;
			}
		}
	}
}

.leaflet-bottom {
	padding-bottom: var(--ui-element-spacing);
	align-items: stretch;
	z-index: 1002;

	.leaflet-control {
		order: 2;
	}

	/* Always show before other controls */
	.leaflet-control-link {
		order: 1;
	}

	&.leaflet-left .leaflet-control {
		margin-right: var(--ui-element-spacing);
	}
}

.leaflet-center {
	left: 0;
	right: 0;
	justify-content: center;
	flex-direction: row;
	z-index: 1001;

	.leaflet-control {
		margin: 0;
	}
}

.leaflet-control-loading {
	cursor: wait;
	animation: fade 0.3s linear;
	animation-fill-mode: forwards;

	&:hover, &:focus {
		background-color: var(--background-base);
	}

	&[hidden] {
		display: none;
	}
}