From 99c92a87fc32fb897da320dd12b391a0d9be12c7 Mon Sep 17 00:00:00 2001
From: jrobson <jrobson@wikimedia.org>
Date: Tue, 1 Oct 2013 18:02:56 -0700
Subject: [PATCH] Introduce .transition mixin

Cleanup existing transition rules for readability

Change-Id: I2be09a7a8e7eeb42d8bf80cb033c81867da108a5
---
 .../mediawiki.less/mediawiki.mixins.less      |  7 +++
 skins/vector/screen.less                      | 59 +++++++------------
 2 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less
index 8c9b825f32..cca5af40fe 100644
--- 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 cccdd7a9ac..e00bcef1db 100644
--- 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 );
+	}
 }
-- 
2.20.1