dépôts
/
lhc
/
web
/
wiklou.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Change "Live update" button animation
[lhc/web/wiklou.git]
/
resources
/
src
/
mediawiki.rcfilters
/
styles
/
mw.rcfilters.ui.LiveUpdateButtonWidget.less
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less
index
63ea264
..
3c8664c
100644
(file)
--- a/
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less
+++ b/
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less
@@
-1,10
+1,15
@@
+@import 'mediawiki.mixins';
+
.mw-rcfilters-ui-liveUpdateButtonWidget {
.mw-rcfilters-ui-liveUpdateButtonWidget {
+ margin-left: 1em;
+
&.oo-ui-toggleWidget-on {
position: relative;
overflow: hidden;
&:after {
content: '';
mix-blend-mode: screen;
&.oo-ui-toggleWidget-on {
position: relative;
overflow: hidden;
&:after {
content: '';
mix-blend-mode: screen;
+ pointer-events: none;
position: absolute;
width: 1.875em;
height: 1.875em;
position: absolute;
width: 1.875em;
height: 1.875em;
@@
-14,7
+19,7
@@
border-radius: 100%;
transform-origin: 50% 50%;
opacity: 0;
border-radius: 100%;
transform-origin: 50% 50%;
opacity: 0;
- animation: ripple
1.2
s ease-out infinite;
+ animation: ripple
2.3
s ease-out infinite;
animation-delay: 1s;
}
}
animation-delay: 1s;
}
}
@@
-23,15
+28,16
@@
@keyframes ripple {
0%,
35% {
@keyframes ripple {
0%,
35% {
-
transform: scale( 0
);
+
.transform( scale( 0 )
);
opacity: 1;
}
50% {
opacity: 1;
}
50% {
-
transform: scale( 1.5
);
+
.transform( scale( 1.5 )
);
opacity: 0.8;
}
opacity: 0.8;
}
+ 80%,
100% {
opacity: 0;
100% {
opacity: 0;
-
transform: scale( 4
);
+
.transform( scale( 4 )
);
}
}
}
}