Merge "styles: Replace deprecated Less `.transition()` mixin with standard CSS"

resources/common/components/MenuDropdown.less

@@ -56,7 +56,8 @@
 		text-align: left;
 		opacity: 0;
 		visibility: hidden;
-		.transition( opacity 100ms );
+		transition-property: opacity;
+		transition-duration: 100ms;
 		z-index: @z-index-menu;
 	}
 

resources/common/components/SearchBox.less

@@ -28,7 +28,8 @@
 	font-family: inherit;
 	font-size: @font-size-search-input;
 	direction: ltr;
-	.transition( ~'border-color 250ms, box-shadow 250ms' );
+	transition-property: border-color, box-shadow;
+	transition-duration: 250ms;
 
 	// Undo the proprietary styles, we provide our own.
 	// Support: Safari/iOS `none` needed, Chrome would accept `textfield` as well. See T247299.

resources/skins.vector.js/skin.js

@@ -22,9 +22,9 @@ var languageButton = require( './languageButton.js' ),
  * }
  *
  * // This transition will be disabled initially for JavaScript users. It will never be enabled for
- * // no-JS users.
+ * // non-JavaScript users.
  * .vector-animations-ready .foo {
- *     .transition( transform 100ms ease-out; );
+ *     transition: transform 100ms ease-out;
  * }
  * ```
  *

resources/skins.vector.styles/components/Sidebar.less

@@ -165,8 +165,9 @@
 .vector-animations-ready {
 	// Enable transition on all widths by default.
 	.mw-sidebar {
-		@timing: @transition-duration-base ease-out;
-		.transition( transform @timing, opacity @timing, visibility @timing; );
+		transition-property: transform, opacity, visibility;
+		transition-duration: @transition-duration-base;
+		transition-timing-function: ease-out;
 	}
 
 	@media ( max-width: @width-breakpoint-tablet ) {
@@ -177,10 +178,7 @@
 
 	// Enable sidebar button transitions.
 	#mw-sidebar-button {
-		.transition(
-			background-color @transition-duration-base,
-			border-color @transition-duration-base,
-			box-shadow @transition-duration-base;
-		);
+		transition-property: background-color, border-color, box-shadow;
+		transition-duration: @transition-duration-base;
 	}
 }

resources/skins.vector.styles/components/VueEnhancedSearchBox.less

@@ -86,7 +86,7 @@
 	// Reset WVUI. Prevents the input border from animating
 	// when it gets inserted into the DOM while being focused.
 	.wvui-input__input:not( [ disabled ] ) {
-		.transition( none );
+		transition: none;
 	}
 
 	&.vector-search-box-show-thumbnail {

resources/skins.vector.styles/components/checkboxHack.less

@@ -18,8 +18,9 @@
 //             // of this can be replaced with `display: none` instead to avoid hidden rendering.
 //             visibility: hidden;
 //             opacity: 0;
-//             @timing: @transition-duration-base ease-in-out;
-//             .transition( transform @timing, opacity @timing, visibility @timing; );
+//             transition-property: transform, opacity, visibility;
+//             transition-duration: @transition-duration-base;
+//             transition-timing-function: ease-in-out;
 //             .transform( translateX( -100% ) );
 //     }
 //

resources/skins.vector.styles/layouts/screen.less

@@ -333,7 +333,7 @@ body {
 	// Specificity needed to disable the default animations at lower resolutions.
 	.vector-animations-ready .mw-sidebar {
 		// Remove sidebar transition at smaller widths.
-		.transition( none );
+		transition: none;
 	}
 }