fomantic-ui 2.9.0-beta.99 → 2.9.0

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;

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 {
@@ -252,6 +258,9 @@ $.fn.dimmer = function(parameters) {
               }
               $dimmer
                 .transition({
+                  debug       : settings.debug,
+                  verbose     : settings.verbose,
+                  silent      : settings.silent,
                   displayType : settings.useFlex
                     ? 'flex'
                     : 'block',
@@ -301,6 +310,9 @@ $.fn.dimmer = function(parameters) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition({
+                  debug       : settings.debug,
+                  verbose     : settings.verbose,
+                  silent      : settings.silent,
                   displayType : settings.useFlex
                     ? 'flex'
                     : 'block',
@@ -368,10 +380,7 @@ $.fn.dimmer = function(parameters) {
           },
           closable: function() {
             if(settings.closable == 'auto') {
-              if(settings.on == 'hover') {
-                return false;
-              }
-              return true;
+              return settings.on != 'hover';
             }
             return settings.closable;
           },
@@ -590,7 +599,7 @@ $.fn.dimmer = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;

package/src/definitions/modules/dimmer.less

@@ -28,8 +28,8 @@
 .ui.dimmer {
   display: none;
   position: @dimmerPosition;
-  top: 0 !important;
-  left: 0 !important;
+  top: 0;
+  left: 0;
 
   width: 100%;
   height: 100%;
@@ -82,12 +82,13 @@
     background: @thumbInvertedHoverBackground;
   }
   .ui.dimmer:not(.inverted) {
-    /* IE11 */
-    scrollbar-face-color: @thumbInvertedBackgroundHex;
-    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-    scrollbar-track-color: @trackInvertedBackgroundHex;
-    scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+    & 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;
   }
@@ -302,11 +303,11 @@ body.dimmable > .dimmer {
     height: auto;
   }
   .ui[class*="bottom dimmer"] {
-    top: auto !important;
+    top: auto;
     bottom: 0;
   }
   .ui[class*="center dimmer"] {
-    top:50% !important;
+    top:50%;
     transform: translateY(-50%);
     -webkit-transform: translateY(calc(-50% - .5px));
   }