From 867415d39fa66e19298cbb6b65bf98b9bd90ae64 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 25 Feb 2015 11:04:46 -0500 Subject: [PATCH 01/10] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) 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 From ba2b4e3914e9e3f9041deb7d95863cce5be2176f Mon Sep 17 00:00:00 2001 From: Rita Zerrizuela Date: Thu, 26 Feb 2015 11:42:24 -0300 Subject: [PATCH 02/10] Fixed #1831 See it in action here http://jsfiddle.net/wwx7ez74/4/ with IE10+ --- src/definitions/modules/dropdown.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 2585dd485..8ab4a3d61 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -395,6 +395,12 @@ select.ui.dropdown { display: none; } +@media all and (-ms-high-contrast:none) { + .ui.selection.dropdown .menu { + min-width: calc(100% - 15px); + } +} + @media only screen and (max-width : @largestMobileScreen) { .ui.selection.dropdown .menu { max-height: @selectionMobileMaxMenuHeight; From 835b7555dcaf5ea2b071febc27666660dfb062a8 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 11:36:49 -0500 Subject: [PATCH 03/10] Adds #1873, stop, stop all, clear queue --- RELEASE-NOTES.md | 1 + src/definitions/modules/transition.js | 41 +++++++++++++++++++++------ 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index c2a8a0399..5140f2708 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -8,6 +8,7 @@ **Enhancements** - **Loader** - `inline loader` now has a `centered` variation +- **Transition** - transition now has `stop`, `stop all`, and `clear queue` for removing transitions, (undocumented method `stop`, and `start` renamed to `enable` and `disable`) **Bugs** - **Menu** - Fix vertical pointing menu, sub menu arrow color diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 0c8e1beee..cfd735968 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() ) { @@ -262,7 +262,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(); } @@ -430,8 +430,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', ''); @@ -734,12 +741,30 @@ $.fn.transition = function() { module.repaint(); }, - start: function() { + stop: function() { + module.debug('Stopping current animation'); + module.complete(); + }, + + stopAll: function() { + module.debug('Stopping all animation'); + module.remove.animationCallbacks(); + module.complete(); + }, + + 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); }, From 972bda8756e5cf4daeefcbcf0a6b8cd7a3f67da7 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 11:48:35 -0500 Subject: [PATCH 04/10] Adds #1874 Search input styles added to form --- src/definitions/collections/form.less | 6 ++++++ 1 file changed, 6 insertions(+) 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, From d36f38a55fbf13d4ffc9ddd8c23de86c75d6f287 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 11:50:26 -0500 Subject: [PATCH 05/10] #1831 #1875 Adds scrollbar size to global variables --- src/themes/default/globals/site.variables | 3 +++ 1 file changed, 3 insertions(+) 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~")"; From f891852d09dc418f3de5cda8e892a545ba54c8af Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 11:53:46 -0500 Subject: [PATCH 06/10] Adds variable into def for scrollbar #1875 #1831 --- src/definitions/modules/dropdown.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 8ab4a3d61..2c4dddf60 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -395,10 +395,12 @@ select.ui.dropdown { display: none; } + +/* Scrollbar in IE */ @media all and (-ms-high-contrast:none) { .ui.selection.dropdown .menu { - min-width: calc(100% - 15px); - } + min-width: calc(100% - @scrollbarWidth); + } } @media only screen and (max-width : @largestMobileScreen) { From ecc3c8a3e04610c919510120f6465d958e9263ef Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 13:02:33 -0500 Subject: [PATCH 07/10] Calling show without animation now sets display type --- RELEASE-NOTES.md | 6 +++++- src/definitions/modules/transition.js | 27 ++++++++++++++++----------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 5140f2708..4c6018cba 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -8,13 +8,17 @@ **Enhancements** - **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** +- **Transition** - Fixed display state other than `block` not determined when using `show` and `hide` without an animation - **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/modules/transition.js b/src/definitions/modules/transition.js index cfd735968..41188f24d 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -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 { @@ -436,7 +435,7 @@ $.fn.transition = function() { }, queueCallback: function() { $module.off('.queue' + eventNamespace) - } + }, completeCallback: function() { $module.off('.complete' + eventNamespace); }, @@ -667,6 +666,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); @@ -680,7 +681,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) @@ -738,18 +738,28 @@ $.fn.transition = function() { module.verbose('Showing element', display); module.remove.hidden(); module.set.visible(); + module.set.display(); module.repaint(); }, + toggle: function() { + if( module.is.visible() ) { + module.hide(); + } + else { + module.show(); + } + }, + stop: function() { module.debug('Stopping current animation'); - module.complete(); + $module.trigger(animationEnd); }, stopAll: function() { module.debug('Stopping all animation'); - module.remove.animationCallbacks(); - module.complete(); + module.remove.queueCallback(); + $module.trigger(animationEnd); }, clear: { @@ -769,11 +779,6 @@ $.fn.transition = function() { $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) ) { From 28c81f5801f85e416740ef8d911a3b3d9d7036ef Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 13:45:48 -0500 Subject: [PATCH 08/10] Bug fixes for transition --- RELEASE-NOTES.md | 3 + src/definitions/modules/transition.js | 1 + .../default/modules/transition.overrides | 100 +++++++++--------- 3 files changed, 54 insertions(+), 50 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 4c6018cba..8308623b6 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -7,12 +7,15 @@ - **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** +- **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** +- **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 one additional animation - **Menu** - Fix vertical pointing menu, sub menu arrow color - **Item ** - `img` inside of `ui item content` now do not receive size formatting by default - **Form** - Added `input[type="search"]` styles to `ui form` diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 41188f24d..254411409 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -465,6 +465,7 @@ $.fn.transition = function() { $module .removeClass(className.looping) ; + module.reset(); module.forceRepaint(); }, transition: function() { diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index ac4856b6d..a8b9d61af 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: 750ms; 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; } From 9f1c172bcf6b657eeabdc1333e9123d7da68ff4c Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 15:53:24 -0500 Subject: [PATCH 09/10] Fixes #1867, issue with forceSelection not clearing filter --- src/definitions/modules/dropdown.js | 1 + src/definitions/modules/dropdown.less | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) 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 2c4dddf60..b5be85c15 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -399,7 +399,7 @@ select.ui.dropdown { /* Scrollbar in IE */ @media all and (-ms-high-contrast:none) { .ui.selection.dropdown .menu { - min-width: calc(100% - @scrollbarWidth); + min-width: calc(100% - @scrollBarWidth); } } From 089bf334009ff145f09bdf23e1584dba312f9938 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Feb 2015 15:55:01 -0500 Subject: [PATCH 10/10] Slight modification to remove looping --- RELEASE-NOTES.md | 4 ++-- src/definitions/modules/transition.js | 17 ++++++++++------- src/themes/default/modules/transition.overrides | 2 +- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 8308623b6..d4af989e1 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -3,7 +3,6 @@ ### 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** @@ -13,9 +12,10 @@ - **Transition** - transition now has `stop`, `stop all`, and `clear queue` for removing transitions, (undocumented method `stop`, and `start` renamed to `enable` and `disable`) **Bugs** +- **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 one additional 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 size formatting by default - **Form** - Added `input[type="search"]` styles to `ui form` diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 254411409..ace7b0034 100644 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -392,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); } @@ -462,11 +464,12 @@ $.fn.transition = function() { }, looping: function() { module.debug('Transitions are no longer looping'); - $module - .removeClass(className.looping) - ; - module.reset(); - module.forceRepaint(); + if( module.is.looping() ) { + module.reset(); + $module + .removeClass(className.looping) + ; + } }, transition: function() { $module diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides index a8b9d61af..c41566d31 100644 --- a/src/themes/default/modules/transition.overrides +++ b/src/themes/default/modules/transition.overrides @@ -269,7 +269,7 @@ .flip.transition.in, .flip.transition.out { - animation-duration: 750ms; + animation-duration: 600ms; perspective: 2000px; } .horizontal.flip.transition.in {