fomantic-ui 2.9.3-beta.4 → 2.9.3-beta.41

package/src/definitions/modules/slider.less

@@ -426,4 +426,5 @@
     });
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/sticky.js

@@ -746,7 +746,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 0);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 0);
                     },
                     display: function () {
                         var

package/src/definitions/modules/sticky.less

@@ -65,4 +65,5 @@
     position: sticky;
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/tab.js

@@ -99,7 +99,7 @@
                     module.bind.events();
 
                     if (settings.history && !initializedHistory) {
-                        module.initializeHistory();
+                        settings.history = module.initializeHistory();
                         initializedHistory = true;
                     }
 
@@ -109,7 +109,7 @@
                         module.debug('No active tab detected, setting tab active', activeTab);
                         module.changeTab(activeTab);
                     }
-                    if (activeTab !== null && settings.history) {
+                    if (activeTab !== null && settings.history && settings.historyType === 'state') {
                         var autoUpdate = $.address.autoUpdate();
                         $.address.autoUpdate(false);
                         $.address.value(activeTab);
@@ -202,6 +202,8 @@
                     $.address
                         .bind('change', module.event.history.change)
                     ;
+
+                    return true;
                 },
 
                 event: {
@@ -786,7 +788,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/tab.less

@@ -82,4 +82,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/toast.js

@@ -702,7 +702,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

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,
@@ -714,4 +721,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/transition.js

@@ -142,7 +142,7 @@
                         ? ($allModules.length - index) * interval
                         : index * interval;
                     module.debug('Delaying animation by', delay);
-                    setTimeout(module.animate, delay);
+                    setTimeout(function () { module.animate(); }, delay);
                 },
 
                 animate: function (overrideSettings) {
@@ -849,7 +849,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/transition.less

@@ -113,4 +113,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/ad.less

@@ -293,4 +293,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/card.less

@@ -1178,4 +1178,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/comment.less

@@ -290,5 +290,13 @@
         }
     }
 }
+& when (@variationCommentDisabled) {
+    .ui.disabled.comments,
+    .ui.comments .disabled.comment {
+        opacity: @disabledOpacity;
+        pointer-events: @disabledPointerEvents;
+    }
+}
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/feed.less

@@ -43,42 +43,75 @@
     padding: @eventPadding;
     margin: @eventMargin;
     background: @eventBackground;
-    border-top: @eventDivider;
+    &:not(:first-child) {
+        border-top: @eventDivider;
+    }
 }
-.ui.feed > .event:first-child {
-    border-top: 0;
+.ui.feed:not(.connected) > .event:first-child {
     padding-top: 0;
 }
 .ui.feed > .event:last-child {
     padding-bottom: 0;
 }
 
-/* Event Label */
-.ui.feed > .event > .label {
-    display: block;
-    flex: 0 0 auto;
-    width: @labelWidth;
-    height: @labelHeight;
-    align-self: @labelAlignSelf;
-    text-align: @labelTextAlign;
-}
-.ui.feed > .event > .label .icon {
-    opacity: @iconLabelOpacity;
-    font-size: @iconLabelSize;
-    width: @iconLabelWidth;
-    padding: @iconLabelPadding;
-    background: @iconLabelBackground;
-    border: @iconLabelBorder;
-    border-radius: @iconLabelBorderRadius;
-    color: @iconLabelColor;
-}
-.ui.feed > .event > .label img {
-    width: @imageLabelWidth;
-    height: @imageLabelHeight;
-    border-radius: @imageLabelBorderRadius;
-}
-.ui.feed > .event > .label + .content {
-    margin: @labeledContentMargin;
+& when (@variationFeedLabel) {
+    /* Event Label */
+
+    .ui.feed > .event > .label {
+        display: block;
+        flex: 0 0 auto;
+        width: @labelWidth;
+        height: @labelHeight;
+        align-self: @labelAlignSelf;
+        text-align: @labelTextAlign;
+    }
+
+    & when (@variationFeedLabelIcon) {
+        .ui.feed > .event > .label .icon {
+            opacity: @iconLabelOpacity;
+            font-size: @iconLabelSize;
+            width: @iconLabelWidth;
+            padding: @iconLabelPadding;
+            background: @iconLabelBackground;
+            border: @iconLabelBorder;
+            border-radius: @iconLabelBorderRadius;
+            color: @iconLabelColor;
+        }
+    }
+    & when (@variationFeedLabelImage) {
+        .ui.feed > .event > .label img {
+            width: @imageLabelWidth;
+            height: @imageLabelHeight;
+            border-radius: @imageLabelBorderRadius;
+        }
+    }
+    & when (@variationFeedLabelText) {
+        .ui.feed > .event > .label > .text {
+            display: block;
+            text-align: center;
+            margin-top: @textLabelTopMargin;
+            &.ui {
+                margin-top: @uiTextLabelTopMargin;
+            }
+            &.multiline {
+                margin-top: @multilineTextLabelTopMargin;
+                &.ui {
+                    margin-top: @uiMultilineTextLabelTopMargin;
+                }
+            }
+        }
+    }
+    & when (@variationFeedLabelUiLabel) {
+        .ui.feed > .event > .label > .ui.label {
+            margin-top: @uiLabelTopMargin;
+            position: relative;
+            z-index: @uiLabelZIndex;
+        }
+    }
+
+    .ui.feed > .event > .label + .content {
+        margin: @labeledContentMargin;
+    }
 }
 
 /* --------------
@@ -146,13 +179,15 @@
         /* Date inside Summary */
         .ui.feed > .event > .content .summary > .date {
             display: @summaryDateDisplay;
-            float: @summaryDateFloat;
             font-weight: @summaryDateFontWeight;
             font-size: @summaryDateFontSize;
             font-style: @summaryDateFontStyle;
             margin: @summaryDateMargin;
             padding: @summaryDatePadding;
             color: @summaryDateColor;
+            &:not(.floated) {
+                float: @summaryDateFloat;
+            }
         }
     }
 }
