fomantic-ui 2.9.0-beta.30 → 2.9.0-beta.300

package/src/definitions/modules/checkbox.less

@@ -55,126 +55,6 @@
 }
 
 
-& when (@variationCheckboxBox) {
-  /*--------------
-        Box
-  ---------------*/
-
-  /* .box selector is deprecated and will be removed in v3 */
-  .ui.checkbox .box {
-    &:extend(.ui.checkbox label all);
-  }
-  .ui.checkbox + .box {
-    &:extend(.ui.checkbox + label all);
-  }
-  .ui.checkbox input:focus ~ .box {
-    &:extend(.ui.checkbox input:focus ~ label all);
-  }
-  .ui.checkbox input:checked ~ .box {
-    &:extend(.ui.checkbox input:checked ~ label all);
-  }
-  & when (@variationCheckboxIndeterminate) {
-    .ui.checkbox input:not([type=radio]):indeterminate ~ .box {
-      &:extend(.ui.checkbox input:not([type=radio]):indeterminate ~ label all);
-    }
-    .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box {
-      &:extend(.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label all);
-    }
-  }
-  .ui.checkbox input:checked:focus ~ .box {
-    &:extend(.ui.checkbox input:checked:focus ~ label all);
-  }
-  & when (@variationCheckboxDisabled) {
-    .ui.disabled.checkbox .box {
-      &:extend(.ui.disabled.checkbox label all);
-    }
-
-    .ui.checkbox input[disabled] ~ .box {
-      &:extend(.ui.checkbox input[disabled] ~ label all);
-    }
-  }
-  & when (@variationCheckboxRadio) {
-    .ui.radio.checkbox .box {
-      &:extend(.ui.radio.checkbox label all);
-    }
-    .ui.radio.checkbox input:focus ~ .box {
-      &:extend(.ui.radio.checkbox input:focus ~ label all);
-    }
-    .ui.radio.checkbox input:indeterminate ~ .box {
-      &:extend(.ui.radio.checkbox input:indeterminate ~ label all);
-    }
-    .ui.radio.checkbox input:checked ~ .box {
-      &:extend(.ui.radio.checkbox input:checked ~ label all);
-    }
-    .ui.radio.checkbox input:focus:checked ~ .box {
-      &:extend(.ui.radio.checkbox input:focus:checked ~ label all);
-    }
-  }
-  & when (@variationCheckboxSlider) {
-    .ui.slider.checkbox .box {
-      &:extend(.ui.slider.checkbox label all);
-    }
-    .ui.slider.checkbox input:focus ~ .box {
-      &:extend(.ui.slider.checkbox input:focus ~ label all);
-    }
-    .ui.slider.checkbox input:checked ~ .box {
-      &:extend(.ui.slider.checkbox input:checked ~ label all);
-    }
-    .ui.slider.checkbox input:focus:checked ~ .box {
-      &:extend(.ui.slider.checkbox input:focus:checked ~ label all);
-    }
-  }
-  & when (@variationCheckboxToggle) {
-    .ui.toggle.checkbox .box {
-      &:extend(.ui.toggle.checkbox label all);
-    }
-    .ui.toggle.checkbox input ~ .box {
-      &:extend(.ui.toggle.checkbox input ~ label all);
-    }
-    .ui.toggle.checkbox input:focus ~ .box {
-      &:extend(.ui.toggle.checkbox input:focus ~ label all);
-    }
-    .ui.toggle.checkbox input:checked ~ .box {
-      &:extend(.ui.toggle.checkbox input:checked ~ label all);
-    }
-    .ui.toggle.checkbox input:focus:checked ~ .box {
-      &:extend(.ui.toggle.checkbox input:focus:checked ~ label all);
-    }
-  }
-  & when (@variationCheckboxFitted) {
-    .ui.fitted.checkbox .box {
-      &:extend(.ui.fitted.checkbox label all);
-    }
-  }
-  & when (@variationCheckboxInverted) {
-    .ui.inverted.checkbox .box {
-      &:extend(.ui.inverted.checkbox label all);
-    }
-    & when (@variationCheckboxSlider) {
-      .ui.inverted.slider.checkbox .box {
-        &:extend(.ui.inverted.slider.checkbox label all);
-      }
-      .ui.inverted.slider.checkbox input:checked ~ .box {
-        &:extend(.ui.inverted.slider.checkbox input:checked ~ label all);
-      }
-      .ui.inverted.slider.checkbox input:focus:checked ~ .box {
-        &:extend(.ui.inverted.slider.checkbox input:focus:checked ~ label all);
-      }
-    }
-    & when (@variationCheckboxToggle) {
-      .ui.inverted.toggle.checkbox .box {
-        &:extend(.ui.inverted.toggle.checkbox label all);
-      }
-      .ui.inverted.toggle.checkbox input:checked ~ .box {
-        &:extend(.ui.inverted.toggle.checkbox input:checked ~ label all);
-      }
-      .ui.inverted.toggle.checkbox input:focus:checked ~ .box {
-        &:extend(.ui.inverted.toggle.checkbox input:focus:checked ~ label all);
-      }
-    }
-  }
-}
-
 .ui.checkbox label {
   cursor: auto;
   position: relative;
@@ -184,7 +64,7 @@
   font-size: @labelFontSize;
 }
 
