mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-12-23 04:22:46 +00:00
deaaf0961b
Instead load it via mw.loader.using We retain the module name ext.popups as this will be present in cached HTML, however now it will load the bulk of the code inside ext.popups.main Bug: T176211 Change-Id: Ibe212721807d3698dc45ef46b2dbde15ca9d2f70
123 lines
2.2 KiB
Plaintext
123 lines
2.2 KiB
Plaintext
@import 'mediawiki.mixins.animation';
|
|
|
|
.mwe-popups-translate( @x, @y ) {
|
|
-webkit-transform: translate( @x, @y );
|
|
-moz-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;
|
|
}
|
|
|
|
@-moz-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;
|
|
}
|
|
|
|
@-moz-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;
|
|
}
|
|
|
|
@-moz-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;
|
|
}
|
|
|
|
@-moz-keyframes mwe-popups-fade-out-up {
|
|
.mwe-popups-fade-out-up-frames;
|
|
}
|
|
|
|
@keyframes mwe-popups-fade-out-up {
|
|
.mwe-popups-fade-out-up-frames;
|
|
}
|
|
|
|
.mwe-popups-fade-in-up-frames() {
|
|
0% {
|
|
opacity: 0;
|
|
.mwe-popups-translate( 0, 20px );
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
.mwe-popups-translate( 0, 0 );
|
|
}
|
|
}
|
|
|
|
.mwe-popups-fade-in-down-frames() {
|
|
0% {
|
|
opacity: 0;
|
|
.mwe-popups-translate( 0, -20px );
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
.mwe-popups-translate( 0, 0 );
|
|
}
|
|
}
|
|
|
|
.mwe-popups-fade-out-down-frames() {
|
|
0% {
|
|
opacity: 1;
|
|
.mwe-popups-translate( 0, 0 );
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
.mwe-popups-translate( 0, 20px );
|
|
}
|
|
}
|
|
|
|
.mwe-popups-fade-out-up-frames() {
|
|
0% {
|
|
opacity: 1;
|
|
.mwe-popups-translate( 0, 0 );
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
.mwe-popups-translate( 0, -20px );
|
|
}
|
|
}
|
|
|
|
.mwe-popups-fade-in-up {
|
|
.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 );
|
|
}
|
|
|
|
.mwe-popups-fade-out-down {
|
|
.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 );
|
|
}
|