publik-base-theme/static/amiens-metropole/_forms.scss

%input-style {
	margin: $input-form-margin;
	border-radius: $input-border-radius;
	max-width: 100%;
	padding: 8px 10px;
	vertical-align: sub;
	border: 1px solid black;
	outline: medium none;
}
// Generic WCS form placeholder
%wcs-form {
	h1, h2, h3 {
		background-color: white;
		color: $title-color;
		font-size: 1.8em;
		left: auto;
		text-align: center;
		text-transform: uppercase;
		top: auto;
		width: auto;
	}

	h3 {
		font-size: 1.6em;
	}

	form {
		text-align: center;

		// default class for WCS pages
		&.quixote {
			text-align: left;
		}

		input, textarea {
			@extend %input-style;

			@media screen and ($max-mobile-viewport) {
				max-width: 100%;
			}

		}

		button {
			background-color: $title-color;
			border-radius: $input-border-radius;
			color: white;
			margin-right: 0;
			text-transform: uppercase;

			&[name=submit] {
				font-weight: bold;
			}

			&.cancel {
				background-color: $content-background-color;
				color: $title-color;
			}

			&.previous {
				background-color: $content-background-color;
				color: black;
			}
		}
	}
}

// Generic Form block
%default-block {
	h1, h2, h3, strong > a {
		padding-top: 50px;
		background: none;
		text-align: center;

		&::after {
			content: ' ';
			background: url('img/icon-suivi.png') no-repeat;
			width: 20px;
			height: 24px;
			position: absolute;
			bottom: -1em;
			left: 50%;
			background-size: contain;
		}
	}

	form, ul {
		margin: $form-margin;
		// IE 11 workaround https://github.com/philipwalton/flexbugs#flexbug-2
		max-width: 100%;
		max-height: 100%;
	}
}

#content {

	#login-page {
		margin: auto;
		width: 100%;
	}

	// style for tracking code block
	.cell.trackingcodeinputcell .wcs-tracking-code-input {
		@extend %wcs-form;
		@extend %default-block;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
		overflow: auto;
		padding: 10px 20px;
		height: 100%;
		// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
		max-width: 100%;
		max-height: 100%;

		#tracking-code {
			@extend %input-style;
			max-width: 90%;
			border: 1px solid $title-color;
			text-align: center;
			color: $title-color;
		}

	}
	// style for a2 and wcs blocks
	div.block, div.a2-block {
		@extend %wcs-form;
		@extend %default-block;

		input, textarea {
			border-color: $content-background-color;
		}

		p {
			margin: 3em 1em 0.5em 1em;
		}
	}

}

#content {
	max-width: $width;

	.form-content,
	#columns {
		display: flex;
		justify-content: space-between;

		margin: 0 auto;
		width: 100%;
		max-width: $column-width;

		// inside the div resides the form and its title
		.form-content--sidebox, #rub_service {
			@extend %wcs-form;
			flex: 1 1 0;
			padding: 1em;

			&.has-sidebox {
				flex: 2 1 0;
				order: 0;
				float: none;
			}
		}

		.form-content--sidebox + #rub_service {
			@extend %two-thirds;
			margin: 0;
			padding: 3em;
			background-color: $content-background-color;

			h1, h2 {
				color: black;
				background: transparent;
				border-bottom: 1px solid black;
			}

			form input {

				&[type=radio], &[type=checkbox] {
					margin: 1em;
				}

				border-bottom: 1px solid black;
			}
		}

		.form-content--sidebox {
			@extend %one-third;
			flex: 1 1 0;
			order: 1;
			margin: 0;
			float: none;
			background: white;

			#tracking-code {
				text-align: center;
				padding: 3em;
				margin-bottom: 0;
				border-bottom: 1px solid $content-background-color;

				a {
					@extend %input-style;
					max-width: 90%;
					border: 1px solid $title-color;
					text-align: center;
					color: $title-color;
				}
			}
		}
	}
}


@media screen and ($min-desktop-viewport) {
	#page #main-content-wrapper #main-content #content #columns .form-content,
	#page #main-content-wrapper #main-content #content #columns {
		flex-direction: row;
	}
}

@media screen and ($max-mobile-viewport) {
	#page #main-content-wrapper #main-content #content #columns .form-content,
	#page #main-content-wrapper #main-content #content #columns {
		flex-direction: column;

		.form-content--sidebox {
			order: 0;
			width: 100%;
			padding: 0;

			#tracking-code {
				order: 0;
				padding: 1em;

				a {
					vertical-align: baseline;
				}
			}
		}

		.has-sidebox {
			order: 1;
			width: 100%;
			padding: 0;
		}
	}
}


// Steps
.wcs-steps--list {
	justify-content: center;
	align-items: center;
}
.wcs-step {
	font-size: 1.5em;
	@include desktop-vertical-steps() {
		width: 9em;
		max-width: 100%;
	}

	&--marker {
		font-weight: bold;
	}

	&--label {
		text-transform: uppercase;
		font-size: .55em;
		@media ($mq-max--wcs-steps-small-layout) {
			margin-left: $wcs-steps-spacing;
		}
		@media ($mq-min--wcs-steps-horizontal-layout) {
			text-align: center;
		}
		@include desktop-vertical-steps() {
			text-align: left;
		}
	}

	&:not(.current) & {
		&--marker {
			border: 1px solid;
		}
	}
}