-.ui.checkbox label:before {
+.ui.checkbox label::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -204,7 +84,7 @@
     Checkmark
 ---------------*/
 
-.ui.checkbox label:after {
+.ui.checkbox label::after {
   position: absolute;
   font-size: @checkboxCheckFontSize;
   top: @checkboxCheckTop;
@@ -221,8 +101,8 @@
   .ui.right.aligned.checkbox label {
     padding-left: 0;
     padding-right: @labelDistance;
-    &:after,
-    &:before {
+    &::after,
+    &::before {
       right: 0;
       left: auto;
     }
@@ -282,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 {
@@ -297,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;
 }
@@ -311,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;
     }
@@ -339,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;
 }
 
@@ -386,6 +266,7 @@
 }
 
 /* Selectable Label */
+.ui.checkbox input + label[for],
 .ui.checkbox input.hidden + label {
   cursor: pointer;
   user-select: none;
@@ -410,7 +291,7 @@
   }
 
   /* Box */
-  .ui.radio.checkbox label:before {
+  .ui.radio.checkbox label::before {
     content: '';
     transform: none;
 
@@ -422,7 +303,7 @@
   }
 
   /* Bullet */
-  .ui.radio.checkbox label:after {
+  .ui.radio.checkbox label::after {
     border: none;
     content: '' !important;
     line-height: @radioSize;
@@ -436,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;
   }
 }
@@ -488,7 +369,7 @@
   }
 
   /* Line */
-  .ui.slider.checkbox label:before {
+  .ui.slider.checkbox label::before {
     display: block;
     position: absolute;
     content: '';
@@ -509,7 +390,7 @@
   }
 
   /* Handle */
-  .ui.slider.checkbox label:after {
+  .ui.slider.checkbox label::after {
     background: @handleBackground;
     position: absolute;
     content: '' !important;
@@ -529,7 +410,7 @@
   }
 
   /* Focus */
-  .ui.slider.checkbox input:focus ~ label:before {
+  .ui.slider.checkbox input:focus ~ label::before {
     background-color: @toggleFocusColor;
     border: none;
   }
@@ -546,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;
   }
 
@@ -557,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;
   }
 
@@ -566,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;
     }
@@ -604,7 +485,7 @@
   }
 
   /* Switch */
-  .ui.toggle.checkbox label:before {
+  .ui.toggle.checkbox label::before {
     display: block;
     position: absolute;
     content: '';
@@ -622,7 +503,7 @@
   }
 
   /* Handle */
-  .ui.toggle.checkbox label:after {
+  .ui.toggle.checkbox label::after {
     background: @handleBackground;
     position: absolute;
     content: '' !important;
@@ -640,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;
   }
@@ -661,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;
   }
@@ -674,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;
   }
 
@@ -683,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;
     }
@@ -739,7 +620,7 @@
     }
 
     /* Slider Line */
-    .ui.inverted.slider.checkbox label:before {
+    .ui.inverted.slider.checkbox label::before {
       background-color: @invertedUnselectedTextColor !important;
     }
 
@@ -752,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;
     }
 
@@ -760,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;
     }
 
@@ -779,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;
     }
 
@@ -787,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;
     }
     }
@@ -796,69 +677,44 @@
 /*--------------------
         Size
 ---------------------*/
