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

package/src/definitions/elements/loader.less

@@ -34,7 +34,7 @@
 }
 
 /* Static Shape */
-.ui.loader:before {
+.ui.loader::before {
   position: absolute;
   content: '';
   top: 0;
@@ -47,7 +47,7 @@
 }
 
 /* Active Shape */
-.ui.loader:after {
+.ui.loader::after {
   position: absolute;
   content: '';
   top: 0;
@@ -65,17 +65,17 @@
 & when (@variationLoaderSpeeds) {
   /* Speeds */
 
-  .ui.fast.loading.loading:after,
-  .ui.fast.loading.loading .input > i.icon:after,
-  .ui.fast.loading.loading > i.icon:after,
-  .ui.fast.loader:after {
+  .ui.fast.loading.loading::after,
+  .ui.fast.loading.loading .input > i.icon::after,
+  .ui.fast.loading.loading > i.icon::after,
+  .ui.fast.loader::after {
     animation-duration: @loaderSpeedFast;
   }
 
-  .ui.slow.loading.loading:after,
-  .ui.slow.loading.loading .input > i.icon:after,
-  .ui.slow.loading.loading > i.icon:after,
-  .ui.slow.loader:after {
+  .ui.slow.loading.loading::after,
+  .ui.slow.loading.loading .input > i.icon::after,
+  .ui.slow.loading.loading > i.icon::after,
+  .ui.slow.loader::after {
     animation-duration: @loaderSpeedSlow;
   }
 }
@@ -100,7 +100,7 @@
 .ui.dimmer > .ui.loader {
   color: @invertedLoaderTextColor;
 }
-.ui.dimmer > .ui.loader:not(.elastic):before {
+.ui.dimmer > .ui.loader:not(.elastic)::before {
   border-color: @invertedLoaderFillColor;
 }
 
@@ -108,7 +108,7 @@
 .ui.inverted.dimmer > .ui.loader {
   color: @loaderTextColor;
 }
-.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
+.ui.inverted.dimmer > .ui.loader:not(.elastic)::before {
   border-color: @loaderFillColor;
 }
 
@@ -134,7 +134,7 @@
             States
 *******************************/
 & when (@variationLoaderIndeterminate) {
-  .ui.indeterminate.loader:after {
+  .ui.indeterminate.loader::after {
     animation-direction: @indeterminateDirection;
     animation-duration: @indeterminateSpeed;
   }
@@ -163,8 +163,8 @@
   height: @medium;
   font-size: @mediumFontSize;
 }
-.ui.loader:before,
-.ui.loader:after {
+.ui.loader::before,
+.ui.loader::after {
   width: @medium;
   height: @medium;
   margin: @mediumOffset;
@@ -185,8 +185,8 @@
       height: @s;
       font-size: @@f;
     }
-    .ui.@{value}.loader:before,
-    .ui.@{value}.loader:after {
+    .ui.@{value}.loader::before,
+    .ui.@{value}.loader::after {
       width: @s;
       height: @s;
       margin: @@o;
@@ -209,49 +209,49 @@
     @c: @colors[@@color][color];
     @l: @colors[@@color][light];
 
-    .ui.@{color}.elastic.loader.loader:before,
-    .ui.@{color}.basic.elastic.loading.button:before,
-    .ui.@{color}.basic.elastic.loading.button:after,
-    .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
-    .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
-    .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
-    .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
-    .ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
-    .ui.@{color}.loading.loading.loading.loading > i.icon:after,
-    .ui.@{color}.loader.loader.loader:after {
+    .ui.@{color}.elastic.loader.loader::before,
+    .ui.@{color}.basic.elastic.loading.button::before,
+    .ui.@{color}.basic.elastic.loading.button::after,
+    .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
+    .ui.@{color}.elastic.loading.loading.loading .input > i.icon::before,
+    .ui.@{color}.elastic.loading.loading.loading.loading > i.icon::before,
+    .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button)::after,
+    .ui.@{color}.loading.loading.loading.loading .input > i.icon::after,
+    .ui.@{color}.loading.loading.loading.loading > i.icon::after,
+    .ui.@{color}.loader.loader.loader::after {
       color: @c;
     }
-    .ui.inverted.@{color}.elastic.loader:before,
-    .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
-    .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
-    .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
-    .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
-    .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
-    .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
-    .ui.inverted.@{color}.loader.loader.loader:after {
+    .ui.inverted.@{color}.elastic.loader::before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon::before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon::before,
+    .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual)::after,
+    .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon::after,
+    .ui.inverted.@{color}.loading.loading.loading.loading > i.icon::after,
+    .ui.inverted.@{color}.loader.loader.loader::after {
       color: @l;
     }
   })
 }
 
-.ui.elastic.loader.loader:before,
-.ui.elastic.loading.loading.loading:before,
-.ui.elastic.loading.loading.loading .input > i.icon:before,
-.ui.elastic.loading.loading.loading > i.icon:before,
-.ui.loading.loading.loading.loading:not(.usual):after,
-.ui.loading.loading.loading.loading .input > i.icon:after,
-.ui.loading.loading.loading.loading > i.icon:after,
-.ui.loader.loader.loader:after {
+.ui.elastic.loader.loader::before,
+.ui.elastic.loading.loading.loading::before,
+.ui.elastic.loading.loading.loading .input > i.icon::before,
+.ui.elastic.loading.loading.loading > i.icon::before,
+.ui.loading.loading.loading.loading:not(.usual)::after,
+.ui.loading.loading.loading.loading .input > i.icon::after,
+.ui.loading.loading.loading.loading > i.icon::after,
+.ui.loader.loader.loader::after {
   border-color: currentColor;
 }
-.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
+.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic)::before {
   color: @invertedLoaderLineColor;
 }
-.ui.elastic.basic.loading.button:before,
-.ui.elastic.basic.loading.button:after {
+.ui.elastic.basic.loading.button::before,
+.ui.elastic.basic.loading.button::after {
   color: @loaderLineColor;
 }
-.ui.double.loading.loading.loading.loading.button:after {
+.ui.double.loading.loading.loading.loading.button::after {
   border-bottom-color: currentColor;
 }
 
@@ -283,30 +283,30 @@
   }
 }
 
-.ui.loading.loading.loading.loading.loading.loading:after,
-.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
-.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
-.ui.loader.loader.loader.loader.loader:after {
+.ui.loading.loading.loading.loading.loading.loading::after,
+.ui.loading.loading.loading.loading.loading.loading .input > i.icon::after,
+.ui.loading.loading.loading.loading.loading.loading > i.icon::after,
+.ui.loader.loader.loader.loader.loader::after {
   border-left-color:transparent;
   border-right-color:transparent;
 }
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
-.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
+.ui.loading.loading.loading.loading.loading.loading.loading:not(.double)::after,
+.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon::after,
+.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon::after,
+.ui.loader.loader.loader.loader.loader.loader:not(.double)::after {
   border-bottom-color: transparent;
 }
-.ui.loading.loading.loading.loading.loading.loading.card:after,
-.ui.loading.loading.loading.loading.loading.loading.segments:after,
-.ui.loading.loading.loading.loading.loading.loading.segment:after,
-.ui.loading.loading.loading.loading.loading.loading.form:after {
+.ui.loading.loading.loading.loading.loading.loading.card::after,
+.ui.loading.loading.loading.loading.loading.loading.segments::after,
+.ui.loading.loading.loading.loading.loading.loading.segment::after,
+.ui.loading.loading.loading.loading.loading.loading.form::after {
   border-left-color:@loaderFillColor;
   border-right-color:@loaderFillColor;
 }
-.ui.loading.loading.loading.loading.loading.loading.card:not(.double):after,
-.ui.loading.loading.loading.loading.loading.loading.segments:not(.double):after,
-.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
-.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
+.ui.loading.loading.loading.loading.loading.loading.card:not(.double)::after,
+.ui.loading.loading.loading.loading.loading.loading.segments:not(.double)::after,
+.ui.loading.loading.loading.loading.loading.loading.segment:not(.double)::after,
+.ui.loading.loading.loading.loading.loading.loading.form:not(.double)::after {
   border-bottom-color: @loaderFillColor;
 }
 
@@ -321,17 +321,17 @@
   .ui.inverted.dimmer > .ui.elastic.loader {
     color: @loaderLineColor;
   }
-  .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
-  .ui.elastic.loading.loading .input > i.icon:after,
-  .ui.elastic.loading.loading > i.icon:after,
-  .ui.elastic.loader.loader:after {
+  .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+  .ui.elastic.loading.loading .input > i.icon::after,
+  .ui.elastic.loading.loading > i.icon::after,
+  .ui.elastic.loader.loader::after {
     animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
     animation-delay: 0.3s;
   }
-  .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
-  .ui.elastic.loading.loading.loading .input > i.icon:before,
-  .ui.elastic.loading.loading.loading > i.icon:before,
-  .ui.elastic.loader.loader:before {
+  .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+  .ui.elastic.loading.loading.loading .input > i.icon::before,
+  .ui.elastic.loading.loading.loading > i.icon::before,
+  .ui.elastic.loader.loader::before {
     animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
     -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
     border-right-color: transparent;
@@ -342,30 +342,30 @@
     }
   }
   & when (@variationLoaderSpeeds) {
-    .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
-    .ui.slow.elastic.loading.loading .input > i.icon:after,
-    .ui.slow.elastic.loading.loading > i.icon:after,
-    .ui.slow.elastic.loader.loader:after {
+    .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+    .ui.slow.elastic.loading.loading .input > i.icon::after,
+    .ui.slow.elastic.loading.loading > i.icon::after,
+    .ui.slow.elastic.loader.loader::after {
       animation-duration: 1.5s;
       animation-delay: 0.45s;
     }
-    .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
-    .ui.slow.elastic.loading.loading.loading .input > i.icon:before,
-    .ui.slow.elastic.loading.loading.loading > i.icon:before,
-    .ui.slow.elastic.loader.loader:before {
+    .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+    .ui.slow.elastic.loading.loading.loading .input > i.icon::before,
+    .ui.slow.elastic.loading.loading.loading > i.icon::before,
+    .ui.slow.elastic.loader.loader::before {
       animation-duration: 1.5s;
     }
-    .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
-    .ui.fast.elastic.loading.loading .input > i.icon:after,
-    .ui.fast.elastic.loading.loading > i.icon:after,
-    .ui.fast.elastic.loader.loader:after {
+    .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+    .ui.fast.elastic.loading.loading .input > i.icon::after,
+    .ui.fast.elastic.loading.loading > i.icon::after,
+    .ui.fast.elastic.loader.loader::after {
       animation-duration: 0.66s;
       animation-delay: 0.20s;
     }
-    .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
-    .ui.fast.elastic.loading.loading.loading .input > i.icon:before,
-    .ui.fast.elastic.loading.loading.loading > i.icon:before,
-    .ui.fast.elastic.loader.loader:before {
+    .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+    .ui.fast.elastic.loading.loading.loading .input > i.icon::before,
+    .ui.fast.elastic.loading.loading.loading > i.icon::before,
+    .ui.fast.elastic.loader.loader::before {
       animation-duration: 0.66s;
     }
   }

package/src/definitions/elements/placeholder.less

@@ -57,10 +57,10 @@
 }
 
 .ui.placeholder,
-.ui.placeholder > :before,
-.ui.placeholder .image.header:after,
+.ui.placeholder > ::before,
+.ui.placeholder .image.header::after,
 .ui.placeholder .line,
-.ui.placeholder .line:after {
+.ui.placeholder .line::after {
   background-color: @white;
 }
 
@@ -93,17 +93,17 @@
     position: relative;
     height: @placeholderLineMargin;
   }
-  .ui.placeholder .line:before,
-  .ui.placeholder .line:after {
+  .ui.placeholder .line::before,
+  .ui.placeholder .line::after {
     top: 100%;
     position: absolute;
     content: '';
     background-color: inherit;
   }
-  .ui.placeholder .line:before {
+  .ui.placeholder .line::before {
     left: 0;
   }
-  .ui.placeholder .line:after {
+  .ui.placeholder .line::after {
     right: 0;
   }
 
@@ -111,8 +111,8 @@
   .ui.placeholder .line {
     margin-bottom: @placeholderLineHeight;
   }
-  .ui.placeholder .line:before,
-  .ui.placeholder .line:after {
+  .ui.placeholder .line::before,
+  .ui.placeholder .line::after {
     height: @placeholderLineHeight;
   }
   .ui.placeholder .line:not(:first-child) {
@@ -120,19 +120,19 @@
   }
 
   /* Line Outdent */
-  .ui.placeholder .line:nth-child(1):after {
+  .ui.placeholder .line:nth-child(1)::after {
     width: @placeholderLineOneOutdent;
   }
-  .ui.placeholder .line:nth-child(2):after {
+  .ui.placeholder .line:nth-child(2)::after {
     width: @placeholderLineTwoOutdent;
   }
-  .ui.placeholder .line:nth-child(3):after {
+  .ui.placeholder .line:nth-child(3)::after {
     width: @placeholderLineThreeOutdent;
   }
-  .ui.placeholder .line:nth-child(4):after {
+  .ui.placeholder .line:nth-child(4)::after {
     width: @placeholderLineFourOutdent;
   }
-  .ui.placeholder .line:nth-child(5):after {
+  .ui.placeholder .line:nth-child(5)::after {
     width: @placeholderLineFiveOutdent;
   }
 }
@@ -147,17 +147,17 @@
   .ui.placeholder .header .line {
     margin-bottom: @placeholderHeaderLineHeight;
   }
-  .ui.placeholder .header .line:before,
-  .ui.placeholder .header .line:after {
+  .ui.placeholder .header .line::before,
+  .ui.placeholder .header .line::after {
     height: @placeholderHeaderLineHeight;
   }
   .ui.placeholder .header .line:not(:first-child) {
     margin-top: @placeholderHeaderLineHeight;
   }
-  .ui.placeholder .header .line:after {
+  .ui.placeholder .header .line::after {
     width: @placeholderHeaderLineOneOutdent;
   }
-  .ui.placeholder .header .line:nth-child(2):after {
+  .ui.placeholder .header .line:nth-child(2)::after {
     width: @placeholderHeaderLineTwoOutdent;
   }
 
@@ -166,10 +166,10 @@
     .ui.placeholder .image.header .line {
       margin-left: @placeholderImageWidth;
     }
-    .ui.placeholder .image.header .line:before {
+    .ui.placeholder .image.header .line::before {
       width: @placeholderImageTextIndent;
     }
-    .ui.placeholder .image.header:after {
+    .ui.placeholder .image.header::after {
       display: block;
       height: @placeholderLineMargin;
       content: '';
@@ -184,9 +184,9 @@
 .ui.placeholder .header .line:first-child {
   height: 0.01px;
 }
-.ui.placeholder .image:not(:first-child):before,
-.ui.placeholder .paragraph:not(:first-child):before,
-.ui.placeholder .header:not(:first-child):before {
+.ui.placeholder .image:not(:first-child)::before,
+.ui.placeholder .paragraph:not(:first-child)::before,
+.ui.placeholder .header:not(:first-child)::before {
   height: @placeholderSpacing;
   content: '';
   display: block;
@@ -198,10 +198,10 @@
     background-image: @placeholderInvertedLoadingGradient;
   }
   .ui.inverted.placeholder,
-  .ui.inverted.placeholder > :before,
-  .ui.inverted.placeholder .image.header:after,
+  .ui.inverted.placeholder > ::before,
+  .ui.inverted.placeholder .image.header::after,
   .ui.inverted.placeholder .line,
-  .ui.inverted.placeholder .line:after {
+  .ui.inverted.placeholder .line::after {
     background-color: @black;
   }
 }
@@ -215,22 +215,22 @@
         Sizes
 --------------------*/
 & when (@variationPlaceholderLengths) {
-  .ui.placeholder .full.line.line.line:after {
+  .ui.placeholder .full.line.line.line::after {
     width: @placeholderFullLineOutdent;
   }
-  .ui.placeholder .very.long.line.line.line:after {
+  .ui.placeholder .very.long.line.line.line::after {
     width: @placeholderVeryLongLineOutdent;
   }
-  .ui.placeholder .long.line.line.line:after {
+  .ui.placeholder .long.line.line.line::after {
     width: @placeholderLongLineOutdent;
   }
-  .ui.placeholder .medium.line.line.line:after {
+  .ui.placeholder .medium.line.line.line::after {
     width: @placeholderMediumLineOutdent;
   }
-  .ui.placeholder .short.line.line.line:after {
+  .ui.placeholder .short.line.line.line::after {
     width: @placeholderShortLineOutdent;
   }
-  .ui.placeholder .very.short.line.line.line:after {
+  .ui.placeholder .very.short.line.line.line::after {
     width: @placeholderVeryShortLineOutdent;
   }
 }

package/src/definitions/elements/segment.less

@@ -198,10 +198,10 @@
   .ui.piled.segment:last-child {
     margin-bottom: 0;
   }
-  .ui.piled.segments:after,
-  .ui.piled.segments:before,
-  .ui.piled.segment:after,
-  .ui.piled.segment:before {
+  .ui.piled.segments::after,
+  .ui.piled.segments::before,
+  .ui.piled.segment::after,
+  .ui.piled.segment::before {
     background-color: @white;
     visibility: visible;
     content: '';
@@ -213,14 +213,14 @@
     border: @piledBorder;
     box-shadow: @piledBoxShadow;
   }
-  .ui.piled.segments:before,
-  .ui.piled.segment:before {
+  .ui.piled.segments::before,
+  .ui.piled.segment::before {
     transform: rotate(-@piledDegrees);
     top: 0;
     z-index: -2;
   }
-  .ui.piled.segments:after,
-  .ui.piled.segment:after {
+  .ui.piled.segments::after,
+  .ui.piled.segment::after {
     transform: rotate(@piledDegrees);
     top: 0;
     z-index: -1;
@@ -252,10 +252,10 @@
   .ui.stacked.segment {
     padding-bottom: @stackedPadding;
   }
-  .ui.stacked.segments:before,
-  .ui.stacked.segments:after,
-  .ui.stacked.segment:before,
-  .ui.stacked.segment:after {
+  .ui.stacked.segments::before,
+  .ui.stacked.segments::after,
+  .ui.stacked.segment::before,
+  .ui.stacked.segment::after {
     content: '';
     position: absolute;
     bottom: -(@stackedHeight / 2);
@@ -268,23 +268,23 @@
     height: @stackedHeight;
     visibility: visible;
   }
-  .ui.stacked.segments:before,
-  .ui.stacked.segment:before {
+  .ui.stacked.segments::before,
+  .ui.stacked.segment::before {
     display: none;
   }
 
   /* Add additional page */
-  .ui.tall.stacked.segments:before,
-  .ui.tall.stacked.segment:before {
+  .ui.tall.stacked.segments::before,
+  .ui.tall.stacked.segment::before {
     display: block;
     bottom: 0;
   }
   & when (@variationSegmentInverted) {
     /* Inverted */
-    .ui.stacked.inverted.segments:before,
-    .ui.stacked.inverted.segments:after,
-    .ui.stacked.inverted.segment:before,
-    .ui.stacked.inverted.segment:after {
+    .ui.stacked.inverted.segments::before,
+    .ui.stacked.inverted.segments::after,
+    .ui.stacked.inverted.segment::before,
+    .ui.stacked.inverted.segment::after {
       background-color: @subtleTransparentBlack;
       border-top: 1px solid @selectedBorderColor;
     }
@@ -523,8 +523,8 @@
     user-select: none;
     transition: all 0s linear;
   }
-  .ui.loading.segments:before,
-  .ui.loading.segment:before {
+  .ui.loading.segments::before,
+  .ui.loading.segment::before {
     position: absolute;
     content: '';
     top: 0;
@@ -535,8 +535,8 @@
     border-radius: @borderRadius;
     z-index: @loaderDimmerZIndex;
   }
-  .ui.loading.segments:after,
-  .ui.loading.segment:after {
+  .ui.loading.segments::after,
+  .ui.loading.segment::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -582,7 +582,7 @@
          Clearing
   --------------------*/
 
-  .ui.clearing.segment:after {
+  .ui.clearing.segment::after {
     content: "";
     display: block;
     clear: both;
@@ -678,8 +678,8 @@
     .ui.inverted.loading.segment {
       color: @invertedLoaderLineColor;
     }
-    .ui.inverted.loading.segments:before,
-    .ui.inverted.loading.segment:before {
+    .ui.inverted.loading.segments::before,
+    .ui.inverted.loading.segment::before {
       background: @loaderInvertedDimmerColor;
     }
   }