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

package/src/definitions/modules/modal.less

@@ -17,6 +17,13 @@
 
 @import (multiple) "../../theme.config";
 
+@notFullscreen: if(@variationModalFullscreen, e(":not(.fullscreen)"));
+@notInside: if(@variationModalCloseInside, e(":not(.inside)"));
+@notAligned: if(@variationModalAligned, e(":not(.aligned)"));
+@notClose: if(@variationModalClose, e(":not(.close)"));
+
+@notFluid: if(@variationButtonFluid, e(":not(.fluid)"));
+
 /*******************************
              Modal
 *******************************/
@@ -37,9 +44,9 @@
     outline: none;
 }
 
-.ui.modal > :first-child:not(.close):not(.dimmer),
+.ui.modal > :first-child@{notClose}:not(.dimmer),
 .ui.modal > i.icon:first-child + *,
-.ui.modal > .dimmer:first-child + *:not(.close),
+.ui.modal > .dimmer:first-child + *@{notClose},
 .ui.modal > .dimmer:first-child + i.icon + * {
     border-top-left-radius: @borderRadius;
     border-top-right-radius: @borderRadius;
@@ -58,27 +65,29 @@
             Content
 *******************************/
 
-/* --------------
-     Close
---------------- */
+& when (@variationModalClose) {
+    /* --------------
+         Close
+    --------------- */
 
-.ui.modal > .close {
-    cursor: pointer;
-    position: absolute;
-    top: @closeTop;
-    right: @closeRight;
-    z-index: 1;
-    opacity: @closeOpacity;
-    font-size: @closeSize;
-    color: @closeColor;
-    width: @closeHitbox;
-    height: @closeHitbox;
-    padding: @closePadding;
-}
-.ui.modal > .close:focus,
-.ui.modal > .close:hover {
-    opacity: 1;
-    outline: none;
+    .ui.modal > .close {
+        cursor: pointer;
+        position: absolute;
+        top: @closeTop;
+        right: @closeRight;
+        z-index: 1;
+        opacity: @closeOpacity;
+        font-size: @closeSize;
+        color: @closeColor;
+        width: @closeHitbox;
+        height: @closeHitbox;
+        padding: @closePadding;
+    }
+    .ui.modal > .close:focus,
+    .ui.modal > .close:hover {
+        opacity: 1;
+        outline: none;
+    }
 }
 
 /* --------------
@@ -172,7 +181,7 @@
         border-top: @actionBorder;
         text-align: @actionAlign;
     }
-    .ui.modal .actions > .button:not(.fluid) {
+    .ui.modal .actions > .button@{notFluid} {
         margin-left: @buttonDistance;
     }
     .ui.ui.modal > .basic.actions,
@@ -182,7 +191,7 @@
     & when (@variationModalLeftActions) {
         .ui.modal > .left.actions {
             text-align: left;
-            & > .button:not(.fluid) {
+            & > .button@{notFluid} {
                 margin-left: @buttonLeftDistance;
                 margin-right: @buttonLeftDistance;
             }
@@ -194,7 +203,7 @@
     .ui.modal > .centered,
     .ui.modal > .center.aligned {
         text-align: center;
-        &.actions > .button:not(.fluid) when (@variationModalActions) {
+        &.actions > .button@{notFluid} when (@variationModalActions) {
             margin-left: @buttonCenteredDistance;
             margin-right: @buttonCenteredDistance;
         }
@@ -207,55 +216,62 @@
 
 /* Modal Width */
 @media only screen and (max-width: @largestMobileScreen) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @mobileWidth;
         margin: @mobileMargin;
     }
 }
 @media only screen and (min-width: @tabletBreakpoint) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @tabletWidth;
         margin: @tabletMargin;
     }
 }
 @media only screen and (min-width: @computerBreakpoint) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @computerWidth;
         margin: @computerMargin;
-        & > .active.dimmer + .close:not(.inside) {
+        & > .active.dimmer + .close@{notInside} when (@variationModalClose) {
             pointer-events: none;
             opacity: @closeOpacityDimmed;
         }
     }
