LiveAtlas/src/scss/leaflet/_controls.scss

/*!
 * Copyright 2020 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;
	}

	@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);

		&.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-touch {
	.leaflet-bar, .leaflet-control-layers {
		border: none;
	}

	.leaflet-control-layers-toggle {
		background-image: none;
		width: 5rem;
		height: 5rem;
	}

	.leaflet-top {
		.leaflet-bar a {
			height: 5rem;
			width: 5rem;
			line-height: 5rem;

			&:first-child {
				border-top-left-radius: 1rem;
				border-top-right-radius: 1rem;
			}

			&:last-child {
				border-bottom-left-radius: 1rem;
				border-bottom-right-radius: 1rem;
			}
		}
	}
}

.leaflet-control-link,
.leaflet-control-chat,
.leaflet-control-loading,
.leaflet-control-layers-toggle {
	@extend %button;
	width: 5rem;
	height: 5rem;
}

.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: 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: 6rem;
		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;
		}
	}
}

.leaflet-control-logo {
	width: 5rem;
	height: 5rem;
	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: 1rem;

	.leaflet-control {
		margin: 0;
	}

	@media (max-width: 400px), (max-height: 480px) {
		padding-left: 0.5rem;
	}
}

.leaflet-right {
	padding-right: 1rem;

	.leaflet-control {
		margin: 0;
	}

	@media (max-width: 400px), (max-height: 480px) {
		padding-right: 0.5rem;
	}
}

.leaflet-top {
	padding-top: 1rem;
	flex-direction: column;
	top: 0;
	bottom: 7rem;
	align-items: flex-start;
	z-index: 1003;

	.leaflet-control {
		order: 2;
		min-width: 5rem;
		margin-bottom: 1rem;

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

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

	.leaflet-bar {
		flex-direction: column;
		box-shadow: var(--box-shadow);

		a {
			width: 5rem;
			height: 5rem;
			line-height: 5rem;
		}
	}

	.leaflet-control-layers {
		box-shadow: var(--box-shadow);
	}

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

		& + .leaflet-control-logo {
			margin-top: 1rem !important;
		}
	}

	.leaflet-control-chat {
		margin-top: auto;
		order: 1000;
		margin-bottom: 0;
	}

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

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

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

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

	@media (max-width: 400px), (max-height: 480px) {
		padding-top: 0.5rem;
		bottom: 6.5rem;
	}
}

.leaflet-bottom {
	padding-bottom: 1rem;
	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: 1rem;
	}

	@media (max-width: 400px), (max-height: 480px) {
		padding-bottom: 0.5rem;
	}
}

.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, &:active {
		background-color: var(--background-base);
	}

	@include focus {
		background-color: var(--background-base);
	}

	&[hidden] {
		display: none;
	}

	svg {
		animation: spin 1s linear infinite;
	}
}