fomantic-ui 2.9.0-beta.21 → 2.9.0-beta.213

package/src/definitions/modules/accordion.less

@@ -31,26 +31,25 @@
 }
 
 /* Title */
-.ui.accordion .title,
-.ui.accordion .accordion .title {
+.ui.accordion.menu .item > .title,
+.ui.accordion > .title,
+.ui.accordion .accordion > .title {
   cursor: pointer;
-}
-
-/* Default Styling */
-.ui.accordion .title:not(.ui) {
   padding: @titlePadding;
   font-family: @titleFont;
   font-size: @titleFontSize;
   color: @titleColor;
+  list-style: none;
+  line-height: @titleLineHeight;
 }
 
 /* Default Styling */
-.ui.accordion:not(.styled) .title ~ .content:not(.ui),
-.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
+.ui.accordion:not(.styled) .title ~ .content,
+.ui.accordion:not(.styled) .accordion .title ~ .content {
   margin: @contentMargin;
   padding: @contentPadding;
 }
-.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
+.ui.accordion:not(.styled) .title ~ .content:last-child {
   padding-bottom: 0;
 }
 
@@ -68,6 +67,10 @@
   transition: @iconTransition;
   vertical-align: @iconVerticalAlign;
   transform: @iconTransform;
+  &.right when (@variationAccordionRightDropdown) {
+    float:right;
+    transform: @iconTransformRight;
+  }
 }
 
 /*--------------
@@ -95,6 +98,8 @@
             States
 *******************************/
 
+.ui.accordion[open] > .title .dropdown.icon,
+.ui.accordion .accordion[open] > .title .dropdown.icon,
 .ui.accordion .active.title .dropdown.icon,
 .ui.accordion .accordion .active.title .dropdown.icon {
   transform: @activeIconTransform;
@@ -123,8 +128,8 @@
     background: @styledBackground;
     box-shadow: @styledBoxShadow;
   }
