fomantic-ui 2.9.0-beta.3 → 2.9.0-beta.301

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,24 +326,23 @@
           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%;
           left: 50%;
           margin-left: @tooltipArrowHorizontalOffset;
           margin-top: -@arrowOffset;
-          transform-origin: center top;
         }
       }
       & 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%;
@@ -358,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%;
@@ -376,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;
@@ -393,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;
@@ -413,54 +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 {
+          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;
         }
       }
@@ -471,7 +471,7 @@
     /*--------------
         Basic
     ---------------*/
-    [data-tooltip][data-variation~="basic"]:before {
+    [data-tooltip][data-variation~="basic"]::before {
       display: none;
     }
   }
@@ -549,7 +549,7 @@
   ---------------*/
 
   /*--- Below ---*/
-  .ui.bottom.center.popup:before {
+  .ui.bottom.center.popup::before {
     margin-left: @arrowOffset;
     top: @arrowOffset;
     left: 50%;
@@ -562,7 +562,7 @@
     margin-left: @boxArrowOffset;
   }
   /*rtl:rename*/
-  .ui.bottom.left.popup:before {
+  .ui.bottom.left.popup::before {
     top: @arrowOffset;
     left: @arrowDistanceFromEdge;
     right: auto;
@@ -575,7 +575,7 @@
     margin-right: @boxArrowOffset;
   }
   /*rtl:rename*/
-  .ui.bottom.right.popup:before {
+  .ui.bottom.right.popup::before {
     top: @arrowOffset;
     right: @arrowDistanceFromEdge;
     bottom: auto;
@@ -588,7 +588,7 @@
 & when (@variationPopupTop) {
   /*--- Above ---*/
   & when (@variationPopupCenter) {
-    .ui.top.center.popup:before {
+    .ui.top.center.popup::before {
       top: auto;
       right: auto;
       bottom: @arrowOffset;
@@ -601,7 +601,7 @@
       margin-left: @boxArrowOffset;
     }
     /*rtl:rename*/
-    .ui.top.left.popup:before {
+    .ui.top.left.popup::before {
       bottom: @arrowOffset;
       left: @arrowDistanceFromEdge;
       top: auto;
@@ -614,7 +614,7 @@
       margin-right: @boxArrowOffset;
     }
     /*rtl:rename*/
-    .ui.top.right.popup:before {
+    .ui.top.right.popup::before {
       bottom: @arrowOffset;
       right: @arrowDistanceFromEdge;
       top: auto;
@@ -628,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;
@@ -640,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;
@@ -650,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;
     }
   }
@@ -659,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;
   }
 }
@@ -673,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;
     }
   }
@@ -732,7 +732,7 @@
        Basic
   ---------------*/
 
-  .ui.basic.popup:before {
+  .ui.basic.popup::before {
     display: none;
   }
 }
@@ -799,7 +799,7 @@
     background-color: @invertedHeaderBackground;
     color: @invertedHeaderColor;
   }
-  .ui.inverted.popup:before {
+  .ui.inverted.popup::before {
     background-color: @invertedArrowColor;
     box-shadow: none !important;
   }
@@ -830,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

@@ -93,7 +93,7 @@ $.fn.progress = function(parameters) {
            *
            * @param min A minimum value within multiple values
            * @param total A total amount of multiple values
-           * @returns {number} A precison. Could be 1, 10, 100, ... 1e+10.
+           * @returns {number} A precision. Could be 1, 10, 100, ... 1e+10.
            */
           derivePrecision: function(min, total) {
             var precisionPower = 0
@@ -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);
             }
           },
@@ -991,7 +994,7 @@ $.fn.progress.settings = {
     nonNumeric      : 'Progress value is non numeric',
     tooHigh         : 'Value specified is above 100%',
     tooLow          : 'Value specified is below 0%',
-    sumExceedsTotal : 'Sum of multple values exceed total',
+    sumExceedsTotal : 'Sum of multiple values exceed total',
   },
 
   regExp: {

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