fomantic-ui 2.9.2-beta.8 → 2.9.2

package/src/definitions/elements/segment.less

@@ -727,7 +727,7 @@
             border: @attachedBorder;
         }
     }
-    .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) {
+    .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top):not([class*="left attached"]):not([class*="right attached"]) {
         border-top: none;
     }
 
@@ -761,6 +761,32 @@
     .ui.tab.segment[class*="bottom attached"]:last-child {
         margin-bottom: @verticalMargin;
     }
+    .ui[class*="left attached"].segment {
+        margin-right: 0;
+    }
+    .ui[class*="right attached"].segment {
+        margin-left: 0;
+    }
+    & when (@variationSegmentSeamless) {
+        .ui.seamless.attached.segment {
+            &:not(.top):not(.bottom):not([class*="right attached"]):not([class*="left attached"]) {
+                border-top: none;
+                border-bottom: none;
+            }
+            &.top {
+                border-bottom: none;
+            }
+            &.bottom {
+                border-top: none;
+            }
+            &[class*="left attached"] {
+                border-right: none;
+            }
+            &[class*="right attached"] {
+                border-left: none;
+            }
+        }
+    }
 }
 
 & when (@variationSegmentFitted) {

package/src/definitions/elements/text.less

@@ -4,7 +4,7 @@
  *
  *
  * Released under the MIT license
- * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
+ * https://opensource.org/licenses/MIT
  *
  */
 

package/src/definitions/globals/site.less

@@ -195,30 +195,12 @@ a:hover {
 *******************************/
 
 /* Site */
-::-webkit-selection {
-    background-color: @highlightBackground;
-    color: @highlightColor;
-}
-::-moz-selection {
-    background-color: @highlightBackground;
-    color: @highlightColor;
-}
 ::selection {
     background-color: @highlightBackground;
     color: @highlightColor;
 }
 
 /* Form */
-textarea::-webkit-selection,
-input::-webkit-selection {
-    background-color: @inputHighlightBackground;
-    color: @inputHighlightColor;
-}
-textarea::-moz-selection,
-input::-moz-selection {
-    background-color: @inputHighlightBackground;
-    color: @inputHighlightColor;
-}
 textarea::selection,
 input::selection {
     background-color: @inputHighlightBackground;

package/src/definitions/modules/checkbox.less

@@ -409,10 +409,10 @@
 
     /* Active */
     .ui.slider.checkbox input:checked ~ label {
-        color: @sliderOnLabelColor !important;
+        color: @sliderOnLabelColor;
     }
     .ui.slider.checkbox input:checked ~ label::before {
-        background-color: @sliderOnLineColor !important;
+        background-color: @sliderOnLineColor;
     }
     .ui.slider.checkbox input:checked ~ label::after {
         left: @sliderTravelDistance;
@@ -420,10 +420,10 @@
 
     /* Active Focus */
     .ui.slider.checkbox input:focus:checked ~ label {
-        color: @sliderOnFocusLabelColor !important;
+        color: @sliderOnFocusLabelColor;
     }
     .ui.slider.checkbox input:focus:checked ~ label::before {
-        background-color: @sliderOnFocusLineColor !important;
+        background-color: @sliderOnFocusLineColor;
     }
 
     & when (@variationCheckboxRightAligned) {
@@ -520,10 +520,10 @@
 
     /* Active */
     .ui.toggle.checkbox input:checked ~ label {
-        color: @toggleOnLabelColor !important;
+        color: @toggleOnLabelColor;
     }
     .ui.toggle.checkbox input:checked ~ label::before {
-        background-color: @toggleOnLaneColor !important;
+        background-color: @toggleOnLaneColor;
     }
     .ui.toggle.checkbox input:checked ~ label::after {
         left: @toggleOnOffset;
@@ -532,10 +532,10 @@
 
     /* Active Focus */
     .ui.toggle.checkbox input:focus:checked ~ label {
-        color: @toggleOnFocusLabelColor !important;
+        color: @toggleOnFocusLabelColor;
     }
     .ui.toggle.checkbox input:focus:checked ~ label::before {
-        background-color: @toggleOnFocusLaneColor !important;
+        background-color: @toggleOnFocusLaneColor;
     }
 
     & when (@variationCheckboxRightAligned) {
@@ -563,8 +563,8 @@
          Fitted
     --------------- */
 
-    .ui.fitted.checkbox label {
-        padding-left: 0 !important;
+    .ui.ui.fitted.checkbox label {
+        padding-left: 0;
     }
 
     .ui.fitted.toggle.checkbox {
@@ -580,14 +580,14 @@
     /* --------------
          Inverted
     --------------- */
-    .ui.inverted.checkbox label,
-    .ui.inverted.checkbox + label {
-        color: @invertedTextColor !important;
+    .ui.ui.ui.inverted.checkbox label,
+    .ui.ui.ui.inverted.checkbox + label {
+        color: @invertedTextColor;
     }
 
     /* Hover */
-    .ui.inverted.checkbox label:hover {
-        color: @invertedHoveredTextColor !important;
+    .ui.ui.inverted.checkbox label:hover {
+        color: @invertedHoveredTextColor;
     }
     .ui.inverted.checkbox label:hover::before {
         border-color: @strongSelectedBorderColor;
@@ -599,56 +599,56 @@
         }
 
         /* Slider Line */
-        .ui.inverted.slider.checkbox label::before {
-            background-color: @invertedUnselectedTextColor !important;
+        .ui.ui.inverted.slider.checkbox label::before {
+            background-color: @invertedUnselectedTextColor;
         }
 
         /* Slider Hover */
-        .ui.inverted.slider.checkbox label:hover::before {
-            background: @invertedLightTextColor !important;
+        .ui.ui.inverted.slider.checkbox label:hover::before {
+            background: @invertedLightTextColor;
         }
 
         /* Slider Active */
-        .ui.inverted.slider.checkbox input:checked ~ label {
-            color: @invertedSelectedTextColor !important;
+        .ui.ui.inverted.slider.checkbox input:checked ~ label {
+            color: @invertedSelectedTextColor;
         }
-        .ui.inverted.slider.checkbox input:checked ~ label::before {
-            background-color: @selectedWhiteBorderColor !important;
+        .ui.ui.inverted.slider.checkbox input:checked ~ label::before {
+            background-color: @selectedWhiteBorderColor;
         }
 
         /* Slider Active Focus */
-        .ui.inverted.slider.checkbox input:focus:checked ~ label {
-            color: @invertedSelectedTextColor !important;
+        .ui.ui.inverted.slider.checkbox input:focus:checked ~ label {
+            color: @invertedSelectedTextColor;
         }
-        .ui.inverted.slider.checkbox input:focus:checked ~ label::before {
-            background-color: @selectedWhiteBorderColor !important;
+        .ui.ui.inverted.slider.checkbox input:focus:checked ~ label::before {
+            background-color: @selectedWhiteBorderColor;
         }
     }
     & when (@variationCheckboxToggle) {
         /* Toggle Switch */
-        .ui.inverted.toggle.checkbox label::before {
-            background-color: @invertedTextColor !important;
+        .ui.ui.inverted.toggle.checkbox label::before {
+            background-color: @invertedTextColor;
         }
 
         /* Toggle Hover */
-        .ui.inverted.toggle.checkbox label:hover::before {
-            background: @invertedHoveredTextColor !important;
+        .ui.ui.inverted.toggle.checkbox label:hover::before {
+            background: @invertedHoveredTextColor;
         }
 
         /* Toggle Active */
-        .ui.inverted.toggle.checkbox input:checked ~ label {
-            color: @invertedSelectedTextColor !important;
+        .ui.ui.inverted.toggle.checkbox input:checked ~ label {
+            color: @invertedSelectedTextColor;
         }
-        .ui.inverted.toggle.checkbox input:checked ~ label::before {
-            background-color: @toggleOnLaneColor !important;
+        .ui.ui.inverted.toggle.checkbox input:checked ~ label::before {
+            background-color: @toggleOnLaneColor;
         }
 
         /* Toggle Active Focus */
-        .ui.inverted.toggle.checkbox input:focus:checked ~ label {
-            color: @invertedSelectedTextColor !important;
+        .ui.ui.inverted.toggle.checkbox input:focus:checked ~ label {
+            color: @invertedSelectedTextColor;
         }
-        .ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
-            background-color: @toggleOnFocusLaneColor !important;
+        .ui.ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
+            background-color: @toggleOnFocusLaneColor;
         }
     }
 }

package/src/definitions/modules/dropdown.less

@@ -425,6 +425,12 @@ select.ui.dropdown {
         /* Compact */
         .ui.compact.selection.dropdown {
             min-width: 0;
+            & > .menu {
+                width: auto;
+                &:not(.multiline) {
+                    width: max-content;
+                }
+            }
         }
     }
 
@@ -1898,16 +1904,6 @@ select.ui.dropdown {
     }
 
     /* Selection for form elements */
-    .ui.inverted.dropdown textarea::-webkit-selection,
-    .ui.inverted.dropdown input::-webkit-selection {
-        background-color: @invertedInputHighlightBackground;
-        color: @invertedInputHighlightColor;
-    }
-    .ui.inverted.dropdown textarea::-moz-selection,
-    .ui.inverted.dropdown input::-moz-selection {
-        background-color: @invertedInputHighlightBackground;
-        color: @invertedInputHighlightColor;
-    }
     .ui.inverted.dropdown textarea::selection,
     .ui.inverted.dropdown input::selection {
         background-color: @invertedInputHighlightBackground;

package/src/definitions/modules/embed.less

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI - Video
+ * # Fomantic-UI - Embed
  * https://github.com/fomantic/Fomantic-UI/
  *
  *

package/src/definitions/modules/popup.js

@@ -125,9 +125,9 @@
                         }
                     }
                     if (settings.popup) {
-                        $popup.addClass(className.loading);
+                        module.set.invisible();
                         $offsetParent = module.get.offsetParent();
-                        $popup.removeClass(className.loading);
+                        module.remove.invisible();
                         if (settings.movePopup && module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) {
                             module.debug('Moving popup to the same offset parent as target');
                             $popup
@@ -901,8 +901,8 @@
                             .css(positioning)
                             .removeClass(className.position)
                             .addClass(position)
-                            .addClass(className.loading)
                         ;
+                        module.set.invisible();
 
                         popupOffset = module.get.popupOffset();
 
@@ -926,7 +926,7 @@
                                 module.debug('Popup could not find a position to display', $popup);
                                 module.error(error.cannotPlace, element);
                                 module.remove.attempts();
-                                module.remove.loading();
+                                module.remove.invisible();
                                 module.reset();
                                 settings.onUnplaceable.call($popup, element);
 
@@ -935,7 +935,7 @@
                         }
                         module.debug('Position is on stage', position);
                         module.remove.attempts();
-                        module.remove.loading();
+                        module.remove.invisible();
                         if (settings.setFluidWidth && module.is.fluid()) {
                             module.set.fluidWidth(calculations);
                         }
@@ -949,6 +949,14 @@
                         $popup.css('width', calculations.container.width);
                     },
 
+                    loading: function () {
+                        $popup.addClass(className.loading);
+                    },
+
+                    invisible: function () {
+                        $popup.addClass(className.invisible);
+                    },
+
                     variation: function (variation) {
                         variation = variation || module.get.variation();
                         if (variation && module.has.popup()) {
@@ -966,6 +974,9 @@
                     loading: function () {
                         $popup.removeClass(className.loading);
                     },
+                    invisible: function () {
+                        $popup.removeClass(className.invisible);
+                    },
                     variation: function (variation) {
                         variation = variation || module.get.variation();
                         if (variation) {
@@ -1475,6 +1486,7 @@
             basic: 'basic',
             animating: 'animating',
             dropdown: 'dropdown',
+            invisible: 'invisible',
             fluid: 'fluid',
             loading: 'loading',
             popup: 'ui popup',

package/src/definitions/modules/popup.less

@@ -704,12 +704,36 @@
 *******************************/
 & when (@variationPopupLoading) {
     .ui.loading.popup {
-        display: block;
-        visibility: hidden;
-        z-index: @loadingZIndex;
+        cursor: default;
+        pointer-events: @loadingPointerEvents;
+        user-select: none;
+        & * {
+            opacity: @loadingOpacity;
+        }
+        &::after {
+            position: absolute;
+            content: "";
+            top: 50%;
+            left: 50%;
+            margin: @loaderMargin;
+            width: @loaderSize;
+            height: @loaderSize;
+            animation: loader @loaderSpeed infinite linear;
+            border: @loaderLineWidth solid @loaderLineColor;
+            border-radius: @circularRadius;
+            box-shadow: 0 0 0 1px transparent;
+            visibility: visible;
+            z-index: @loaderLineZIndex;
+        }
     }
 }
 
+.ui.invisible.popup {
+    display: block;
+    visibility: hidden !important;
+    z-index: @invisibleZIndex;
+}
+
 .ui.animating.popup,
 .ui.visible.popup {
     display: block;
@@ -807,6 +831,8 @@
         @color: @value;
         @c: @colors[@@color][color];
         @l: @colors[@@color][light];
+        @cl: lighten(@c, @loadingColoredPercent);
+        @ll: darken(@l, @loadingColoredPercent);
 
         & when not (@variationPopupTooltip) {
             .ui.ui.ui.@{color}.popup::before,
@@ -814,6 +840,9 @@
                 background: @c;
                 color: @white;
                 border: none;
+                .loading& when (@variationPopupLoading) {
+                    background: @cl;
+                }
             }
             .ui.ui.ui.@{color}.popup::before {
                 box-shadow: none;
@@ -823,6 +852,9 @@
                 .ui.inverted.@{color}.popup {
                     background: @l;
                     color: @black;
+                    .loading& when (@variationPopupLoading) {
+                        background: @ll;
+                    }
                 }
             }
         }
@@ -835,6 +867,12 @@
                 color: @white;
                 border: none;
             }
+            & when (@variationPopupLoading) {
+                .ui.ui.ui.@{color}.loading.popup::before,
+                .ui.@{color}.loading.popup {
+                    background: @cl;
+                }
+            }
             .ui.ui.ui.@{color}.popup::before,
             [data-tooltip][data-variation~="@{color}"]::before {
                 box-shadow: none;
@@ -847,6 +885,12 @@
                     background: @l;
                     color: @black;
                 }
+                & when (@variationPopupLoading) {
+                    .ui.ui.ui.inverted.@{color}.loading.popup::before,
+                    .ui.inverted.@{color}.loading.popup {
+                        background: @ll;
+                    }
+                }
             }
         }
     });

package/src/definitions/modules/progress.less

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI - Progress Bar
+ * # Fomantic-UI - Progress
  * https://github.com/fomantic/Fomantic-UI/
  *
  *

package/src/definitions/modules/slider.less

@@ -1,3 +1,13 @@
+/*!
+ * # Fomantic-UI - Slider
+ * https://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * https://opensource.org/licenses/MIT
+ *
+ */
+
 /*******************************
              Theme
  *******************************/

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

@@ -233,6 +233,7 @@
 @variationSegmentSecondary: true;
 @variationSegmentTertiary: true;
 @variationSegmentAttached: true;
+@variationSegmentSeamless: true;
 @variationSegmentFitted: true;
 @variationSegmentScrolling: true;
 @variationSegmentScrollingShort: true;
@@ -294,6 +295,7 @@
 @variationGridDivided: true;
 @variationGridVertical: true;
 @variationGridAligned: true;
+@variationGridAttached: true;
 @variationGridStretched: true;
 @variationGridJustified: true;
 @variationGridReversed: true;
@@ -325,6 +327,8 @@
 @variationMenuAttached: true;
 @variationMenuIcon: true;
 @variationMenuEqualWidth: true;
+@variationMenuWrapping: true;
+@variationMenuWrapped: true;
 @variationMenuSizes: @variationAllSizes;
 @variationMenuColors: @variationAllColors;
 

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

@@ -109,7 +109,15 @@
        States
 -------------------- */
 
+@loadingOpacity: 0.3;
+@loadingColoredPercent: 30%;
+@loadingPointerEvents: none;
 @loadingZIndex: -1;
+@loaderSize: 2em;
+@loaderLineZIndex: 101;
+
+/* backward compatible just in case */
+@invisibleZIndex: @loadingZIndex;
 
 /* -------------------
        Variations