-  .ui.styled.accordion .title,
-  .ui.styled.accordion .accordion .title {
+  .ui.styled.accordion > .title,
+  .ui.styled.accordion .accordion > .title {
     margin: @styledTitleMargin;
     padding: @styledTitlePadding;
     color: @styledTitleColor;
@@ -133,49 +138,101 @@
     transition: @styledTitleTransition;
   }
   .ui.styled.accordion > .title:first-child,
-  .ui.styled.accordion .accordion .title:first-child {
+  .ui.styled.accordion .accordion > .title:first-child {
     border-top: none;
   }
 
 
   /* Content */
-  .ui.styled.accordion .content,
-  .ui.styled.accordion .accordion .content {
+  .ui.styled.accordion > .content {
     margin: @styledContentMargin;
     padding: @styledContentPadding;
   }
-  .ui.styled.accordion .accordion .content {
+  .ui.styled.accordion .accordion > .content {
     margin: @styledChildContentMargin;
     padding: @styledChildContentPadding;
   }
 
 
   /* Hover */
-  .ui.styled.accordion .title:hover,
-  .ui.styled.accordion .active.title,
-  .ui.styled.accordion .accordion .title:hover,
-  .ui.styled.accordion .accordion .active.title {
+  .ui.styled.accordion > .title:hover {
     background: @styledTitleHoverBackground;
     color: @styledTitleHoverColor;
   }
-  .ui.styled.accordion .accordion .title:hover,
-  .ui.styled.accordion .accordion .active.title {
+  .ui.styled.accordion .accordion > .title:hover {
     background: @styledHoverChildTitleBackground;
     color: @styledHoverChildTitleColor;
   }
 
 
   /* Active */
+  .ui.styled.accordion[open] > .title,
   .ui.styled.accordion .active.title {
     background: @styledActiveTitleBackground;
     color: @styledActiveTitleColor;
   }
+  .ui.styled.accordion .accordion[open] > .title,
   .ui.styled.accordion .accordion .active.title {
     background: @styledActiveChildTitleBackground;
     color: @styledActiveChildTitleColor;
   }
 }
 
+& when (@variationAccordionCompact) {
+  /*--------------
+       Compact
+  ---------------*/
+
+  /* Default Styling */
+
+  .ui.compact.accordion:not(.styled) > .title,
+  .ui.compact.accordion:not(.styled) .accordion > .title {
+    padding: @titlePaddingCompact;
+  }
+
+  .ui.compact.accordion:not(.styled) .title ~ .content,
+  .ui.compact.accordion:not(.styled) .accordion .title ~ .content {
+    padding: @contentPaddingCompact;
+  }
+
+  /* Styled */
+
+  .ui.compact.styled.accordion > .title,
+  .ui.compact.styled.accordion .accordion > .title {
+    padding: @styledTitlePaddingCompact;
+  }
+
+  .ui.compact.styled.accordion .title ~ .content,
+  .ui.compact.styled.accordion .accordion .title ~ .content {
+    padding: @styledContentPaddingCompact;
+  }
+}
+  /*--------------
+    Very Compact
+  ---------------*/
+
+& when (@variationAccordionVeryCompact) {
+  .ui[class*="very compact"].accordion:not(.styled) > .title,
+  .ui[class*="very compact"].accordion:not(.styled) .accordion > .title {
+    padding: @titlePaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].accordion:not(.styled) .title ~ .content,
+  .ui[class*="very compact"].accordion:not(.styled) .accordion .title ~ .content {
+    padding: @contentPaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].styled.accordion > .title,
+  .ui[class*="very compact"].styled.accordion .accordion > .title {
+    padding: @styledTitlePaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].styled.accordion .title ~ .content,
+  .ui[class*="very compact"].styled.accordion .accordion .title ~ .content {
+    padding: @styledContentPaddingVeryCompact;
+  }
+}
+
 
 /*******************************
             States
@@ -185,8 +242,8 @@
    Not Active
 ---------------*/
 
-.ui.accordion .title ~ .content:not(.active),
-.ui.accordion .accordion .title ~ .content:not(.active) {
+.ui.accordion:not(details) .title ~ .content:not(.active),
+.ui.accordion .accordion:not(details) .title ~ .content:not(.active) {
   display: none;
 }
 
@@ -210,9 +267,103 @@
        Inverted
   ---------------*/
 
-  .ui.inverted.accordion .title:not(.ui) {
+  .ui.inverted.accordion.menu .item > .title,
+  .ui.inverted.accordion > .title,
+  .ui.inverted.accordion .accordion > .title {
     color: @invertedTitleColor;
   }
+  & when (@variationAccordionStyled) {
+    .ui.inverted.styled.accordion,
+    .ui.inverted.styled.accordion .accordion {
+      background: @invertedStyledBackground;
+      box-shadow: @invertedStyledBoxShadow;
+    }
+    .ui.inverted.styled.accordion > .title,
+    .ui.inverted.styled.accordion .accordion > .title {
+      color: @invertedStyledTitleColor;
+      border-top: @invertedStyledTitleBorder;
+    }
+
+    /* Hover */
+    .ui.inverted.styled.accordion > .title:hover {
+      background: @invertedStyledTitleHoverBackground;
+      color: @invertedStyledTitleHoverColor;
+    }
+    .ui.inverted.styled.accordion .accordion > .title:hover {
+      background: @invertedStyledHoverChildTitleBackground;
+      color: @invertedStyledHoverChildTitleColor;
+    }
+
+    /* Active */
+    .ui.inverted.styled.accordion[open] > .title,
+    .ui.inverted.styled.accordion .active.title {
+      background: @invertedStyledActiveTitleBackground;
+      color: @invertedStyledActiveTitleColor;
+    }
+    .ui.inverted.styled.accordion .accordion[open] > .title,
+    .ui.inverted.styled.accordion .accordion .active.title {
+      background: @invertedStyledActiveChildTitleBackground;
+      color: @invertedStyledActiveChildTitleColor;
+    }
+  }
+}
+
+& when (@variationAccordionBasicStyled) {
+  .ui.basic.styled.accordion,
+  .ui.basic.styled.accordion .accordion {
+    background: transparent;
+    box-shadow: none;
+  }
+  .ui.basic.styled.accordion > .title,
+  .ui.basic.styled.accordion .accordion > .title {
+    border: none;
+    color: @basicStyledTitleColor;
+  }
+  .ui.basic.styled.accordion > .title:hover,
+  .ui.basic.styled.accordion .accordion > .title:hover {
+    background: transparent;
+    color: @basicStyledTitleHoverColor;
+  }
+  .ui.basic.styled.accordion[open] > .title,
+  .ui.basic.styled.accordion .active.title,
+  .ui.basic.styled.accordion .accordion[open] > .title,
+  .ui.basic.styled.accordion .accordion .active.title {
+    background: transparent;
+    color: @basicStyledActiveTitleColor;
+  }
+  & when (@variationAccordionInverted) {
+    .ui.inverted.basic.styled.accordion > .title,
+    .ui.inverted.basic.styled.accordion .accordion > .title {
+      background: transparent;
+      color: @invertedBasicStyledTitleColor;
+    }
+    .ui.inverted.basic.styled.accordion > .title:hover,
+    .ui.inverted.basic.styled.accordion .accordion > .title:hover {
+      background: transparent;
+      color: @invertedBasicStyledTitleHoverColor;
+    }
+    .ui.inverted.basic.styled.accordion[open] > .title,
+    .ui.inverted.basic.styled.accordion .active.title,
+    .ui.inverted.basic.styled.accordion .accordion[open] > .title,
+    .ui.inverted.basic.styled.accordion .accordion .active.title {
+      background: transparent;
+      color: @invertedBasicStyledActiveTitleColor;
+    }
+  }
+}
+
+& when (@variationAccordionTree) {
+  .ui.tree.accordion:not(.styled) .title ~ .content,
+  .ui.tree.accordion:not(.styled) .accordion .title ~ .content {
+    padding:@treeContentPadding;
+  }
+  .ui.tree.accordion > .content,
+  .ui.tree.accordion .accordion > .content {
+    margin-left: @treeContentLeftMargin;
+  }
+  .ui.tree.accordion .accordion {
+    margin-top: @treeContentTopMargin;
+  }
 }
 
 .loadUIOverrides();

package/src/definitions/modules/calendar.js

@@ -122,7 +122,7 @@ $.fn.calendar = function(parameters) {
               module.set.maxDate($module.data(metadata.maxDate));
             }
             module.setting('type', module.get.type());
-            module.setting('on', settings.on || ($input.length ? 'focus' : 'click'));
+            module.setting('on', settings.on || 'click');
           },
           popup: function () {
             if (settings.inline) {
@@ -153,7 +153,10 @@ $.fn.calendar = function(parameters) {
               module.refreshTooltips();
               return settings.onVisible.apply($container, arguments);
             };
-            var onHidden = settings.onHidden;
+            var onHidden = function () {
+              module.blur();
+              return settings.onHidden.apply($container, arguments)
+            }
             if (!$input.length) {
               //no input, $container has to handle focus/blur
               $container.attr('tabindex', '0');
@@ -162,10 +165,6 @@ $.fn.calendar = function(parameters) {
                 module.focus();
                 return settings.onVisible.apply($container, arguments);
               };
-              onHidden = function () {
-                module.blur();
-                return settings.onHidden.apply($container, arguments);
-              };
             }
             var onShow = function () {
               //reset the focus date onShow

package/src/definitions/modules/checkbox.js

@@ -239,18 +239,26 @@ $.fn.checkbox = function(parameters) {
               }
             }
 
+            shortcutPressed = false;
             if(key == keyCode.escape) {
               module.verbose('Escape key pressed blurring field');
               $input.blur();
               shortcutPressed = true;
             }
-            else if(!event.ctrlKey && ( key == keyCode.space || (key == keyCode.enter && settings.enableEnterKey)) ) {
-              module.verbose('Enter/space key pressed, toggling checkbox');
-              module.toggle();
-              shortcutPressed = true;
-            }
-            else {
-              shortcutPressed = false;
+            else if(!event.ctrlKey && module.can.change()) {
+                if( key == keyCode.space || (key == keyCode.enter && settings.enableEnterKey) ) {
+                  module.verbose('Enter/space key pressed, toggling checkbox');
+                  module.toggle();
+                  shortcutPressed = true;
+                } else if($module.is('.toggle, .slider') && !module.is.radio()) {
+                  if(key == keyCode.left && module.is.checked()) {
+                    module.uncheck();
+                    shortcutPressed = true;
+                  } else if(key == keyCode.right && module.is.unchecked()) {
+                    module.check();
+                    shortcutPressed = true;
+                  }
+                }
             }
           },
           keyup: function(event) {
@@ -323,7 +331,6 @@ $.fn.checkbox = function(parameters) {
             settings.onEnable.call(input);
             // preserve legacy callbacks
             settings.onEnabled.call(input);
-            module.trigger.change();
           }
         },
 
@@ -338,7 +345,6 @@ $.fn.checkbox = function(parameters) {
             settings.onDisable.call(input);
             // preserve legacy callbacks
             settings.onDisabled.call(input);
-            module.trigger.change();
           }
         },
 
@@ -866,7 +872,7 @@ $.fn.checkbox.settings = {
 
   selector : {
     checkbox : '.ui.checkbox',
-    label    : 'label, .box',
+    label    : 'label',
     input    : 'input[type="checkbox"], input[type="radio"]',
     link     : 'a[href]'
   }

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;
@@ -386,6 +266,7 @@
 }
 
 /* Selectable Label */
+.ui.checkbox input + label[for],
 .ui.checkbox input.hidden + label {
   cursor: pointer;
   user-select: none;
@@ -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.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;