fix(segment): piled segments under parent background, inverted variants

Whenever a piled segment is used inside a container, which has a dedicated background, the piled effect is gone. Also fixed support for inverted variants of piled, raised, stacked and floated toast-box
fomantic · Mar 19, 2023 · 980ea5e · 980ea5e
1 parent edf4286
commit 980ea5e
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 15 deletions.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -527,9 +527,10 @@
             color: @c;
         }
 
-        // needs separate selector because not supported by every browser
-        .ui.form .fields:has(.@{state}) > label {
-            color: @c;
+        @supports selector(:has(.f)) {
+            .ui.form .fields:has(.@{state}) > label {
+                color: @c;
+            }
         }
 
         .ui.form .fields.@{state} .field .ui.label,
@@ -735,9 +736,10 @@
                 color: @lbg;
             }
 
-            // needs separate selector because not supported by every browser
-            .ui.inverted.form .fields:has(.@{state}) > label {
-                color: @lbg;
+            @supports selector(:has(.f)) {
+                .ui.inverted.form .fields:has(.@{state}) > label {
+                    color: @lbg;
+                }
             }
         }
     });

diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
@@ -189,6 +189,9 @@
         margin: @piledMargin 0;
         box-shadow: @piledBoxShadow;
         z-index: @piledZIndex;
+        background-color: @white;
+        border: @piledBorder;
+        color: @textColor;
     }
     .ui.piled.segment:first-child {
         margin-top: 0;
@@ -200,17 +203,24 @@
     .ui.piled.segments::before,
     .ui.piled.segment::after,
     .ui.piled.segment::before {
-        background-color: @white;
+        background-color: inherit;
         visibility: visible;
         content: "";
         display: block;
         height: 100%;
         left: 0;
         position: absolute;
         width: 100%;
-        border: @piledBorder;
+        border: inherit;
         box-shadow: @piledBoxShadow;
     }
+    & when (@variationSegmentInverted) {
+        .ui.inverted.piled.segment {
+            background-color: @invertedBackground;
+            border: @invertedPiledBorder;
+            color: @invertedTextColor;
+        }
+    }
     .ui.piled.segments::before,
     .ui.piled.segment::before {
         transform: rotate(-@piledDegrees);
@@ -240,6 +250,12 @@
             margin-bottom: 0;
         }
     }
+    @supports selector(:has(.f)) {
+        *:has(> .ui.piled.segment) {
+            z-index: 0;
+            position: relative;
+        }
+    }
 }
 
 & when (@variationSegmentStacked) {
@@ -258,7 +274,7 @@
         position: absolute;
         bottom: -(@stackedHeight / 2);
         left: 0;
-        border-top: 1px solid @borderColor;
+        border-top: @borderWidth solid @stackedBorderColor;
         background: @stackedPageBackground;
         width: 100%;
         height: @stackedHeight;
@@ -277,12 +293,14 @@
     }
     & when (@variationSegmentInverted) {
         /* Inverted */
-        .ui.stacked.inverted.segments::before,
-        .ui.stacked.inverted.segments::after,
-        .ui.stacked.inverted.segment::before,
-        .ui.stacked.inverted.segment::after {
-            background-color: @subtleTransparentBlack;
-            border-top: 1px solid @selectedBorderColor;
+        .ui.stacked.inverted.segments,
+        .ui.stacked.inverted.segment {
+            border: @borderWidth solid @invertedStackedBorderColor;
+            &::before,
+            &::after {
+                background-color: @subtleTransparentBlack;
+                border-top: @borderWidth solid @invertedStackedBorderColor;
+            }
         }
     }
 }
@@ -354,6 +372,12 @@
     .ui.raised.raised.segment {
         box-shadow: @raisedBoxShadow;
     }
+    & when (@variationSegmentInverted) {
+        .ui.inverted.raised.raised.segments,
+        .ui.inverted.raised.raised.segment {
+            box-shadow: @invertedRaisedBoxShadow;
+        }
+    }
 }
 
 & when (@variationSegmentGroups) {

diff --git a/src/definitions/modules/toast.less b/src/definitions/modules/toast.less
@@ -139,6 +139,13 @@
                 box-shadow: @floatingShadow;
                 border: @toastBoxBorder;
             }
+            & when (@variationToastInverted) {
+                &.inverted.floating,
+                &.inverted.hoverfloating:hover {
+                    box-shadow: @invertedFloatingShadow;
+                    border: @invertedToastBoxBorder;
+                }
+            }
         }
         & when (@variationToastCompact) {
             &.compact,

diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables
@@ -63,6 +63,7 @@
 @piledBoxShadow: "";
 @piledDegrees: 1.2deg;
 @piledBorder: @border;
+@invertedPiledBorder: @borderWidth solid @solidWhiteBorderColor;
 
 /* Circular */
 @circularPadding: 2em;
@@ -72,6 +73,8 @@
 @stackedPageBackground: @subtleTransparentBlack;
 @stackedPadding: @verticalPadding + (0.4em);
 @tallStackedPadding: @verticalPadding + (0.8em);
+@stackedBorderColor: @borderColor;
+@invertedStackedBorderColor: rgba(225, 225, 225, 0.5);
 
 /*******************************
             States
@@ -92,6 +95,7 @@
 
 /* Raised */
 @raisedBoxShadow: @floatingShadow;
+@invertedRaisedBoxShadow: @invertedFloatingShadow;
 
 /* Padded */
 @paddedSegmentPadding: 1.5em;

diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
@@ -653,6 +653,9 @@
 @floatingShadow:
     0 2px 4px 0 rgba(34, 36, 38, 0.12),
     0 2px 10px 0 rgba(34, 36, 38, 0.15);
+@invertedFloatingShadow:
+    0 2px 4px 0 rgba(225, 225, 225, 0.1),
+    0 2px 10px 0 rgba(225, 225, 225, 0.5);
 
 /*******************************
            Power-User

diff --git a/src/themes/default/modules/toast.variables b/src/themes/default/modules/toast.variables
@@ -36,6 +36,7 @@
 @toastInvertedColor: @black;
 
 @toastBoxBorder: 1px solid rgba(34, 36, 38, 0.12);
+@invertedToastBoxBorder: 1px solid rgba(225, 225, 225, 0.5);
 
 /* Icon */
 @toastIconContentPadding: 3em;