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.cell.map.empty-cell {
		display: block;
	}
	div.tables {
		h3 {
			margin: 3em 0 0 0;
			text-align: center;
		}
		table {
			margin: 1em auto;
		}
		.indice-logo {
			text-align: center;
			font-weight: bold;
			margin-top: 1em;
			img {
				height: 100px;
				margin: 0 auto;
				display: block;
			}
		}
		table.day-indices {
			td:first-child,
			td:last-child {
				// day navigation
				width: 10rem;
				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 {
			th, td {
				width: 5rem;
				font-weight: normal;
				text-align: center;
			}
			td {
				font-weight: bold;
			}
			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.atmo-reco {
		display: flex;
		justify-content: space-around;
		@media screen and (max-width: $desktop-limit) {
			flex-direction: column;
		}
		margin: 1em;
		div {
			margin: 1em;
			flex: 1;
			h4 {
				margin-top: 0.5em;
				text-align: center;
			}
			img {
				display: block;
				margin: auto;
			}
		}
	}

	p.plus-atmo {
		text-align: right;
		margin-right: 2em;
		a {
			color: black;
			text-decoration: underline;
		}
	}
}

div.tile.airquality {
	a.address-name {
		display: block;
		color: $font-color;
		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: 2.5rem;
			font-weight: bold;
			padding-top: 20px;
			@media screen and (max-width: $desktop-limit) {
				font-size: 1.625rem;
				padding-top: 13px;
			}
		}
		span.qualif {
			display: block;
			font-size: 1.5rem;
			@media screen and (max-width: $desktop-limit) {
				font-size: 1.125rem;
			}
		}
		&.tres-mauvais {
			span.valeur {
				position: relative;
				top: -10px;
			}
			span.qualif {
				position: relative;
				top: -15px;
				line-height: 100%;
			}
		}
	}
	span.air2go.valeur {
		box-sizing: content-box;
		font-weight: bold;
		font-size: 1.5rem;
		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.vigilance {
		padding: 0rem 4rem;
		h4 {
			margin: 0;
			text-align: center;
			color: $red;
		}
	}
	p.vigilance-pollution {
		color: $red;
	}
	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;
	}
	.tile-indice {
		display: flex;
		align-items: center;
		font-weight: bold;
		img {
			height: 30px;
			margin-right: 0.5em;
		}
	}
}

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%;
		}
		margin-right: 1em;
	}
	div.tile {
		p.vigilance-pollution,
		div.tile-picture,
		div.tile-actions {
			display: none;
		}
		div.tile-content {
			padding: 1rem;
			padding-top: 0;
		}
		div.tile-head {
			h2 {
				a { color: black; }
				text-align: left;
				padding-bottom: 0;
			}
		}
	}
	@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;
		}
	}
}