fomantic-ui 2.9.3-beta.9 → 2.9.4-beta.0

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/definitions/views/item.less

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

package/src/theme.less

@@ -63,7 +63,7 @@
 
 .loadFonts() {
     & when (@importGoogleFonts) {
-        @import (css) url("@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}");
+        @import (css) url("@{googleFontUrl}");
     }
     & when (@importFonts) and not (@fontName = "") {
         each(@fonts, {

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

@@ -116,32 +116,32 @@
 /* Positive */
 @positiveColor: @positiveTextColor;
 @positiveBoxShadow: @stateMarkerWidth 0 0 @positiveBorderColor inset;
-@positiveBackgroundHover: darken(@positiveBackgroundColor, 3);
-@positiveColorHover: darken(@positiveColor, 3);
+@positiveBackgroundHover: if(iscolor(@positiveBackgroundColor), darken(@positiveBackgroundColor, 3), @positiveBackgroundColor);
+@positiveColorHover: if(iscolor(@positiveColor), darken(@positiveColor, 3), @positiveColor);
 @invertedPositiveColor: @positiveTextColor;
 @invertedPositiveBackgroundColor: @positiveBorderColor;
 
 /* Negative */
 @negativeColor: @negativeTextColor;
 @negativeBoxShadow: @stateMarkerWidth 0 0 @negativeBorderColor inset;
-@negativeBackgroundHover: darken(@negativeBackgroundColor, 3);
-@negativeColorHover: darken(@negativeColor, 3);
+@negativeBackgroundHover: if(iscolor(@negativeBackgroundColor), darken(@negativeBackgroundColor, 3), @negativeBackgroundColor);
+@negativeColorHover: if(iscolor(@negativeColor), darken(@negativeColor, 3), @negativeColor);
 @invertedNegativeColor: @negativeTextColor;
 @invertedNegativeBackgroundColor: @negativeBorderColor;
 
 /* Error */
 @errorColor: @errorTextColor;
 @errorBoxShadow: @stateMarkerWidth 0 0 @errorBorderColor inset;
-@errorBackgroundHover: darken(@errorBackgroundColor, 3);
-@errorColorHover: darken(@errorColor, 3);
+@errorBackgroundHover: if(iscolor(@errorBackgroundColor), darken(@errorBackgroundColor, 3), @errorBackgroundColor);
+@errorColorHover: if(iscolor(@errorColor), darken(@errorColor, 3), @errorColor);
 @invertedErrorColor: @errorTextColor;
 @invertedErrorBackgroundColor: @errorBorderColor;
 
 /* Warning */
 @warningColor: @warningTextColor;
 @warningBoxShadow: @stateMarkerWidth 0 0 @warningBorderColor inset;
-@warningBackgroundHover: darken(@warningBackgroundColor, 3);
-@warningColorHover: darken(@warningColor, 3);
+@warningBackgroundHover: if(iscolor(@warningBackgroundColor), darken(@warningBackgroundColor, 3), @warningBackgroundColor);
+@warningColorHover: if(iscolor(@warningColor), darken(@warningColor, 3), @warningColor);
 @invertedWarningColor: @warningTextColor;
 @invertedWarningBackgroundColor: #eec97e;
 
@@ -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;
@@ -249,28 +247,28 @@
 @tertiaryHorizontalPadding: 0.5em;
 @tertiaryLineHeight: 0.2em;
 @tertiaryTextColor: @textColor;
-@tertiaryLineColor: lighten(@tertiaryTextColor, 20%);
+@tertiaryLineColor: if(iscolor(@tertiaryTextColor), lighten(@tertiaryTextColor, 20%), @tertiaryTextColor);
 @tertiaryWithUnderline: false;
 @tertiaryWithOverline: false;
 @tertiaryBackgroundColor: none;
 
 /* Tertiary Hover */
-@tertiaryHoverColor: lighten(fadein(@tertiaryTextColor, 100%), 20%);
-@tertiaryHoverLineColor: lighten(@tertiaryHoverColor, 20%);
+@tertiaryHoverColor: if(iscolor(@tertiaryTextColor), lighten(fadein(@tertiaryTextColor, 100%), 20%), @tertiaryTextColor);
+@tertiaryHoverLineColor: if(iscolor(@tertiaryHoverColor), lighten(@tertiaryHoverColor, 20%), @tertiaryHoverColor);
 @tertiaryHoverWithUnderline: true;
 @tertiaryHoverWithOverline: false;
 @tertiaryHoverBackgroundColor: none;
 
 /* Tertiary Focus */
-@tertiaryFocusColor: lighten(fadein(@tertiaryTextColor, 100%), 20%);
-@tertiaryFocusLineColor: lighten(@tertiaryHoverColor, 20%);
+@tertiaryFocusColor: if(iscolor(@tertiaryTextColor), lighten(fadein(@tertiaryTextColor, 100%), 20%), @tertiaryTextColor);
+@tertiaryFocusLineColor: if(iscolor(@tertiaryHoverColor), lighten(@tertiaryHoverColor, 20%), @tertiaryHoverColor);
 @tertiaryFocusWithUnderline: true;
 @tertiaryFocusWithOverline: false;
 @tertiaryFocusBackgroundColor: none;
 
 /* Tertiary Active */
-@tertiaryActiveColor: lighten(@tertiaryHoverColor, 20%);
-@tertiaryActiveLineColor: lighten(@tertiaryActiveColor, 20%);
+@tertiaryActiveColor: if(iscolor(@tertiaryHoverColor), lighten(@tertiaryHoverColor, 20%), @tertiaryHoverColor);
+@tertiaryActiveLineColor: if(iscolor(@tertiaryActiveColor), lighten(@tertiaryActiveColor, 20%), @tertiaryActiveColor);
 @tertiaryActiveWithUnderline: true;
 @tertiaryActiveWithOverline: false;
 @tertiaryActiveBackgroundColor: none;

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

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