feat(segment): seamless variant

enhanced the new left/right attached segment (#2683) by having borders removed using a dedicated seamless class. The previous approach removed the borders as well but "attached" does not remove them in vertical usage, so this is consistent now. In addition seamless also works for vertical segments This PR also fixes the wrong terminology (a left attached has to remove the right border and vices versa to be consistent of having a top attached having the bottom border removed)
fomantic · Feb 3, 2023 · 79582b2 · 79582b2
1 parent 16dfb7e
commit 79582b2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less
@@ -1974,10 +1974,10 @@
 
 & when (@variationGridAttached) {
     .ui.grid .left.attached.column {
-        padding-left: 0;
+        padding-right: 0;
     }
     .ui.grid .right.attached.column {
-        padding-right: 0;
+        padding-left: 0;
     }
 }
 

diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
@@ -727,7 +727,7 @@
             border: @attachedBorder;
         }
     }
-    .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) {
+    .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top):not([class*="left attached"]):not([class*="right attached"]) {
         border-top: none;
     }
 
@@ -761,13 +761,31 @@
     .ui.tab.segment[class*="bottom attached"]:last-child {
         margin-bottom: @verticalMargin;
     }
-    .ui.ui[class*="left attached"].segment {
-        border-left: none;
+    .ui[class*="left attached"].segment {
+        margin-right: 0;
+    }
+    .ui[class*="right attached"].segment {
         margin-left: 0;
     }
-    .ui.ui[class*="right attached"].segment {
-        border-right: none;
-        margin-right: 0;
+    & when (@variationSegmentSeamless) {
+        .ui.seamless.attached.segment {
+            &:not(.top):not(.bottom):not([class*="right attached"]):not([class*="left attached"]) {
+                border-top: none;
+                border-bottom: none;
+            }
+            &.top {
+                border-bottom: none;
+            }
+            &.bottom {
+                border-top: none;
+            }
+            &[class*="left attached"] {
+                border-right: none;
+            }
+            &[class*="right attached"] {
+                border-left: none;
+            }
+        }
     }
 }
 

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -233,6 +233,7 @@
 @variationSegmentSecondary: true;
 @variationSegmentTertiary: true;
 @variationSegmentAttached: true;
+@variationSegmentSeamless: true;
 @variationSegmentFitted: true;
 @variationSegmentScrolling: true;
 @variationSegmentScrollingShort: true;