fomantic-ui 2.9.0-beta.29 → 2.9.0-beta.292

package/src/definitions/modules/popup.less

@@ -58,7 +58,7 @@
   padding-top: @headerDistance;
 }
 
-.ui.popup:before {
+.ui.popup::before {
   position: absolute;
   content: '';
   width: @arrowSize;
@@ -86,7 +86,7 @@
   }
 
   /* Arrow */
-  [data-tooltip]:before {
+  [data-tooltip]::before {
     pointer-events: none;
     position: absolute;
     content: '';
@@ -102,7 +102,7 @@
   }
 
   /* Popup */
-  [data-tooltip]:after {
+  [data-tooltip]::after {
     pointer-events: none;
     content: attr(data-tooltip);
     position: absolute;
@@ -129,7 +129,7 @@
   }
 
   /* Default Position (Top Center) */
-  [data-tooltip]:not([data-position]):before {
+  [data-tooltip]:not([data-position])::before {
     top: auto;
     right: auto;
     bottom: 100%;
@@ -138,7 +138,7 @@
     margin-left: @tooltipArrowHorizontalOffset;
     margin-bottom: -@tooltipArrowVerticalOffset;
   }
-  [data-tooltip]:not([data-position]):after {
+  [data-tooltip]:not([data-position])::after {
     left: 50%;
     transform: translateX(-50%);
     bottom: 100%;
@@ -146,8 +146,8 @@
   }
 
   /* Animation */
-  [data-tooltip]:before,
-  [data-tooltip]:after {
+  [data-tooltip]::before,
+  [data-tooltip]::after {
     pointer-events: none;
     visibility: hidden;
     opacity: 0;
@@ -156,67 +156,67 @@
             opacity @tooltipDuration @tooltipEasing
     ;
   }
-  [data-tooltip]:before {
+  [data-tooltip]::before {
     transform: rotate(45deg) scale(0) !important;
     transform-origin: center top;
   }
-  [data-tooltip]:after {
+  [data-tooltip]::after {
     transform-origin: center bottom;
   }
-  [data-tooltip]:hover:before,
-  [data-tooltip]:hover:after {
+  [data-tooltip]:hover::before,
+  [data-tooltip]:hover::after {
     visibility: visible;
     pointer-events: auto;
     opacity: 1;
   }
-  [data-tooltip]:hover:before {
+  [data-tooltip]:hover::before {
     transform: rotate(45deg) scale(1) !important;
   }
 
   /* Animation Position */
-  [data-tooltip]:after,
-  [data-tooltip][data-position="top center"]:after,
-  [data-tooltip][data-position="bottom center"]:after {
+  [data-tooltip]::after,
+  [data-tooltip][data-position="top center"]::after,
+  [data-tooltip][data-position="bottom center"]::after {
     transform: translateX(-50%) scale(0) !important;
   }
-  [data-tooltip]:hover:after,
-  [data-tooltip][data-position="bottom center"]:hover:after {
+  [data-tooltip]:hover::after,
+  [data-tooltip][data-position="bottom center"]:hover::after {
     transform: translateX(-50%) scale(1) !important;
   }
-  [data-tooltip][data-position="left center"]:after,
-  [data-tooltip][data-position="right center"]:after {
+  [data-tooltip][data-position="left center"]::after,
+  [data-tooltip][data-position="right center"]::after {
     transform: translateY(-50%) scale(0) !important;
   }
-  [data-tooltip][data-position="left center"]:hover:after,
-  [data-tooltip][data-position="right center"]:hover:after {
+  [data-tooltip][data-position="left center"]:hover::after,
+  [data-tooltip][data-position="right center"]:hover::after {
     transform: translateY(-50%) scale(1) !important;
     -moz-transform: translateY(-50%) scale(1.0001) !important;
   }
-  [data-tooltip][data-position="top left"]:after,
-  [data-tooltip][data-position="top right"]:after,
-  [data-tooltip][data-position="bottom left"]:after,
-  [data-tooltip][data-position="bottom right"]:after {
+  [data-tooltip][data-position="top left"]::after,
+  [data-tooltip][data-position="top right"]::after,
+  [data-tooltip][data-position="bottom left"]::after,
+  [data-tooltip][data-position="bottom right"]::after {
     transform: scale(0) !important;
   }
-  [data-tooltip][data-position="top left"]:hover:after,
-  [data-tooltip][data-position="top right"]:hover:after,
-  [data-tooltip][data-position="bottom left"]:hover:after,
-  [data-tooltip][data-position="bottom right"]:hover:after {
+  [data-tooltip][data-position="top left"]:hover::after,
+  [data-tooltip][data-position="top right"]:hover::after,
+  [data-tooltip][data-position="bottom left"]:hover::after,
+  [data-tooltip][data-position="bottom right"]:hover::after {
     transform: scale(1) !important;
   }
   & when (@variationPopupFixed) {
-    [data-tooltip][data-variation~="fixed"]:after {
+    [data-tooltip][data-variation~="fixed"]::after {
       white-space: normal;
       width: @maxWidth;
     }
-    [data-tooltip][data-variation*="wide fixed"]:after {
+    [data-tooltip][data-variation*="wide fixed"]::after {
       width: @wideWidth;
     }
-    [data-tooltip][data-variation*="very wide fixed"]:after {
+    [data-tooltip][data-variation*="very wide fixed"]::after {
       width: @veryWideWidth;
     }
     @media only screen and (max-width: @largestMobileScreen) {
-      [data-tooltip][data-variation~="fixed"]:after {
+      [data-tooltip][data-variation~="fixed"]::after {
         width: @maxWidth;
       }
     }
@@ -227,26 +227,22 @@
     ---------------*/
 
     /* Arrow */
-    [data-tooltip][data-inverted]:before {
+    [data-tooltip][data-inverted]::before {
       box-shadow: none !important;
     }
 
     /* Arrow Position */
-    [data-tooltip][data-inverted]:before {
+    [data-tooltip][data-inverted]::before {
       background: @invertedArrowBottomBackground;
     }
 
     /* Popup  */
-    [data-tooltip][data-inverted]:after {
+    [data-tooltip][data-inverted]::after {
       background: @tooltipInvertedBackground;
       color: @tooltipInvertedColor;
       border: @tooltipInvertedBorder;
       box-shadow: @tooltipInvertedBoxShadow;
     }
-    [data-tooltip][data-inverted]:after .header {
-      background: @tooltipInvertedHeaderBackground;
-      color: @tooltipInvertedHeaderColor;
-    }
   }
 
   & when (@variationPopupPosition) {
@@ -254,12 +250,12 @@
         Position
     ---------------*/
     & when (@variationPopupTop) {
-      [data-position~="top"][data-tooltip]:before {
+      [data-position~="top"][data-tooltip]::before {
         background: @arrowBottomBackground;
       }
       & when (@variationPopupCenter) {
         /* Top Center */
-        [data-position="top center"][data-tooltip]:after {
+        [data-position="top center"][data-tooltip]::after {
           top: auto;
           right: auto;
           left: 50%;
@@ -267,7 +263,7 @@
           transform: translateX(-50%);
           margin-bottom: @tooltipDistanceAway;
         }
-        [data-position="top center"][data-tooltip]:before {
+        [data-position="top center"][data-tooltip]::before {
           top: auto;
           right: auto;
           bottom: 100%;
@@ -279,14 +275,14 @@
       }
       & when (@variationPopupLeft) {
         /* Top Left */
-        [data-position="top left"][data-tooltip]:after {
+        [data-position="top left"][data-tooltip]::after {
           top: auto;
           right: auto;
           left: 0;
           bottom: 100%;
           margin-bottom: @tooltipDistanceAway;
         }
-        [data-position="top left"][data-tooltip]:before {
+        [data-position="top left"][data-tooltip]::before {
           top: auto;
           right: auto;
           bottom: 100%;
@@ -297,14 +293,14 @@
       }
       & when (@variationPopupRight) {
         /* Top Right */
-        [data-position="top right"][data-tooltip]:after {
+        [data-position="top right"][data-tooltip]::after {
           top: auto;
           left: auto;
           right: 0;
           bottom: 100%;
           margin-bottom: @tooltipDistanceAway;
         }
-        [data-position="top right"][data-tooltip]:before {
+        [data-position="top right"][data-tooltip]::before {
           top: auto;
           left: auto;
           bottom: 100%;
@@ -316,13 +312,13 @@
     }
 
     & when (@variationPopupBottom) {
-      [data-position~="bottom"][data-tooltip]:before {
+      [data-position~="bottom"][data-tooltip]::before {
         background: @arrowTopBackground;
         box-shadow: @bottomArrowBoxShadow;
       }
       & when (@variationPopupCenter) {
         /* Bottom Center */
-        [data-position="bottom center"][data-tooltip]:after {
+        [data-position="bottom center"][data-tooltip]::after {
           bottom: auto;
           right: auto;
           left: 50%;
@@ -330,7 +326,7 @@
           transform: translateX(-50%);
           margin-top: @tooltipDistanceAway;
         }
-        [data-position="bottom center"][data-tooltip]:before {
+        [data-position="bottom center"][data-tooltip]::before {
           bottom: auto;
           right: auto;
           top: 100%;
@@ -341,12 +337,12 @@
       }
       & when (@variationPopupLeft) {
         /* Bottom Left */
-        [data-position="bottom left"][data-tooltip]:after {
+        [data-position="bottom left"][data-tooltip]::after {
           left: 0;
           top: 100%;
           margin-top: @tooltipDistanceAway;
         }
-        [data-position="bottom left"][data-tooltip]:before {
+        [data-position="bottom left"][data-tooltip]::before {
           bottom: auto;
           right: auto;
           top: 100%;
@@ -357,12 +353,12 @@
       }
       & when (@variationPopupRight) {
         /* Bottom Right */
-        [data-position="bottom right"][data-tooltip]:after {
+        [data-position="bottom right"][data-tooltip]::after {
           right: 0;
           top: 100%;
           margin-top: @tooltipDistanceAway;
         }
-        [data-position="bottom right"][data-tooltip]:before {
+        [data-position="bottom right"][data-tooltip]::before {
           bottom: auto;
           left: auto;
           top: 100%;
@@ -375,13 +371,13 @@
     & when (@variationPopupCenter) {
       & when (@variationPopupLeft) {
         /* Left Center */
-        [data-position="left center"][data-tooltip]:after {
+        [data-position="left center"][data-tooltip]::after {
           right: 100%;
           top: 50%;
           margin-right: @tooltipDistanceAway;
           transform: translateY(-50%);
         }
-        [data-position="left center"][data-tooltip]:before {
+        [data-position="left center"][data-tooltip]::before {
           right: 100%;
           top: 50%;
           margin-top: @tooltipArrowVerticalOffset;
@@ -392,13 +388,13 @@
       }
       & when (@variationPopupRight) {
         /* Right Center */
-        [data-position="right center"][data-tooltip]:after {
+        [data-position="right center"][data-tooltip]::after {
           left: 100%;
           top: 50%;
           margin-left: @tooltipDistanceAway;
           transform: translateY(-50%);
         }
-        [data-position="right center"][data-tooltip]:before {
+        [data-position="right center"][data-tooltip]::before {
           left: 100%;
           top: 50%;
           margin-top: @tooltipArrowHorizontalOffset;
@@ -412,59 +408,59 @@
     & when (@variationPopupInverted) {
       /* Inverted Arrow Color */
       & when (@variationPopupBottom) {
-        [data-inverted][data-position~="bottom"][data-tooltip]:before {
+        [data-inverted][data-position~="bottom"][data-tooltip]::before {
           background: @invertedArrowTopBackground;
           box-shadow: @bottomArrowBoxShadow;
         }
       }
       & when (@variationPopupCenter) {
         & when (@variationPopupLeft) {
-          [data-inverted][data-position="left center"][data-tooltip]:before {
+          [data-inverted][data-position="left center"][data-tooltip]::before {
             background: @invertedArrowCenterBackground;
             box-shadow: @leftArrowBoxShadow;
           }
         }
         & when (@variationPopupRight) {
-          [data-inverted][data-position="right center"][data-tooltip]:before {
+          [data-inverted][data-position="right center"][data-tooltip]::before {
             background: @invertedArrowCenterBackground;
             box-shadow: @rightArrowBoxShadow;
           }
         }
       }
       & when (@variationPopupTop) {
-        [data-inverted][data-position~="top"][data-tooltip]:before {
+        [data-inverted][data-position~="top"][data-tooltip]::before {
           background: @invertedArrowBottomBackground;
         }
       }
     }
 
     & when (@variationPopupBottom) {
-      [data-position~="bottom"][data-tooltip]:before {
+      [data-position~="bottom"][data-tooltip]::before {
         transform-origin: center bottom;
       }
-      [data-position~="bottom"][data-tooltip]:after {
+      [data-position~="bottom"][data-tooltip]::after {
         transform-origin: center top;
       }
     }
     & when (@variationPopupCenter) {
       & when (@variationPopupBottom) {
-        [data-position="bottom center"][data-tooltip]:before {
+        [data-position="bottom center"][data-tooltip]::before {
           transform-origin: center top;
         }
       }
       & when (@variationPopupLeft) {
-        [data-position="left center"][data-tooltip]:before {
+        [data-position="left center"][data-tooltip]::before {
           transform-origin: top center;
         }
-        [data-position="left center"][data-tooltip]:after {
+        [data-position="left center"][data-tooltip]::after {
           transform-origin: right center;
         }
       }
       & when (@variationPopupRight) {
-        [data-position="right center"][data-tooltip]:before {
+        [data-position="right center"][data-tooltip]::before {
           transform-origin: right center;
         }
-        [data-position="right center"][data-tooltip]:after {
+        [data-position="right center"][data-tooltip]::after {
           transform-origin: left center;
         }
       }
@@ -475,7 +471,7 @@
     /*--------------
         Basic
     ---------------*/
-    [data-tooltip][data-variation~="basic"]:before {
+    [data-tooltip][data-variation~="basic"]::before {
       display: none;
     }
   }
@@ -553,7 +549,7 @@
   ---------------*/
 
   /*--- Below ---*/
-  .ui.bottom.center.popup:before {
+  .ui.bottom.center.popup::before {
     margin-left: @arrowOffset;
     top: @arrowOffset;
     left: 50%;
@@ -566,7 +562,7 @@
     margin-left: @boxArrowOffset;
   }
   /*rtl:rename*/
-  .ui.bottom.left.popup:before {
+  .ui.bottom.left.popup::before {
     top: @arrowOffset;
     left: @arrowDistanceFromEdge;
     right: auto;
@@ -579,7 +575,7 @@
     margin-right: @boxArrowOffset;
   }
   /*rtl:rename*/
-  .ui.bottom.right.popup:before {
+  .ui.bottom.right.popup::before {
     top: @arrowOffset;
     right: @arrowDistanceFromEdge;
     bottom: auto;
@@ -592,7 +588,7 @@
 & when (@variationPopupTop) {
   /*--- Above ---*/
   & when (@variationPopupCenter) {
-    .ui.top.center.popup:before {
+    .ui.top.center.popup::before {
       top: auto;
       right: auto;
       bottom: @arrowOffset;
@@ -605,7 +601,7 @@
       margin-left: @boxArrowOffset;
     }
     /*rtl:rename*/
-    .ui.top.left.popup:before {
+    .ui.top.left.popup::before {
       bottom: @arrowOffset;
       left: @arrowDistanceFromEdge;
       top: auto;
@@ -618,7 +614,7 @@
       margin-right: @boxArrowOffset;
     }
     /*rtl:rename*/
-    .ui.top.right.popup:before {
+    .ui.top.right.popup::before {
       bottom: @arrowOffset;
       right: @arrowDistanceFromEdge;
       top: auto;
@@ -632,7 +628,7 @@
   /*--- Left Center ---*/
   /*rtl:rename*/
   & when (@variationPopupLeft) {
-    .ui.left.center.popup:before {
+    .ui.left.center.popup::before {
       top: 50%;
       right: @arrowOffset;
       bottom: auto;
@@ -644,7 +640,7 @@
   & when (@variationPopupRight) {
     /*--- Right Center  ---*/
     /*rtl:rename*/
-    .ui.right.center.popup:before {
+    .ui.right.center.popup::before {
       top: 50%;
       left: @arrowOffset;
       bottom: auto;
@@ -654,8 +650,8 @@
     }
   }
   & when (@variationPopupLeft) or (@variationPopupRight) {
-    .ui.right.center.popup:before,
-    .ui.left.center.popup:before {
+    .ui.right.center.popup::before,
+    .ui.left.center.popup::before {
       background: @arrowCenterBackground;
     }
   }
@@ -663,13 +659,13 @@
 
 & when (@variationPopupBottom) {
   /* Arrow Color By Location */
-  .ui.bottom.popup:before {
+  .ui.bottom.popup::before {
     background: @arrowTopBackground;
   }
 }
 
 & when (@variationPopupTop) {
-  .ui.top.popup:before {
+  .ui.top.popup::before {
     background: @arrowBottomBackground;
   }
 }
@@ -677,18 +673,18 @@
 & when (@variationPopupInverted) {
   & when (@variationPopupBottom) {
     /* Inverted Arrow Color */
-    .ui.inverted.bottom.popup:before {
+    .ui.inverted.bottom.popup::before {
       background: @invertedArrowTopBackground;
     }
   }
   & when (@variationPopupCenter) {
-    .ui.inverted.right.center.popup:before,
-    .ui.inverted.left.center.popup:before {
+    .ui.inverted.right.center.popup::before,
+    .ui.inverted.left.center.popup::before {
       background: @invertedArrowCenterBackground;
     }
   }
   & when (@variationPopupTop) {
-    .ui.inverted.top.popup:before {
+    .ui.inverted.top.popup::before {
       background: @invertedArrowBottomBackground;
     }
   }
@@ -736,7 +732,7 @@
        Basic
   ---------------*/
 
-  .ui.basic.popup:before {
+  .ui.basic.popup::before {
     display: none;
   }
 }
@@ -803,7 +799,7 @@
     background-color: @invertedHeaderBackground;
     color: @invertedHeaderColor;
   }
-  .ui.inverted.popup:before {
+  .ui.inverted.popup::before {
     background-color: @invertedArrowColor;
     box-shadow: none !important;
   }
@@ -834,8 +830,8 @@
       font-size: @s;
     }
     & when (@variationPopupTooltip) {
-      [data-tooltip][data-variation~="@{value}"]:before,
-      [data-tooltip][data-variation~="@{value}"]:after {
+      [data-tooltip][data-variation~="@{value}"]::before,
+      [data-tooltip][data-variation~="@{value}"]::after {
         font-size: @s;
       }
     }

package/src/definitions/modules/progress.js

@@ -607,6 +607,9 @@ $.fn.progress = function(parameters) {
             }
             else {
               module.remove.active();
+              module.remove.warning();
+              module.remove.error();
+              module.remove.success();
               module.set.label(settings.text.active);
             }
           },

package/src/definitions/modules/progress.less

@@ -446,25 +446,26 @@
 /*--------------
      Colors
 ---------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  .ui.indeterminate.@{color}.progress .bar::before,
-  .ui.@{color}.progress .bar,
-  .ui.progress .@{color}.bar {
-    background-color: @c;
-  }
-  & when (@variationProgressInverted) {
-    .ui.inverted.indeterminate.@{color}.progress .bar::before,
-    .ui.@{color}.inverted.progress .bar,
-    .ui.inverted.progress .@{color}.bar {
-      background-color: @l;
+& when not (@variationProgressColors = false) {
+  each(@variationProgressColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    .ui.indeterminate.@{color}.progress .bar::before,
+    .ui.@{color}.progress .bar,
+    .ui.progress .@{color}.bar {
+      background-color: @c;
     }
-  }
-})
+    & when (@variationProgressInverted) {
+      .ui.inverted.indeterminate.@{color}.progress .bar::before,
+      .ui.@{color}.inverted.progress .bar,
+      .ui.inverted.progress .@{color}.bar {
+        background-color: @l;
+      }
+    }
+  })
+}
 
 /*--------------
      Sizes

package/src/definitions/modules/rating.less

@@ -95,41 +95,42 @@
 /*--------------
      Colors
 -------------- */
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @h: @colors[@@color][hover];
-  @lh: @colors[@@color][lightHover];
-
-  .ui.@{color}.rating .active.icon {
-    color: @l;
-    text-shadow: 0px -@shadowWidth 0px @c,
-                 -@shadowWidth 0px 0px @c,
-                 0px @shadowWidth 0px @c,
-                 @shadowWidth 0px 0px @c;
-  }
-  .ui.@{color}.rating .icon.selected,
-  .ui.@{color}.rating .icon.selected.active,
-  .ui.@{color}.rating .icon.selected.partial.active {
-    background: inherit;
-    color: @lh;
-    text-shadow: 0px -@shadowWidth 0px @h,
-                 -@shadowWidth 0px 0px @h,
-                 0px @shadowWidth 0px @h,
-                 @shadowWidth 0px 0px @h;
-
-    -webkit-text-stroke: unset;
-    background-clip: unset;
-  }
-  & when (@variationRatingPartial) {
-    .ui.@{color}.rating .icon.partial.active {
-      background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
-      -webkit-text-stroke: @c 0.78px;
+& when not (@variationRatingColors = false) {
+  each(@variationRatingColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    @h: @colors[@@color][hover];
+    @lh: @colors[@@color][lightHover];
+
+    .ui.@{color}.rating .active.icon {
+      color: @l;
+      text-shadow: 0px -@shadowWidth 0px @c,
+      -@shadowWidth 0px 0px @c,
+      0px @shadowWidth 0px @c,
+      @shadowWidth 0px 0px @c;
     }
-  }
-})
+    .ui.@{color}.rating .icon.selected,
+    .ui.@{color}.rating .icon.selected.active,
+    .ui.@{color}.rating .icon.selected.partial.active {
+      background: inherit;
+      color: @lh;
+      text-shadow: 0px -@shadowWidth 0px @h,
+      -@shadowWidth 0px 0px @h,
+      0px @shadowWidth 0px @h,
+      @shadowWidth 0px 0px @h;
+
+      -webkit-text-stroke: unset;
+      background-clip: unset;
+    }
+    & when (@variationRatingPartial) {
+      .ui.@{color}.rating .icon.partial.active {
+        background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
+        -webkit-text-stroke: @c 0.78px;
+      }
+    }
+  })
+}
 
 
 /*******************************

package/src/definitions/modules/search.js

@@ -403,7 +403,7 @@ $.fn.search = function(parameters) {
             return $results.hasClass(className.animating);
           },
           chrome: function() {
-            return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
+            return !!window.chrome && !window.StyleMedia;
           },
           hidden: function() {
             return $results.hasClass(className.hidden);