Make .transition mixin take only 1 value and fix usage

Follows-up 99c92a87fc which turned
  transition: left 250ms;
  transition: margin-left 250ms, padding 250ms
into:
  transition: 'left 250ms';
  transition: margin-left 250ms padding 250ms
  > Invalid CSS property value: 'left 250ms'
  > Invalid CSS property value: margin-left 250ms padding 250ms

Removed quotes from 'left 250ms' which was producing invalid CSS.

The @arguments operator in Less joins a variadic list of
arguments by space. In the case of .transition this is a problem
because its values are supposed to be separated by a comma
(like background-image and font-family).

Changing the .transition definition to take only 1 argument
instead of multiple (...). There is no point in supporting
multiple arguments. All it does is it take away our ability to
spot these errors at parse time (Less would be able to throw an
error for passing a 2 arguments to a mixin that only takes 1).

Fixed the invocation with 2 arguments to instead pass 1 argument
that has a comma in it. Both "~'a,b'" and "a, b;" would work here
(doesn't matter) choosing ; here because for consistency with calls
that do use mutiple argments:
 foo(~'foo, bar', ~'baz, quux')
 foo(foo, bar; baz, quux)

Change-Id: I80786c726a412d6b9e04c384112849e9587990b4

diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less
index cca5af4..19a715b 100644 (file)
--- a/resources/mediawiki.less/mediawiki.mixins.less
+++ b/resources/mediawiki.less/mediawiki.mixins.less
@@ -38,9 +38,9 @@
        list-style-image: url(@url);
 }
 
-.transition( ... ) {
-       -moz-transition: @arguments;
-       -webkit-transition: @arguments;
-       -o-transition: @arguments;
-       transition: @arguments;
+.transition(@string) {
+       -webkit-transition: @string;
+       -moz-transition: @string;
+       -o-transition: @string;
+       transition: @string;
 }

diff --git a/skins/vector/screen.less b/skins/vector/screen.less
index e00bcef..0b65627 100644 (file)
--- a/skins/vector/screen.less
+++ b/skins/vector/screen.less
@@ -783,10 +783,10 @@ body.vector-animateLayout {
        div#content,
        div#footer,
        #left-navigation {
-               .transition( margin-left 250ms, padding 250ms );
+               .transition( margin-left 250ms, padding 250ms; );
        }
        #p-logo {
-               .transition( 'left 250ms' );
+               .transition( left 250ms );
        }
        #mw-panel {
                .transition( padding-right 250ms );