+& when not (@variationCheckboxSizes = false) {
+  each(@variationCheckboxSizes, {
+    @raw: @{value}Raw;
+    @size: @{value}CheckboxSize;
+    @circleScale: @{value}CheckboxCircleScale;
+    @circleLeft: @{value}CheckboxCircleLeft;
 
-each(@variationCheckboxSizes, {
-  @raw: @{value}Raw;
-  @size: @{value}CheckboxSize;
-  @circleScale: @{value}CheckboxCircleScale;
-  @circleLeft: @{value}CheckboxCircleLeft;
-
-  .ui.@{value}.checkbox {
-    font-size: @@size;
-  }
-
-  & when (@@raw > 1) {
-    .ui.@{value}.form .checkbox,
     .ui.@{value}.checkbox {
-      &:not(.slider):not(.toggle):not(.radio) {
-        &
-        label:after,
-        label:before {
-          transform: scale(@@raw);
-          transform-origin:left;
-        }
-      }
-      &.radio when (@variationCheckboxRadio) {
-        &
-        label:before {
-          transform: scale(@@raw);
-          transform-origin:left;
+      font-size: @@size;
+    }
+
+    & when (@@raw > 1) {
+      .ui.@{value}.form .checkbox,
+      .ui.@{value}.checkbox {
+        &:not(.slider):not(.toggle):not(.radio) {
+          &
+          label::after,
+          label::before {
+            transform: scale(@@raw);
+            transform-origin: left;
+          }
         }
-        &
-        label:after {
-          transform:scale(@@circleScale);
-          transform-origin:left;
-          left: @@circleLeft;
+        &.radio when (@variationCheckboxRadio) {
+          &
+          label::before {
+            transform: scale(@@raw);
+            transform-origin: left;
+          }
+          &
+          label::after {
+            transform: scale(@@circleScale);
+            transform-origin: left;
+            left: @@circleLeft;
+          }
         }
       }
     }
-  }
-  & when (@@raw > 1) and (@variationCheckboxBox) {
-    .ui.@{value}.form .checkbox,
-    .ui.@{value}.checkbox {
-      &:not(.slider):not(.toggle):not(.radio) {
-        &
-        .box:after,
-        .box:before {
-          transform: scale(@@raw);
-          transform-origin:left;
-        }
-      }
-      &.radio when (@variationCheckboxRadio) {
-        &
-        .box:before {
-          transform: scale(@@raw);
-          transform-origin:left;
-        }
-        &
-        .box:after {
-          transform:scale(@@circleScale);
-          transform-origin:left;
-          left: @@circleLeft;
-        }
-      }
-    }
-  }
-})
+  })
+}
 
 .loadUIOverrides();

package/src/definitions/modules/dimmer.js

@@ -192,11 +192,14 @@ $.fn.dimmer = function(parameters) {
             ? callback
             : function(){}
           ;
-          module.debug('Showing dimmer', $dimmer, settings);
-          module.set.variation();
           if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling dimmer show');
+              return;
+            }
+            module.debug('Showing dimmer', $dimmer, settings);
+            module.set.variation();
             module.animate.show(callback);
-            settings.onShow.call(element);
             settings.onChange.call(element);
           }
           else {
@@ -210,9 +213,12 @@ $.fn.dimmer = function(parameters) {
             : function(){}
           ;
           if( module.is.dimmed() || module.is.animating() ) {
+            if(settings.onHide.call(element) === false) {
+              module.verbose('Hide callback returned false cancelling dimmer hide');
+              return;
+            }
             module.debug('Hiding dimmer', $dimmer);
             module.animate.hide(callback);
-            settings.onHide.call(element);
             settings.onChange.call(element);
           }
           else {

package/src/definitions/modules/dimmer.less

@@ -68,7 +68,7 @@
 }
 
 /* Scrollbars */
-.addScrollbars() when (@useCustomScrollbars) {
+& when (@useCustomScrollbars) {
   .ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
     background: @trackInvertedBackground;
   }
@@ -81,8 +81,18 @@
   .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
     background: @thumbInvertedHoverBackground;
   }
+  .ui.dimmer:not(.inverted) {
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbInvertedBackgroundHex;
+      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+      scrollbar-track-color: @trackInvertedBackgroundHex;
+      scrollbar-arrow-color: @trackInvertedBackgroundHex;
+    }
+    /* firefox : first color thumb, second track */
+    scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
+  }
 }
-.addScrollbars();
 
 /*******************************
             States
@@ -171,17 +181,21 @@ body.dimmable > .dimmer {
       Blurring
   ---------------*/
 
-  .blurring.dimmable > :not(.dimmer) {
-    filter: @blurredStartFilter;
-    transition: @blurredTransition;
-  }
-  .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
-    filter: @blurredEndFilter;
+  @supports (not (-webkit-backdrop-filter: none)) and (not (backdrop-filter: none)) {
+    .blurring.dimmable > :not(.dimmer) {
+      filter: @blurredStartFilter;
+      transition: @blurredTransition;
+    }
+    .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
+      filter: @blurredEndFilter;
+    }
   }
 
   /* Dimmer Color */
   .blurring.dimmable > .dimmer {
     background: @blurredBackgroundColor;
+    -webkit-backdrop-filter: @blurredEndFilter;
+    backdrop-filter: @blurredEndFilter;
   }
   .blurring.dimmable > .inverted.dimmer {
     background: @blurredInvertedBackgroundColor;