fomantic-ui 2.8.8-beta.99 → 2.9.0-beta.100

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;
@@ -349,14 +229,16 @@
   color: @checkboxActiveFocusCheckColor;
 }
 
+& when (@variationCheckboxReadonly) {
+  /*--------------
+      Read-Only
+  ---------------*/
 
-/*--------------
-    Read-Only
----------------*/
-
-.ui.read-only.checkbox,
-.ui.read-only.checkbox label {
-  cursor: default;
+  .ui.read-only.checkbox,
+  .ui.read-only.checkbox label {
+    cursor: default;
+    pointer-events: none;
+  }
 }
 
 & when (@variationCheckboxDisabled) {
@@ -366,7 +248,7 @@
 
   .ui.disabled.checkbox label,
   .ui.checkbox input[disabled] ~ label {
-    cursor: default !important;
+    cursor: default;
     opacity: @disabledCheckboxOpacity;
     color: @disabledCheckboxLabelColor;
     pointer-events: none;
@@ -384,6 +266,7 @@
 }
 
 /* Selectable Label */
+.ui.checkbox input + label[for],
 .ui.checkbox input.hidden + label {
   cursor: pointer;
   user-select: none;
@@ -794,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;
+      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;
-        }
-        &
-        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

@@ -155,7 +155,7 @@ $.fn.dimmer = function(parameters) {
 
         event: {
           click: function(event) {
-            module.verbose('Determining if event occured on dimmer', event);
+            module.verbose('Determining if event occurred on dimmer', event);
             if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
               module.hide();
               event.stopImmediatePropagation();
@@ -255,7 +255,7 @@ $.fn.dimmer = function(parameters) {
                   displayType : settings.useFlex
                     ? 'flex'
                     : 'block',
-                  animation   : settings.transition + ' in',
+                  animation   : (settings.transition.showMethod || settings.transition) + ' in',
                   queue       : false,
                   duration    : module.get.duration(),
                   useFailSafe : true,
@@ -264,6 +264,7 @@ $.fn.dimmer = function(parameters) {
                   },
                   onComplete  : function() {
                     module.set.active();
+                    settings.onVisible.call($dimmer);
                     callback();
                   }
                 })
@@ -285,6 +286,7 @@ $.fn.dimmer = function(parameters) {
                 .fadeTo(module.get.duration(), settings.opacity, function() {
                   $dimmer.removeAttr('style');
                   module.set.active();
+                  settings.onVisible.call($dimmer);
                   callback();
                 })
               ;
@@ -302,7 +304,7 @@ $.fn.dimmer = function(parameters) {
                   displayType : settings.useFlex
                     ? 'flex'
                     : 'block',
-                  animation   : settings.transition + ' out',
+                  animation   : (settings.transition.hideMethod || settings.transition) + ' out',
                   queue       : false,
                   duration    : module.get.duration(),
                   useFailSafe : true,
@@ -310,6 +312,7 @@ $.fn.dimmer = function(parameters) {
                     module.remove.dimmed();
                     module.remove.variation();
                     module.remove.active();
+                    settings.onHidden.call($dimmer);
                     callback();
                   }
                 })
@@ -323,6 +326,7 @@ $.fn.dimmer = function(parameters) {
                   module.remove.dimmed();
                   module.remove.active();
                   $dimmer.removeAttr('style');
+                  settings.onHidden.call($dimmer);
                   callback();
                 })
               ;
@@ -335,15 +339,12 @@ $.fn.dimmer = function(parameters) {
             return $dimmer;
           },
           duration: function() {
-            if(typeof settings.duration == 'object') {
-              if( module.is.active() ) {
-                return settings.duration.hide;
-              }
-              else {
-                return settings.duration.show;
-              }
+            if( module.is.active() ) {
+              return settings.transition.hideDuration || settings.duration.hide || settings.duration;
+            }
+            else {
+              return settings.transition.showDuration || settings.duration.show || settings.duration;
             }
-            return settings.duration;
           }
         },
 
@@ -707,6 +708,8 @@ $.fn.dimmer.settings = {
   onChange    : function(){},
   onShow      : function(){},
   onHide      : function(){},
+  onVisible   : function(){},
+  onHidden    : function(){},
 
   error   : {
     method   : 'The method you called is not defined.'

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,17 @@
   .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
     background: @thumbInvertedHoverBackground;
   }
+  .ui.dimmer:not(.inverted) {
+    /* 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 +180,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;