fomantic-ui 2.9.3-beta.10 → 2.9.3-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.3-beta.10+11b4099",
+  "version": "2.9.3-beta.11+980ea5e",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/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;
+                }
             }
         }
     });

package/src/definitions/collections/menu.less

@@ -1623,29 +1623,36 @@ Floated Menu / Item
     }
 }
 
-/* -------------------
-      Evenly Sized
--------------------- */
+& when (@variationMenuEqualWidth) {
+    /* -------------------
+          Evenly Sized
+    -------------------- */
 
-.ui.item.menu,
-.ui.item.menu .item {
-    width: 100%;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    text-align: center;
-    justify-content: center;
-}
-.ui.attached.item.menu:not(.tabular) {
-    margin: 0 @attachedHorizontalOffset !important;
-}
+    .ui[class*="equal width"].menu > .item {
+        flex: 1;
+    }
 
-.ui.item.menu .item:last-child::before {
-    display: none;
-}
+    .ui[class*="equal width"].menu > .item,
+    .ui.item.menu,
+    .ui.item.menu .item {
+        width: 100%;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        text-align: center;
+        justify-content: center;
+    }
+    .ui.attached[class*="equal width"].menu:not(.tabular),
+    .ui.attached.item.menu:not(.tabular) {
+        margin: 0 @attachedHorizontalOffset !important;
+    }
+
+    .ui[class*="equal width"].menu > .item:last-child::before,
+    .ui.item.menu .item:last-child::before {
+        display: none;
+    }
 
-& when (@variationMenuEqualWidth) {
     .ui.menu.two.item .item {
         width: 50%;
     }

package/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,7 +203,7 @@
     .ui.piled.segments::before,
     .ui.piled.segment::after,
     .ui.piled.segment::before {
-        background-color: @white;
+        background-color: inherit;
         visibility: visible;
         content: "";
         display: block;
@@ -208,9 +211,16 @@
         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) {

package/src/definitions/modules/search.js

@@ -561,6 +561,7 @@
                         if (cache) {
                             module.debug('Reading result from cache', searchTerm);
                             module.save.results(cache.results);
+                            settings.onResults.call(element, cache.results, true);
                             module.addResults(cache.html);
                             module.inject.id(cache.results);
                             callback();
@@ -1345,7 +1346,7 @@
         onResultsAdd: false,
 
         onSearchQuery: function (query) {},
-        onResults: function (response) {},
+        onResults: function (response, fromCache) {},
 
         onResultsOpen: function () {},
         onResultsClose: function () {},

package/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,

package/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;

package/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

package/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;