Introduce .transition mixin

Cleanup existing transition rules for readability

Change-Id: I2be09a7a8e7eeb42d8bf80cb033c81867da108a5

diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less
index 8c9b825..cca5af4 100644 (file)
--- a/resources/mediawiki.less/mediawiki.mixins.less
+++ b/resources/mediawiki.less/mediawiki.mixins.less
@@ -37,3 +37,10 @@
 .list-style-image(@url) when not (embeddable(@url)) {
        list-style-image: url(@url);
 }
+
+.transition( ... ) {
+       -moz-transition: @arguments;
+       -webkit-transition: @arguments;
+       -o-transition: @arguments;
+       transition: @arguments;
+}

diff --git a/skins/vector/screen.less b/skins/vector/screen.less
index cccdd7a..e00bcef 100644 (file)
--- a/skins/vector/screen.less
+++ b/skins/vector/screen.less
@@ -779,42 +779,25 @@ div.vectorTabs ul {
 }
 
 /* Animate between standard and high definition layouts */
-
-body.vector-animateLayout div#content,
-body.vector-animateLayout div#footer,
-body.vector-animateLayout #left-navigation {
-       -moz-transition: margin-left 250ms, padding 250ms;
-       -webkit-transition: margin-left 250ms, padding 250ms;
-       -o-transition: margin-left 250ms, padding 250ms;
-       transition: margin-left 250ms, padding 250ms;
-}
-body.vector-animateLayout #p-logo {
-       -moz-transition: left 250ms;
-       -webkit-transition: left 250ms;
-       -o-transition: left 250ms;
-       transition: left 250ms;
-}
-body.vector-animateLayout #mw-panel {
-       -moz-transition: padding-left 250ms;
-       -webkit-transition: padding-left 250ms;
-       -o-transition: padding-left 250ms;
-       transition: padding-left 250ms;
-}
-body.vector-animateLayout #p-search {
-       -moz-transition: margin-right 250ms;
-       -webkit-transition: margin-right 250ms;
-       -o-transition: margin-right 250ms;
-       transition: margin-right 250ms;
-}
-body.vector-animateLayout #p-personal {
-       -moz-transition: right 250ms;
-       -webkit-transition: right 250ms;
-       -o-transition: right 250ms;
-       transition: right 250ms;
-}
-body.vector-animateLayout #mw-head-base {
-       -moz-transition: margin-left 250ms;
-       -webkit-transition: margin-left 250ms;
-       -o-transition: margin-left 250ms;
-       transition: margin-left 250ms;
+body.vector-animateLayout {
+       div#content,
+       div#footer,
+       #left-navigation {
+               .transition( margin-left 250ms, padding 250ms );
+       }
+       #p-logo {
+               .transition( 'left 250ms' );
+       }
+       #mw-panel {
+               .transition( padding-right 250ms );
+       }
+       #p-search {
+               .transition( margin-right 250ms );
+       }
+       #p-personal {
+               .transition( right 250ms );
+       }
+       #mw-head-base {
+               .transition( margin-left 250ms );
+       }
 }