Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-elements   php

Repository URL to install this package:

Version: 2.5.6 

/ scss / addons / _jet-weather.scss

.jet-weather {
	&__title {
		padding: 0;
		margin: 0 0 15px;
	}

	&__current {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&__current-temp,
	&__current-icon-box {
		flex: 0 1 auto;
		max-width: 50%;
	}

	&__current-temp {
		font-size: 4em;
	}

	&__current-icon-box {
		text-align: center;
	}

	&__current-desc {
		margin-top: 10px;
	}

	&__current-day,
	&__forecast-day {
		font-weight: 700;
	}

	&__details,
	&__forecast {
		font-size: 14px;
		line-height: 1.5;
	}

	&__details {
		display:-ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 5px;
		row-gap: 5px;
		align-items: center;
		margin-top: 10px;
	}

	&__details-item {
		display: flex;
		align-items: center;

		&:first-child {
			-ms-grid-column: 1;
			-ms-grid-column-span: 2;
			grid-column-start: 1;
			grid-column-end: 3;
		}

		&:nth-child(2) {
			-ms-grid-column: 3;
		}

		&:nth-child(3) {
			-ms-grid-column: 1;
			-ms-grid-row: 2;
		}

		&:nth-child(4) {
			-ms-grid-column: 2;
			-ms-grid-row: 2;
		}

		&:nth-child(5) {
			-ms-grid-column: 3;
			-ms-grid-row: 2;
		}

		&:nth-child(6) {
			-ms-grid-column: 1;
			-ms-grid-row: 3;
		}

		&:nth-child(7) {
			-ms-grid-column: 2;
			-ms-grid-row: 3;
		}

		&:nth-child(8) {
			-ms-grid-column: 3;
			-ms-grid-row: 3;
		}

		.jet-weather-icon {
			margin-right: 5px;
		}
	}

	&__current-sunrise,
	&__current-sunset {
		text-transform: uppercase;
	}

	&__forecast {
		margin-top: 15px;
	}

	&__forecast-item {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}

	&__forecast-day,
	&__forecast-icon,
	&__forecast-max-temp,
	&__forecast-min-temp {
		width: 25%;
	}

	&__forecast-icon,
	&__forecast-max-temp,
	&__forecast-min-temp {
		text-align: center;
	}

	&-icon {
		line-height: 1;

		.jet-weather__current-icon & {
			font-size: 60px;
		}

		.jet-weather__details-item &,
		.jet-weather__forecast-icon & {
			font-size: 1.5em;
		}

		svg {
			width: auto;
			max-width: 1.5em;
			height: 1em;
			vertical-align: top;
		}
	}

	&-notice {
		font-style: italic;
	}
}