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: $global-background;
	border-radius: $global-border-radius;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 1.5rem;

	a, button {
		@extend %button;
	}
}

.leaflet-bar {
	display: flex;
	align-items: center;
	padding: 0;
	border: none;

	a {
		border-radius: 0;
		border-bottom: 0.1rem solid $global-border-color;

		&.leaflet-disabled {
			background-color: $global-disabled-background;
			cursor: not-allowed;

			&:hover {
				color: $global-disabled-text-color;
				border-bottom-color: $global-border-color;
			}
		}
	}
}

.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: 37.5rem) {
		.region {
			display: none;
		}
	}

	@media (max-width: 24rem) {
		.chunk {
			display: none;
		}
	}
}

.leaflet-control-layers {
	width: auto;
	border: none;
	color: $global-text-color;

	&.leaflet-control-layers-expanded {
		padding: 0;
	}

	.leaflet-control-layers-list {
		padding: 0.7rem 1.5rem;
		height: 100%;
    	box-sizing: border-box;
		overflow: auto;

		.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: 25rem), (max-height: 30rem) {
		padding-left: 0.5rem;
	}
}

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

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

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

	.leaflet-bar {
		flex-direction: column;

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

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

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

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

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

		@media (max-width: 30rem) and (pointer: coarse), (max-height: 30rem) and (pointer: coarse), (max-height: 25rem) {
			display: none;

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

	@media (max-width: 25rem), (max-height: 30rem) {
		padding-top: 0.5rem;
		bottom: 6.5rem;
	}
}

.leaflet-bottom {
	padding-bottom: 1rem;
	align-items: stretch;

	&.leaflet-left .leaflet-control + .leaflet-control {
		margin-left: 1rem;
	}

	@media (max-width: 25rem), (max-height: 30rem) {
		padding-bottom: 0.5rem;
	}
}

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

	.leaflet-control {
		margin: 0;
	}
}

.leaflet-control-loading {
	cursor: wait;
	animation: fade 0.3s linear;
	animation-fill-mode: forwards;
	
	&:focus, &:hover, &:active {
		background-color: $global-background;
	}

	&[hidden] {
		display: none;
	}

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