diff --git a/README.md b/README.md index f68b021a0..9f5944941 100644 --- a/README.md +++ b/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 diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 45d953cde..d98ff906f 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 65930aab5..296136bf2 100755 --- a/src/definitions/collections/form.less +++ b/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, diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 6c747164b..95049f7e9 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -456,6 +456,7 @@ $.fn.dropdown = function(parameters) { ; if(hasSelected) { module.event.item.click.call($selectedItem); + module.remove.filteredItem(); } }, diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 2585dd485..b5be85c15 100755 --- a/src/definitions/modules/dropdown.less +++ b/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; diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 0c8e1beee..ace7b0034 100644 --- a/src/definitions/modules/transition.js +++ b/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) ) { diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 6b9b33de6..dce24400e 100644 --- a/src/themes/default/globals/site.variables +++ b/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~")"; diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index ac4856b6d..c41566d31 100644 --- a/src/themes/default/modules/transition.overrides +++ b/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; }