publik-base-theme/static/isere-cd38/_custom.scss

//
// Typo
//

html {
	@media ($min-desktop-viewport) {
		font-size: 1.125em;
	}
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	font-family: $raleway;
	font-weight: bold;
}
h1, .h1 { font-size: $fz-h1; }
h2, .h2 { font-size: $fz-h2; }
h3, .h3 { font-size: $fz-h3; }
h4, .h4 { font-size: $fz-h4; }

a:hover {
		color: $font-color;
}

.section-title {
	font-size: $fz-h2;
	font-family: $raleway;
	text-transform: uppercase;
	color: $cyan-dark;
	background: transparent;
	padding: 0;
	margin-top: 0;
	@media ($max-mobile-viewport) {
		font-weight: normal;
		font-size: $fz-h4;
	}
}

.underlined-title {
	text-transform: none;
	font-family: $raleway;
	font-size: $fz-h2;
	color: $cyan-dark;
	padding: 0;
	background: transparent;
	border-bottom: 2px solid $cyan-dark;
	padding-bottom: .33em;
}

.h2-txt {
	@extend .underlined-title;
	margin-bottom: 0.75em !important;
	@media (max-width: $very-small-limit) {
		font-size: $fz-h3;
		font-weight: normal;
	}
}
.h3-txt {
	color: $cyan-dark;
	border-bottom: none !important;
	@media (max-width: $very-small-limit) {
		font-weight: normal;
	}
}

//
//	Forms
//
%button {
	transition: all 0.2s ease;
	&:hover {
		transform: scale(1.01);
	}
}
%cancel-button {
	background-color: $gray-dark;
	&:hover {
		background-color: $gray-dark;
	}
}

// notifications
@mixin custom-notif($color, $symbol, $bgcolor) {
	background: linear-gradient(to right,
		$color 3rem,
		$bgcolor 3.01em
	) !important;
	color: black !important;
	&::before {
		display: block;
		width: 3rem;
		left: 0;
		text-align: center;
		content: $symbol;
		color: white;
		font-size: $fz-h2;
		font-family: $raleway;
		font-weight: 700;
	}
}

#messages li.error,
.errornotice,
.pk-error {
	@include custom-notif(
		$notification_error_color,
		"X",
		adjust-color($notification_error_color, $lightness: 52%, $saturation: -60%)
	);
}

#messages li.warning,
.warningnotice,
.pk-attention {
	@include custom-notif(
		$notification_warning_color,
		"!",
		adjust-color($notification_warning_color, $lightness: 35%, $saturation: -20%)
	);
}

#messages li.success,
.successnotice,
#messages li.info,
.infonotice,
.pk-information {
	@include custom-notif(
		$notification_info_color,
		"i",
		adjust-color($notification_info_color, $lightness: 60%, $saturation: -20%)
	);
}

//
// LAYOUT
//

// 3cols layout
.theme-3cols-layout {
	@media ($min-desktop-viewport) {
		display: flex;
		margin-left: -#{$columns-gutter / 2};
		margin-right: -#{$columns-gutter / 2};
		> div {
			flex: 1 1 0;
			> .cell {
				margin-left: #{$columns-gutter / 2} !important;
				margin-right: #{$columns-gutter / 2} !important;
			}
		}
	}
	@media ($max-mobile-viewport) {
		#center div.cell {
			margin-left: 0;
			margin-right: 0;
		}
	}
}
// homepage
.page-template-homepage {
	#content {
		flex-wrap: wrap;
		#columns-wrapper {
			flex: 1 0 calc(100% - #{$sidebar-max-width});
		}
		.toutes-demarches {
			flex: 0 0 100%;
			order: 2;
			@media ($max-mobile-viewport) {
				padding-left: 1rem;
				padding-right: 1rem;
			}
		}
	}
}


//
// HEADER
//
div#header {
	padding: 0;
	padding-left: 100px; // isère widget width;
	padding-right: $nav-menu-side + 0.5rem;
	@media (min-width: $nav-mobile-limit + 0.001) {
		padding-right: $yellow-border-mobile;
	}
	@media ($min-desktop-viewport) {
		padding-left: #{$yellow-border-desktop + $main-padding-desktop};
		padding-right: $yellow-border-desktop;
	}
}
#top {
	display: flex;
	height: $header-height-mobile;
	@media (min-width: $nav-mobile-limit + 0.001) {
		height: $header-height-desktop;
	}
}
#logo.has-logo {
	flex-grow: 1;
	padding: 0;
	background: none;
	padding-top: 1rem;
	padding-bottom: 1rem;

	a {
		display: block;
		height: 100%;
		min-width: 80px;
		margin-right: 1rem;
	}
}
// user links
#toplinks {
	position: static;
	border-radius: 0;
	box-shadow: none;
	border: none;
	padding: 0;
	font-family: $raleway;
	font-size: $fz-small;
	font-weight: bold;
	align-self: center;
	a {
		display: block;
		&:not(:hover) {
			text-decoration: none;
		}
	}
	@media (min-width: $nav-mobile-limit + 0.001) {
		align-self: flex-start;
		background-color: $gold;
		padding: 0 1em;
		font-size: 1rem;
		line-height: 2em;
		word-spacing: 1em;
		a {
			display: inline-block;
			color: black;
		}
	}
}