-    .ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
-        text-shadow: @closeShadow;
-    }
-    .ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
-        text-shadow: @invertedCloseShadow;
+    & when (@variationModalClose) {
+        .ui.dimmer > .ui.modal@{notFullscreen} > .close@{notInside} {
+            text-shadow: @closeShadow;
+        }
+        & when (@variationDimmerInverted) {
+            .ui.inverted.dimmer > .ui.modal@{notFullscreen} > .close@{notInside} {
+                text-shadow: @invertedCloseShadow;
+            }
+        }
     }
 }
 @media only screen and (min-width: @largeMonitorBreakpoint) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @largeMonitorWidth;
         margin: @largeMonitorMargin;
     }
 }
 @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @widescreenMonitorWidth;
         margin: @widescreenMonitorMargin;
     }
 }
 
-/* Tablet and Mobile */
-@media only screen and (max-width: @largestTabletScreen) {
-    .ui.modal > .close + .header {
-        padding-right: @closeHitbox;
-    }
-    .ui.modal > .close {
-        top: @innerCloseTop;
-        right: @innerCloseRight;
-        color: @innerCloseColor;
+& when (@variationModalClose) {
+    /* Tablet and Mobile */
+    @media only screen and (max-width: @largestTabletScreen) {
+        .ui.modal > .close + .header {
+            padding-right: @closeHitbox;
+        }
+
+        .ui.modal > .close {
+            top: @innerCloseTop;
+            right: @innerCloseRight;
+            color: @innerCloseColor;
+        }
     }
 }
 
@@ -264,8 +280,10 @@
     .ui.modal > .header {
         padding: @mobileHeaderPadding;
     }
-    .ui.modal > .close + .header {
-        padding-right: @closeHitbox;
+    & when (@variationModalClose) {
+        .ui.modal > .close + .header {
+            padding-right: @closeHitbox;
+        }
     }
     .ui.overlay.fullscreen.modal > .content.content.content {
         min-height: @overlayFullscreenScrollingContentMaxHeightMobile;
@@ -277,9 +295,11 @@
         display: block;
         padding: @mobileContentPadding !important;
     }
-    .ui.modal > .close {
-        top: @mobileCloseTop !important;
-        right: @mobileCloseRight !important;
+    & when (@variationModalClose) {
+        .ui.modal > .close {
+            top: @mobileCloseTop !important;
+            right: @mobileCloseRight !important;
+        }
     }
 
     /* rtl:ignore */
@@ -351,10 +371,12 @@
         color: @basicModalHeaderColor;
         border-bottom: none;
     }
-    .ui.basic.modal > .close {
-        top: @basicModalCloseTop;
-        right: @basicModalCloseRight;
-        color: @basicInnerCloseColor;
+    & when (@variationModalClose) {
+        .ui.basic.modal > .close {
+            top: @basicModalCloseTop;
+            right: @basicModalCloseRight;
+            color: @basicInnerCloseColor;
+        }
     }
     .ui.inverted.dimmer > .basic.modal {
         color: @basicInvertedModalColor;
@@ -370,14 +392,14 @@
     .ui.legacy.legacy.page.dimmer > .ui.modal {
         left: 50% !important;
     }
-    .ui.legacy.legacy.modal:not(.aligned),
-    .ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) {
+    .ui.legacy.legacy.modal@{notAligned},
+    .ui.legacy.legacy.page.dimmer > .ui.modal@{notAligned} {
         top: 50%;
     }
-    .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned),
-    .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned),
-    .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned),
-    .ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) {
+    .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal@{notAligned},
+    .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal@{notAligned},
+    .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal@{notAligned},
+    .ui.top.aligned.dimmer > .ui.legacy.legacy.modal@{notAligned} {
         top: auto;
     }
     & when (@variationModalOverlay) {
@@ -450,7 +472,7 @@
     .modals.dimmer .ui.scrolling.modal.fullscreen {
         top: 0;
     }
-    .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
+    .modals.dimmer .ui.scrolling.modal@{notFullscreen} {
         margin: @scrollingMargin auto;
         top: @scrollingTop;
     }
@@ -470,7 +492,7 @@
     .scrolling.undetached.dimmable.dimmed > .dimmer {
         overflow: hidden;
     }
-    .scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) {
+    .scrolling.undetached.dimmable .ui.scrolling.modal@{notFullscreen} {
         position: absolute;
         left: 50%;
     }
@@ -517,19 +539,21 @@
             border-radius: 0;
         }
     }
-    .ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
-    .ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
-        padding-right: @closeHitbox;
-    }
-    .ui.modal > .close.inside,
-    .ui.fullscreen.modal > .close {
-        top: @innerCloseTop;
-        right: @innerCloseRight;
-        color: @innerCloseColor;
-    }
-    & when (@variationModalBasic) {
-        .ui.basic.fullscreen.modal > .close {
-            color: @basicInnerCloseColor;
+    & when (@variationModalClose) {
+        .ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
+        .ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
+            padding-right: @closeHitbox;
+        }
+        .ui.modal > .close.inside,
+        .ui.fullscreen.modal > .close {
+            top: @innerCloseTop;
+            right: @innerCloseRight;
+            color: @innerCloseColor;
+        }
+        & when (@variationModalBasic) {
+            .ui.basic.fullscreen.modal > .close {
+                color: @basicInnerCloseColor;
+            }
         }
     }
 }
