Merge branch 'next' of github.com:Semantic-Org/Semantic-UI into menu-flex

README.md

@@ -18,6 +18,8 @@ Key Features
 npm install semantic-ui  # Use themes, import build/watch tasks into your own gulpfile.
 ```
 
+![Getting Started](https://dl.dropboxusercontent.com/u/2657007/install.gif)
+
 For details on how work with Semantic theming please [read our customization guide](http://learnsemantic.com/developing/customizing.html) on [LearnSemantic.com](http://learnsemantic.com/)
 
 #### Additional Versions

RELEASE-NOTES.md

@@ -3,18 +3,27 @@
 ### Version 1.11.0 - February xx, 2015
 
 **New Components**
-
 - **Visibiliity** - Attach callbacks to elements visibility conditions like `top visible` `bottom visible`, `passing`. Useful for things like: image lazy loading, infinite scroll content, and recording tracking metrics
 
 **Enhancements**
+- **Menu** - Horizontal menus now use flexbox so they can resize automatically to content size.
+- **Transition** - Added more reasonable default durations for each animation
 - **Loader** - `inline loader` now has a `centered` variation
+- **Transition** - Added `toggle` behavior and docs for `show` and `hide`
+- **Transition** - transition now has `stop`, `stop all`, and `clear queue` for removing transitions, (undocumented method `stop`, and `start` renamed to `enable` and `disable`)
 
 **Bugs**
 - **Input** - Fix bug with vertical centering of `ui action input` inside `menu` due to `flexbox` changes
+- **Dropdown** - Fixes issue where dropdown would not open after restoring previus value on failed `search dropdown` search
+- **Transition** - Fixes `swing out` animations not working correctly
+- **Transition** - Fixed display state other than `block` not determined when using `show` and `hide` without an animation
+- **Transition** - Fix bug in `remove looping` causing next animation to use same duration
 - **Menu** - Fix vertical pointing menu, sub menu arrow color
-- **Item ** - `img` inside of `ui item content` now do not receive formatting by default
+- **Item ** - `img` inside of `ui item content` now do not receive size formatting by default
+- **Form** - Added `input[type="search"]` styles to `ui form`
 
 **Docs**
+- **Transition** - Adds examples of `hide, `show`, `toggle`, `stop`, `stop all`, and `clear queue`
 - **Item** - Significant rewrite of `ui item` documentation
 
 ### Version 1.10.1-2 - February 24, 2015

src/definitions/collections/form.less

@@ -96,6 +96,7 @@
 .ui.form input[type="email"],
 .ui.form input[type="number"],
 .ui.form input[type="password"],
+.ui.form input[type="search"],
 .ui.form input[type="tel"],
 .ui.form input[type="time"],
 .ui.form input[type="text"],
@@ -111,6 +112,7 @@
 .ui.form input[type="email"],
 .ui.form input[type="number"],
 .ui.form input[type="password"],
+.ui.form input[type="search"],
 .ui.form input[type="tel"],
 .ui.form input[type="time"],
 .ui.form input[type="text"],
@@ -298,6 +300,7 @@
 .ui.form input[type="email"]:focus,
 .ui.form input[type="number"]:focus,
 .ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
 .ui.form input[type="tel"]:focus,
 .ui.form input[type="time"]:focus,
 .ui.form input[type="text"]:focus,
@@ -365,6 +368,7 @@
 .ui.form .fields.error .field input[type="email"],
 .ui.form .fields.error .field input[type="number"],
 .ui.form .fields.error .field input[type="password"],
+.ui.form .fields.error .field input[type="search"],
 .ui.form .fields.error .field input[type="tel"],
 .ui.form .fields.error .field input[type="time"],
 .ui.form .fields.error .field input[type="text"],
@@ -376,6 +380,7 @@
 .ui.form .field.error input[type="email"],
 .ui.form .field.error input[type="number"],
 .ui.form .field.error input[type="password"],
+.ui.form .field.error input[type="search"],
 .ui.form .field.error input[type="tel"],
 .ui.form .field.error input[type="time"],
 .ui.form .field.error input[type="text"],
