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

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.3-beta.40+20625bd
+ * # Fomantic UI - 2.9.3-beta.41+41577bc
  * https://github.com/fomantic/Fomantic-UI
  * https://fomantic-ui.com/
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.3-beta.40+20625bd",
+  "version": "2.9.3-beta.41+41577bc",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/elements/icon.less

@@ -48,7 +48,7 @@ i.icon {
 }
 
 i.icon::before {
-    background: none !important;
+    background: none;
 }
 
 /*******************************
@@ -322,16 +322,16 @@ i.emphasized.icons:not(.disabled) {
         @c: @colors[@@color][color];
         @l: @colors[@@color][light];
 
-        i.@{color}.icon.icon.icon.icon.icon {
+        i.@{color}.icon.icon.icon.icon.icon.icon {
             color: @c;
         }
         & when (@variationIconInverted) {
-            i.inverted.@{color}.icon.icon.icon.icon.icon {
+            i.inverted.@{color}.icon.icon.icon.icon.icon.icon {
                 color: @l;
             }
             & when (@variationIconBordered) or (@variationIconCircular) {
-                i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
-                i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
+                i.inverted.bordered.@{color}.icon.icon.icon.icon.icon.icon,
+                i.inverted.circular.@{color}.icon.icon.icon.icon.icon.icon,
                 i.inverted.bordered.@{color}.icons,
                 i.inverted.circular.@{color}.icons {
                     background-color: @c;

package/src/definitions/elements/list.less

@@ -681,7 +681,7 @@ ol.ui.list ol li,
     .ui.ordered.list,
     .ui.ordered.list .list:not(.icon),
     ol.ui.list ol {
-        counter-reset: ordered;
+        counter-reset: @orderedCountName;
         margin-left: @orderedCountDistance;
         list-style-type: none;
     }

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,8 +453,73 @@
 
     & 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;
     }
 }
 

package/src/themes/default/globals/variation.variables

@@ -452,13 +452,25 @@
 
 /* Feed */
 @variationFeedInverted: true;
+@variationFeedDisabled: true;
 @variationFeedMeta: true;
 @variationFeedSummary: true;
 @variationFeedUser: true;
 @variationFeedExtra: true;
 @variationFeedDate: true;
 @variationFeedLike: true;
+@variationFeedLabel: true;
+@variationFeedLabelIcon: true;
+@variationFeedLabelImage: true;
+@variationFeedLabelText: true;
+@variationFeedLabelUiLabel: true;
+@variationFeedConnected: true;
+@variationFeedDivided: true;
+@variationFeedOrdered: true;
+@variationFeedBasic: true;
+@variationFeedRightFloated: true;
 @variationFeedSizes: @variationAllSizes;
+@variationFeedColors: @variationAllColors;
 
 /* Item */
 @variationItemInverted: true;

package/src/themes/default/views/feed.variables

@@ -31,7 +31,7 @@
 @iconLabelSize: 1.5em;
 @iconLabelPadding: 0.25em;
 @iconLabelBackground: none;
-@iconLabelBorderRadius: none;
+@iconLabelBorderRadius: 0;
 @iconLabelBorder: none;
 @iconLabelColor: rgba(0, 0, 0, 0.6);
 
@@ -40,6 +40,16 @@
 @imageLabelHeight: auto;
 @imageLabelBorderRadius: @circularRadius;
 
+/* Text Label */
+@textLabelTopMargin: 0.5em;
+@uiTextLabelTopMargin: 0.65em;
+@multilineTextLabelTopMargin: 0;
+@uiMultilineTextLabelTopMargin: 0.3em;
+
+/* Ui label */
+@uiLabelTopMargin: 0.4em;
+@uiLabelZIndex: 1;
+
 /* Content w/ Label */
 @labeledContentMargin: 0.5em 0 @relative5px @relativeLarge;
 @lastLabeledContentPadding: 0;
@@ -139,3 +149,47 @@
 /* -------------------
       Variations
 -------------------- */
+
+/* Connected */
+@connectedBorderColor: @borderColor;
+@connectedBorderWidth: 2px;
+@connectedBorder: @connectedBorderWidth solid @connectedBorderColor;
+@connectedBorderLeftOffset: 1.2em;
+@connectedBorderTopOffset: 2.1em;
+@connectedBorderHeight: e(%("calc(100%% - %d)", @iconLabelSize));
+
+/* Divided */
+@dividedBorderColor: @borderColor;
+@dividedBorderWidth: @borderWidth;
+@dividedBorder: @dividedBorderWidth solid @dividedBorderColor;
+
+/* Ordered */
+@orderedCountName: ordered;
+@orderedCountContent: counter(@orderedCountName);
+@orderedTopOffset: 0.6em;
+@orderedBottomMargin: 0.3em;
+@orderedBorderColor: transparent;
+@orderedBorderWidth: 2px;
+@orderedHeight: @labelWidth;
+@orderedBorder: @orderedBorderWidth solid @orderedBorderColor;
+@orderedBorderRadius: 50%;
+@orderedColor: @white;
+@orderedBackground: @orderedBasicBorderColor;
+@orderedBasicBorderColor: #bbbbbb;
+@orderedBasicColor: inherit;
+@orderedBasicBackground: transparent;
+@orderedConnectedBorderTopOffset: 2.7em;
+@orderedConnectedBorderHeight: e(%("calc(100%% - %d)", (@orderedConnectedBorderTopOffset - 0.2em)));
+@orderedConnectedLabeledBorderTopOffset: 4.85em;
+@orderedConnectedLabeledBorderHeight: e(%("calc(100%% - %d)", (@orderedConnectedLabeledBorderTopOffset - 0.2em)));
+
+/* Inverted */
+@invertedBackground: @black;
+@invertedIconLabelColor: @invertedLightTextColor;
+@invertedLikeColor: @invertedLightTextColor;
+@invertedLikeHoverColor: @invertedSelectedTextColor;
+@invertedLikeActiveColor: @invertedLikeColor;
+
+@invertedConnectedBorderColor: @whiteBorderColor;
+@invertedDividedBorderColor: @whiteBorderColor;
+@invertedTextLabelColor: @white;