From 37b7a5296a1fa6d6d12a2c86c77f505d90152bad Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@tj.entrouvert.lan>
Date: Tue, 19 Nov 2019 15:55:20 +0100
Subject: [PATCH] publik-base-theme: update steps (#36765)

---
 static/rouen/_side_block.scss | 145 +++++++++++++---------------------
 static/rouen/_vars.scss       |  10 +++
 2 files changed, 66 insertions(+), 89 deletions(-)

diff --git a/static/rouen/_side_block.scss b/static/rouen/_side_block.scss
index bd03b5d..3c8c3d1 100644
--- a/static/rouen/_side_block.scss
+++ b/static/rouen/_side_block.scss
@@ -50,100 +50,67 @@ div.tracking-code-part {
 	}
 }
 
-body.one-step div#steps { display: none; }
-body.without-tracking-code div#steps { margin-bottom: 2em; }
+body.one-step #steps { display: none; }
+body.without-tracking-code #steps { margin-bottom: 2em; }
 
-div#steps {
-	margin-top: 8em;
-	margin-bottom: 11.5em;
+.wcs-steps {
+	margin-top: 0;
+	margin-bottom: 8.5em;
 
-	@media screen and (max-width: $mobile-limit) {
-		margin-top: 0;
-		margin-bottom: 8.5em;
+	@media ($mq-min--wcs-steps-horizontal-layout) {
+		&--list {
+			justify-content: center;
+		}
 	}
 
-	ol {
-		display: -ms-flexbox;
-		display: flex;
-		li.first.last::after {
-			background: none;
-		}
+	@include desktop-horizontal-steps() {
+		margin-top: 8em;
+		margin-bottom: 11.5em;
+	}
+}
 
-		li {
-			position: relative;
-			-ms-flex: 1;
-			flex: 1;
-			padding: 0;
-			text-transform: uppercase;
-			color: $primary-color;
-			font-size: 24px;
-			margin-bottom: 0;
-			border: none;
-			min-width: 30px;
-			min-height: 40px;
-			&::after {
-				content: '';
-				height: 5px;
-				width: 100%;
-				display: block;
-				position: absolute;
-				left: 0;
-				bottom: 5px;
-				background: #9b9b9b;
-				@media screen and (max-width: $mobile-limit) {
-					bottom: 15px;
-				}
-			}
-			&:first-child::after { left: 50%; width: 50%; }
-			&:last-child::after { right: 50%; width: 50%; }
-			span.marker {
-				position: absolute;
-				bottom: 0;
-				overflow: hidden;
-				left: 50%;
-				text-indent: -1000px;
-				border: none;
-				color: $primary-color;
-				background: white;
-				width: 15px;
-				height: 15px;
-				box-shadow: 0 0 0 5px #9b9b9b;
-				border-radius: 10px;
-				z-index: 100;
-				@media screen and (max-width: $mobile-limit) {
-					padding: 0;
-					bottom: 10px;
-				}
-			}
-			span.label {
-				display: block;
-				left: 50%;
-				position: absolute;
-				width: 12em;
-				font-size: $font-size;
-				padding-right: 0;
-				text-transform: none;
-				color: #9b9b9b;
-				transform: rotate(-45deg);
-				transform-origin: top left;
-				top: -0.2em;
-		
-				@media screen and (max-width: $mobile-limit) {
-					display: none;
-				}
-			}
-			&.current {
-				span.marker {
-					background: $primary-color;
-					box-shadow: 0 0 0 5px $primary-color;
-					@media screen and (max-width: $mobile-limit) {
-						border-radius: 10px;
-					}
-				}
-			}
-			&.step-before {
-				span.marker { background: #9b9b9b; }
-			}
+.wcs-step {
+	&--marker {
+		border: 5px solid #9b9b9b;
+	}
+
+	&.current & {
+		&--marker {
+			border-color: $primary-color;
+		}
+	}
+
+	&.step-before & {
+		&--marker {
+			background: #9b9b9b;
+		}		
+	}
+	@media ($mq-min--wcs-steps-horizontal-layout) {
+		&:not(:last-child) {
+			flex-grow: 1;
+		}
+		max-width: 8.5rem;
+		&--marker-nb {
+			display: none;
+		}
+		&--label {
+			text-align: center;
+		}
+	}
+
+	@include desktop-horizontal-steps() {
+		position: relative;
+		min-width: 5rem;
+		&--label {
+			text-align: left;
+			font-size: 0.8em;
+			display: block !important;
+			width: 12em;
+			position: absolute;
+			top: auto;
+			left: auto;
+			transform: rotate(-45deg);
+			transform-origin: -1.5em -1.5em;
 		}
 	}
 }
\ No newline at end of file
diff --git a/static/rouen/_vars.scss b/static/rouen/_vars.scss
index 8d65d56..5764883 100644
--- a/static/rouen/_vars.scss
+++ b/static/rouen/_vars.scss
@@ -30,3 +30,13 @@ $steps-color: #9B9B9B;
 $title-weight: bold;
 $width: 1243.97px;
 $custom-very-small-screen: 480px;
+
+$form-sidebar-position: top;
+$wcs-step-border-bottom: none;
+$wcs-step-marker-color: #9b9b9b;
+$wcs-step-marker-size: 1.25em;
+$wcs-step-marker-type: disc tied;
+$wcs-step-marker-background: white;
+$wcs-step-current-marker-background: $primary-color;
+$wcs-step-current-marker-color: white;
+$wcs-step-current-label-color: $primary-color;