feat(header): seamless attached variant

The attached header doesn't support the seamless variant like the segment element which results in showing the border between the header and the attached element below. This PR allows to have the attached header element with seamless variant that allows to remove the bottom border when it attaches with the another segment below.
fomantic · Sep 22, 2023 · b198514 · b198514
1 parent 3ada1e1
commit b198514
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less
@@ -467,6 +467,11 @@
     .ui.bottom.attached.header {
         border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
     }
+    & when (@variationHeaderSeamless) {
+        .ui.seamless.attached:not(.bottom).header {
+            border-bottom: none;
+        }
+    }
 
     /* Attached Sizes */
     .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -82,6 +82,7 @@
 @variationHeaderDividing: true;
 @variationHeaderBlock: true;
 @variationHeaderAttached: true;
+@variationHeaderSeamless: true;
 @variationHeaderTags: h1, h2, h3, h4, h5, h6;
 @variationHeaderSizes: @variationAllSizes;
 @variationHeaderColors: @variationAllColors;