wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-23 15:16:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unnecessary vendor prefixes and mixins for animations

Browse source 
Deprecated in I8d62aedb.

Change-Id: Id951fd394a2336920eddbba08dcb1a153b67b9f3
This commit is contained in:
Ed Sanders 2022-06-09 17:22:19 +01:00
parent 8da9b6156b
commit 780627c126
6 changed files with 18 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.storybook/mocks/README.md
View file

@ -3,7 +3,6 @@
The following files:
- mediawiki.mixins
- mediawiki.mixins.animation
- mediawiki.mixins.less
are LESS files containing one-line imports that correspond to files in

2
.storybook/mocks/custom.less
View file

@ -26,12 +26,10 @@ body {
* NOTE: To test the animation, remove these rules.
*/
.mwe-popups-fade-in-up {
-webkit-animation: none;
animation: none;
}
.mwe-popups-fade-in-down {
-webkit-animation: none;
animation: none;
}

1
.storybook/storybook-resources.sh
View file

@ -7,7 +7,6 @@ curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector
# MediaWiki LESS mixins
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.less/mediawiki.mixins.less -o .storybook/mocks/mediawiki.mixins.less
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less -o .storybook/mocks/mediawiki.mixins.animation.less
# mediawiki.ui variables
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.less/mediawiki.ui/variables.less -o .storybook/mocks/mediawiki.ui/variables.less

47
src/ui/mixins.less
View file

@ -1,4 +1,3 @@
@import 'mediawiki.mixins.animation.less';
@import 'mediawiki.mixins.less';
/*
@ -35,42 +34,20 @@
left: @left;
}
.mwe-popups-translate( @x, @y ) {
-webkit-transform: translate( @x, @y );
-ms-transform: translate( @x, @y );
transform: translate( @x, @y );
}
/* FIXME: Use Phuedx's approach to make this cleaner
https://gist.github.com/phuedx/0639a279b6efb1a71474 */
@-webkit-keyframes mwe-popups-fade-in-up {
.mwe-popups-fade-in-up-frames;
}
@keyframes mwe-popups-fade-in-up {
.mwe-popups-fade-in-up-frames;
}
@-webkit-keyframes mwe-popups-fade-in-down {
.mwe-popups-fade-in-down-frames;
}
@keyframes mwe-popups-fade-in-down {
.mwe-popups-fade-in-down-frames;
}
@-webkit-keyframes mwe-popups-fade-out-down {
.mwe-popups-fade-out-down-frames;
}
@keyframes mwe-popups-fade-out-down {
.mwe-popups-fade-out-down-frames;
}
@-webkit-keyframes mwe-popups-fade-out-up {
.mwe-popups-fade-out-up-frames;
}
@keyframes mwe-popups-fade-out-up {
.mwe-popups-fade-out-up-frames;
}
@ -78,63 +55,63 @@
.mwe-popups-fade-in-up-frames() {
0% {
opacity: 0;
.mwe-popups-translate( 0, 20px );
transform: translate( 0, 20px );
}
100% {
opacity: 1;
.mwe-popups-translate( 0, 0 );
transform: translate( 0, 0 );
}
}
.mwe-popups-fade-in-down-frames() {
0% {
opacity: 0;
.mwe-popups-translate( 0, -20px );
transform: translate( 0, -20px );
}
100% {
opacity: 1;
.mwe-popups-translate( 0, 0 );
transform: translate( 0, 0 );
}
}
.mwe-popups-fade-out-down-frames() {
0% {
opacity: 1;
.mwe-popups-translate( 0, 0 );
transform: translate( 0, 0 );
}
100% {
opacity: 0;
.mwe-popups-translate( 0, 20px );
transform: translate( 0, 20px );
}
}
.mwe-popups-fade-out-up-frames() {
0% {
opacity: 1;
.mwe-popups-translate( 0, 0 );
transform: translate( 0, 0 );
}
100% {
opacity: 0;
.mwe-popups-translate( 0, -20px );
transform: translate( 0, -20px );
}
}
.mwe-popups-fade-in-up {
.animation( mwe-popups-fade-in-up, 0.2s, ease, forwards );
animation: mwe-popups-fade-in-up 0.2s ease forwards;
}
.mwe-popups-fade-in-down {
.animation( mwe-popups-fade-in-down, 0.2s, ease, forwards );
animation: mwe-popups-fade-in-down 0.2s ease forwards;
}
.mwe-popups-fade-out-down {
.animation( mwe-popups-fade-out-down, 0.2s, ease, forwards );
animation: mwe-popups-fade-out-down 0.2s ease forwards;
}
.mwe-popups-fade-out-up {
.animation( mwe-popups-fade-out-up, 0.2s, ease, forwards );
animation: mwe-popups-fade-out-up 0.2s ease forwards;
}

18
src/ui/templates/popup/popup.less
View file

@ -109,8 +109,6 @@
/* @noflip */
right: 0;
/* @noflip */
background-image: -webkit-linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
/* @noflip */
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
}
@ -118,8 +116,6 @@
/* @noflip */
left: 0;
/* @noflip */
background-image: -webkit-linear-gradient( to left, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
/* @noflip */
background-image: linear-gradient( to left, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
}
@ -129,8 +125,6 @@
/* @noflip */
bottom: 0;
/* @noflip */
background-image: -webkit-linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 75% );
/* @noflip */
background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 75% );
}
/* stylelint-enable function-linear-gradient-no-nonstandard-direction */
@ -364,36 +358,36 @@
// Position the SVG border
.mwe-popups-is-tall {
polyline {
.mwe-popups-translate( 0, 0 );
transform: translate( 0, 0 );
}
&.flipped-x-y {
polyline {
.mwe-popups-translate( 0, -8px );
transform: translate( 0, -8px );
}
}
&.flipped-x {
polyline {
.mwe-popups-translate( 0, 8px );
transform: translate( 0, 8px );
}
}
}
.rtl .mwe-popups-is-tall {
polyline {
.mwe-popups-translate( -100%, 0 );
transform: translate( -100%, 0 );
}
&.flipped-x-y {
polyline {
.mwe-popups-translate( -100%, -8px );
transform: translate( -100%, -8px );
}
}
&.flipped-x {
polyline {
.mwe-popups-translate( -100%, 8px );
transform: translate( -100%, 8px );
}
}
}

1
src/ui/templates/referencePreview/referencePreview.less
View file

@ -51,7 +51,6 @@
width: 100%;
height: @lineHeight;
background-color: transparent;
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
background-image: linear-gradient( rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
opacity: 0;
pointer-events: none; // Allows clicking "through" the element