//
// NAV
//
#nav {
	margin-top: 0;
	@media (min-width: $nav-mobile-limit + 0.001) {
		padding: 3px #{$yellow-border-mobile + $main-padding-mobile};
	}
	@media ($min-desktop-viewport) {
		padding: 3px #{$yellow-border-desktop + $main-padding-desktop};
	}
}
.gru-nav > ul {
	margin: 0;
	font-size: $fz-h4;
}
// Nav mobile (hamburger in right)
@media (max-width: $nav-mobile-limit) {
	div.gru-nav-wrapper {
		margin-top: 0;
	}
	div.gru-nav {
		position: relative;
		.gru-nav-button {
			margin-left: 0;
			// align button to toplinks
			position: absolute;
			top: calc(
				( (#{$header-height-mobile} - #{$nav-menu-side})
					/ 2 + #{$nav-menu-side}
				) * -1
			) ;
			right: 0;
		}
		ul li a {
			padding: 1rem !important;
			text-align: center;
		}
	}
}

//
// Page picture
//
body.has-picture .site-nav::after {
	@extend .h1;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	top: 0;
	padding: $yellow-border-desktop + $main-padding-desktop;
	white-space: pre-wrap;

    @media (max-width: $nav-mobile-limit) {
      content: none !important;
    }
}


//
// MAIN
//
main {
	background-color: $gold;
}
div#main-content-wrapper {
	background-color: white;
	border: solid $gold;
	border-width: 0 $yellow-border-mobile;
	@media ($min-desktop-viewport) {
		border-width: 0 $yellow-border-desktop;
		padding: 3rem;
	}
}
// Sidebar
.gru-content #sidebar {
	@media ($max-mobile-viewport) {
		order: 0;
		background-color: $gray-light;
		margin-left: -#{$yellow-border-mobile};
		margin-right: -#{$yellow-border-mobile};
		max-width: none;
		padding: #{$yellow-border-mobile + $main-padding-mobile};
	}
}
// columns
#columns-wrapper {
	@media ($max-mobile-viewport) {
		padding: $main-padding-mobile;
	}
}

