fomantic-ui 2.9.0-beta.273 → 2.9.0-beta.274

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,23 +227,23 @@
     ---------------*/
 
     /* 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 {
+    [data-tooltip][data-inverted]::after .header {
       background: @tooltipInvertedHeaderBackground;
       color: @tooltipInvertedHeaderColor;
     }
@@ -254,12 +254,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 +267,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 +279,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 +297,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 +316,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 +330,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 +341,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 +357,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 +375,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 +392,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 +412,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 +475,7 @@
     /*--------------
         Basic
     ---------------*/
-    [data-tooltip][data-variation~="basic"]:before {
+    [data-tooltip][data-variation~="basic"]::before {
       display: none;
     }
   }
@@ -553,7 +553,7 @@
   ---------------*/
 
   /*--- Below ---*/
-  .ui.bottom.center.popup:before {
+  .ui.bottom.center.popup::before {
     margin-left: @arrowOffset;
     top: @arrowOffset;
     left: 50%;
@@ -566,7 +566,7 @@
     margin-left: @boxArrowOffset;
   }
   /*rtl:rename*/
-  .ui.bottom.left.popup:before {
+  .ui.bottom.left.popup::before {
     top: @arrowOffset;
     left: @arrowDistanceFromEdge;
     right: auto;
@@ -579,7 +579,7 @@
     margin-right: @boxArrowOffset;
   }
   /*rtl:rename*/
-  .ui.bottom.right.popup:before {
+  .ui.bottom.right.popup::before {
     top: @arrowOffset;
     right: @arrowDistanceFromEdge;
     bottom: auto;
@@ -592,7 +592,7 @@
 & when (@variationPopupTop) {
   /*--- Above ---*/
   & when (@variationPopupCenter) {
-    .ui.top.center.popup:before {
+    .ui.top.center.popup::before {
       top: auto;
       right: auto;
       bottom: @arrowOffset;
@@ -605,7 +605,7 @@
       margin-left: @boxArrowOffset;
     }
     /*rtl:rename*/
-    .ui.top.left.popup:before {
+    .ui.top.left.popup::before {
       bottom: @arrowOffset;
       left: @arrowDistanceFromEdge;
       top: auto;
@@ -618,7 +618,7 @@
       margin-right: @boxArrowOffset;
     }
     /*rtl:rename*/
-    .ui.top.right.popup:before {
+    .ui.top.right.popup::before {
       bottom: @arrowOffset;
       right: @arrowDistanceFromEdge;
       top: auto;
@@ -632,7 +632,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 +644,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 +654,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 +663,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 +677,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 +736,7 @@
        Basic
   ---------------*/
 
-  .ui.basic.popup:before {
+  .ui.basic.popup::before {
     display: none;
   }
 }
@@ -803,7 +803,7 @@
     background-color: @invertedHeaderBackground;
     color: @invertedHeaderColor;
   }
-  .ui.inverted.popup:before {
+  .ui.inverted.popup::before {
     background-color: @invertedArrowColor;
     box-shadow: none !important;
   }
@@ -834,8 +834,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/search.less

@@ -200,7 +200,7 @@
          Loading
   ---------------------*/
 
-  .ui.loading.search .input > i.icon:before {
+  .ui.loading.search .input > i.icon::before {
     position: absolute;
     content: '';
     top: 50%;
@@ -213,7 +213,7 @@
     border-radius: @circularRadius;
     border: @loaderLineWidth solid @loaderFillColor;
   }
-  .ui.loading.search .input > i.icon:after {
+  .ui.loading.search .input > i.icon::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -393,7 +393,7 @@
 & when (@variationSearchScrolling),
   (@variationSearchShort),
   (@variationSearchLong) {
-  
+
   /*-------------------
        Scrolling
   --------------------*/

package/src/definitions/modules/sidebar.js

@@ -261,7 +261,7 @@ $.fn.sidebar = function(parameters) {
               if(direction === 'left' || direction === 'right') {
                 module.debug('Adding CSS rules for animation distance', width);
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher::after {'
                   + '   -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + '           transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + ' }'
@@ -269,7 +269,7 @@ $.fn.sidebar = function(parameters) {
               }
               else if(direction === 'top' || direction == 'bottom') {
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher::after {'
                   + '   -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + '           transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + ' }'
@@ -277,8 +277,8 @@ $.fn.sidebar = function(parameters) {
               }
               /* opposite sides visible forces content overlay */
               style += ''
-                + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,'
-                + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {'
+                + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher::after,'
+                + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher::after {'
                 + '   -webkit-transform: translate3d(0, 0, 0);'
                 + '           transform: translate3d(0, 0, 0);'
                 + ' }'

package/src/definitions/modules/sidebar.less

@@ -116,7 +116,7 @@ body.pushable {
 }
 .pushable:not(body) > .ui.sidebar,
 .pushable:not(body) > .fixed,
-.pushable:not(body) > .pusher:after {
+.pushable:not(body) > .pusher::after {
   position: absolute;
 }
 
@@ -160,7 +160,7 @@ body.pushable > .pusher {
      Dimmer
 ---------------*/
 
-.pushable > .pusher:after {
+.pushable > .pusher::after {
   position: fixed;
   top: 0;
   right: 0;
@@ -189,7 +189,7 @@ body.pushable > .pusher {
      Dimmed
 ---------------*/
 
-.pushable > .pusher.dimmed:after {
+.pushable > .pusher.dimmed::after {
   width: 100% !important;
   height: 100% !important;
   opacity: 1 !important;

package/src/definitions/modules/slider.less

@@ -206,7 +206,7 @@
     transform: translate(-50%, 100%);
   }
   & when (@variationSliderTicked) {
-    .ui.labeled.ticked.slider > .labels .label:after {
+    .ui.labeled.ticked.slider > .labels .label::after {
       content: ' ';
       height: @labelHeight;
       width: @labelWidth;
@@ -215,11 +215,11 @@
       top: 100%;
       left: 50%;
     }
-    .ui.bottom.aligned.labeled.ticked.slider > .labels .label:after {
+    .ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
       top: auto;
       bottom: 100%;
     }
-    .ui.labeled.ticked.slider > .labels .halftick.label:after {
+    .ui.labeled.ticked.slider > .labels .halftick.label::after {
       height: (@labelHeight / 2);
     }
   }
@@ -240,13 +240,13 @@
       transform: translate(-100%, -50%);
     }
 
-    .ui.labeled.vertical.slider > .labels .label:after {
+    .ui.labeled.vertical.slider > .labels .label::after {
       width: @labelHeight;
       height: @labelWidth;
       left: 100%;
       top: 50%;
     }
-    .ui.labeled.vertical.slider > .labels .halftick.label:after {
+    .ui.labeled.vertical.slider > .labels .halftick.label::after {
       width: (@labelHeight / 2);
       height: @labelWidth;
     }
@@ -386,10 +386,10 @@
      }
      & when (@variationSliderLabeled) {
        .ui.@{value}.labeled.slider:not(.vertical) > .labels,
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels .label:after {
+       .ui.@{value}.labeled.slider:not(.vertical) > .labels .label::after {
          height: @@lh;
        }
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label:after {
+       .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label::after {
          height: (@@lh / 2);
        }
      }
@@ -405,10 +405,10 @@
        }
        & when (@variationSliderLabeled) {
          .ui.@{value}.labeled.vertical.slider> .labels,
-         .ui.@{value}.labeled.vertical.slider> .labels .label:after {
+         .ui.@{value}.labeled.vertical.slider> .labels .label::after {
            width: @@lh;
          }
-         .ui.@{value}.labeled.vertical.slider> .labels .halftick.label:after {
+         .ui.@{value}.labeled.vertical.slider> .labels .halftick.label::after {
            width: (@@lh / 2);
          }
        }