Krinkle has uploaded a new change for review.
https://gerrit.wikimedia.org/r/235838
Change subject: Use 'ease' instead of 'ease-in-out' for CSS transitions
......................................................................
Use 'ease' instead of 'ease-in-out' for CSS transitions
Timing 'ease' means both ease-in and ease-out, similar to ease-in-out.
However their implementation is slightly different.
The 'ease' timing is faster in the beginning than then end.
The "ease-in-out" timing on the other hand has the same curve for
both 'in' and 'out'.
Using 'ease' makes for a slightly more responsive experience.
Change-Id: I81f2208258057d1d958d28919866d7bb7133d665
---
M src/styles/layouts/MenuLayout.less
M src/themes/apex/elements.less
M src/themes/apex/tools.less
M src/themes/apex/widgets.less
M src/themes/apex/windows.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/windows.less
7 files changed, 14 insertions(+), 16 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/38/235838/1
diff --git a/src/styles/layouts/MenuLayout.less
b/src/styles/layouts/MenuLayout.less
index dec2753..f66ef1c 100644
--- a/src/styles/layouts/MenuLayout.less
+++ b/src/styles/layouts/MenuLayout.less
@@ -10,7 +10,7 @@
&-menu,
&-content {
position: absolute;
- .oo-ui-transition(all 200ms ease-in-out);
+ .oo-ui-transition(all 200ms ease);
}
// These are overridden with 'auto' or '0' later
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index 3866c82..a9321e3 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -33,7 +33,7 @@
> .oo-ui-buttonElement-button {
> .oo-ui-iconElement-icon {
/* Don't animate opacities for now, causes
wiggling in Chrome (bug 63020) */
- /*.oo-ui-transition(opacity 200ms
ease-in-out);*/
+ /*.oo-ui-transition(opacity 200ms ease);*/
}
&:hover,
@@ -103,7 +103,7 @@
border-radius: 0.3em;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
border: 1px #c9c9c9 solid;
- .oo-ui-transition(border-color 100ms ease-in-out);
+ .oo-ui-transition(border-color 100ms ease);
.oo-ui-vertical-gradient(#fff, #ddd);
&:hover,
diff --git a/src/themes/apex/tools.less b/src/themes/apex/tools.less
index 5cd2829..67a61c0 100644
--- a/src/themes/apex/tools.less
+++ b/src/themes/apex/tools.less
@@ -41,7 +41,7 @@
bottom: -9px;
height: 9px;
opacity: 0.5;
- .oo-ui-transition(opacity 500ms ease-in-out);
+ .oo-ui-transition(opacity 500ms ease);
}
}
@@ -94,7 +94,7 @@
margin: 0.375em;
border-radius: 0.3125em;
border: 1px solid transparent;
- .oo-ui-transition(border-color 300ms ease-in-out);
+ .oo-ui-transition(border-color 300ms ease);
.oo-ui-toolbar-narrow & {
+ .oo-ui-toolGroup {
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 975e539..738964c 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -369,7 +369,7 @@
border: 1px solid #ccc;
box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
border-radius: 0.25em;
- .oo-ui-transition(border-color 200ms ease-in-out, box-shadow
200ms ease-in-out);
+ .oo-ui-transition(border-color 200ms ease, box-shadow 200ms
ease);
&.oo-ui-pendingElement-pending {
background-color: transparent;
@@ -895,9 +895,7 @@
}
&-transitioning .oo-ui-popupWidget-popup {
- .oo-ui-transition(
- width 100ms ease-in-out, height 100ms ease-in-out, left
100ms ease-in-out
- );
+ .oo-ui-transition(width 100ms ease, height 100ms ease, left
100ms ease);
}
&-head {
@@ -1034,7 +1032,7 @@
box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
border: 1px #c9c9c9 solid;
- .oo-ui-transition(left 200ms ease-in-out, margin-left 200ms
ease-in-out);
+ .oo-ui-transition(left 200ms ease, margin-left 200ms ease);
.oo-ui-vertical-gradient(#fff, #ddd);
}
@@ -1049,7 +1047,7 @@
border-radius: 1em;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
- .oo-ui-transition(opacity 200ms ease-in-out);
+ .oo-ui-transition(opacity 200ms ease);
.oo-ui-vertical-gradient(#b0d9ee, #eaf4fa);
}
diff --git a/src/themes/apex/windows.less b/src/themes/apex/windows.less
index b3ec52a..e2905bd 100644
--- a/src/themes/apex/windows.less
+++ b/src/themes/apex/windows.less
@@ -284,7 +284,7 @@
background-color: rgba(255,255,255,0.5);
opacity: 0;
- .oo-ui-transition(opacity 250ms ease-in-out);
+ .oo-ui-transition(opacity 250ms ease);
> .oo-ui-window-frame {
top: 1em;
@@ -293,7 +293,7 @@
opacity: 0;
.oo-ui-transform(scale(0.5));
- .oo-ui-transition(all 250ms ease-in-out);
+ .oo-ui-transition(all 250ms ease);
}
&.oo-ui-window-ready {
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index ab63c02..142d679 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -46,7 +46,7 @@
@indicator-size: unit(12 / 16 / 0.8, em);
// Theme animation variables
-@quick-ease: 0.1s ease-in-out;
+@quick-ease: 0.1s ease;
@medium-ease-out-back: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@medium-ease-out-sine: 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
diff --git a/src/themes/mediawiki/windows.less
b/src/themes/mediawiki/windows.less
index 06f89e5..8a3a2c8 100644
--- a/src/themes/mediawiki/windows.less
+++ b/src/themes/mediawiki/windows.less
@@ -277,7 +277,7 @@
background-color: rgba(255,255,255,0.5);
opacity: 0;
- .oo-ui-transition(opacity 250ms ease-in-out);
+ .oo-ui-transition(opacity 250ms ease);
> .oo-ui-window-frame {
top: 1em;
@@ -286,7 +286,7 @@
opacity: 0;
.oo-ui-transform(scale(0.5));
- .oo-ui-transition(all 250ms ease-in-out);
+ .oo-ui-transition(all 250ms ease);
}
&.oo-ui-window-ready {
--
To view, visit https://gerrit.wikimedia.org/r/235838
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I81f2208258057d1d958d28919866d7bb7133d665
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Krinkle <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
