From 279b0e612054106a1a65632d254215bb8e1a9f58 Mon Sep 17 00:00:00 2001
From: Emmanuel Cazenave <ecazenave@entrouvert.com>
Date: Thu, 12 Jul 2018 12:02:42 +0200
Subject: [PATCH] rouen: add circles steps (#25104)

---
 static/rouen/_circle-steps.scss | 83 +++++++++++++++++++++++++++++++++
 static/rouen/_vars.scss         |  3 +-
 static/rouen/style.scss         |  1 +
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 static/rouen/_circle-steps.scss

diff --git a/static/rouen/_circle-steps.scss b/static/rouen/_circle-steps.scss
new file mode 100644
index 0000000..d693edb
--- /dev/null
+++ b/static/rouen/_circle-steps.scss
@@ -0,0 +1,83 @@
+div#steps {
+
+	padding: 0 1em;
+
+	ol li {
+		@include flexbox();
+		@include flex-direction(column);
+
+		margin: 25px 0;
+		padding: 0.5ex;
+		position: relative;
+		border: 0;
+
+		span.marker {
+			@include justify-content(center);
+			@include vendor-prefix(align-items, center);
+			display: inline-flex;
+			margin: 0 auto 0.3em auto;
+			width: 3.5vw;
+			height: 3.5vw;
+			color: gray;
+			position: relative;
+			border: 1px solid gray;
+			border-radius: 50%;
+			background: transparent;
+			font-size: calc(12px + 1.2vw);
+			font-weight: bold;
+			text-align: center;
+			vertical-align: middle;
+			max-width: 100%;
+			max-height: 100%;
+
+		}
+
+		span.label {
+			color: $steps-color;
+			margin: 0 -1em;
+			text-align: center;
+			vertical-align: middle;
+		}
+
+		&.current {
+			background: transparent;
+			font-weight: bold;
+
+			span.marker {
+				color: white;
+				border-color: $primary-color;
+				background: $primary-color;
+			}
+		}
+	}
+}
+@media screen and (max-width: $mobile-limit) {
+	div#gauche div#steps {
+
+		@include order(2);
+		padding: 0;
+
+		ol {
+			@include flexbox();
+			@include flex-direction(row);
+			@include vendor-prefix(flex-flow, nowrap);
+			@include justify-content(center);
+			@include vendor-prefix(align-items, center);
+
+			li {
+				padding: 0 0.6em 1ex 0;
+
+				span.marker {
+					padding: 0.3em;
+					border-radius: 50%;
+					width: 3.5rem; // reset size without vw
+					height: 3.5rem;
+				}
+
+				span.label {
+					display: none;
+				}
+			}
+		}
+	}
+}
diff --git a/static/rouen/_vars.scss b/static/rouen/_vars.scss
index f7fd4d6..324d5ee 100644
--- a/static/rouen/_vars.scss
+++ b/static/rouen/_vars.scss
@@ -23,6 +23,7 @@ $nav-button-background: $black;
 $nav-item-selected-background: #2D2D2D;
 $nav-mobile-menu-background: $pale-primary-color;
 $sidebar-width: 240px;
+$steps-color: #9B9B9B;
 $title-weight: bold;
 $width: 1243.97px;
-$custom-very-small-screen: 480px;
\ No newline at end of file
+$custom-very-small-screen: 480px;
diff --git a/static/rouen/style.scss b/static/rouen/style.scss
index 0d95e9e..4917dee 100644
--- a/static/rouen/style.scss
+++ b/static/rouen/style.scss
@@ -3,4 +3,5 @@
 @import 'vars';
 @import '../includes/publik';
 @import '../includes/flexbox_mixins';
+@import 'circle-steps';
 @import 'custom';
-- 
2.18.0