From 756889aa1746b60790fbf3dcdefa283e003d3009 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 31 Oct 2019 11:05:06 +0100
Subject: [PATCH] metz-metropole-2019: update steps (#36765)

---
 static/metz-metropole-2019/_custom.scss       | 100 +++++++-----------
 static/metz-metropole-2019/_vars.scss         |   9 ++
 .../wcs/front/formdata_steps.html             |  19 ----
 3 files changed, 49 insertions(+), 79 deletions(-)
 delete mode 100644 templates/variants/metz-metropole-2019/wcs/front/formdata_steps.html

diff --git a/static/metz-metropole-2019/_custom.scss b/static/metz-metropole-2019/_custom.scss
index cd79dd2a..ccf03444 100644
--- a/static/metz-metropole-2019/_custom.scss
+++ b/static/metz-metropole-2019/_custom.scss
@@ -788,70 +788,50 @@ div#gauche div#tracking-code {
 	}
 }
 
-div#steps {
-	border-right: 1px solid #ececec;
-	ol {
-		text-transform: uppercase;
-		color: $darkblue;
-		font-size: 14px;
-		li {
-			border-radius: 0;
-			font-weight: 500;
-			letter-spacing: 0;
-			margin: 0;
+// Steps
+.wcs-steps {
+	text-transform: uppercase;
+	font-size: .89em;
+
+	@media ($mq-max--wcs-steps-small-layout) {
+		margin: -1px 10px;
+	}
+}
+.wcs-step {
+	margin-bottom: 0;
+	border-radius: 0;
+
+	&--label {
+		font-size: 1em;
+	}
+
+	&--marker {
+		font-weight: bold;
+		> * {
+			transform: none;
+			font-size: 1em;
 		}
-		li.current {
-			background: $yellow;
-			color: white;
+		&-total {
+			color: #fff;
+			font-weight: bold;
+			margin-right: .33em;
 		}
-		li span.marker {
-			display: inline-block;
-			font-size: 100%;
-			font-weight: 500;
-			&::after {
-				content: " - ";
-				margin-right: 1ex;
-			}
+		// Slash
+		&::before {
+			height: 1.2em;
+			margin: .3em;
 		}
-		li span.total {
-			display: none;
+		&::after {
+			content: "-";
+			align-self: center;
+			order: 3;
+			color: #fff;
 		}
-	}
-	@media screen and (max-width: $mobile-limit) {
-		margin: -1px 10px 0 10px;
-		width: auto;
-		ol {
-			li.step-before, li.step-after {
-				display: none;
-			}
-			li.current {
-				padding: 6px 0;
-				width: 100%;
-				span.marker {
-					border-radius: 0;
-					border: 0;
-					padding: 0;
-					padding-left: 10px;
-					background: transparent;
-					color: $darkblue;
-					width: auto;
-					&::after {
-						content: "/";
-						margin-right: 0;
-					}
-				}
-				span.total {
-					display: inline-block;
-					color: white;
-					&::after {
-						content: "-";
-						margin: 0 1ex;
-					}
-				}
-				span.label {
-					font-weight: bold;
-				}
-			}
+		@media ($mq-max--wcs-steps-small-layout) {
+			height: auto;
+			width: auto;
+			color: $primary-color !important;
+			padding-left: .33em;
 		}
 	}
 }
diff --git a/static/metz-metropole-2019/_vars.scss b/static/metz-metropole-2019/_vars.scss
index d6febedb..c139b442 100644
--- a/static/metz-metropole-2019/_vars.scss
+++ b/static/metz-metropole-2019/_vars.scss
@@ -5,6 +5,7 @@ $darkblue: #1b4e61;
 $yellow: #fcc14b;
 $green: #37bd9c;
 
+
 $font-family: "Now Alt", sans-serif;
 $primary-color: $darkblue;
 $link-color: $blue;
@@ -62,3 +63,11 @@ $carrousel-navigation-bullet-color: $darkblue;
 $notification_error_color: #fdefee;
 $widget-custom-radio-checkbox: true;
 $widget-custom-radio-checkbox-color: $blue;
+
+$very-small-limit: 800px;
+$wcs-step-color: $primary-color;
+$wcs-step-border-bottom: 1px solid #ccc;
+$wcs-step-current-border-bottom: 1px solid $yellow;
+$wcs-step-current-color: #fff;
+$wcs-step-background: #fff;
+$wcs-step-current-background: $yellow;
\ No newline at end of file
diff --git a/templates/variants/metz-metropole-2019/wcs/front/formdata_steps.html b/templates/variants/metz-metropole-2019/wcs/front/formdata_steps.html
deleted file mode 100644
index 221d2d58..00000000
--- a/templates/variants/metz-metropole-2019/wcs/front/formdata_steps.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% if page_labels|length > 1 %}
-<div id="steps" class="steps-{{page_labels|length}}">
-<ol>
-{% for page_label in page_labels %}
-{% spaceless %}
-<li class="{% if forloop.first %}first{% endif %}
-           {% if forloop.last %}last{% endif %}
-           {% if forloop.counter == current_page_no %}current{% endif %}
-           {% if forloop.counter < current_page_no %}step-before{% endif %}
-           {% if forloop.counter > current_page_no %}step-after{% endif %}" >
-  <span class="marker">{{ forloop.counter }}</span>
-  <span class="total">{{ page_labels|length }}</span>
-  <span class="label">{{ page_label }}</span>
-</li>
-{% endspaceless %}
-{% endfor %}
-</ol>
-</div>
-{% endif %}
-- 
2.20.1

