From a2e65efd218df10822db53c3a1662c42e753923d Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Fri, 25 Oct 2019 17:49:53 +0200
Subject: [PATCH] amiens-metropole: update steps (#36765)

---
 static/amiens-metropole/_forms.scss  | 165 ++++++---------------------
 static/amiens-metropole/_header.scss |   6 +-
 static/amiens-metropole/_vars.scss   |  24 ++--
 3 files changed, 53 insertions(+), 142 deletions(-)

diff --git a/static/amiens-metropole/_forms.scss b/static/amiens-metropole/_forms.scss
index ff83cc59..9f865011 100644
--- a/static/amiens-metropole/_forms.scss
+++ b/static/amiens-metropole/_forms.scss
@@ -215,89 +215,6 @@
 	}
 }
 
-div#steps {
-	padding: $custom-steps-container-padding;
-
-	ol li {
-		@include flexbox();
-		@include flex-direction(column);
-		margin: $custom-step-margin;
-		padding: $custom-step-padding;
-		position: relative;
-		border: 0;
-
-		span.marker {
-			@include justify-content(center);
-			@include vendor-prefix(align-items, center);
-			display: inline-flex;
-			margin: $custom-step-marker-margin;
-			position: relative;
-			color: $custom-step-marker-color;
-			background: $custom-step-marker-background;
-			border: 1px solid $custom-step-marker-border;
-			border-radius: 50%;
-			font-size: calc(12px + 1.2vw);
-			font-weight: bold;
-			text-align: center;
-			vertical-align: middle;
-			width: 4vw;
-			height: 4vw;
-			// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
-			max-width: 100%;
-			max-height: 100%;
-			box-sizing: border-box;
-
-			&::before {
-				display: block;
-				content: ' ';
-				border-radius: 50%;
-				position: absolute;
-				background: $button-background;
-				z-index: -1;
-				padding: 6px;
-			}
-
-			// vertical lines between circles
-			&::after {
-				content: ' ';
-				position: absolute;
-				height: 50%;
-				width: 1px;
-				bottom: 100%;
-				right: 50%;
-				background-color: $custom-step-marker-color;
-				padding: 0;
-			}
-		}
-
-		span.label {
-			margin: $custom-label-margin;
-			text-align: center;
-			text-transform: uppercase;
-		}
-
-		&.current {
-			background: $custom-step-current-background;
-			font-weight: bold;
-
-			span.label {
-				color: $title-color;
-			}
-
-			span.marker {
-				color: $custom-current-marker-color;
-				border-color: $custom-current-marker-background;
-				background: $custom-current-marker-background;
-			}
-		}
-		// hide the first vertical line
-		&.first {
-			span.marker::after {
-				display: none;
-			}
-		}
-	}
-}
 
 @media screen and (min-width: $mobile-limit+1px) {
 	#page #main-content-wrapper #main-content #content #columns {
@@ -322,50 +239,6 @@ div#steps {
 					vertical-align: baseline;
 				}
 			}
-
-			#steps {
-				@include order(1);
-				padding: 0;
-			}
-
-			div#steps ol {
-				@include flexbox();
-				@include flex-direction(row);
-				@include vendor-prefix(flex-flow, nowrap);
-				@include justify-content(center);
-				@include vendor-prefix(align-items, center);
-				// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
-				max-width: 100%;
-				max-height: 100%;
-				box-sizing: border-box;
-
-				li {
-					padding: $custom-step-mobile-padding;
-
-					span.marker {
-						border-radius: 50%;
-						padding: 0.3em;
-
-						width: 4rem; // reset size without vw
-						height: 4rem;
-						// horizontal lines between circles
-						&::after {
-							content: ' ';
-							position: absolute;
-							height: 1px;
-							width: 10px;
-							bottom: 50%;
-							padding: 0;
-							left: -10px;
-						}
-					}
-
-					// hide labels on little screens
-					span.label {
-						display: none;
-					}
-				}
-			}
 		}
 
 		.has-sidebox {
@@ -375,3 +248,41 @@ div#steps {
 		}
 	}
 }
+
+
+// Steps
+.wcs-steps--list {
+	justify-content: center;
+	align-items: center;
+}
+.wcs-step {
+	font-size: 1.5em;
+	@include desktop-vertical-steps() {
+		width: 9em;
+		max-width: 100%;
+	}
+	
+	&--marker {
+		font-weight: bold;
+	}
+
+	&--label {
+		text-transform: uppercase;
+		font-size: .55em;
+		@media ($mq-max--wcs-steps-small-layout) {
+			margin-left: $wcs-steps-spacing;
+		}
+		@media ($mq-min--wcs-steps-horizontal-layout) {
+			text-align: center;
+		}
+		@include desktop-vertical-steps() {
+			text-align: left;
+		}
+	}
+
+	&:not(.current) & {
+		&--marker {
+			border: 1px solid;
+		}
+	}
+}
\ No newline at end of file
diff --git a/static/amiens-metropole/_header.scss b/static/amiens-metropole/_header.scss
index fcb98902..70870870 100644
--- a/static/amiens-metropole/_header.scss
+++ b/static/amiens-metropole/_header.scss
@@ -1,7 +1,7 @@
 /* Header */
 $header-content-margin: 5px;
 
-#page	header {
+.site-header {
 	@include flex(0 1 0);
 
 	background: $primary-color;
@@ -173,7 +173,7 @@ $header-content-margin: 5px;
 	}
 }
 @media screen and (min-width: $mobile-limit+1px) {
-	header {
+	.site-header {
 		height: $header-height;
 
 		#header #top {
@@ -187,7 +187,7 @@ $header-content-margin: 5px;
 }
 
 @media screen and (max-width: $mobile-limit) {
-	header {
+	.site-header {
 		height: $header-height * 2;
 
 		#header #top {
diff --git a/static/amiens-metropole/_vars.scss b/static/amiens-metropole/_vars.scss
index f0baa795..a9cee327 100644
--- a/static/amiens-metropole/_vars.scss
+++ b/static/amiens-metropole/_vars.scss
@@ -34,18 +34,18 @@ $input-border-radius: 50px;
 $input-form-margin: 0.5em 0;
 $form-margin: 3em;
 // Steps
-$custom-steps-container-padding: 0 3em;
-$custom-step-margin: 25px 0;
-$custom-step-padding: 0.5ex;
-$custom-label-margin: 1em;
-$custom-current-marker-background: #CF0D8A;
-$custom-current-marker-color: white;
-$custom-step-current-background: white;
-$custom-step-mobile-padding: 0 0.6em 1ex 0;
-$custom-step-marker-margin: 0 auto;
-$custom-step-marker-color: gray;
-$custom-step-marker-border: gray;
-$custom-step-marker-background: transparent;
+$wcs-steps-background: #fff;
+$wcs-steps-spacing: 1.4rem;
+$wcs-step_color: grey;
+$wcs-step-current-color: #CF0D8A;
+$wcs-step-border-bottom: none;
+$wcs-step-marker-type: disc tied;
+$wcs-step-marker-size: 2.2em !default;
+$wcs-step-marker-background: white;
+$wcs-step-current-marker-background: #CF0D8A;
+$wcs-step-current-marker-color: #fff;
+$wcs-step-marker-tie-width: 1px;
+
 // Generic title style
 %title-style {
 	color: $title-color;
-- 
2.20.1

