mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 07:43:47 +00:00
Merge "styles: Replace deprecated Less .transition()
mixin with standard CSS"
This commit is contained in:
commit
dc2b25ac65
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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;
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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% ) );
|
||||
// }
|
||||
//
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue