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)

Author: lubber-de

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;
     }
 }
 

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;
+            }
+        }
     }
 }
 

src/themes/default/globals/variation.variables

@@ -233,6 +233,7 @@
 @variationSegmentSecondary: true;
 @variationSegmentTertiary: true;
 @variationSegmentAttached: true;
+@variationSegmentSeamless: true;
 @variationSegmentFitted: true;
 @variationSegmentScrolling: true;
 @variationSegmentScrollingShort: true;