fix #506 Stepper should allow to circumvent the forced vertical direc…

…tion on small devices
DominoKit · Nov 13, 2024 · 6420519 · 6420519
1 parent 17b98db
commit 6420519
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 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
@@ -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/...kit/domino/ui/public/css/domino-ui/dui-components/screens/domino-ui-screen-small-down.css b/...kit/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;
+    }
+
 }