publik-base-theme/static/toodego/_maps.scss

@import 'data_uris';

@keyframes marker_selection_animation {
	0% { font-size: 100%; }
	50% { font-size: 110%; }
	100% { font-size: 100%; }
}

.gru-content .leaflet-touch .leaflet-bar {
	border: none;
	a {
		border-radius: 0;
	}
}

.leaflet-marker-icon.loading {
	animation-name: marker_selection_animation;
	animation-duration: 400ms;
	animation-iteration-count: 10;
	animation-timing-function: ease;
}

div.leaflet-div-icon span.layer-aire-de-covoiturage,
div.leaflet-div-icon span.layer-autopartage,
div.leaflet-div-icon span.layer-bibliotheque,
div.leaflet-div-icon span.layer-borne-fontaine,
div.leaflet-div-icon span.layer-decheterie,
div.leaflet-div-icon span.layer-donnerie,
div.leaflet-div-icon span.layer-evenement-routier,
div.leaflet-div-icon span.layer-fontaine-eau-potable,
div.leaflet-div-icon span.layer-fontaine-ornementale,
div.leaflet-div-icon span.layer-mairie,
div.leaflet-div-icon span.layer-mdr,
div.leaflet-div-icon span.layer-parc-velo,
div.leaflet-div-icon span.layer-parkingtr,
div.leaflet-div-icon span.layer-piscine,
div.leaflet-div-icon span.layer-stationnement-pmr,
div.leaflet-div-icon span.layer-taxi,
div.leaflet-div-icon span.layer-tcl,
div.leaflet-div-icon span.layer-toilette,
div.leaflet-div-icon span.layer-silo-a-verre,
div.leaflet-div-icon span.layer-velov {
	border: 0;
	box-shadow: none;
	transform: none;
	border-radius: 0;
	background-color: transparent !important;
	background-size: auto 2.3em;
	background: transparent top left no-repeat;
	background-position: top right;
	top: -2em;
}

div.leaflet-div-icon span.layer-autopartage {
	background-image: url($data_uri_ic_Autopartage);
}

div.leaflet-div-icon span.layer-aire-de-covoiturage {
	background-image: url($data_uri_ic_Aire_covoit);
}

div.leaflet-div-icon span.layer-bibliotheque {
	background-image: url($data_uri_ic_Bibliotheque);
}

div.leaflet-div-icon span.layer-decheterie {
	background-image: url($data_uri_ic_Decheterie);
}

div.leaflet-div-icon span.layer-donnerie {
	background-image: url($data_uri_ic_Donnerie);
}

div.leaflet-div-icon span.layer-evenement-routier {
	background-image: url($data_uri_ic_Evenement_routier);
}

div.leaflet-div-icon span.layer-mairie {
	background-image: url($data_uri_ic_Mairie);
}

div.leaflet-div-icon span.layer-mdr {
	background-image: url($data_uri_ic_MDM);
}

div.leaflet-div-icon span.layer-parc-velo {
	background-image: url($data_uri_ic_Stationnement_velo);
}

div.leaflet-div-icon span.layer-parkingtr {
	background-image: url($data_uri_ic_Parking);
}

div.leaflet-div-icon span.layer-piscine {
	background-image: url($data_uri_ic_Piscine);
}

div.leaflet-div-icon span.layer-stationnement-pmr {
	background-image: url($data_uri_ic_Stationnement_PMR);
}

div.leaflet-div-icon span.layer-taxi {
	background-image: url($data_uri_ic_Taxis);
}

div.leaflet-div-icon span.layer-tcl {
	background-image: url($data_uri_ic_TCL);
}

div.leaflet-div-icon span.layer-toilette {
	background-image: url($data_uri_ic_Toilette);
}

div.leaflet-div-icon span.layer-velov {
	background-image: url($data_uri_ic_Velo);
}

div.leaflet-div-icon span.layer-silo-a-verre {
	background-image: url($data_uri_ic_Silos_verre);
}

div.leaflet-div-icon span.layer-borne-fontaine {
	background-image: url($data_uri_ic_BorneFontaine);
}

div.leaflet-div-icon span.layer-fontaine-eau-potable {
	background-image: url($data_uri_ic_FontaineEauPotable);
}

div.leaflet-div-icon span.layer-fontaine-ornementale {
	background-image: url($data_uri_ic_FontaineOrnementale);
}

div.location-icon {
	background: $red;
	border: 1px solid white;
	box-shadow: 0 0 2px 10px transparentize($red, 0.5);
}

div.cell.map {
	position: relative;
	// loader inspired by https://codepen.io/jczimm/pen/vEBpoL
	.loader {
		display: none;
		position: absolute;
		top: 200px;
		width: 100px;
		left: calc(50% - 50px);
		margin: 0 auto;
		z-index: 1000;
		&:before {
			content: '';
			display: block;
			padding-top: 100%;
		}
	}
	&.loading {
		.loader {
			display: block;
		}
		.leaflet-container {
			opacity: 0.4;
		}
		&::after {
			content: none;
		}
	}

	.circular {
		animation: rotate 2s linear infinite;
		height: 100%;
		transform-origin: center center;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.path {
		stroke: $red;
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		animation: dash 1.5s ease-in-out infinite;
		stroke-linecap: round;
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35px;
		}
		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124px;
		}
	}
}

div.qommon-map,
div.combo-cell-map {
	&::before {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 100000;
		font-size: 80%;
		background: rgba(255, 255, 255, 0.5);
		padding: 2px 0.5rem;
	}
	&.waiting-for-geolocation::before {
		content: "Géolocalisation en cours…";
	}
	&.geolocation-error::before {
		content: "Géolocalisation en cours… échec.";
	}
}

div.MapWidget.template-nearby-list {
	#nearby-list {
		margin: 0 5rem;
		@media screen and (max-width: $desktop-limit) {
			margin: 0rem 1rem;
		}
	}
	#nearby-list > div {
		position: relative;
		min-height: 3em;
		border: 2px solid #ccc;
		border-radius: 1ex;
		padding: 1ex;
		padding-left: 3em;
		margin-bottom: 1em;
		.marker-counter {
			background: $red;
			color: white;
			display: inline-block;
			width: 2rem;
			height: 2rem;
			border-radius: 100%;
			text-align: center;
			font-weight: bold;
			line-height: 2em;
			position: absolute;
			left: 1ex;
		}
		.datetime,
		.type-probleme,
		.message {
			display: block;
			margin-right: 75px;  // +1 button
		}
		.datetime {
			color: #666;
			font-size: 80%;
		}
		a.plus1 {
			position: absolute;
			top: 1rem;
			right: 1rem;
		}
	}
	div.leaflet-div-icon {
		border: none;
		background: transparent;
		a {
			display: block;
			background: $red;
			color: white;
			text-align: center;
			width: 1rem;
			height: 1rem;
			border-radius: 100%;
			transition: all ease 0.3s;
			&:hover {
				transform: scale(1.5);
			}
		}
	}
}