From 6a423e9b274779638e82a2437c0ba56d3684771f Mon Sep 17 00:00:00 2001
From: Elias Showk <eshowk@entrouvert.com>
Date: Wed, 18 Jul 2018 14:06:48 +0200
Subject: [PATCH] misc: add circle steps option in wcs (#23533)

---
 static/includes/_form-steps.scss | 181 +++++++++++++++++++++++++++++++
 static/includes/_wcs.scss        | 151 +++++++++++---------------
 2 files changed, 242 insertions(+), 90 deletions(-)
 create mode 100644 static/includes/_form-steps.scss

diff --git a/static/includes/_form-steps.scss b/static/includes/_form-steps.scss
new file mode 100644
index 0000000..66ce2e0
--- /dev/null
+++ b/static/includes/_form-steps.scss
@@ -0,0 +1,181 @@
+@import 'flexbox_mixins';
+
+$circle-steps-container-padding: 0 3em !default;
+$circle-steps-container-mobile-padding: 1em 0 !default;
+$circle-steps-margin: 25px 0 !default;
+$circle-steps-padding: 0.5ex !default;
+$circle-steps-marker-margin: 0 auto !default;
+$circle-steps-marker-color: gray !default;
+$circle-steps-marker-background: transparent !default;
+$circle-steps-marker-border: 1px solid gray !default;
+$circle-steps-marker-diameter: 4vw !default;
+$circle-steps-with-lines: true !default;
+$circle-steps-lines-color: $primary-color !default;
+$circle-steps-label-margin: 1em !default;
+$circle-steps-label-transform: uppercase !default;
+$circle-steps-label-color: #868686 !default;
+$circle-steps-current-background: white !default;
+$circle-steps-current-marker-color: white !default;
+$circle-steps-current-marker-background: $primary-color !default;
+$circle-steps-mobile-padding: 0 0.6em 1ex 0 !default;
+$circle-steps-mobile-marker-diameter: 4rem !default;
+
+/* steps */
+
+@if $circle-steps {
+
+	div#steps {
+		padding: $circle-steps-container-padding;
+
+		ol li {
+			@include flexbox();
+			@include flex-direction(column);
+			margin: $circle-steps-margin;
+			padding: $circle-steps-padding;
+			position: relative;
+			border: 0;
+
+			@if $circle-steps-with-lines {
+				&.first {
+					span.marker::after {
+						display: none;
+					}
+				}
+				span.marker::after {
+					content: ' ';
+					position: absolute;
+					height: 50%;
+					width: 1px;
+					bottom: 100%;
+					right: 50%;
+					background-color: $circle-steps-marker-color;
+					padding: 0;
+				}
+			}
+
+			span.marker {
+				@include justify-content(center);
+				@include vendor-prefix(align-items, center);
+				display: inline-flex;
+				margin: $circle-steps-marker-margin;
+				position: relative;
+				color: $circle-steps-marker-color;
+				background: $circle-steps-marker-background;
+				border: $circle-steps-marker-border;
+				border-radius: 50%;
+				font-size: calc(12px + 1.2vw);
+				font-weight: bold;
+				text-align: center;
+				vertical-align: middle;
+				width: $circle-steps-marker-diameter;
+				height: $circle-steps-marker-diameter;
+				// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
+				max-width: 100%;
+				max-height: 100%;
+				box-sizing: border-box;
+				// hide the colored circle
+				&::before {
+					display: none;
+				}
+			}
+
+			span.label {
+				margin: $circle-steps-label-margin;
+				color: $circle-steps-label-color;
+				text-align: center;
+				vertical-align: middle;
+				text-transform: $circle-steps-label-transform;
+			}
+
+			&.current {
+				background: $circle-steps-current-background;
+				font-weight: bold;
+
+				span.label {
+					color: $title-color;
+				}
+
+				span.marker {
+					color: $circle-steps-current-marker-color;
+					border-color: $circle-steps-current-marker-background;
+					background: $circle-steps-current-marker-background;
+				}
+			}
+		}
+	}
+	@media screen and (max-width: $mobile-limit) {
+		div#gauche div#steps {
+
+			@include order(1);
+			padding: $circle-steps-container-mobile-padding;
+
+			ol {
+				@include flexbox();
+				@include flex-direction(row);
+				@include justify-content(center);
+				@include vendor-prefix(flex-flow, nowrap);
+				@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: $circle-steps-mobile-padding;
+
+					span.marker {
+						border-radius: 50%;
+						padding: 2px 9px;
+						width: $circle-steps-mobile-marker-diameter; // reset size without vw
+						height: $circle-steps-mobile-marker-diameter;
+
+						@if $circle-steps-with-lines {
+							&::after {
+								content: ' ';
+								position: absolute;
+								height: 1px;
+								width: 10px;
+								bottom: 50%;
+								padding: 0;
+								left: -10px;
+							}
+						}
+					}
+					// hide steps label on little screens
+					span.label {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+} @else {
+	div#steps ol {
+		margin: 0;
+		padding: 0;
+		text-align: left;
+		list-style: none;
+		color: #868686;
+
+		& li {
+			border: 0;
+			border-bottom: 1px solid #CCC;
+			margin-bottom: 2ex;
+			border-radius: $border-radius;
+			padding: 1ex;
+			letter-spacing: 1px;
+		}
+		& li.current {
+			border: 0;
+			background: $title-background;
+			color: $title-color;
+			& span.label {
+				font-weight: bold;
+			}
+		}
+		& li span.marker {
+			display: block;
+			font-size: 250%;
+		}
+	}
+}
diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss
index 9ad6185..789d46c 100644
--- a/static/includes/_wcs.scss
+++ b/static/includes/_wcs.scss
@@ -1,6 +1,8 @@
 @import 'grid';
+@import 'form-steps';
 
 $responsive-steps: horizontal !default;
+$circle-steps: false !default;
 
 /* hide a bunch of elements */
 div#droite,
@@ -106,105 +108,74 @@ div#services div.block-custom-text {
 	margin: 1em;
 }
 
-/* steps */
-
-div#steps ol {
-	text-align: left;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	color: #868686;
-
-	& li {
-		border: 0;
-		border-bottom: 1px solid #ccc;
-		margin-bottom: 2ex;
-		border-radius: $border-radius;
-		padding: 1ex;
-		letter-spacing: 1px;
-	}
-	& li.current {
-		border: 0;
-		background: $title-background;
-		color: $title-color;
-		& span.label {
-			font-weight: bold;
-		}
-	}
-	& li span.marker {
-		font-size: 250%;
-		display: block;
-	}
-}
-
 @if ($responsive-steps == horizontal) {
-@media screen and (max-width: $mobile-limit) {
-	div#gauche {
-		float: none;
-		width: 100%;
-	}
-	div#side {
-		display: flex;
-		flex-direction: column;
-		& > div { flex: 1 0 auto; }
-	}
-	div#tracking-code {
-		font-size: 80%;
-		order: 1;
-		h3 { display: inline-block; }
-		.text-tracking-code-short-text { display: none; }
-	}
-	div#steps {
-		position: static;
-		margin: 0;
-		color: #aaa;
-		white-space: nowrap;
-		overflow: hidden;
-		width: 100%;
-		& ol {
-			list-style: none;
-			padding: 0 0;
+	@media screen and (max-width: $mobile-limit) {
+		div#gauche {
+			float: none;
+			width: 100%;
+		}
+		div#side {
+			display: flex;
+			flex-direction: column;
+			& > div { flex: 1 0 auto; }
+		}
+		div#tracking-code {
+			font-size: 80%;
+			order: 1;
+			h3 { display: inline-block; }
+			.text-tracking-code-short-text { display: none; }
+		}
+		div#steps {
+			position: static;
 			margin: 0;
