From 7e953bbeb6d2e443212a84f3413964ddd38d3db2 Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Tue, 8 Oct 2013 01:01:45 +0200 Subject: [PATCH] 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 --- resources/mediawiki.less/mediawiki.mixins.less | 10 +++++----- skins/vector/screen.less | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less index cca5af40fe..19a715b9ca 100644 --- 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 e00bcef1db..0b656270ea 100644 --- 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 ); -- 2.20.1