publik-base-theme/static/saint-chamond/_custom.scss

$dashboard-slugs: accueil, mon-compte, mes-demandes, mon-association, mon-commerce, mon-porte-doc;

.site-header {
	background: $blue;
	padding-top: 25px;
	padding-bottom: 40px;
	@media screen and (max-width: $nav-mobile-limit) {
		padding-top: 0;
	}
	h1#logo {
		@media screen and (max-width: $nav-mobile-limit) {
			padding-top: 50px;
			padding-left: 0;
			text-align: center;
		}
		a {
			background: url(img/logo.png);
			display: inline-block;
			text-indent: -10000px;
			width: 285px;
			height: 37px;
		}
	}
	a {
		color: white;
	}
	#toplinks {
		padding-top: 0;
		border: none;
		background: none;
		box-shadow: none;
	}
}

footer {
	#footer-wrapper {
		padding-bottom: 0;
	}
	#footer {
		min-height: 200px;
		background: url(img/m.png) left 0 bottom -60px no-repeat;
		position: relative;
	}
	div.menucell ul li a {
		color: white;
	}
	p:last-child {
		margin-bottom: 0;
	}
	#fleche-haut {
		font-size: 1.111rem;
		position: absolute;
		right: 0;
		top: 10px;
		a {
			background: $blue2;
			color: white;
			display: block;
			height: 60px;
			line-height: 60px;
			width: 60px;
			text-align: center;
			color: white;
		}
	}
}

.site-nav ul {
	display: none;
}

#sidebar {
	box-sizing: content-box;
	padding-right: 40px;
	@media screen and (max-width: $nav-mobile-limit) {
		padding-right: 0;
	}
}

.column:first-child {
	width: calc(100% - 250px);
	@media screen and (max-width: $nav-mobile-limit) {
		width: auto;
	}
}

.column:last-child {
	width: 250px;
	@media screen and (max-width: $nav-mobile-limit) {
		clear: both;
		width: auto;
	}
}

div.cell,
div.comment-field,
div.infonotice {
	&.fond-bleu, &.fond-turquoise, &.infonotice {
		&.comment-field {
			padding: 0.5rem 0.5rem;
			&.infonotice {
				padding-left: 4rem;
			}
		}
		padding-bottom: 0.5rem;
		color: white;
		h2:first-child, h3:first-child {
			margin-top: 0;
			color: white;
			font-weight: normal;
		}
	}
	&.fond-bleu {
		background: #2a8be7;
	}
	&.fond-turquoise, &.infonotice {
		background: $turquoise;
	}
}

#encart-bandeau {
	position: absolute;
	top: -300px;
	left: 130px;
	width: 480px;
	background: rgba(42, 139, 231, 0.8);
	padding: 0.5rem 2rem;
	color: white;
	@media screen and (max-width: $nav-mobile-limit) {
		padding: 0.5rem 0.5rem;
		position: static;
		width: auto;
	}
	h2 {
		font-size: 2rem;
		color: white;
		@media screen and (max-width: $nav-mobile-limit) {
			font-size: 1.333rem;
		}
	}
}

#content .linkcell.puce,
#content .wcsformsofcategorycell {
	picture {
		display: block;
		text-align: center;
		+ h2 {
			margin-top: 0;
			padding-top: 0;
			color: $blue2;
		}
	}
	a {
		background-image: url(img/disc.png);
		background-position: 5px 1.5rem;
		background-repeat: no-repeat;
		color: $font-color;
	}
	.add-more-items--button {
		background-image: url(img/plus.png);
		background-position: 5px 50%;
		background-repeat: no-repeat;
		font-weight: bold;
		text-align: left;
	}
}

div#rub_service h2 {
	text-align: left;
	color: #545454;
	font-size: 1.556rem;
}

div#tracking-code h3 {
	background: $blue;
	color: white;
	padding: 0.5rem 1rem;
	text-transform: uppercase;
}

div.buttons button {
	text-transform: uppercase;
}

div#gauche {
	width: 15%;
	text-align: center;
	@media screen and (max-width: $nav-mobile-limit) {
		width: auto;
		margin-top: 0;
	}
}

// Steps
.wcs-steps {
	margin-top: $wcs-steps-spacing * 2;
	&--list {
		justify-content: center;
	}
}
@media ($mq-min--wcs-steps-horizontal-layout) {
	.wcs-step--label {
		text-align: center;
	}
}
@include desktop-vertical-steps() {
	.wcs-step {
		flex-direction: column;
		align-items: center;
		margin-bottom: $wcs-steps-spacing * 3;

		&--label {
			margin-top: $wcs-steps-spacing;
		}
	}
}

div.dataview {
	span.label {
		color: #545454;
	}
}

%button {
	@extend %button;
	box-shadow: none;
	border: 1px solid #373737;
}

div.cancel-button {
	float: right;
	button {
		background: white;
		color: $font-color;
	}
}

@each $slug in $dashboard-slugs {
	##{$slug} a {
		background-image: url(img/#{$slug}.png);
		background-size: 58px;
		background-repeat: no-repeat;
		padding-left: 65px;
		border: none;
	}
}

@media screen and (max-width: $nav-mobile-limit) {
	body.has-picture .site-nav::after {
		height: 200px;
	}
}