wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-24 06:13:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Unify transition values across board

Browse source 
Using newly introduced variables instead of fixed values.
Also adding `transition` to property blacklist to ensure using
mediawiki.mixin.

Bug: T236224
Change-Id: I3d2d05f4e50e7b6bba0fe84fae1dde5de5b75492
This commit is contained in:
Volker E 2019-10-22 21:50:47 -07:00
parent 6dd4142113
commit 19b1ea2297
6 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.stylelintrc.json
View file

@ -2,6 +2,7 @@
"extends": "stylelint-config-wikimedia",
"rules": {
"declaration-no-important": null,
"property-blacklist": "transition",
"selector-list-comma-newline-after": null,
"selector-max-id": null,
"value-keyword-case": null

2
components/ToggleList/DropDownList.less
View file

@ -15,7 +15,7 @@
// Animate menu visibility, opacity, and translation changes in and out. Visibility duration
// cannot be animated initially as it causes a flash on page load in Chromium due to
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189.
.transition( opacity .1s ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out; );
.transition( opacity @transition-duration-base ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform @transition-duration-base ease-in-out, visibility @transition-duration-base ease-in-out; );
}
}

2
resources/skins.minerva.base.styles/footer.less
View file

@ -46,10 +46,10 @@ footer {
border-bottom: solid 1px @footerBorderColor;
background-color: @lastModifiedBarBgColor;
color: @lastModifiedBarTextColor;
transition: background-color 0.2s ease, color 0.2s ease;
padding-top: @icon-padding-md;
padding-bottom: @icon-padding-md;
font-size: @font-size-minerva-small;
.transition( background-color @transition-duration-medium, color @transition-duration-medium; );
}
.last-modified-bar__text {

2
resources/skins.minerva.base.styles/ui.less
View file

@ -165,7 +165,7 @@ main {
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
// Keyboard focus is taken care of below at `.search-box .search:focus`.
outline: 0;
.transition( ~'border-color 250ms, box-shadow 250ms' );
.transition( border-color @transition-duration-medium, box-shadow @transition-duration-medium; );
}
// Provide focus styles only in non-JS and overlay to prevent double transition.

2
resources/skins.minerva.scripts/styles.less
View file

@ -17,7 +17,7 @@
z-index: @z-indexAboveContent;
// don't use display: none because it's not animatable
visibility: hidden;
.transition( opacity 0.25s ease-in-out );
.transition( opacity @transition-duration-base ease-in-out; );
}
.navigation-enabled {

13
skinStyles/mobile.startup/toast.less
View file

@ -52,7 +52,6 @@
.animations {
.mw-notification,
.drawer {
@duration: 0.25s;
display: block;
visibility: hidden;
/* we can't determine the actual size of the drawer in CSS, so this is
@ -68,18 +67,14 @@
&.animated, &.mw-notification-tag-toast {
// delay visibility transition to make other transitions visible
// http://fvsch.com/code/transition-fade/test5.html
// need to assign to a temporary variable to preserve commas
// https://github.com/leafo/lessphp/issues/105#issuecomment-2872598
@transition: @duration, opacity @duration, visibility 0s @duration, bottom 0s @duration;
.transition-transform( @transition );
// Use semi-colon if multiple arguments are needed.
// See https://stackoverflow.com/questions/11419741/less-css-mixins-with-variable-number-of-arguments
.transition-transform( @transition-duration-medium, opacity @transition-duration-medium, visibility 0s @transition-duration-medium, bottom 0s @transition-duration-medium; );
}
&.visible, &.mw-notification-visible {
bottom: 0;
// need to assign to a temporary variable to preserve commas
// https://github.com/leafo/lessphp/issues/105#issuecomment-2872598
@transition: @duration, opacity @duration;
.transition-transform( @transition );
.transition-transform( @transition-duration-medium, opacity @transition-duration-medium; );
visibility: visible;
opacity: 1;
.transform( translate( 0, 0 ) );