jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Replacing Less mixin calls of `.transition()`, deprecated
since MW 1.37, with CSS property, but constituent properties.
This has been an outcome of recent discussions around design tokens,
which will be simpler to define, more modular, and better scoped. See
T304443 for further information.
Also clarifying, aligning comments.

Bug: T308351
Change-Id: Iab9d04c9a9f31f3842d076ce8fd8bf6e3534fc89
This commit is contained in:
Volker E 2022-05-13 12:41:15 -07:00 committed by VolkerE
parent 8038c2e545
commit 2adab440a5
7 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/common/components/MenuDropdown.less
View File

@ -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;
}

3
resources/common/components/SearchBox.less
View File

@ -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.

4
resources/skins.vector.js/skin.js
View File

@ -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;
* }
* ```
*

12
resources/skins.vector.styles/components/Sidebar.less
View File

@ -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;
}
}

2
resources/skins.vector.styles/components/VueEnhancedSearchBox.less
View File

@ -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 {

5
resources/skins.vector.styles/components/checkboxHack.less
View File

@ -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% ) );
// }
//

2
resources/skins.vector.styles/layouts/screen.less
View File

@ -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;
}
}