From bb096823ccedc94fe9c6c61dbbad7253ab616e21 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Wed, 30 Oct 2019 15:48:35 +0100
Subject: [PATCH] fontenay-sous-bois-2018: update steps (#36765)

---
 static/fontenay-sous-bois-2018/_custom.scss | 126 +++++++++++---------
 static/fontenay-sous-bois-2018/_vars.scss   |  15 +++
 2 files changed, 84 insertions(+), 57 deletions(-)

diff --git a/static/fontenay-sous-bois-2018/_custom.scss b/static/fontenay-sous-bois-2018/_custom.scss
index eb1c285f..f568a130 100644
--- a/static/fontenay-sous-bois-2018/_custom.scss
+++ b/static/fontenay-sous-bois-2018/_custom.scss
@@ -355,6 +355,7 @@ div#gauche {
 		border-radius: 10px;
 		text-align: center;
 		div#tracking-code {
+			min-width: 0;
 			background: transparent url(img/trackingcode.png) 2rem 1rem no-repeat;
 			padding: 1rem 3rem 1rem 130px;
 			@media screen and (max-width: $mobile-limit) {
@@ -374,66 +375,77 @@ div#gauche {
 			}
 		}
 	}
-	div#steps {
-		margin-top: 1rem;
-		&::before {
-			content: "";
-			height: 1px;
-			width: 80%;
-			margin-left: 10%;
-			background: $primary-color;
-			display: block;
-			position: relative;
-			top: 70px;
+}
+
+// Steps
+.wcs-steps {
+	border-radius: 10px;
+	overflow: hidden;
+	font-size: 1.2em;
+	margin-bottom: 0;
+}
+.wcs-step {
+	&--marker {
+		background-size: 100% !important;
+	}
+	&--label {
+		text-align: left;
+	}
+	&.current {
+		font-weight: normal;
+	}
+}
+@media ($mq-min--wcs-steps-horizontal-layout){
+	.wcs-steps--list {
+		justify-content: center;
+		padding-bottom: 0;
+	}
+	.wcs-step {
+		margin-right: $wcs-steps-spacing;
+		flex: 1 1 auto;
+		max-width: 33%; 
+		&:last-child {
+			flex-grow: 0;
+		}
+		&--label {
+			text-align: center;
 		}
-		ol {
-			display: -ms-flexbox;
-			display: flex;
-			-ms-justify-content: space-evenly;
-			justify-content: space-evenly;
+	}
+}
+@include desktop-horizontal-steps() {
+	.wcs-steps{
+		font-size: 2.5em;
+		&--list {
+			margin-bottom: 0;
 		}
-		li {
-			position: relative;
-			z-index: 10;
+	}
+	.wcs-step {
+		$wcs-step-marker-size: 6rem;
+		position: relative;
+		margin-bottom: 0;
+		flex-direction: column;
+		&--marker {
+			width: $wcs-step-marker-size;
+			height: $wcs-step-marker-size;
+			flex-basis: $wcs-step-marker-size;
+		}
+		&--label {
+			display: block !important;
+			position: static;
+			font-size: 0.4em;
+			padding-top: 0.5em;
+			top: 100%;
+			width: $wcs-step-marker-size + 1;
+			margin-left: -1 * ($wcs-steps-spacing / 2);
 			text-align: center;
-			width: 15ex;
-			border-bottom: 0;
-			background: url(img/step-g.png) top center no-repeat;
-			@media screen and (max-width: $mobile-limit) {
-				background: none;
-				width: 2ex;
-				text-align: center;
-				padding-right: 0;
-			}
-			span.marker {
-				padding: 1.5rem 0;
-				color: white;
-				@media screen and (max-width: $mobile-limit) {
-					padding: 0;
-					display: inline-block;
-					width: 100%;
-				}
-			}
-			span.label {
-				display: inline-block;
-				padding-top: 0.5rem;
-				@media screen and (max-width: $mobile-limit) {
-					display: none;
-				}
-			}
-			&.current {
-				background-image: url(img/step-r.png);
-				span.label {
-					color: $primary-color;
-					font-weight: normal;
-				}
-				@media screen and (max-width: $mobile-limit) {
-					background: none;
-					span.marker {
-						background: $primary-color;
-					}
-				}
-			}
+			align-self: flex-start;
+		}
+		// Tie
+		&::after {
+			position: absolute;
+			top: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2}) !important;
+			left: $wcs-step-marker-size;
+			width: calc(100% + #{$wcs-steps-spacing});
 		}
 	}
 }
diff --git a/static/fontenay-sous-bois-2018/_vars.scss b/static/fontenay-sous-bois-2018/_vars.scss
index 7a0e0053..19489922 100644
--- a/static/fontenay-sous-bois-2018/_vars.scss
+++ b/static/fontenay-sous-bois-2018/_vars.scss
@@ -29,3 +29,18 @@ $button-color: white;
 $footer-background: $primary-color;
 
 $widget-unique-checkbox-position: left;
+
+$form-sidebar-position: top;
+$wcs-step-border-bottom: none;
+$wcs-steps-spacing: 1rem;
+$wcs-steps-background: white;
+$wcs-step-marker-size: 3rem;
+$wcs-step-marker-type: tied;
+$wcs-step-marker-tie-color: $primary-color;
+$wcs-step-marker-tie-width: 1px;
+$wcs-step-marker-color: white;
+$wcs-step-marker-background: url(img/step-g.png) center center no-repeat;
+$wcs-step-current-marker-color: white;
+$wcs-step-current-marker-background: url(img/step-r.png) center center no-repeat;
+
+
-- 
2.20.1