-			text-align: left;
-			& li {
-				border: none;
-				display: inline-block;
-				margin: 0;
-				padding: 0 1em 1ex 0;
+			color: #aaa;
+			white-space: nowrap;
+			overflow: hidden;
+			width: 100%;
+			& ol {
 				list-style: none;
-				border-radius: 0;
-				& span.marker {
-					float: none;
-					display: inline;
-					font-size: 26px;
-					position: static;
-					padding: 2px 9px;
-					font-weight: bold;
-					color: white;
-					text-align: center;
-					background: #ddd;
-					border-radius: $border-radius;
-					border: 1px solid #ddd;
+				padding: 0 0;
+				margin: 0;
+				text-align: left;
+				& li {
+					border: none;
+					display: inline-block;
+					margin: 0;
+					padding: 0 1em 1ex 0;
+					list-style: none;
+					border-radius: 0;
+					& span.marker {
+						float: none;
+						display: inline;
+						font-size: 26px;
+						position: static;
+						padding: 2px 9px;
+						font-weight: bold;
+						color: white;
+						text-align: center;
+						background: #ddd;
+						border-radius: $border-radius;
+						border: 1px solid #ddd;
+					}
 				}
-			}
-			& li.current {
-				background: inherit;
-				color: inherit;
-				& span.label {
-					font-weight: normal;
+				& li.current {
+					background: inherit;
+					color: inherit;
+					& span.label {
+						font-weight: normal;
+					}
+					& span.marker {
+						background: $title-background;
+						color: $title-color;
+						border-radius: $border-radius;
+					}
 				}
-				& span.marker {
-					background: $title-background;
-					color: $title-color;
-					border-radius: $border-radius;
+				& li.step-before .label {
+					display: none;
 				}
 			}
-			& li.step-before .label {
-				display: none;
-			}
 		}
 	}
-}
 } /* @endif ($responsive-steps == horizontal) */
 
 @media screen and (max-width: $mobile-limit) {
-- 
2.18.0