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

package/src/definitions/elements/step.less

@@ -78,7 +78,7 @@
 }
 
 /* Arrow */
-.ui.steps .step:after {
+.ui.steps .step::after {
   display: none;
   position: absolute;
   z-index: 2;
@@ -179,7 +179,7 @@
   .ui.ordered.steps {
     counter-reset: ordered;
   }
-  .ui.ordered.steps .step:before {
+  .ui.ordered.steps .step::before {
     display: block;
     position: static;
     text-align: center;
@@ -229,26 +229,26 @@
 
 
   /* Arrow */
-  .ui.vertical.steps .step:after {
+  .ui.vertical.steps .step::after {
     top: @verticalArrowTopOffset;
     right: @verticalArrowRightOffset;
     border-width: @verticalArrowBorderWidth;
     display: @verticalArrowDisplay;
   }
-  .ui.right.vertical.steps .step:after {
+  .ui.right.vertical.steps .step::after {
     border-width: @verticalLeftArrowBorderWidth;
     left: @verticalLeftArrowLeftOffset;
     right: @verticalLeftArrowRightOffset;
     transform: translateY(-50%) translateX(-50%) rotate(-45deg);
   }
 
-  .ui.vertical.steps .active.step:after {
+  .ui.vertical.steps .active.step::after {
     display: @verticalActiveArrowDisplay;
   }
-  .ui.vertical.steps .step:last-child:after {
+  .ui.vertical.steps .step:last-child::after {
     display: @verticalLastArrowDisplay;
   }
-  .ui.vertical.steps .active.step:last-child:after {
+  .ui.vertical.steps .active.step:last-child::after {
     display: @verticalActiveLastArrowDisplay;
   }
 }
@@ -284,14 +284,14 @@
   }
 
   /* Arrow */
-  .ui.steps:not(.unstackable) .step:after {
+  .ui.steps:not(.unstackable) .step::after {
     top: unset;
     bottom: -@arrowSize;
     right: 50%;
     transform: translateY(-50%) translateX(50%) rotate(45deg);
   }
   & when (@variationStepVertical) {
-    .ui.vertical.steps .active.step:last-child:after {
+    .ui.vertical.steps .active.step:last-child::after {
       display: none;
     }
   }
@@ -302,7 +302,7 @@
 
   /* Icon */
   .ui.steps:not(.unstackable) .step > i.icon,
-  .ui.ordered.steps:not(.unstackable) .step:before {
+  .ui.ordered.steps:not(.unstackable) .step::before {
     margin: 0 0 @mobileIconDistance 0;
   }
 
@@ -335,28 +335,28 @@
   cursor: auto;
   background: @activeBackground;
 }
-.ui.steps .step.active:after {
+.ui.steps .step.active::after {
   background: @activeBackground;
 }
 .ui.steps .step.active .title {
   color: @activeColor;
 }
-.ui.ordered.steps .step.active:before,
+.ui.ordered.steps .step.active::before,
 .ui.steps .active.step i.icon {
   color: @activeIconColor;
 }
 
 /* Active Arrow */
-.ui.steps .step:after {
+.ui.steps .step::after {
   display: @arrowDisplay;
 }
-.ui.steps .active.step:after {
+.ui.steps .active.step::after {
   display: @activeArrowDisplay;
 }
-.ui.steps .step:last-child:after {
+.ui.steps .step:last-child::after {
   display: @lastArrowDisplay;
 }
-.ui.steps .active.step:last-child:after {
+.ui.steps .active.step:last-child::after {
   display: @activeLastArrowDisplay;
 }
 
@@ -371,8 +371,8 @@
 }
 
 /* Completed */
-.ui.steps .step.completed > i.icon:before,
-.ui.ordered.steps .step.completed:before {
+.ui.steps .step.completed > i.icon::before,
+.ui.ordered.steps .step.completed::before {
   color: @completedColor;
 }
 
@@ -388,7 +388,7 @@
   .ui.steps .disabled.step .description {
     color: @disabledColor;
   }
-  .ui.steps .disabled.step:after {
+  .ui.steps .disabled.step::after {
     background: @disabledBackground;
   }
 }
@@ -430,7 +430,7 @@
     }
 
     /* Arrow */
-    .ui[class*="tablet stackable"].steps .step:after {
+    .ui[class*="tablet stackable"].steps .step::after {
       top: unset;
       bottom: -@arrowSize;
       right: 50%;
@@ -444,7 +444,7 @@
 
     /* Icon */
     .ui[class*="tablet stackable"].steps .step > i.icon,
-    .ui[class*="tablet stackable"].ordered.steps .step:before {
+    .ui[class*="tablet stackable"].ordered.steps .step::before {
       margin: 0 0 @mobileIconDistance 0;
     }
 
@@ -579,7 +579,7 @@
     border-color: @solidWhiteBorderColor;
   }
 
-  .ui.inverted.steps .step:after {
+  .ui.inverted.steps .step::after {
     background-color: @black;
     border-color: @solidWhiteBorderColor;
   }
@@ -590,10 +590,10 @@
 
   /* Active */
   .ui.inverted.steps .step.active,
-  .ui.inverted.steps .step.active:after {
+  .ui.inverted.steps .step.active::after {
     background: @invertedActiveBackground;
   }
-  .ui.inverted.ordered.steps .step.active:before,
+  .ui.inverted.ordered.steps .step.active::before,
   .ui.inverted.steps .active.step i.icon {
     color: @invertedSelectedTextColor;
   }
@@ -601,7 +601,7 @@
   & when (@variationStepDisabled) {
     /* Disabled */
     .ui.inverted.steps .disabled.step,
-    .ui.inverted.steps .disabled.step:after {
+    .ui.inverted.steps .disabled.step::after {
       background: @invertedDisabledBackground;
     }
     .ui.inverted.steps .disabled.step,

package/src/definitions/globals/reset.less

@@ -23,8 +23,8 @@
 
 /* Border-Box */
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }
 html {

package/src/definitions/modules/calendar.js

@@ -502,7 +502,7 @@ $.fn.calendar = function(parameters) {
           var winWidth = $(window).width();
           $container.find('td[data-position]').each(function () {
             var cell = $(this);
-            var tooltipWidth = window.getComputedStyle(cell[0], ':after').width.replace(/[^0-9\.]/g,'');
+            var tooltipWidth = window.getComputedStyle(cell[0], '::after').width.replace(/[^0-9\.]/g,'');
             var tooltipPosition = cell.attr('data-position');
             // use a fallback width of 250 (calendar width) for IE/Edge (which return "auto")
             var calcPosition = (winWidth - cell.width() - (parseInt(tooltipWidth,10) || 250)) > cell.offset().left ? 'right' : 'left';

package/src/definitions/modules/checkbox.less

@@ -64,7 +64,7 @@
   font-size: @labelFontSize;
 }
 
-.ui.checkbox label:before {
+.ui.checkbox label::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -84,7 +84,7 @@
     Checkmark
 ---------------*/
 
-.ui.checkbox label:after {
+.ui.checkbox label::after {
   position: absolute;
   font-size: @checkboxCheckFontSize;
   top: @checkboxCheckTop;
@@ -101,8 +101,8 @@
   .ui.right.aligned.checkbox label {
     padding-left: 0;
     padding-right: @labelDistance;
-    &:after,
-    &:before {
+    &::after,
+    &::before {
       right: 0;
       left: auto;
     }
@@ -162,11 +162,11 @@
      Focus
 ---------------*/
 
-.ui.checkbox input:focus ~ label:before {
+.ui.checkbox input:focus ~ label::before {
   background: @checkboxFocusBackground;
   border-color: @checkboxFocusBorderColor;
 }
-.ui.checkbox input:focus ~ label:after {
+.ui.checkbox input:focus ~ label::after {
   color: @checkboxFocusCheckColor;
 }
 .ui.checkbox input:focus ~ label {
@@ -177,11 +177,11 @@
      Active
 ---------------*/
 
-.ui.checkbox input:checked ~ label:before {
+.ui.checkbox input:checked ~ label::before {
   background: @checkboxActiveBackground;
   border-color: @checkboxActiveBorderColor;
 }
-.ui.checkbox input:checked ~ label:after {
+.ui.checkbox input:checked ~ label::after {
   opacity: @checkboxActiveCheckOpacity;
   color: @checkboxActiveCheckColor;
 }
@@ -191,24 +191,24 @@
     Indeterminate
   ---------------*/
 
-  .ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
+  .ui.checkbox input:not([type=radio]):indeterminate ~ label::before {
     background: @checkboxIndeterminateBackground;
     border-color: @checkboxIndeterminateBorderColor;
   }
-  .ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
+  .ui.checkbox input:not([type=radio]):indeterminate ~ label::after {
     opacity: @checkboxIndeterminateCheckOpacity;
     color: @checkboxIndeterminateCheckColor;
   }
   .ui.indeterminate.toggle.checkbox {
-    & input:not([type=radio]):indeterminate ~ label:before {
+    & input:not([type=radio]):indeterminate ~ label::before {
       background: @toggleCenterLaneBackground;
     }
-    & input:not([type=radio]) ~ label:after {
+    & input:not([type=radio]) ~ label::after {
       left: @toggleCenterOffset;
     }
   }
   & when (@variationCheckboxRightAligned) {
-    .ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after {
+    .ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label::after {
       left: auto;
       right: @toggleCenterOffset;
     }
@@ -219,13 +219,13 @@
   Active Focus
 ---------------*/
 
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
-.ui.checkbox input:checked:focus ~ label:before  {
+.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::before,
+.ui.checkbox input:checked:focus ~ label::before  {
   background: @checkboxActiveFocusBackground;
   border-color: @checkboxActiveFocusBorderColor;
 }
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
-.ui.checkbox input:checked:focus ~ label:after {
+.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::after,
+.ui.checkbox input:checked:focus ~ label::after {
   color: @checkboxActiveFocusCheckColor;
 }
 
@@ -291,7 +291,7 @@
   }
 
   /* Box */
-  .ui.radio.checkbox label:before {
+  .ui.radio.checkbox label::before {
     content: '';
     transform: none;
 
@@ -303,7 +303,7 @@
   }
 
   /* Bullet */
-  .ui.radio.checkbox label:after {
+  .ui.radio.checkbox label::after {
     border: none;
     content: '' !important;
     line-height: @radioSize;
@@ -317,31 +317,31 @@
   }
 
   /* Focus */
-  .ui.radio.checkbox input:focus ~ label:before {
+  .ui.radio.checkbox input:focus ~ label::before {
     background-color: @radioFocusBackground;
   }
-  .ui.radio.checkbox input:focus ~ label:after {
+  .ui.radio.checkbox input:focus ~ label::after {
     background-color: @radioFocusBulletColor;
   }
 
   /* Indeterminate */
-  .ui.radio.checkbox input:indeterminate ~ label:after {
+  .ui.radio.checkbox input:indeterminate ~ label::after {
     opacity: 0;
   }
 
   /* Active */
-  .ui.radio.checkbox input:checked ~ label:before {
+  .ui.radio.checkbox input:checked ~ label::before {
     background-color: @radioActiveBackground;
   }
-  .ui.radio.checkbox input:checked ~ label:after {
+  .ui.radio.checkbox input:checked ~ label::after {
     background-color: @radioActiveBulletColor;
   }
 
   /* Active Focus */
-  .ui.radio.checkbox input:focus:checked ~ label:before {
+  .ui.radio.checkbox input:focus:checked ~ label::before {
     background-color: @radioActiveFocusBackground;
   }
-  .ui.radio.checkbox input:focus:checked ~ label:after {
+  .ui.radio.checkbox input:focus:checked ~ label::after {
     background-color: @radioActiveFocusBulletColor;
   }
 }
@@ -369,7 +369,7 @@
   }
 
   /* Line */
-  .ui.slider.checkbox label:before {
+  .ui.slider.checkbox label::before {
     display: block;
     position: absolute;
     content: '';
@@ -390,7 +390,7 @@
   }
 
   /* Handle */
-  .ui.slider.checkbox label:after {
+  .ui.slider.checkbox label::after {
     background: @handleBackground;
     position: absolute;
     content: '' !important;
@@ -410,7 +410,7 @@
   }
 
   /* Focus */
-  .ui.slider.checkbox input:focus ~ label:before {
+  .ui.slider.checkbox input:focus ~ label::before {
     background-color: @toggleFocusColor;
     border: none;
   }
@@ -427,10 +427,10 @@
   .ui.slider.checkbox input:checked ~ label {
     color: @sliderOnLabelColor !important;
   }
-  .ui.slider.checkbox input:checked ~ label:before {
+  .ui.slider.checkbox input:checked ~ label::before {
     background-color: @sliderOnLineColor !important;
   }
-  .ui.slider.checkbox input:checked ~ label:after {
+  .ui.slider.checkbox input:checked ~ label::after {
     left: @sliderTravelDistance;
   }
 
@@ -438,7 +438,7 @@
   .ui.slider.checkbox input:focus:checked ~ label {
     color: @sliderOnFocusLabelColor !important;
   }
-  .ui.slider.checkbox input:focus:checked ~ label:before {
+  .ui.slider.checkbox input:focus:checked ~ label::before {
     background-color: @sliderOnFocusLineColor !important;
   }
 
@@ -447,12 +447,12 @@
       padding-left: 0;
       padding-right: @sliderLabelDistance;
     }
-    .ui.right.aligned.slider.checkbox label:after {
+    .ui.right.aligned.slider.checkbox label::after {
       left: auto;
       right: @sliderTravelDistance;
       transition: @sliderHandleTransitionRightAligned;
     }
-    .ui.right.aligned.slider.checkbox input:checked ~ label:after {
+    .ui.right.aligned.slider.checkbox input:checked ~ label::after {
       left: auto;
       right: 0;
     }
@@ -485,7 +485,7 @@
   }
 
   /* Switch */
-  .ui.toggle.checkbox label:before {
+  .ui.toggle.checkbox label::before {
     display: block;
     position: absolute;
     content: '';
@@ -503,7 +503,7 @@
   }
 
   /* Handle */
-  .ui.toggle.checkbox label:after {
+  .ui.toggle.checkbox label::after {
     background: @handleBackground;
     position: absolute;
     content: '' !important;
@@ -521,13 +521,13 @@
     transition: @toggleHandleTransition;
   }
 
-  .ui.toggle.checkbox input ~ label:after {
+  .ui.toggle.checkbox input ~ label::after {
     left: @toggleOffOffset;
     box-shadow: @toggleOffHandleBoxShadow;
   }
 
   /* Focus */
-  .ui.toggle.checkbox input:focus ~ label:before {
+  .ui.toggle.checkbox input:focus ~ label::before {
     background-color: @toggleFocusColor;
     border: none;
   }
@@ -542,10 +542,10 @@
   .ui.toggle.checkbox input:checked ~ label {
     color: @toggleOnLabelColor !important;
   }
-  .ui.toggle.checkbox input:checked ~ label:before {
+  .ui.toggle.checkbox input:checked ~ label::before {
     background-color: @toggleOnLaneColor !important;
   }
-  .ui.toggle.checkbox input:checked ~ label:after {
+  .ui.toggle.checkbox input:checked ~ label::after {
     left: @toggleOnOffset;
     box-shadow: @toggleOnHandleBoxShadow;
   }
@@ -555,7 +555,7 @@
   .ui.toggle.checkbox input:focus:checked ~ label {
     color: @toggleOnFocusLabelColor !important;
   }
-  .ui.toggle.checkbox input:focus:checked ~ label:before {
+  .ui.toggle.checkbox input:focus:checked ~ label::before {
     background-color: @toggleOnFocusLaneColor !important;
   }
 
@@ -564,12 +564,12 @@
       padding-left: 0;
       padding-right: @toggleLabelDistance;
     }
-    .ui.right.aligned.toggle.checkbox input ~ label:after {
+    .ui.right.aligned.toggle.checkbox input ~ label::after {
       left: auto;
       right: @toggleOnOffset;
       transition: @toggleHandleTransitionRightAligned;
     }
-    .ui.right.aligned.toggle.checkbox input:checked ~ label:after {
+    .ui.right.aligned.toggle.checkbox input:checked ~ label::after {
       left: auto;
       right: @toggleOffOffset;
     }
@@ -620,7 +620,7 @@
     }
 
     /* Slider Line */
-    .ui.inverted.slider.checkbox label:before {
+    .ui.inverted.slider.checkbox label::before {
       background-color: @invertedUnselectedTextColor !important;
     }
 
@@ -633,7 +633,7 @@
     .ui.inverted.slider.checkbox input:checked ~ label {
       color: @invertedSelectedTextColor !important;
     }
-    .ui.inverted.slider.checkbox input:checked ~ label:before {
+    .ui.inverted.slider.checkbox input:checked ~ label::before {
       background-color: @selectedWhiteBorderColor !important;
     }
 
@@ -641,13 +641,13 @@
     .ui.inverted.slider.checkbox input:focus:checked ~ label {
       color: @invertedSelectedTextColor !important;
     }
-    .ui.inverted.slider.checkbox input:focus:checked ~ label:before {
+    .ui.inverted.slider.checkbox input:focus:checked ~ label::before {
       background-color: @selectedWhiteBorderColor !important;
     }
   }
   & when (@variationCheckboxToggle) {
     /* Toggle Switch */
-    .ui.inverted.toggle.checkbox label:before {
+    .ui.inverted.toggle.checkbox label::before {
       background-color: @invertedTextColor !important;
     }
 
@@ -660,7 +660,7 @@
     .ui.inverted.toggle.checkbox input:checked ~ label {
       color: @invertedSelectedTextColor !important;
     }
-    .ui.inverted.toggle.checkbox input:checked ~ label:before {
+    .ui.inverted.toggle.checkbox input:checked ~ label::before {
       background-color: @toggleOnLaneColor !important;
     }
 
@@ -668,7 +668,7 @@
     .ui.inverted.toggle.checkbox input:focus:checked ~ label {
       color: @invertedSelectedTextColor !important;
     }
-    .ui.inverted.toggle.checkbox input:focus:checked ~ label:before {
+    .ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
       background-color: @toggleOnFocusLaneColor !important;
     }
     }
@@ -693,20 +693,20 @@
       .ui.@{value}.checkbox {
         &:not(.slider):not(.toggle):not(.radio) {
           &
-          label:after,
-          label:before {
+          label::after,
+          label::before {
             transform: scale(@@raw);
             transform-origin: left;
           }
         }
         &.radio when (@variationCheckboxRadio) {
           &
-          label:before {
+          label::before {
             transform: scale(@@raw);
             transform-origin: left;
           }
           &
-          label:after {
+          label::after {
             transform: scale(@@circleScale);
             transform-origin: left;
             left: @@circleLeft;