@@ -274,6 +309,106 @@
 /*******************************
             Variations
 *******************************/
+& when (@variationFeedRightFloated) {
+    /* rtl:rename */
+    .ui.feed .right.floated {
+        float: right;
+    }
+}
+& when (@variationFeedConnected) {
+    .ui.connected.feed > .event {
+        position: relative;
+        &:not(:last-child)::before {
+            border-left: @connectedBorder;
+            content: "";
+            left: @connectedBorderLeftOffset;
+            position: absolute;
+            top: @connectedBorderTopOffset;
+            height: @connectedBorderHeight;
+        }
+        & > .label when (@variationFeedLabel) {
+            position: relative;
+        }
+    }
+    & when (@variationFeedInverted) {
+        .ui.inverted.connected.feed > .event {
+            &::before {
+                border-left-color: @invertedConnectedBorderColor;
+            }
+        }
+    }
+}
+
+& when(@variationFeedDivided) {
+    .ui.divided.feed > .event:not(:first-child) {
+        border-top: @dividedBorder;
+    }
+    & when (@variationFeedInverted) {
+        .ui.inverted.divided.feed > .event {
+            border-top-color: @invertedDividedBorderColor;
+        }
+    }
+}
+& when (@variationFeedLabelText) {
+    .ui.ui.feed > .event > .label[data-text]::before {
+        content: attr(data-text);
+    }
+}
+& when (@variationFeedOrdered) or (@variationFeedLabelText) {
+    .ui.feed > .event > .label[data-text]::before,
+    .ui.ordered.feed > .event > .label::before {
+        text-align: center;
+        line-height: 1;
+        height: @orderedHeight;
+        background: @orderedBackground;
+        color: @orderedColor;
+        border-radius: @orderedBorderRadius;
+        padding-top: @orderedTopOffset;
+        position: relative;
+        display: block;
+        margin-bottom: @orderedBottomMargin;
+        border: @orderedBorder;
+    }
+}
+& when (@variationFeedOrdered) {
+    .ui.ordered.feed {
+        counter-reset: @orderedCountName;
+        & > .event > .label::before {
+            counter-increment: @orderedCountName;
+            content: @orderedCountContent;
+        }
+    }
+    & when (@variationFeedBasic) {
+        .ui.ordered.basic.feed > .event > .label::before,
+        .ui.ordered.feed > .event > .basic.label::before {
+            border-color: @orderedBasicBorderColor;
+            color: @orderedBasicColor;
+            background: @orderedBasicBackground;
+        }
+    }
+    & when (@variationFeedConnected) {
+        .ui.ordered.connected.feed > .event::before {
+            top: @orderedConnectedBorderTopOffset;
+            height: @orderedConnectedBorderHeight;
+        }
+
+        /* workaround until all browsers support :has() */
+        .ui.connected.labeled.feed > .event::before,
+        .ui.connected.feed > .labeled.event::before {
+            top: @orderedConnectedLabeledBorderTopOffset;
+            height: @orderedConnectedLabeledBorderHeight;
+        }
+    }
+}
+& when (@variationFeedConnected) and ((@variationFeedOrdered) or (@variationFeedLabelText)) {
+    @supports selector(:has(.f)) {
+        .ui.connected.feed > .event:has(> .label[data-text] > *)::before,
+        .ui.ordered.connected.feed > .event:has(> .label > *)::before {
+            top: @orderedConnectedLabeledBorderTopOffset;
+            height: @orderedConnectedLabeledBorderHeight;
+        }
+    }
+}
 
 .ui.feed {
     font-size: @medium;
@@ -294,12 +429,18 @@
 
     .ui.inverted.feed > .event {
         background: @black;
+        & > .label i.icon when (@variationFeedLabelIcon) {
+            color: @invertedIconLabelColor;
+        }
+        & > .label .text:not(.ui) when (@variationFeedLabelText) {
+            color: @invertedTextLabelColor;
+        }
     }
 
     & when (@variationFeedDate) or (@variationFeedLike) {
         .ui.inverted.feed > .event > .content .date,
         .ui.inverted.feed > .event > .content .meta .like {
-            color: @invertedLightTextColor;
+            color: @invertedLikeColor;
         }
     }
 
@@ -312,9 +453,75 @@
 
     & when (@variationFeedLike) {
         .ui.inverted.feed > .event > .content .meta .like:hover {
-            color: @invertedSelectedTextColor;
+            color: @invertedLikeHoverColor;
+        }
+        .ui.inverted.feed > .event > .content .meta .active.like i.icon {
+            color: @invertedLikeActiveColor;
+        }
+    }
+}
+
+/* --------------
+     Colors
+--------------- */
+& when not (@variationFeedColors = false) {
+    each(@variationFeedColors, {
+        @color: @value;
+        @c: @colors[@@color][color];
+        @l: @colors[@@color][light];
+
+        & when (@variationFeedOrdered) or (@variationFeedLabelText) {
+            .ui.ui.feed > .event > .@{color}.label::before,
+            .ui.@{color}.feed > .event > .label::before {
+                background: @c;
+            }
+        }
+        & when (@variationFeedConnected) {
+            .ui.@{color}.connected.feed > .event::before,
+            .ui.connected.feed > .@{color}.event::before {
+                border-color: @c;
+            }
+            & when (@variationFeedInverted) {
+                .ui.inverted.@{color}.connected.feed > .event::before,
+                .ui.connected.feed > .inverted.@{color}.event::before {
+                    border-color: @l;
+                }
+            }
+        }
+        & when (@variationFeedBasic) {
+            .ui.ui.feed > .event > .@{color}.basic.label::before,
+            .ui.@{color}.basic.feed > .event > .label::before {
+                color: @c;
+            }
+        }
+        & when (@variationFeedInverted) {
+            .ui.feed > .event > .inverted.@{color}.label::before,
+            .ui.inverted.@{color}.feed > .event > .label::before {
+                background: @l;
+            }
+            & when (@variationFeedBasic) {
+                .ui.feed > .event > .inverted.@{color}.basic.label::before,
+                .ui.inverted.@{color}.basic.feed > .event > .label::before {
+                    color: @l;
+                }
+            }
         }
+    });
+}
+& when (@variationFeedBasic) {
+    .ui.ui.feed > .event > .basic.label::before,
+    .ui.ui.ui.basic.feed > .event > .label::before {
+        background: @orderedBasicBackground;
+        border-color: currentColor;
+    }
+}
+& when (@variationFeedDisabled) {
+    .ui.disabled.feed,
+    .ui.feed .disabled.event {
+        opacity: @disabledOpacity;
+        pointer-events: @disabledPointerEvents;
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/item.less

@@ -597,5 +597,13 @@
         }
     }
 }
