fix(divider): vertical in stackable mobile grid

Final fix for vertical divider inside a stackable grid. However, the divider needs to be set at the desired location (between the columns where it should be shown)
fomantic · Feb 15, 2025 · f120df6 · f120df6
1 parent 62c1060
commit f120df6
Showing 1 changed file with 48 additions and 38 deletions.
diff --git a/src/definitions/elements/divider.less b/src/definitions/elements/divider.less
@@ -50,8 +50,8 @@
 --------------- */
 
 /* Allow divider between each column row */
-.ui.grid > .column + .divider,
-.ui.grid > .row > .column + .divider {
+.ui.grid > .column + .divider@{notVertical},
+.ui.grid > .row > .column + .divider@{notVertical} {
     left: auto;
 }
 
@@ -126,45 +126,55 @@
         bottom: 0;
     }
 
-    /* Inside grid */
-    @media only screen and (max-width: @largestMobileScreen) {
+    & when (@variationGridStackable) {
+        /* Inside grid */
         .ui.stackable.grid .ui.vertical.divider,
         .ui.grid .stackable.row .ui.vertical.divider {
-            display: table;
-            white-space: nowrap;
-            height: auto;
-            margin: @horizontalMargin;
-            overflow: hidden;
-            line-height: 1;
-            text-align: center;
-            position: static;
-            top: 0;
-            left: 0;
-            transform: none;
+            flex: 1;
         }
-
-        .ui.stackable.grid .ui.vertical.divider::before,
-        .ui.grid .stackable.row .ui.vertical.divider::before,
-        .ui.stackable.grid .ui.vertical.divider::after,
-        .ui.grid .stackable.row .ui.vertical.divider::after {
-            left: 0;
-            border-left: none;
-            border-right: none;
-            content: "";
-            display: table-cell;
-            position: relative;
-            top: 50%;
-            width: 50%;
-            background-repeat: no-repeat;
-        }
-
-        .ui.stackable.grid .ui.vertical.divider::before,
-        .ui.grid .stackable.row .ui.vertical.divider::before {
-            background-position: right @horizontalDividerMargin top 50%;
-        }
-        .ui.stackable.grid .ui.vertical.divider::after,
-        .ui.grid .stackable.row .ui.vertical.divider::after {
-            background-position: left @horizontalDividerMargin top 50%;
+        @media only screen and (max-width: @largestMobileScreen) {
+            .ui.stackable.grid .column + .ui.vertical.divider,
+            .ui.grid .stackable.row .column + .ui.vertical.divider {
+                margin: @verticalDividerMargin;
+            }
+            .ui.stackable.grid .ui.vertical.divider,
+            .ui.grid .stackable.row .ui.vertical.divider {
+                display: table;
+                white-space: nowrap;
+                height: auto;
+                margin: @horizontalMargin;
+                overflow: hidden;
+                line-height: 1;
+                text-align: center;
+                position: static;
+                top: 0;
+                left: 0;
+                transform: none;
+            }
+
+            .ui.stackable.grid .ui.vertical.divider::before,
+            .ui.grid .stackable.row .ui.vertical.divider::before,
+            .ui.stackable.grid .ui.vertical.divider::after,
+            .ui.grid .stackable.row .ui.vertical.divider::after {
+                left: 0;
+                border-left: none;
+                border-right: none;
+                content: "";
+                display: table-cell;
+                position: relative;
+                top: 50%;
+                width: 50%;
+                background-repeat: no-repeat;
+            }
+
+            .ui.stackable.grid .ui.vertical.divider::before,
+            .ui.grid .stackable.row .ui.vertical.divider::before {
+                background-position: right @horizontalDividerMargin top 50%;
+            }
+            .ui.stackable.grid .ui.vertical.divider::after,
+            .ui.grid .stackable.row .ui.vertical.divider::after {
+                background-position: left @horizontalDividerMargin top 50%;
+            }
         }
     }
 }