//
// CELLS
//
// sidebar cells
#sidebar {
	div.cell {
		border: none;
		h2:first-child {
			@extend .section-title;
			& ~ * {
				padding: 0;
			}
		}
	}
}
// columns cells
.gru-content .cell {
	&.wcs-forms-of-category-cell, &.link-list-cell {
		// cell picture to left of title
		&.has-asset-picture {
			$image-width: 3rem;
			> div {
				display: flex;
				flex-wrap: wrap;
				position: relative;
				> h2:first-child {
					flex: 1 0 calc(100% - #{$image-width});
					margin-left: -#{$image-width};
					padding-left: calc(#{$image-width} + .5rem);
					+ picture {
						display: block;
						order: -1;
						flex: 0 0 auto;
						align-self: center;
						z-index: 1;
						img {
							width: $image-width;
						}
						~ * {
							flex: 0 0 100%;
						}
					}
				}
			}
		}
	}
	&.foldable {
		> div > h2:first-child {
			&::after {
				content: "\f068";	// minus
				font-weight: normal;
				font-size: .6em;
				background-color: white;
				color: $cyan-dark;
				border-radius: 50%;
				width: 1em;
				height: 1em;
				line-height: 1em;
				text-align: center;
				box-sizing: content-box;
				padding: 0.3em;
				bottom: 0;
				top: 0;
				margin-top: auto;
				margin-bottom: auto;
			}
		}
		&.folded > div > h2:first-child {
			&::after {
				content: "\f067";  // plus
			}
		}
	}
	// Text cell
	&.text-cell {
		border: none;
		> div > h2:first-child {
			@extend .h2-txt;
			margin: 0.7rem 1rem;
		}
		h2 {
			@extend .h2-txt;
			margin: 0.7rem 1rem;
		}
		h3 {
			@extend .h3-txt;
		}
	}
	// current forms & draft cells
	.list-of-forms {
		ul > li {
			> a {
				&:hover {
					background-color: $gold;

					.form-status::after {
						content: "→";
						margin-left: .33em;
						font-size: $fz-h4;
						line-height: 0;
						// font-family: fontAwesome;
					}
				}
				@media (max-width: $very-small-limit) {
					padding: .33em;
					.form-status {
						flex: 1 0 100%;
						border-top: 1px solid $gray;
						padding-top: .33em;
						margin-top: .33em;
						font-size: $fz-small;
					}
					&:hover {
						.form-status {
							border-color: $gray-dark;
						}
					}
				}
			}
			&.done > a {
				background-color: $gray-light;
				&:hover {
					background-color: $gray;
				}
			}
		}
	}
}
// "A la une" form cell
.cell.a-la-une.wcs-form-cell {
	border: none;
	> div {
		@media (max-width: $very-small-limit) {
			display: flex;
		}
		&:hover {
			background-color: $cyan-xlight;
			color: black;
			a {
				color: inherit;
			}
		}
		.a-la-une--image-link {
			display: block;
			@media (max-width: $very-small-limit) {
				flex: 0 0 50%;
				max-width: 250px;
				display: flex;
			}
			@media (min-width: $very-small-limit + 1) {
				display: block;
			}
			picture {
				position: relative;
				width: 100%;
				@media (min-width: $very-small-limit + 1) {
					display: block;
					height: 0;
					padding-top: 50%;
				}
			}
			img {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		[class^="wcs-form-"] {
			flex: 1 1 auto;
			display: flex;
			a {
				width: 100%;
				padding: 1rem;
				@media ($max-mobile-viewport) {
					display: flex;
					align-items: center;
				}
				@media ($min-desktop-viewport) {
					text-align: center;
				}
			}
		}
	}
}

//
// WCS
//
.wcs-steps {
	@media ($max-mobile-viewport) {
		border: 1px solid $cyan-dark;
		padding: $wcs-steps-spacing;
	}
}

.form-content--title {
	@extend .h2-txt;
}

div#rub_service {
	h2 {
		@extend .h2-txt;
		@media ($min-desktop-viewport) {
			margin-left: 0.5rem;
			margin-right: 0.5rem;
		}
	}
	h3 {
		@extend .h3-txt;
	}
	form.quixote {
		@media ($max-mobile-viewport) {
			padding: 0;
		}
		&:not(#wf-actions) .buttons {
			margin-left: -0.75rem;
			margin-right: -0.75rem;
			.SubmitWidget {
				flex-grow: 1;
				max-width: 12.5em;
				padding-left: 0.75rem;
				padding-right: 0.75rem;
				@media (max-width: $very-small-limit) {
					flex: 1 1 50%;
					max-width: none;
				}
				> .content, button {
					display: block;
					width: 100%;
					margin: 0;
				}
			}
			.submit-button {
				flex-grow: 2;
				max-width: 25em;
				@media (max-width: $very-small-limit) {
					flex: 1 1 100%;
					max-width: none;
				}
			}
		}
	}
}

// ENS CALENDAR WIDGET
.ens-calendar {
	$max-btn-size: 4rem;
	display: flex;
	max-width: $max-btn-size * 7;
	position: relative;

	&, &--month {
		.is-hidden {
			display: none !important;
		}
	}

	table, thead, tbody {
		display: block;
	}

	&--month {
		flex: 0 0 100%;
	}

	&--head {
		min-height: 3rem;
		padding-left: 3rem;
		padding-right: 3rem;
		text-transform: uppercase;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&--weekday {
		text-transform: uppercase;
		font-weight: 500;
	}

	&--weekdays,
	&--week {
		display: flex;
	}
	&--weekday,
	&--day {
		flex: 1 1 0;
		padding: 0.15rem;
	}
	div.gru-content &--day-btn {
		margin: 0;
		display: block;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		background-color: white;
		border: 1px solid;

		&[data-status=open] {
			color: green;
			&:hover, &.on {
				background-color: green;
				color: white;
			}
		}
		&[data-status=partially-open] {
			color: #D66909;
			&:hover, &.on {
				background-color: #D66909;
				color: white;
			}
		}
		&[data-status=close] {
			color: red;
			background-color: white;
			border: 1px solid;
			&:hover, &.on {
				background-color: red;
				color: white;
			}
		}
	}
	div.gru-content &--next, div.gru-content &--prev {
		position: absolute;
		top: 0;
		margin: 0;
	}
	&--next {
		right: 0;
	}
	&--prev {
		left: 0;
	}
}


//
// FOOTER
//
#footer-wrapper {
	margin-top: 0;
}
#footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-left: $yellow-border-mobile;
	padding-right: $yellow-border-mobile;
	@media ($min-desktop-viewport) {
		padding-left: $yellow-border-desktop;
		padding-right: $yellow-border-desktop;
	}

	a {
		color: white;
		text-decoration: none;

		border: 0 dotted $footer-color;
		border-bottom-width: 1px;
		&:hover {
			color: white;
			background: none !important;
			border-style: solid;
		}
	}
	> * {
		margin: 0 1rem;
		@media (max-width: $very-small-limit) {
			flex: 0 0 12em;
		}
	}
	.footer-logo {
		@media ($max-mobile-viewport) {
			flex: 1 0 100%;
			text-align: center;
			img {
				max-width: 12em;
				height: auto;
			}
		}
	}
	.link-list-cell {
		line-height: 1.4;
		ul {
			margin: 0.7em 1rem;
		}
		li {
			border: none !important;
		}
		a {
			padding: 0;
			display: inline-block;
		}
	}
}

//
// Isere Widget
//
.isereMegaMenu {
	position: absolute;
	top: 0;
	left: 0;
}