+& when (@variationItemDisabled) {
+    .ui.disabled.items,
+    .ui.items > .disabled.item {
+        opacity: @disabledOpacity;
+        pointer-events: @disabledPointerEvents;
+    }
+}
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/statistic.less

@@ -414,4 +414,5 @@
     });
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/overrides.less

@@ -0,0 +1,7 @@
+// ------------------
+//     Overrides
+// -------------------
+
+@import (optional) "@{themesFolder}/default/@{type}s/@{element}.overrides";
+@import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
+@import (optional) "@{siteFolder}/@{type}s/@{element}.overrides";

package/src/theme.less

@@ -6,7 +6,7 @@
        Theme
 ------------------- */
 
-@theme: @@element;
+@theme: if(@@element = "default", "", @@element);
 
 /* --------------------
    Site Variables
@@ -80,10 +80,11 @@
      Overrides
 ------------------- */
 
+// Keep empty mixin in case of custom components using it so they dont break
 .loadUIOverrides() {
-    & when not (@theme = "default") {
-        @import (optional) "@{themesFolder}/default/@{type}s/@{element}.overrides";
-    }
-    @import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
-    @import (optional) "@{siteFolder}/@{type}s/@{element}.overrides";
+    /* loadUIOverrides mixin is deprecated and will be removed in 2.10.0
+       Replace mixin call by
+          @import (multiple, optional) "../../overrides.less";
+       instead
+    */
 }

