From c058f3c902200f17a71e19a8bdf024ce4ac48210 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Wed, 30 Oct 2019 16:37:41 +0100
Subject: [PATCH] grenoble-metropole-2019: update steps (#36765)

---
 static/grenoble-metropole-2019/_custom.scss | 127 +++-----------------
 static/grenoble-metropole-2019/_vars.scss   |  13 ++
 2 files changed, 27 insertions(+), 113 deletions(-)

diff --git a/static/grenoble-metropole-2019/_custom.scss b/static/grenoble-metropole-2019/_custom.scss
index dd2bd559..5c67f1a6 100644
--- a/static/grenoble-metropole-2019/_custom.scss
+++ b/static/grenoble-metropole-2019/_custom.scss
@@ -1118,122 +1118,23 @@ div.buttons {
 }
 
 /* wcs progress bar styles */
-
-div#steps.steps-1 { display: none; }
-
-
-div#steps ol {
-	/* make it possible to grow over its parent size, this makes sure the
-	 * step number bubble have enough width even with long page names */
-	min-width: 23em;
-	position: relative;
-	@media screen and (max-width: $mobile-limit) {
-		min-width: auto;
-		align-items: center;
+.wcs-steps.steps-1 { display: none; }
+.wcs-steps--list {
+	@media (max-width: $mobile-limit) {
 		justify-content: center;
-		display: -ms-flexbox;
-		display: flex;
 	}
-	&::before {
-		content: "";
-		speak: none;
-		position: absolute;
-		top: 0;
-		left: 40px;
-		bottom: 0;
-		width: 1px;
-		height: 100%;
-		background: $primary-color;
-		z-index: -2;
-		@media screen and (max-width: $mobile-limit) {
-			display: none;
-		}
-	}
-	li {
-		margin: 25px 0;
-		border: 0;
-		padding: 1ex 1ex 1ex 0;
-		@media screen and (max-width: $mobile-limit) {
-			margin: 0 0 25px 0;
-		}
-		span.marker {
-			font-size: 1.5em;
-			font-weight: bold;
-			color: #93989d;
-			border-radius: 50%;
-			width: 80px;
-			height: 80px;
+}
+.wcs-step {
+	font-size: 1.2em;
+	&--label {
+		@include desktop-vertical-steps() {
+			font-size: 0.65em;
+		}
+		@media (max-width: $mobile-limit) {
+			padding-left: 0;
 			text-align: center;
-			position: relative;
-			display: table-cell;
-			vertical-align: middle;
-			background: #f1f1f1;
-			@media screen and (max-width: $mobile-limit) {
-				width: 45px;
-				height: 45px;
-				padding: 0;
-				&::after {
-					content: ' ';
-					height: 1px;
-					width: 15px;
-					top: 50%;
-					padding: 0;
-					left: -16px;
-					position: absolute;
-					background-color: $primary-color;
-				}
-			}
-		}
-		&.first {
-			@media screen and (max-width: $mobile-limit) {
-				span.marker::after {
-					display: none;
-				}
-			}
-		}
-		&.current {
-			span.marker {
-				background: $primary-color;
-				color: #000000;
-				border-radius: 50%;
-			}
-			.label {
-				color: #000000;
-				@media screen and (max-width: $mobile-limit) {
-					padding-left: 0;
-					position: absolute;
-					display: block;
-					width: 100%;
-					text-align: center;
-					top: 60px;
-					left: 0;
-				}
-			}
-		}
-		.step-after {
-			.marker {
-				background: #EBECED;
-			}
-		}
-		.marker::after {
-			content: "";
-			width: 90px;
-			height: 90px;
-			background: #fff;
-			border-radius: 50%;
-			position: absolute;
-			top: -5px;
-			left: -5px;
-			z-index: -1;
-		}
-		.label {
-			color: #000000;
-			padding-left: 10px;
-			display: table-cell;
-			vertical-align: middle;
-			@media screen and (max-width: $mobile-limit) {
-				display: none;
-			}
+			top: calc(100% - #{$wcs-steps-spacing});
+			left: 0;
 		}
 	}
 }
diff --git a/static/grenoble-metropole-2019/_vars.scss b/static/grenoble-metropole-2019/_vars.scss
index b6391c4e..fae549d5 100644
--- a/static/grenoble-metropole-2019/_vars.scss
+++ b/static/grenoble-metropole-2019/_vars.scss
@@ -58,3 +58,16 @@ $widget-custom-radio-checkbox-color: $gam-button-background-color;
 $widget-unique-checkbox-position: left;
 
 $form-sidebar-position: right;
+
+$wcs-steps-spacing: .5em;
+
+$wcs-step-color: black;
+$wcs-step-border-bottom: none;
+$wcs-step-current-color: black;
+
+$wcs-step-marker-type: disc tied;
+$wcs-step-marker-size: 3em;
+$wcs-step-marker-background: $gam-user-cell-background-color;
+$wcs-step-marker-tie-color: $primary-color;
+$wcs-step-marker-tie-width: 1px;
+$wcs-step-current-marker-background: $primary-color;
-- 
2.20.1

