From 64205190e7f86c4e728c33c94806838570dfb12d Mon Sep 17 00:00:00 2001
From: "Ahmad K. Bawaneh" <ahmad.bawaneh@dominokit.com>
Date: Wed, 13 Nov 2024 13:42:05 +0300
Subject: [PATCH] fix #506 Stepper should allow to circumvent the forced
 vertical direction on small devices

---
 .../dominokit/domino/ui/style/GenericCss.java |   2 +
 .../screens/domino-ui-screen-small-down.css   | 105 ++++++++++--------
 2 files changed, 60 insertions(+), 47 deletions(-)

diff --git a/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java b/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java
index e59219073..5a53b3d4e 100644
--- a/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java
+++ b/domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/GenericCss.java
@@ -215,6 +215,8 @@ public interface GenericCss {
   CssClass dui_vertical =
       ReplaceCssClass.of(() -> "dui-horizontal").replaceWith(() -> "dui-vertical");
 
+  CssClass dui_responsive = () -> "dui-responsive";
+
   CssClass dui_postfix_addon = () -> "dui-postfix-addon";
 
   CssClass dui_subheader_addon = () -> "dui-subheader-addon";
diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/screens/domino-ui-screen-small-down.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/screens/domino-ui-screen-small-down.css
index 2a69c42c1..da4f43d7e 100644
--- a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/screens/domino-ui-screen-small-down.css
+++ b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/screens/domino-ui-screen-small-down.css
@@ -14,53 +14,6 @@
         flex-direction: row;
     }
 
-    .dui-stepper-track.dui-horizontal {
-        --dui-stepper-track-direction: column;
-        --dui-stepper-track-justify-content: center;
-        --dui-step-tracker-direction: row;
-        width: auto;
-    }
-    .dui-horizontal .dui-tracker-chain {
-        width: auto;
-        align-self: stretch;
-    }
-
-    .dui-horizontal > .dui-stepper-track > .dui-step-track:last-child .dui-tracker-line:after,
-    .dui-stepper-track.dui-horizontal > .dui-step-track:last-child .dui-tracker-line:after {
-        width: var(--dui-spc-4);
-        height: var(--dui-spc-4);
-        border-radius: 9999px;
-        left: calc(var(--dui-spc-1) * -1);
-        bottom: calc(var(--dui-spc-1) * -1);
-        top: auto;
-    }
-
-    .dui-horizontal .dui-tracker-line {
-        height: auto;
-        width: var(--dui-spc-2);
-    }
-
-    .dui-horizontal .dui-tracker-line:before {
-        width: var(--dui-spc-2);
-        height: var(--dui-spc-1);
-        top: calc(var(--dui-spc-1) * -1);
-        left: 0;
-    }
-
-    .dui-horizontal .dui-tracker-line:after {
-        width: var(--dui-spc-2);
-        background-color: var(--dui-accent-clr);
-        height: var(--dui-spc-1);
-        bottom: calc(var(--dui-spc-1) * -1);
-        left: 0;
-        right: auto;
-        top: auto;
-    }
-
-    .dui-stepper.dui-horizontal {
-        --dui-stepper-direction: column;
-    }
-
     .dui.dui-hide-on-small-and-down,
     .dui.dui-hide-on-small-and-down.dui-block,
     .dui.dui-hide-on-small-and-down.dui-block-full,
@@ -177,4 +130,62 @@
         display: list-item;
     }
 
+    .dui-stepper.dui-responsive {
+        --dui-stepper-direction: row;
+    }
+
+    .dui-stepper.dui-responsive .dui-stepper-track,
+    .dui-stepper-track.dui-responsive {
+        --dui-stepper-track-direction: column;
+        --dui-step-tracker-direction: row;
+        min-height: 100%;
+    }
+
+    .dui-stepper-track.dui-responsive.dui-reversed ,
+    .dui-stepper.dui-responsive.dui-reversed .dui-stepper-track,
+    .dui-stepper.dui-reversed .dui-stepper-track.dui-responsive{
+        --dui-step-tracker-direction: row-reverse;
+    }
+
+    .dui-stepper-track.dui-responsive .dui-tracker-chain,
+    .dui-stepper.dui-responsive .dui-tracker-chain {
+        height: 100%;
+        width: auto;
+    }
+
+    .dui-stepper.dui-responsive > .dui-stepper-track > .dui-step-track:last-child .dui-tracker-line:after,
+    .dui-stepper-track.dui-responsive > .dui-step-track:last-child .dui-tracker-line:after {
+        width: var(--dui-stepper-track-tail-node-width);
+        height: var(--dui-stepper-track-tail-node-width);
+        border-radius: var(--dui-stepper-track-tail-node-border-radius);
+        top: auto;
+        left: calc(var(--dui-spc-1) * -1);
+        bottom: calc(var(--dui-spc-1) * -1);
+    }
+
+    .dui-stepper-track.dui-responsive .dui-tracker-line,
+    .dui-stepper.dui-responsive .dui-tracker-line {
+        height: auto;
+        width: var(--dui-step-tracker-line-thinkness);
+    }
+
+    .dui-stepper-track.dui-responsive .dui-tracker-line:before,
+    .dui-stepper.dui-responsive .dui-tracker-line:before {
+        height: var(--dui-spc-1);
+        width: var(--dui-step-tracker-line-thinkness);
+        left: auto;
+        top: calc(var(--dui-spc-1) * -1);
+        right: auto;
+    }
+
+    .dui-stepper-track.dui-responsive .dui-tracker-line:after,
+    .dui-stepper.dui-responsive .dui-tracker-line:after {
+        height: var(--dui-spc-1);
+        width: var(--dui-step-tracker-line-thinkness);
+        top: auto;
+        left: auto;
+        bottom: calc(var(--dui-spc-1) * -1);
+        right: auto;
+    }
+
 }
\ No newline at end of file