concarneau: update steps (#36765)

static/avray/_custom.scss

@@ -511,20 +511,29 @@ div.large div#rub_service h3,
 div#rub_service h3 {
         border-bottom: 2px solid $title-color;
 }
-div#steps ol {
-        & li.current {
-                background: $title-color;
-                color: $title-background;
-        }
+//steps
+.wcs-step--marker {
+	font-weight: bold;
 }
-@if ($responsive-steps == horizontal) {
-	@media screen and (max-width: $mobile-limit) {
-		div#steps ol li.current span.marker {
-			background: $title-color;
-			color: $title-background;
+@include desktop-vertical-steps() {
+	.wcs-step {
+		padding-left: 0;
+		&--label {
+			margin-left: 0;
+		}
+		&.current {
+			background-color: $primary-color;
+		}
+		&.current & {
+			&--label {
+				color: #fff;
+				font-weight: normal;
+			}
 		}
 	}
 }
+
+
 /* customization des liens dans les catégories de formulaires */
 div#rub_service div.category ul,
 div#services > ul > li > ul,

static/avray/_vars.scss

@@ -51,3 +51,10 @@ $button-hover-color: $link-color;
 
 $table-headers-background: $title-color !default;
 $table-headers-color: $title-background !default;
+
+$wcs-steps-spacing: 0.7rem; 
+$wcs-step-background: #fff;
+$wcs-step-current-border-bottom: none;
+$wcs-step-marker-color: #bbb;
+$wcs-step-current-marker-color: #fff;
+$wcs-step-current-marker-background: $primary-color;

static/concarneau/_custom.scss

@@ -267,58 +267,6 @@ body {
                                 }
                             }
 
-                            #steps {
-                                border-top: 12px solid white;
-                                background-color: $tertiary-color;
-
-                                ol {
-                                    padding: 0;
-
-                                    li {
-                                        margin: 0 1em;
-                                        padding: 1em 0;
-                                        border-bottom: 2px solid #BABABA;
-                                        word-wrap: break-word;
-
-                                        span {
-                                            float: left;
-                                            color: #333;
-                                        }
-                                        span.marker {
-                                            width: 20%;
-                                            margin-right: 10%;
-                                            line-height: 1em;
-                                            vertical-align: middle;
-                                            text-align: right;
-                                            font-family: OpenSans-Bold,Arial,sans-serif;
-                                        }
-                                        span.label {
-                                            max-width: 70%;
-                                            vertical-align: middle;
-                                            font-style: italic;
-                                            font-size: 0.9em;
-                                        }
-                                    }
-                                    li::after {
-                                        content: '';
-                                        clear: both;
-                                        display: block;
-                                    }
-                                    li:last-child {
-                                        border-bottom: none;
-                                    }
-                                    li.current {
-                                        background: $primary-color;
-                                        margin: 0;
-                                        border-bottom: none;
-                                        padding-left: 1em;
-
-                                        span {
-                                            color: white;
-                                        }
-                                    }
-                                }
-                            }
                         }
 
                         .cell {
@@ -598,29 +546,43 @@ body #page {
                 }
             }
 
-            #steps {
-                order: 2;
-                ol li span.marker,
-                ol li.current span.marker {
-                    background: none;
-                    border: none;
-                }
-                ol li {
-                    display: block;
 
-                    span.marker {
-                        color: $secondary-color;
-                    }
-                }
-                ol li.current span.marker {
-                    padding-left: 5px;
-                }
-                ol li.current span.label {
-                    font-weight: bold;
-                }
-            }
         }
     }
 }
 
 }
+
+// Steps
+.wcs-steps {
+    font-size: 1.4em;
+    order: 2;
+    clear: both;
+    margin-top: 12px;
+}
+.wcs-step {
+    &--marker {
+        font-family: OpenSans-Bold,Arial,sans-serif;
+        font-weight: 700;
+    }
+    &--label {
+        font-style: italic;
+        margin: 1em;
+        font-size: .7em;
+    }
+}
+
+@include desktop-vertical-steps() {
+    .wcs-step {
+        font-size: 1.2em;
+        &.current {
+            background-color: $primary-color;
+            color: #fff;
+        }
+        &--label {
+            margin: 0;
+            font-size: 0.54em;
+            color: inherit !important;
+        }
+    }
+}

static/concarneau/_vars.scss

@@ -50,3 +50,12 @@ $button-border: 0;
 $button-hover-background: #f39200;
 $button-hover-color: black;
 
+
+$wcs-steps-spacing: 0;
+$wcs-step-border-bottom: none;
+$wcs-steps-background: $tertiary-color;
+$wcs-step-color: #333;
+$wcs-step-current-color: #333;
+$wcs-step-current-marker-color: #fff;
+$wcs-step-current-marker-background: $primary-color;
+$wcs-step-marker-size: 2.5em;

static/coprec/_custom.scss

@@ -291,3 +291,21 @@ body.page-template-landing_page.has-picture {
 }
 /* fin surcharge landing pages */
 
+// steps
+@include desktop-vertical-steps() {
+	.wcs-step {
+		font-size: 1.1em;
+		padding-left: 0;
+		&--label {
+			margin-left: 0;
+		}
+		&.current {
+			background-color: $primary-color;
+		}
+		&.current & {
+			&--label {
+				color: #fff;
+			}
+		}
+	}
+}

static/coprec/_vars.scss

@@ -33,3 +33,9 @@ $button-hover-color: $link-color;
 $nav-item-selected-mode: bottom-border;
 $nav-item-selected-border: 4px solid transparent;
 $nav-item-hover-border: 4px solid $primary-color;
+
+$wcs-steps-spacing: 0.7rem; 
+$wcs-step-background: #fff;
+$wcs-step-current-border-bottom: none;
+$wcs-step-current-marker-color: #fff;
+$wcs-step-current-marker-background: $primary-color;

static/malakoff/_custom.scss

@@ -475,3 +475,23 @@ div#services > ul > li > strong > a,
 }
 /* fin ajustement petits écrans */
 
+//steps
+.wcs-step--marker {
+	font-size: 1.2em;
+}
+@include desktop-vertical-steps() {
+	.wcs-step {
+		padding-left: 0;
+		&--label {
+			margin-left: 0;
+		}
+		&.current {
+			background-color: $primary-color;
+		}
+		&.current & {
+			&--label {
+				color: #fff;
+			}
+		}
+	}
+}

static/malakoff/_vars.scss

@@ -36,3 +36,9 @@ $button-background: $link-color;
 $button-hover-background: white;
 $button-hover-color: $link-color;
 
+$wcs-steps-spacing: 0.7rem; 
+$wcs-step-background: #fff;
+$wcs-step-current-border-bottom: none;
+$wcs-step-current-marker-color: #fff;
+$wcs-step-current-marker-background: $primary-color;
+$wcs-step-marker-size: 1.8em;