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

#page.place div.airquality div.cell.map {
	margin-top: 0;
	height: 600px;
	@media screen and (max-width: $desktop-limit) {
		height: 300px;
	}
	div.combo-cell-map.leaflet-container {
		height: 600px !important;
		@media screen and (max-width: $desktop-limit) {
			height: 300px !important;
		}
	}
}

#page.place div.airquality {
	div.air2go-off {
		margin: 3rem auto 1rem auto;
		max-width: 25rem;
		border: 2px solid $red;
		p {
			padding: 1rem;
			text-align: center;
		}
	}
	div.tables {
		h3 {
			text-align: center;
		}
		table {
			margin: 0 auto;
		}
		table.day-indices {
			td:first-child,
			td:last-child {
				width: 10rem;
				text-transform: uppercase;
				cursor: pointer;
				@media screen and (max-width: $desktop-limit) {
					font-size: 80%;
				}
			}
			td:first-child {
				padding-right: 1rem;
				text-align: right;
			}
			td:last-child {
				padding-left: 1rem;
			}
		}
		table.indices {
			td {
				width: 10rem;
			}
			td:first-child {
				text-align: right;
			}
			span {
				display: inline-block;
				height: 1rem;
				border: 1px solid #aaa;
				margin-right: 1rem;
				position: relative;
				top: 4px;
				background: linear-gradient(to right, #5cf731 0px, #f2fc2f 50px, #f7322e 100px);
			}
		}
	}
	#airquality-search {
		display: flex;
		position: absolute;
		top: 10px;
		z-index: 10000;
		width: 600px;
		left: calc(#{$width} / 2 - 300px);
		@media screen and (max-width: $desktop-limit) {
			left: 1rem;
			width: calc(100% - 2rem);
		}
		input {
			flex: 1;
			margin: 0;
		}
		input[disabled] {
			cursor: wait;
		}
		button,
		button:hover {
			margin: 0;
			color: transparent;
			background: $red url(img/loupe-white.png) center center no-repeat;
		}
	}
}

div.tile.airquality {
	a.address-name {
		display: block;
		color: $font-color;
		text-transform: uppercase;
		margin: 0 0 0.5rem 0;
		white-space: pre;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	div.air2go {
		margin: 1rem auto;
		width: 120px;
		height: 120px;
		border-radius: 120px;
		@media screen and (max-width: $desktop-limit) {
			width: 80px;
			height: 80px;
		}
		border: 10px solid transparent;
		text-align: center;
		span.valeur {
			display: block;
			font-size: 40px;
			font-weight: bold;
			padding-top: 20px;
			@media screen and (max-width: $desktop-limit) {
				font-size: 26px;
				padding-top: 13px;
			}
		}
		span.qualif {
			display: block;
			font-size: 24px;
			@media screen and (max-width: $desktop-limit) {
				font-size: 18px;
			}
		}
		&.tres-mauvais {
			span.valeur {
				position: relative;
				top: -10px;
			}
			span.qualif {
				position: relative;
				top: -15px;
				line-height: 100%;
			}
		}
	}
	span.air2go.valeur {
		font-weight: bold;
		font-size: 24px;
		padding-top: 0px;
		border: 5px solid white;
		height: 40px;
		display: inline-block;
		border-radius: 40px;
		padding: 5px;
		width: 40px;
		text-align: center;
		margin-bottom: 0.5rem;
		& + span.qualif {
			display: inline-block;
			padding-left: 0.5rem;
			text-transform: uppercase;
		}
	}
	div.explanation {
		padding: 2rem 4rem;
		h3 {
		}
		> div {
			column-count: 2;
			column-gap: 4rem;
		}
		@media screen and (max-width: $desktop-limit) {
			padding: 1rem;
			> div {
				column-count: 1;
			}
		}
	}
	div.cell.map {
		position: relative;
	}
}

div.minitiles {
	position: absolute;
	pointer-events: none;
	bottom: 0rem;
	left: 1rem;
	right: 3rem;
	z-index: 1000;
	div.cell {
		pointer-events: all;
		position: relative;
		width: 30%;
		display: inline-block;
		@media screen and (max-width: $desktop-limit) {
			width: 100%;
		}
	}
	div.tile {
		div.tile-head,
		div.tile-picture,
		div.tile-actions {
			display: none;
		}
		div.tile-content {
			padding: 1rem;
		}
	}
	@media screen and (max-width: $desktop-limit) {
		// only display a single minitile on mobile
		div.cell {
			display: none;
		}
		div#cell-map-center {
			display: inline-block;
		}
	}
}