fomantic-ui 2.9.4-beta.91 → 2.9.4-beta.93

package/src/definitions/modules/slider.less

@@ -17,16 +17,23 @@
 
 @import (multiple) "../../theme.config";
 
-.ui.slider:not(.vertical):not(.checkbox) {
+@notVertical: if(@variationSliderVertical, e(":not(.vertical)"));
+@notDisabled: if(@variationSliderDisabled, e(":not(.disabled)"));
+@notBottom: if(@variationSliderBottomAligned, e(":not(.bottom)"));
+@notRight: if(@variationSliderRightAligned, e(":not(.right)"));
+
+@notCheckbox: if(@variationCheckboxSlider, e(":not(.checkbox)"));
+
+.ui.slider@{notVertical}@{notCheckbox} {
     width: 100%;
     padding: @padding;
 }
 
-.ui.slider:not(.checkbox) {
+.ui.slider@{notCheckbox} {
     position: relative;
 }
 
-.ui.slider:not(.checkbox):focus {
+.ui.slider@{notCheckbox}:focus {
     outline: 0;
 }
 
@@ -35,7 +42,7 @@
     z-index: 2;
 }
 
-.ui.slider:not(.vertical) .inner {
+.ui.slider@{notVertical} .inner {
     height: @height;
 }
 
@@ -49,7 +56,7 @@
     background-color: @trackColor;
 }
 
-.ui.slider:not(.vertical) .inner .track {
+.ui.slider@{notVertical} .inner .track {
     width: 100%;
     height: @trackHeight;
     top: @trackPositionTop;
@@ -62,7 +69,7 @@
     background-color: @trackFillColor;
 }
 
-.ui.slider:not(.vertical) .inner .track-fill {
+.ui.slider@{notVertical} .inner .track-fill {
     height: @trackFillHeight;
     top: @trackPositionTop;
     left: 0;
@@ -80,12 +87,12 @@
     transition: @thumbTransition;
 }
 
-.ui.slider:not(.disabled) .inner .thumb:hover {
+.ui.slider@{notDisabled} .inner .thumb:hover {
     cursor: @thumbHoverPointer;
     background: @thumbHoverBackground;
 }
 
-.ui.slider:not(.disabled):focus .inner .thumb {
+.ui.slider@{notDisabled}:focus .inner .thumb {
     background: @thumbHoverBackground;
 }
 
@@ -98,7 +105,7 @@
          Disabled
     --------------- */
 
-    .ui.disabled.slider:not(.checkbox) {
+    .ui.disabled.slider@{notCheckbox} {
         opacity: @disabledOpactiy;
     }
 
@@ -121,7 +128,7 @@
         right: 0;
     }
 
-    .ui.reversed.slider:not(.vertical) .inner .thumb {
+    .ui.reversed.slider@{notVertical} .inner .thumb {
         left: auto;
         right: 0;
     }
@@ -198,7 +205,7 @@
         right: 0;
     }
 
-    .ui.labeled.slider:not(.vertical) > .labels {
+    .ui.labeled.slider@{notVertical} > .labels {
         transform: translateY(-50%);
     }
 
@@ -251,13 +258,13 @@
         }
     }
     & when (@variationSliderUiLabel) {
-        .ui.labeled.slider:not(.vertical):not(.bottom) .labels .ui.label {
+        .ui.labeled.slider@{notVertical}@{notBottom} .labels .ui.label {
             margin-top: -@uiLabelMargin;
         }
-        .ui.labeled.ticked.slider:not(.vertical):not(.bottom) .labels .ui.label::after {
+        .ui.labeled.ticked.slider@{notVertical}@{notBottom} .labels .ui.label::after {
             margin-top: @uiLabelMargin;
         }
-        .ui.labeled.ticked.slider:not(.vertical) > .labels .ui.label::after {
+        .ui.labeled.ticked.slider@{notVertical} > .labels .ui.label::after {
             height: @uiLabelTickHeight;
         }
     }
@@ -288,7 +295,7 @@
             width: (@labelHeight / 2);
             height: @labelWidth;
         }
-        .ui.labeled.vertical.slider:not(.right) > .labels .halftick.label::after {
+        .ui.labeled.vertical.slider@{notRight} > .labels .halftick.label::after {
             margin-left: @verticalTickDistance;
         }
 
@@ -299,7 +306,7 @@
             }
         }
         & when (@variationSliderUiLabel) {
-            .ui.labeled.ticked.vertical.slider:not(.right) > .labels .ui.label::after {
+            .ui.labeled.ticked.vertical.slider@{notRight} > .labels .ui.label::after {
                 margin-left: @verticalUiLabelMargin;
             }
         }
@@ -343,8 +350,8 @@
     transition: @hoverOpacityTransition;
 }
 
-.ui.hover.slider:not(.disabled):hover .inner .thumb,
-.ui.hover.slider:not(.disabled):focus .inner .thumb {
+.ui.hover.slider@{notDisabled}:hover .inner .thumb,
+.ui.hover.slider@{notDisabled}:focus .inner .thumb {
     opacity: @hoverVarHoverOpacity;
 }
 
@@ -481,20 +488,20 @@
             height: @@h;
             width: @@h;
         }
-        .ui.slider.@{value}:not(.vertical) .inner {
+        .ui.slider.@{value}@{notVertical} .inner {
             height: @@h;
         }
-        .ui.slider.@{value}:not(.vertical) .inner .track,
-        .ui.slider.@{value}:not(.vertical) .inner .track-fill {
+        .ui.slider.@{value}@{notVertical} .inner .track,
+        .ui.slider.@{value}@{notVertical} .inner .track-fill {
             height: @@th;
             top: @@tp;
         }
         & when (@variationSliderLabeled) {
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels,
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels .label::after {
+            .ui.@{value}.labeled.slider@{notVertical} > .labels,
+            .ui.@{value}.labeled.slider@{notVertical} > .labels .label::after {
                 height: @@lh;
             }
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label::after {
+            .ui.@{value}.labeled.slider@{notVertical} > .labels .halftick.label::after {
                 height: (@@lh / 2);
             }
         }

package/src/definitions/modules/toast.less

@@ -17,6 +17,17 @@
 
 @import (multiple) "../../theme.config";
 
+@notActions: if(@variationToastActions, e(":not(.actions)"));
+@notAttached: if(@variationToastAttached, e(":not(.attached)"));
+@notVertical: if(@variationToastVertical, e(":not(.vertical)"));
+@notCenter: if(@variationToastCenter, e(":not(.center)"));
+@notCentered: if(@variationToastCentered, e(":not(.centered)"));
+@notBasic: if(@variationToastBasic, e(":not(.basic)"));
+@notClose: if(@variationToastClose, e(":not(.close)"));
+@notUnclickable: if(@variationToastUnclickable, e(":not(.unclickable)"));
+
+@notFluid: if(@variationButtonFluid, e(":not(.fluid)"));
+
 /*******************************
         Toast container
 *******************************/
@@ -56,7 +67,7 @@
             & > * {
                 width: 100%;
                 border-radius: 0;
-                & > .vertical:not(.actions) when (@variationToastVertical) {
+                & > .vertical@{notActions} when (@variationToastVertical) {
                     flex: 1;
                 }
             }
@@ -130,7 +141,7 @@
         &:hover {
             opacity: @toastOpacityOnHover;
         }
-        &:not(.unclickable):hover {
+        &@{notUnclickable}:hover {
             cursor: @toastCursorOnHover;
         }
         & when (@variationToastFloating) {
@@ -195,18 +206,18 @@
             }
             &.icon when (@variationToastIcon) {
                 align-items: inherit;
-                & > :not(.icon):not(.actions) {
+                & > :not(.icon)@{notActions} {
                     padding-left: @toastIconMessageContentPadding;
                 }
-                & > i.icon:not(.close) when (@variationToastIcon) {
+                & > i.icon@{notClose} when (@variationToastIcon) {
                     display: inline-block;
                     position: absolute;
                     width: @toastIconMessageWidth;
                     top: 50%;
                     transform: translateY(-50%);
                 }
-                &:not(.vertical) {
-                    &.actions > i.icon:not(.close) when (@variationToastActions) and (@variationToastIcon) {
+                &@{notVertical} {
+                    &.actions > i.icon@{notClose} when (@variationToastActions) and (@variationToastIcon) {
                         top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
                         transform: none;
                     }
@@ -230,7 +241,7 @@
                 margin-top: -@toastCloseTopDistance;
                 margin-right: -@toastCloseTopDistance;
             }
-            &:not(.vertical) > .close.icon when (@variationToastClose) {
+            &@{notVertical} > .close.icon when (@variationToastClose) {
                 position: absolute;
                 top: @toastCloseTopDistance;
                 &:not(.left) {
@@ -243,7 +254,7 @@
         }
         & .ui.card when (@variationToastCard) {
             margin: 0;
-            &.attached:not(.vertical) when (@variationToastAttached) {
+            &.attached@{notVertical} when (@variationToastAttached) {
                 &.bottom {
                     border-top-left-radius: 0;
                     border-top-right-radius: 0;
@@ -296,7 +307,7 @@
         &:hover .pausable.progressing {
             animation-play-state: paused;
         }
-        & .ui.toast:not(.vertical) {
+        & .ui.toast@{notVertical} {
             display: block;
         }
         & :not(.comment) {
@@ -306,10 +317,10 @@
             & .actions when (@variationToastActions) {
                 padding: @toastActionPadding @toastActionPadding @toastActionPaddingBottom @toastActionPadding;
                 text-align: right;
-                &.attached:not(.vertical) when (@variationToastAttached) {
+                &.attached@{notVertical} when (@variationToastAttached) {
                     margin-right: @toastLeftRightMargin;
                 }
-                &:not(.basic):not(.attached) {
+                &@{notBasic}@{notAttached} {
                     background: @toastActionBackground;
                     border-top: @toastActionBorder;
                 }
@@ -333,13 +344,13 @@
             &.attached > .button when (@variationToastAttached) {
                 align-items: center;
             }
-            &:not(.attached) {
+            &@{notAttached} {
                 border-top: 0;
                 margin-top: -@toastActionPaddingBottom;
                 margin-bottom: -@toastActionPaddingBottom;
                 margin-left: @toastActionMarginLeft;
                 justify-content: space-around;
-                &:not(.basic) {
+                &@{notBasic} {
                     border-left: @toastActionBorder;
                 }
                 & > .button:not(:last-child) {
@@ -417,7 +428,7 @@
     }
 }
 
-.ui.attached:not(.vertical) when (@variationToastAttached) {
+.ui.attached@{notVertical} when (@variationToastAttached) {
     &:not(.top) {
         &.actions when (@variationToastActions) {
             border-bottom-left-radius: @toastBorderRadius;
@@ -480,19 +491,19 @@
         background-color: @toastNeutralColor;
         color: @toastNeutralTextColor;
     }
-    & > i.icon:not(.close) when (@variationToastIcon) {
+    & > i.icon@{notClose} when (@variationToastIcon) {
         font-size: @toastIconFontSize;
     }
-    &:not(.vertical) {
-        &:not(.centered):not(.center) {
-            & > i.icon:not(.close) when (@variationToastIcon) {
+    &@{notVertical} {
+        &@{notCentered}@{notCenter} {
+            & > i.icon@{notClose} when (@variationToastIcon) {
                 position: absolute;
             }
             & > .ui.image when (@variationToastImage) {
                 position: absolute;
             }
         }
-        & > i.icon:not(.close) when (@variationToastIcon) {
+        & > i.icon@{notClose} when (@variationToastIcon) {
             & + .content {
                 padding-left: @toastIconContentPadding;
             }
@@ -518,7 +529,7 @@
                 min-height: @toastSmallImageHeight;
             }
         }
-        &:not(.centered):not(.center) when (@variationToastImage) or (@variationToastIcon) {
+        &@{notCentered}@{notCenter} when (@variationToastImage) or (@variationToastIcon) {
             & > .centered.image,
             > .centered.icon {
                 transform: translateY(-50%);
@@ -544,7 +555,7 @@
         }
         & when (@variationToastImage) or (@variationToastIcon) {
             & > .ui.image + .content,
-            > i.icon:not(.close) + .content {
+            > i.icon@{notClose} + .content {
                 padding-left: @toastImageContentPadding;
             }
         }
@@ -619,7 +630,7 @@
 
         & > .content,
         & > .ui.image,
-        & > i.icon:not(.close) {
+        & > i.icon@{notClose} {
             align-self: center;
         }
     }
@@ -633,7 +644,7 @@
     .ui.toast-container .toast-box .center.aligned.actions {
         text-align: center;
 
-        &:not(.attached) > .button:not(.fluid) {
+        &@{notAttached} > .button@{notFluid} {
             margin-left: @toastActionCenteredMargin;
             margin-right: @toastActionCenteredMargin;
         }
@@ -679,7 +690,7 @@
             width: auto;
             max-width: 100%;
         }
-        & > *:not(.vertical) {
+        & > *@{notVertical} {
             min-width: @mobileWidth;
         }
         & when (@variationToastCard) {

package/src/definitions/views/card.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notRaised: if(@variationCardRaised, e(":not(.raised)"));
+
 /*******************************
             Standard
 *******************************/
@@ -358,9 +360,9 @@
     /* --------------
        Basic
     --------------- */
-    .ui.cards:not(.raised) > .basic.card:not(.raised),
-    .ui.ui.ui.basic.cards:not(.raised) > .card:not(.raised),
-    .ui.ui.ui.basic.card:not(.raised) {
+    .ui.cards@{notRaised} > .basic.card@{notRaised},
+    .ui.ui.ui.basic.cards@{notRaised} > .card@{notRaised},
+    .ui.ui.ui.basic.card@{notRaised} {
         box-shadow: none;
         & > .buttons,
         > .button {
@@ -369,8 +371,8 @@
         }
     }
     & when (@variationCardLink) {
-        .ui.ui.ui.ui.ui.basic.card:not(.raised):hover,
-        .ui.ui.ui.ui.ui.basic.cards:not(.raised) .card:not(.raised):hover {
+        .ui.ui.ui.ui.ui.basic.card@{notRaised}:hover,
+        .ui.ui.ui.ui.ui.basic.cards@{notRaised} .card@{notRaised}:hover {
             box-shadow: none;
         }
     }

package/src/definitions/views/feed.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notConnected: if(@variationFeedConnected, e(":not(.connected)"));
+
 /*******************************
          Activity Feed
 *******************************/
@@ -47,7 +49,7 @@
         border-top: @eventDivider;
     }
 }
-.ui.feed:not(.connected) > .event:first-child {
+.ui.feed@{notConnected} > .event:first-child {
     padding-top: 0;
 }
 .ui.feed > .event:last-child {

package/src/definitions/views/item.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notUnstackable: if(@variationItemUnstackable, e(":not(.unstackable)"));
+
 /*******************************
             Standard
 *******************************/
@@ -370,22 +372,22 @@
 
 /* Mobile Only */
 @media only screen and (max-width: @largestMobileScreen) {
-    .ui.items:not(.unstackable) > .item {
+    .ui.items@{notUnstackable} > .item {
         flex-direction: column;
         margin: @mobileItemSpacing 0;
     }
-    .ui.items:not(.unstackable) > .item > .image {
+    .ui.items@{notUnstackable} > .item > .image {
         display: block;
         margin-left: auto;
         margin-right: auto;
     }
-    .ui.items:not(.unstackable) > .item > .image,
-    .ui.items:not(.unstackable) > .item > .image > img {
+    .ui.items@{notUnstackable} > .item > .image,
+    .ui.items@{notUnstackable} > .item > .image > img {
         max-width: 100% !important;
         width: @mobileImageWidth !important;
         max-height: @mobileImageMaxHeight !important;
     }
-    .ui.items:not(.unstackable) > .item > .image + .content {
+    .ui.items@{notUnstackable} > .item > .image + .content {
         display: block;
         padding: @mobileContentImageDistance 0 0;
     }

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

@@ -186,6 +186,7 @@
 @variationLoaderIndeterminate: true;
 @variationLoaderText: true;
 @variationLoaderInline: true;
+@variationLoaderDouble: true;
 @variationLoaderElastic: true;
 @variationLoaderSizes: @variationAllSizes;
 @variationLoaderColors: @variationAllColors;
@@ -257,6 +258,7 @@
 @variationStepEqualWidth: true;
 @variationStepSizes: @variationAllSizes;
 @variationStepCircular: true;
+@variationStepUnstackable: true;
 @variationStepColors: @variationAllColors;
 
 /* Text */
@@ -286,6 +288,7 @@
 @variationFormGrouped: true;
 @variationFormEqualWidth: true;
 @variationFormWide: true;
+@variationFormUnstackable: true;
 @variationFormSizes: @variationAllSizes;
 
 /* Grid */
@@ -298,6 +301,7 @@
 @variationGridPadded: true;
 @variationGridFloated: true;
 @variationGridDivided: true;
+@variationGridHorizontal: true;
 @variationGridVertical: true;
 @variationGridAligned: true;
 @variationGridAttached: true;
@@ -393,6 +397,9 @@
 @variationTableOverflowingVeryShort: true;
 @variationTableOverflowingLong: true;
 @variationTableOverflowingVeryLong: true;
+@variationTableRowSpanned: true;
+@variationTableFullWidth: true;
+@variationTableUnstackable: true;
 @variationTableSizes: @variationAllSizes;
 @variationTableColors: @variationAllColors;
 
@@ -529,6 +536,7 @@
 @variationCheckboxReadonly: true;
 @variationCheckboxInverted: true;
 @variationCheckboxInvisible: true;
+@variationCheckboxCompact: true;
 @variationCheckboxRadio: true;
 @variationCheckboxSlider: true;
 @variationCheckboxToggle: true;
@@ -575,6 +583,7 @@
 @variationDropdownPointing: true;
 @variationDropdownColumnar: true;
 @variationDropdownScrollhint: true;
+@variationDropdownUnlimited: true;
 @variationDropdownHighlightMatches: false;
 @variationDropdownSizes: @variationAllSizes;
 
@@ -598,6 +607,7 @@
 @variationFlyoutRight: true;
 @variationFlyoutOverlay: true;
 @variationFlyoutScrolling: true;
+@variationFlyoutClose: true;
 
 /* Modal */
 @variationModalInverted: true;
@@ -608,6 +618,7 @@
 @variationModalResizable: true;
 @variationModalScrolling: true;
 @variationModalLegacy: true;
+@variationModalClose: true;
 @variationModalCloseInside: true;
 @variationModalCentered: true;
 @variationModalActions: true;
@@ -670,7 +681,7 @@
 
 /* Search */
 @variationSearchDisabled: true;
-@variationSearchSelection: true;
+@variationSearchClear: true;
 @variationSearchCategory: true;
 @variationSearchHorizontalCategory: true;
 @variationSearchLoading: true;
@@ -749,7 +760,8 @@
 @variationToastVertical: true;
 @variationToastAttached: true;
 @variationToastCompact: true;
-@variationToastCentered: true;
+@variationToastBasic: true;
+@variationToastUnclickable: true;
 @variationToastColors: @variationAllColors;
 
 /* Transition */

package/src/themes/default/modules/search.variables

@@ -126,20 +126,20 @@
             Types
 *******************************/
 
-/* Selection */
-@selectionPromptBorderRadius: @defaultBorderRadius;
-
-@selectionCloseTop: 0;
-@selectionCloseTransition:
-    color @defaultDuration @defaultEasing,
-    opacity @defaultDuration @defaultEasing;
-@selectionCloseRight: 0;
-@selectionCloseIconOpacity: 0.8;
-@selectionCloseIconColor: "";
-@selectionCloseIconHoverOpacity: 1;
-@selectionCloseIconHoverColor: @red;
-
-@selectionCloseIconInputRight: 1.85714em;
+/* Clearable */
+@clearableIconTransition: opacity @defaultDuration @defaultEasing;
+@clearableIconOpacity: 0.6;
+@clearableIconHoverOpacity: 1;
+@clearableIconWidth: 1em;
+@clearableIconHeight: @clearableIconWidth;
+
+@clearableIconInputRight: 1.85714em;
+
+/*
+ * Times icon taken from Font Awesome Free 5.15.4 by @fontawesome [https://fontawesome.com]
+ * License - https://fontawesome.com/license/free
+ */
+@clearableIconBackground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath d='M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.5c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z'/%3E%3C/svg%3E") no-repeat;
 
 /* Category */
 @categoryBackground: @darkWhite;

package/tasks/config/project/release.js

@@ -7,7 +7,10 @@ const requireDotFile = require('require-dot-file');
 let
     config,
     npmPackage,
-    version
+    version,
+    revision,
+    versionInFileName,
+    includeVersionInFileName
 ;
 
 /*******************************
@@ -31,6 +34,20 @@ version = npmPackage && npmPackage.version !== undefined && npmPackage.name ===
     ? npmPackage.version
     : config.version;
 
+// looks for revision in config.
+revision = config.revision === undefined ? '' : config.revision;
+
+includeVersionInFileName = config.includeVersionInFileName === undefined ? false : config.includeVersionInFileName;
+
+versionInFileName = '';
+
+if (includeVersionInFileName) {
+    versionInFileName = '-' + version;
+    if (revision !== '') {
+        versionInFileName += '-' + revision;
+    }
+}
+
 /*******************************
              Export
 *******************************/
@@ -54,5 +71,6 @@ module.exports = {
         + ' */\n',
 
     version: version,
+    versionInFileName: versionInFileName,
 
 };

package/tasks/config/tasks.js

@@ -40,12 +40,12 @@ module.exports = {
     },
 
     filenames: {
-        concatenatedCSS: 'semantic.css',
-        concatenatedJS: 'semantic.js',
-        concatenatedMinifiedCSS: 'semantic.min.css',
-        concatenatedMinifiedJS: 'semantic.min.js',
-        concatenatedRTLCSS: 'semantic.rtl.css',
-        concatenatedMinifiedRTLCSS: 'semantic.rtl.min.css',
+        concatenatedCSS: 'semantic' + release.versionInFileName + '.css',
+        concatenatedJS: 'semantic' + release.versionInFileName + '.js',
+        concatenatedMinifiedCSS: 'semantic' + release.versionInFileName + '.min.css',
+        concatenatedMinifiedJS: 'semantic' + release.versionInFileName + '.min.js',
+        concatenatedRTLCSS: 'semantic' + release.versionInFileName + '.rtl.css',
+        concatenatedMinifiedRTLCSS: 'semantic' + release.versionInFileName + '.rtl.min.css',
     },
 
     regExp: {