publik-base-theme/static/armentieres/_wcs.scss

// WCS page header
.arm-form-header {
	background: $gray-xlight;

	&--content {
		max-width: $width;
		margin: 0 auto;
		padding: 2rem 0 2rem 0;
	}

	&--title {
		margin: 0;
		text-transform: uppercase;
		font-size: $fz-1;
	}

	&--description {
		@media($max-mobile-viewport) {
			display: none;
		}
		margin-top: 4rem;
		font-family: 'Viga', sans-serif;
	}

	@media($max-mobile-viewport) {
		&--content {
			padding: 1rem 0 1rem 0;
		}

		&--title {
			text-align: center;
		}
	}
}

// Tracking code
div#tracking-code {
	padding: 1rem;
	background: right / cover url('/assets/tracking-code:background');
	border-radius: $border-radius;
	.tracking-code-part {
		display: flex;
		flex-direction: column;
		h3 {
			background: transparent;
			color: $gray-dark;
			text-transform: none;
			text-align: center;
			margin-bottom: 0.7rem;
		}
		a {
			text-align:center;
			background: white;
			padding: 0.5rem;
			border-radius: $border-radius;
			font-weight: bold;
			font-family: 'Viga', sans-serif;
		}
	}

	form[action="removedraft"] {
		display: flex;
		justify-content: center;
		.form-discard-draft {
			@extend %black-button;
			margin-right: 0;
			&, &:hover {
				color: $primary-color;
			}
		}
	}
}

// Widgets
%button {
	box-shadow: none;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;

	@media($max-mobile-viewport) {
		height: 45px;
	}

	&:hover {
		box-shadow: none;
		text-decoration: none;
	}
}

%black-button {
	@extend %button;
	background: $gray-dark;
	color: white;
	&:hover {
		background: $gray-dark;
		color: white;
	}
}

%gray-button {
	background: $gray-xlight;
	color: black;
	&:hover {
		background: $gray-xlight;
	}
}

.field {
	&--label .required {
		margin: 0;
		color: $primary-color;
	}
}

input, input[type="search"], textarea, select {
	transition: $transition;
}

input[type=radio], input[type=checkbox] {
	&:focus {
		box-shadow: none;
	}
}

input[readonly], select[readonly], textarea[readonly] {
	border-radius: $widget-border-radius;
	background: transparent;
	border: $widget-border;
}

input::placeholder {
	font-style: italic;
}

@mixin form-button-left($symbol) {
	&::before {
		content: $symbol;
		font-family: FontAwesome;
		margin-right: 1rem;
	}
}

@mixin form-button-right($symbol) {
	&::after {
		content: $symbol;
		font-family: FontAwesome;
		margin-left: 1rem;
	}
}

.form-content {
	&--body .buttons.submit {
		@media($max-mobile-viewport) {
			display: flex;
			flex-direction: column;
			align-items: stretch;

			.content {
				width: 100%;

				button { width: 100%; }
			}
		}

		.form-next{
			@include form-button-right('\f054');
		}

		.form-previous {
			@include form-button-left('\f053');
		}

		.form-submit {
			@include form-button-left('\f00c');
		}

		.form-discard, .cancel {
			@include form-button-left('\f00d');
		}
	}
}

.back-home-button {
	display: flex;
	justify-content: stretch;

	a {
		@extend %button;

		width: 100%;
		margin: 0 0.5rem;

		&::after {
			content: '\f0e2';
			font-family: FontAwesome;
			margin-left: 1rem;
		}
	}
}

// Steps
.wcs-steps {
	h2 {
		margin: 1rem 0 0 0;
		display: block;
		color: $red;
		font-size: $fz-3;
	}
}

.wcs-step {
	border-radius: 0;
	align-items: center;
	&.current {
		font-weight: normal;
	}

	@media($min-desktop-viewport) {
		&.step-before::after {
			content: '\f00c';
			font-family: FontAwesome;
			margin: 0rem 1rem;
			color: $green;
		}
	}
}

div.form-validation, div#summary{
	div.page {
		border-radius: $border-radius;
		background: $gray-xlight;
		padding: 1rem 1rem;
		margin: 1rem 0;
	}
}

div#summary {
	&::after {
		width: 100%;
		height: 1px;
		display: inline-block;
		background: $gray-dark;
		content: '';
	}
}

.timetable-widget {
	.head {
		font-size: $fz-small;
	}
}