package/src/themes/amazon/elements/button.variables

@@ -3,7 +3,11 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textTransform: none;
 @textColor: #111;
 @fontWeight: normal;

package/src/themes/bootstrap3/elements/button.variables

@@ -3,7 +3,11 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textTransform: none;
 @fontWeight: @normal;
 @textColor: rgba(51, 51, 51, 1);

package/src/themes/chubby/elements/header.variables

@@ -2,7 +2,12 @@
        Header
 -------------------- */
 
-@headerFont: "Source Sans Pro", Helvetica Neue, Helvetica, Arial, sans-serif;
+@headerFont:
+    "Source Sans Pro",
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @fontWeight: bold;
 @textTransform: none;
 

package/src/themes/default/collections/message.variables

@@ -19,9 +19,7 @@
 @borderWidth: 1px;
 @borderShadow: 0 0 0 @borderWidth @strongBorderColor inset;
 @shadowShadow: 0 0 0 0 rgba(0, 0, 0, 0);
-@boxShadow:
-    @borderShadow,
-    @shadowShadow;
+@boxShadow: @borderShadow, @shadowShadow;
 
 @transition:
     opacity @defaultDuration @defaultEasing,
@@ -71,14 +69,10 @@
 @attachedXOffset: -1px;
 @attachedYOffset: -1px;
 @attachedBoxShadow: 0 0 0 @borderWidth @borderColor inset;
-@attachedBottomBoxShadow:
-    @attachedBoxShadow,
-    @subtleShadow;
+@attachedBottomBoxShadow: @attachedBoxShadow, @subtleShadow;
 
 /* Floating */
-@floatingBoxShadow:
-    @borderShadow,
-    @floatingShadow;
+@floatingBoxShadow: @borderShadow, @floatingShadow;
 
 /* Colors */
 @redBoxShadow:

package/src/themes/default/collections/table.variables

@@ -294,3 +294,6 @@
 @small: 0.9em;
 @medium: 1em;
 @large: 1.1em;
+
+/* Resizable */
+@resizableDirection: vertical;

package/src/themes/default/elements/button.variables

@@ -38,9 +38,7 @@
 @borderBoxShadowColor: transparent;
 @borderBoxShadowWidth: 1px;
 @borderBoxShadow: 0 0 0 @borderBoxShadowWidth @borderBoxShadowColor inset;
-@boxShadow:
-    @borderBoxShadow,
-    @shadowBoxShadow;
+@boxShadow: @borderBoxShadow, @shadowBoxShadow;
 
 /* Icon */
 @iconHeight: auto;

package/src/themes/default/elements/container.variables

@@ -60,3 +60,6 @@
 @textFontFamily: @pageFont;
 @textLineHeight: 1.5;
 @textSize: @large;
+
+/* Resizable */
+@resizableDirection: vertical;