mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-12-22 03:52:52 +00:00
af606b37cb
The LESS mixin format looks so similar to css selectors it can be very confusing at times to know whether you are looking at a css selector or a mixin. I'd like to see these separate for sanity. Change-Id: I1241f62e0b5322c549f15e570ae2319737ed8c2e
144 lines
2.7 KiB
Plaintext
144 lines
2.7 KiB
Plaintext
@import 'mediawiki.mixins.animation';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
.mwe-popups-border-pointer-top( @size, @left, @color, @extra ) {
|
|
content: '';
|
|
position: absolute;
|
|
border: ( @size + @extra ) solid transparent;
|
|
border-top: 0;
|
|
border-bottom: ( @size + @extra ) solid @color;
|
|
top: -@size;
|
|
left: @left;
|
|
}
|
|
|
|
.mwe-popups-border-pointer-bottom( @size, @left, @color, @extra ) {
|
|
content: '';
|
|
position: absolute;
|
|
border: ( @size + @extra ) solid transparent;
|
|
border-bottom: 0;
|
|
border-top: ( @size + @extra ) solid @color;
|
|
bottom: -@size;
|
|
left: @left;
|
|
}
|
|
|
|
.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 );
|
|
}
|