@@ -393,6 +398,7 @@
 .ui.form .field.error input[type="email"]:focus,
 .ui.form .field.error input[type="number"]:focus,
 .ui.form .field.error input[type="password"]:focus,
+.ui.form .field.error input[type="search"]:focus,
 .ui.form .field.error input[type="tel"]:focus,
 .ui.form .field.error input[type="time"]:focus,
 .ui.form .field.error input[type="text"]:focus,

src/definitions/modules/dropdown.js

@@ -456,6 +456,7 @@ $.fn.dropdown = function(parameters) {
           ;
           if(hasSelected) {
             module.event.item.click.call($selectedItem);
+            module.remove.filteredItem();
           }
         },
 

src/definitions/modules/dropdown.less

@@ -395,6 +395,14 @@ select.ui.dropdown {
   display: none;
 }
 
+
+/* Scrollbar in IE */
+@media all and (-ms-high-contrast:none) {
+  .ui.selection.dropdown .menu {
+    min-width: calc(100% - @scrollBarWidth);
+  }
+}
+
 @media only screen and (max-width : @largestMobileScreen) {
   .ui.selection.dropdown .menu {
     max-height: @selectionMobileMaxMenuHeight;

src/definitions/modules/transition.js

@@ -187,7 +187,7 @@ $.fn.transition = function() {
 
         reset: function() {
           module.debug('Resetting animation to beginning conditions');
-          module.remove.animationEndCallback();
+          module.remove.animationCallbacks();
           module.restore.conditions();
           module.remove.animating();
         },
@@ -196,7 +196,7 @@ $.fn.transition = function() {
           module.debug('Queueing animation of', animation);
           module.queuing = true;
           $module
-            .one(animationEnd + eventNamespace, function() {
+            .one(animationEnd + '.queue' + eventNamespace, function() {
               module.queuing = false;
               module.repaint();
               module.animate.apply(this, settings);
@@ -206,7 +206,7 @@ $.fn.transition = function() {
 
         complete: function (event) {
           module.verbose('CSS animation complete', settings.animation);
-          module.remove.animationEndCallback();
+          module.remove.completeCallback();
           module.remove.failSafe();
           if(!module.is.looping()) {
             if( module.is.outward() ) {
@@ -219,7 +219,6 @@ $.fn.transition = function() {
               module.verbose('Animation is outward, showing element');
               module.restore.conditions();
               module.show();
-              module.set.display();
               settings.onShow.call(this);
             }
             else {
@@ -262,7 +261,7 @@ $.fn.transition = function() {
               module.save.conditions();
             }
             module.remove.direction();
-            module.remove.animationEndCallback();
+            module.remove.completeCallback();
             if(module.can.transition() && !module.has.direction()) {
               module.set.direction();
             }
@@ -393,11 +392,13 @@ $.fn.transition = function() {
               $module.removeAttr('class');
             }
             if(module.cache.style) {
+              console.log(module.cache.style);
               module.verbose('Restoring original style attribute', module.cache.style);
               $module.attr('style', module.cache.style);
             }
-            if(module.is.looping()) {
-              module.remove.looping();
+            else {
+              module.verbose('Clearing style attribute');
+              $module.removeAttr('style');
             }
             module.verbose('Restoring original attributes', module.cache);
           }
@@ -430,8 +431,15 @@ $.fn.transition = function() {
               })
             ;
           },
-          animationEndCallback: function() {
-            $module.off('.complete');
+          animationCallbacks: function() {
+            module.remove.queueCallback();
+            module.remove.completeCallback();
+          },
+          queueCallback: function() {
+            $module.off('.queue' + eventNamespace)
+          },
+          completeCallback: function() {
+            $module.off('.complete' + eventNamespace);
           },
           display: function() {
             $module.css('display', '');
@@ -456,10 +464,12 @@ $.fn.transition = function() {
           },
           looping: function() {
             module.debug('Transitions are no longer looping');
-            $module
-              .removeClass(className.looping)
-            ;
-            module.forceRepaint();
+            if( module.is.looping() ) {
+              module.reset();
+              $module
+                .removeClass(className.looping)
+              ;
+            }
           },
           transition: function() {
             $module
@@ -660,6 +670,8 @@ $.fn.transition = function() {
                 .css('display')
               ;
               module.verbose('Determining final display state', displayType);
+              module.save.displayType(displayType);
+
               $clone.remove();
               if(currentAnimation != inAnimation) {
                 module.debug('Direction exists for animation', animation);
@@ -673,7 +685,6 @@ $.fn.transition = function() {
                 module.debug('Static animation found', animation, displayType);
                 directionExists = false;
               }
-              module.save.displayType(displayType);
               module.save.transitionExists(animation, directionExists);
             }
             return (transitionExists !== undefined)
@@ -731,24 +742,47 @@ $.fn.transition = function() {
           module.verbose('Showing element', display);
           module.remove.hidden();
           module.set.visible();
+          module.set.display();
           module.repaint();
         },
 
-        start: function() {
+        toggle: function() {
+          if( module.is.visible() ) {
+            module.hide();
+          }
+          else {
+            module.show();
+          }
+        },
+
+        stop: function() {
+          module.debug('Stopping current animation');
+          $module.trigger(animationEnd);
+        },
+
+        stopAll: function() {
+          module.debug('Stopping all animation');
+          module.remove.queueCallback();
+          $module.trigger(animationEnd);
+        },
+
+        clear: {
+          queue: function() {
+            module.debug('Clearing animation queue')
+            module.remove.queueCallback();
+          }
+        },
+
+        enable: function() {
           module.verbose('Starting animation');
           $module.removeClass(className.disabled);
         },
 
-        stop: function() {
+        disable: function() {
           module.debug('Stopping animation');
           $module.addClass(className.disabled);
         },
 
-        toggle: function() {
-          module.debug('Toggling play status');
-          $module.toggleClass(className.disabled);
-        },
-
         setting: function(name, value) {
           module.debug('Changing setting', name, value);
           if( $.isPlainObject(name) ) {

src/themes/default/globals/site.variables

@@ -374,6 +374,9 @@
     Derived Values
 --------------------*/
 
+/* Rendered Scrollbar Width */
+@scrollBarWidth: 15px;
+
 /* Header Spacing */
 @headerLineHeightOffset : (@lineHeight - 1em) / 2;
 @headerTopMargin        : ~"calc(2rem - "@lineHeightOffset~")";

src/themes/default/modules/transition.overrides

@@ -14,6 +14,9 @@
      Browse
 ---------------*/
 
+.transition.browse {
+  animation-duration: 500ms;
+}
 .transition.browse.in {
   animation-name: browseIn;
 }
@@ -92,7 +95,7 @@
 
 .drop.transition {
   transform-origin: top center;
-  animation-duration: 0.5s;
+  animation-duration: 500ms;
   animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
 .drop.transition.in {
@@ -266,6 +269,7 @@
 
 .flip.transition.in,
 .flip.transition.out {
+  animation-duration: 600ms;
   perspective: 2000px;
 }
 .horizontal.flip.transition.in {
@@ -653,39 +657,42 @@
      Swing
 ---------------*/
 
-.transition.swing.in,
+.transition.swing {
+  animation-duration: 800ms;
+}
+
 .transition[class*="swing down"].in {
-  animation-name: swingInY;
+  animation-name: swingInX;
   transform-origin: top center;
 }
 .transition[class*="swing up"].in {
-  animation-name: swingInY;
+  animation-name: swingInX;
   transform-origin: bottom center;
 }
 .transition[class*="swing left"].in {
-  animation-name: swingInX;
+  animation-name: swingInY;
   transform-origin: center right;
 }
 .transition[class*="swing right"].in {
-  animation-name: swingInX;
+  animation-name: swingInY;
   transform-origin: center left;
 }
 
 .transition.swing.out,
 .transition[class*="swing down"].out {
-  animation-name: swingOutY;
+  animation-name: swingOutX;
   transform-origin: top center;
 }
 .transition[class*="swing up"].out {
-  animation-name: swingOutY;
+  animation-name: swingOutX;
   transform-origin: bottom center;
 }
 .transition[class*="swing left"].out {
-  animation-name: swingOutX;
+  animation-name: swingOutY;
   transform-origin: center right;
 }
 .transition[class*="swing right"].out {
-  animation-name: swingOutX;
+  animation-name: swingOutY;
   transform-origin: center left;
 }
 
@@ -696,14 +703,14 @@
     opacity: 0;
   }
   40% {
-    transform: perspective(1000px) rotateX(-20deg);
+    transform: perspective(1000px) rotateX(-30deg);
+    opacity: 1;
   }
   60% {
-    transform: perspective(1000px) rotateX(10deg);
+    transform: perspective(1000px) rotateX(15deg);
   }
   80% {
-    transform: perspective(1000px) rotateX(-5deg);
-    opacity: 1;
+    transform: perspective(1000px) rotateX(-7.5deg);
   }
   100% {
     transform: perspective(1000px) rotateX(0deg);
@@ -715,14 +722,14 @@
     opacity: 0;
   }
   40% {
-    transform: perspective(1000px) rotateY(20deg);
+    transform: perspective(1000px) rotateY(30deg);
+    opacity: 1;
   }
   60% {
-    transform: perspective(1000px) rotateY(-10deg);
+    transform: perspective(1000px) rotateY(-17.5deg);
   }
   80% {
-    transform: perspective(1000px) rotateY(5deg);
-    opacity: 1;
+    transform: perspective(1000px) rotateY(7.5deg);
   }
   100% {
     transform: perspective(1000px) rotateY(0deg);
@@ -730,59 +737,46 @@
 }
 
 /* Out */
-@keyframes swingOutUp {
+@keyframes swingOutX {
   0% {
     transform: perspective(1000px) rotateX(0deg);
   }
-  30% {
-    transform: perspective(1000px) rotateX(-20deg);
-    opacity:1;
-  }
-  100% {
-    transform: perspective(1000px) rotateX(90deg);
-    opacity: 0;
+  40% {
+    transform: perspective(1000px) rotateX(-7.5deg);
   }
-}
-@keyframes swingOutDown {
-  0% {
-    transform: perspective(1000px) rotateX(0deg);
+  60% {
+    transform: perspective(1000px) rotateX(17.5deg);
   }
-  30% {
-    transform: perspective(1000px) rotateX(20deg);
-    opacity:1;
+  80% {
+    transform: perspective(1000px) rotateX(-30deg);
+    opacity: 1;
   }
   100% {
-    transform: perspective(1000px) rotateX(-90deg);
+    transform: perspective(1000px) rotateX(90deg);
     opacity: 0;
   }
 }
-@keyframes swingOutLeft {
+@keyframes swingOutY {
   0% {
     transform: perspective(1000px) rotateY(0deg);
   }
-  30% {
-    transform: perspective(1000px) rotateY(20deg);
-    opacity:1;
-  }
-  100% {
-    transform: perspective(1000px) rotateY(-90deg);
-    opacity: 0;
+  40% {
+    transform: perspective(1000px) rotateY(7.5deg);
   }
-}
-@keyframes swingOutRight {
-  0% {
-    transform: perspective(1000px) rotateY(0deg);
+  60% {
+    transform: perspective(1000px) rotateY(-10deg);
   }
-  30% {
-    transform: perspective(1000px) rotateY(-20deg);
-    opacity:1;
+  80% {
+    transform: perspective(1000px) rotateY(30deg);
+    opacity: 1;
   }
   100% {
-    transform: perspective(1000px) rotateY(90deg);
+    transform: perspective(1000px) rotateY(-90deg);
     opacity: 0;
   }
 }
 
+
 /*******************************
        Static Animations
 *******************************/
@@ -792,21 +786,27 @@
 ---------------*/
 
 .flash.transition {
+  animation-duration: 750ms;
   animation-name: flash;
 }
 .shake.transition {
+  animation-duration: 750ms;
   animation-name: shake;
 }
 .bounce.transition {
+  animation-duration: 750ms;
   animation-name: bounce;
 }
 .tada.transition {
+  animation-duration: 750ms;
   animation-name: tada;
 }
 .pulse.transition {
+  animation-duration: 500ms;
   animation-name: pulse;
 }
 .jiggle.transition {
+  animation-duration: 750ms;
   animation-name: jiggle;
 }