publik-base-theme/static/montreuil/_custom.scss

@mixin button-link($background-color: transparent, $text-color: $white, $border-color: $primary-color) {
	color: $text-color;
	background: $background-color;
	border: 1px solid $border-color;
	padding: 5px 10px;
	@media screen and (max-width: $nav-mobile-limit) {
		display: inline-block;
		margin: 3px 1px;
	}
}

body.has-header-background header {
	background-position: bottom center;
}

div#header-wrapper {
	height: 230px;
	border-top: $nav-menu-side solid $primary-color;
	#header div#top {
		position: absolute;
		top: -60px;
		width: calc(100% - 50px);
		@media screen and ($max-mobile-viewport) {
			left: 50px;
		}
	}
	#logo {
		a {
			display: block;
			text-indent: -9999px;
			height: 50px;
		}

		@media ($max-mobile-viewport) {
			padding-left: 30px;
		}
	}
}

#toplinks {
	padding: 0.2em 1em;
	background: $secondary-color;
	border-radius: 0;
	margin-top: 10px;
	text-transform: uppercase;
	border: 0;
	box-shadow: none;
	> span:first-child::before {
		content: '\f007';
		font-family: FontAwesome;
		margin-right: 5px;
	}
	@media screen and (max-width: $nav-mobile-limit) {
		right: 1.5em;
		background: transparent;
		> span:first-child::before {
			display: none;
		}
	}
	span {
		a {
			@media screen and (max-width: $nav-mobile-limit) {
				background: $secondary-color;
				padding: 5px 10px;
			}
		}
	}
}

div.gru-nav {
	@media screen and (max-width: $nav-mobile-limit) {
		position: absolute;
		top: 0;
		z-index: 1;
		width: $nav-menu-side;
		&.toggled {
			width: auto;
		}
	}
	.gru-nav-button {
		border-radius: 0;
		@media screen and (max-width: $nav-mobile-limit) {
			margin-left: 0;
		}
		& + ul {
			border: 0;
		}
		& .icon-bar {
			background-color: $nav-button-color;
		}
	}
	> ul {
		> li a {
			@media screen and (max-width: $nav-mobile-limit) {
				font-size: 0.8em;
				font-weight: normal;
			}
		}
	}
}

.gru-content {
	@media screen and ($max-mobile-viewport) {
		margin-top: 10px;
	}
	div.wcsformsofcategorycell {
		border: 0;
		picture img {
			padding: 0;
		}
		h2:first-child {
			background: $primary-color center left no-repeat;
			background-size: auto 45px;
			font-weight: bold;
			padding-left: 45px;
			padding-right: 1.75em;
			display: flex;
			align-items: center;
		}
		a {
			padding: 0.5rem;
		}
		li:last-child a {
			border-bottom: 0;
		}
		.add-more-items {
			border: 0;
		}
		.add-more-items--button {
			box-sizing: content-box;
			background: $secondary-color;
			border-radius: 50% !important;
			width: 10px;
			height: 10px;
			margin: 10px auto;
			padding: 10px;
			border: 0;
			line-height: 10px;
		}
	}
	div.wcscurrentformscell ul > li > a:hover {
		background: transparent;
	}
}

// Steps
.wcs-step {
	@media ($max-mobile-viewport) {
		border: none !important;
		&--marker {
			border: 1px solid;
		}
	}
}

div.SubmitWidget.submit-button button {
	background: $secondary-color;
}

ul#evolutions li span.item {
	border: 1px solid $secondary-color;
}

div#user-files th {
	text-transform: none;
}

a.button-link {
	@include button-link($primary-color, $white);
}

div.textcell {
	ul {
		margin: 1rem;
	}
	a {
		text-decoration: underline;
	}
}

div#sidebar {
	div.trackingcodeinputcell {
		@media screen and ($min-desktop-viewport) {
			input {
				width: 9.5em;
			}
			button {
				margin-right: 0;
			}
		}
	}
}

div.cell {
	&.no-border {
		border: 0;
	}
	&.sticky {
		position: sticky;
		top: 1em;
		@media screen and ($max-mobile-viewport) {
			position: relative;
			margin-bottom: 2em;
		}
	}
}

div.list-of-forms {
	span.form-number {
		opacity: 0.75;
	}
	span.form-status {
		border: 1px solid $primary-color;
		padding: 2px 4px;
		margin: 3px 0;
	}
}

div#footer {
	a {
		color: $white;
		text-decoration: none;
		&.button-link {
			@include button-link(transparent, $white, $white);
			display: inline-block;
			width: 100%;
			text-align: center;
		}
		&.location {
			&::before {
				content: '\f041';
				font-family: FontAwesome;
				margin-right: 0.5em;
				font-size: 135%;
			}
		}
	}
	.phone {
		background: $white;
		color: $primary-color;
		padding: 3px 5px;
		&::before {
			content: '\f095';
			font-family: FontAwesome;
			margin-right: 0.5em;
		}
	}
}

.turquoise-header {
	color: $white;
	background: #16d3da;
	padding: 3px 6px;
}