@@ -611,14 +635,17 @@
             color: @invertedActionColor;
         }
     }
+    & when (@variationModalClose) {
+        & when (@variationDimmerInverted) {
+            .ui.inverted.dimmer > .modal > .close {
+                color: @invertedDimmerCloseColor;
+            }
+        }
 
-    .ui.inverted.dimmer > .modal > .close {
-        color: @invertedDimmerCloseColor;
-    }
-
-    @media only screen and (max-width: @largestTabletScreen) {
-        .ui.dimmer .inverted.modal > .close {
-            color: @invertedCloseColor;
+        @media only screen and (max-width: @largestTabletScreen) {
+            .ui.dimmer .inverted.modal > .close {
+                color: @invertedCloseColor;
+            }
         }
     }
     & when (@variationModalFullscreen) or (@variationModalCloseInside) {

package/src/definitions/modules/nag.less

@@ -17,6 +17,10 @@
 
 @import (multiple) "../../theme.config";
 
+@notBottom: if(@variationNagBottom, e(":not(.bottom)"));
+@notFixed: if(@variationNagFixed, e(":not(.fixed)"));
+@notOverlay: if(@variationNagOverlay, e(":not(.overlay)"));
+
 /*******************************
              Nag
 *******************************/
@@ -63,7 +67,7 @@ a.ui.nag {
     transition: @closeTransition;
 }
 
-.ui.nag:not(.overlay):not(.fixed) {
+.ui.nag@{notOverlay}@{notFixed} {
     border-radius: @borderRadius;
 }
 
@@ -192,7 +196,7 @@ a.ui.nag {
     .ui.ui.nags .nag {
         border-radius: @groupedBorderRadius;
     }
-    .ui.nags:not(.bottom) .nag:last-child {
+    .ui.nags@{notBottom} .nag:last-child {
         border-radius: @topBorderRadius;
     }
     & when(@variationNagBottom) {
@@ -200,10 +204,10 @@ a.ui.nag {
             border-radius: @bottomBorderRadius;
         }
     }
-    .ui.nags:not(.fixed):not(.overlay) .nag:first-child {
+    .ui.nags@{notFixed}@{notOverlay} .nag:first-child {
         border-radius: @bottomBorderRadius;
     }
-    .ui.nags:not(.fixed):not(.overlay) .nag:only-child {
+    .ui.nags@{notFixed}@{notOverlay} .nag:only-child {
         border-radius: @borderRadius;
     }
 }

package/src/definitions/modules/popup.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notPadded: if(@variationGridPadded, e(":not(.padded)"));
+
 /*******************************
             Popup
 *******************************/
@@ -696,7 +698,7 @@
 *******************************/
 
 /* Immediate Nested Grid */
-.ui.ui.ui.popup > .ui.grid:not(.padded) {
+.ui.ui.ui.popup > .ui.grid@{notPadded} {
     width: @nestedGridWidth;
     margin: @nestedGridMargin;
 }

package/src/definitions/modules/progress.less

@@ -17,6 +17,12 @@
 
 @import (multiple) "../../theme.config";
 
+@notIndeterminate: if(@variationProgressIndeterminate, e(":not(.indeterminate)"));
+@notSliding: if(@variationProgressSliding, e(":not(.sliding)"));
+@notFilling: if(@variationProgressFilling, e(":not(.filling)"));
+@notSwinging: if(@variationProgressSwinging, e(":not(.swinging)"));
+@notBasic: if(@variationProgressBasic, e(":not(.basic)"));
+
 /*******************************
             Progress
 *******************************/
@@ -66,8 +72,8 @@
         min-width: @barMinWidth;
     }
 }
-.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar:not(:empty),
-.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar:not(:empty) {
+.ui.ui.ui.progress:not([data-percent])@{notIndeterminate} .bar:not(:empty),
+.ui.ui.ui.progress[data-percent="0"]@{notIndeterminate} .bar:not(:empty) {
     background: transparent;
 }
 .ui.progress[data-percent="0"] .bar .progress {
@@ -396,7 +402,7 @@
         Inverted
     --------------- */
 
-    .ui.inverted.progress:not(.basic) {
+    .ui.inverted.progress@{notBasic} {
         background: @invertedBackground;
         border: @invertedBorder;
     }
@@ -573,7 +579,7 @@
             animation-name: progress-filling;
         }
     }
-    .ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
+    .ui.indeterminate.progress@{notSliding}@{notFilling}@{notSwinging} .bar::before {
         background: @indeterminatePulseColor;
     }
     & when (@variationProgressSliding) or (@variationProgressSwinging) or (@variationProgressFilling) {

package/src/definitions/modules/search.js

@@ -126,6 +126,7 @@
                             .on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown)
                             .on('mouseup' + eventNamespace, selector.results, module.event.result.mouseup)
                             .on('click' + eventNamespace, selector.result, module.event.result.click)
+                            .on('click' + eventNamespace, selector.remove, module.event.remove.click)
                         ;
                     },
                 },
@@ -201,6 +202,12 @@
                             callback();
                         }
                     },
+                    remove: {
+                        click: function () {
+                            module.clear.value();
+                            $prompt.trigger('focus');
+                        },
+                    },
                     result: {
                         mousedown: function () {
                             module.resultsClicked = true;
@@ -837,6 +844,9 @@
                             $module.data(metadata.cache, cache);
                         }
                     },
+                    value: function () {
+                        module.set.value('');
+                    },
                 },
 
                 read: {
@@ -1456,6 +1466,7 @@
 
         selector: {
             prompt: '.prompt',
+            remove: '> .icon.input > .remove.icon',
             searchButton: '.search.button',
             results: '.results',
             message: '.results > .message',

package/src/definitions/modules/search.less

@@ -271,37 +271,46 @@
            Types
 *******************************/
 
-& when (@variationSearchSelection) {
+& when (@variationSearchClear) {
     /* --------------
-        Selection
+        Clear Icon
     --------------- */
 
-    .ui.search.selection .prompt {
-        border-radius: @selectionPromptBorderRadius;
+    .ui.search > .icon.input > .remove.icon {
+        pointer-events: all;
+        transition: @clearableIconTransition;
+        cursor: pointer;
+        opacity: @clearableIconOpacity;
+        &:hover {
+            opacity: @clearableIconHoverOpacity;
+        }
     }
-
-    /* Remove input */
-    .ui.search.selection > .icon.input > .remove.icon {
-        pointer-events: none;
-        position: absolute;
-        left: auto;
-        opacity: 0;
-        color: @selectionCloseIconColor;
-        top: @selectionCloseTop;
-        right: @selectionCloseRight;
-        transition: @selectionCloseTransition;
+    .ui.search > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
+        right: @clearableIconInputRight;
     }
-    .ui.search.selection > .icon.input > .active.remove.icon {
+    .ui.search input[type="search"]::-webkit-search-cancel-button {
+        -webkit-appearance: none;
         cursor: pointer;
-        opacity: @selectionCloseIconOpacity;
-        pointer-events: auto;
+        transition: @clearableIconTransition;
+        opacity: @clearableIconOpacity;
+        background: @clearableIconBackground;
+        height: @clearableIconHeight;
+        width: @clearableIconWidth;
+        &:hover {
+            opacity: @clearableIconHoverOpacity;
+        }
+    }
+    & when (@variationSearchLoading) {
+        .ui.loading.search input[type="search"]::-webkit-search-cancel-button {
+            display: none;
+        }
     }
-    .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
-        right: @selectionCloseIconInputRight;
+    .ui.search > .icon.input > input:placeholder-shown ~ .remove.icon,
+    .ui.search.loading > .icon.input > .remove.icon {
+        display: none;
     }
-    .ui.search.selection > .icon.input > .remove.icon:hover {
-        opacity: @selectionCloseIconHoverOpacity;
-        color: @selectionCloseIconHoverColor;
+    .ui.search > .icon.input > input:-ms-input-placeholder ~ .remove.icon when (@supportIE) {
+        display: none;
     }
 }