Upstream "pulsating dot" widget from VE

Bug: T226719
Change-Id: Ibd035ea48b7d0316a7627a91623ff6116ccbae31

diff --git a/resources/Resources.php b/resources/Resources.php
index 0c2df6b..d4dd900 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1048,6 +1048,12 @@ return [
        'mediawiki.pager.tablePager' => [
                'styles' => 'resources/src/mediawiki.pager.tablePager/TablePager.less',
        ],
+       'mediawiki.pulsatingdot' => [
+               'styles' => [
+                       'resources/src/mediawiki.pulsatingdot/mediawiki.pulsatingdot.less',
+               ],
+               'targets' => [ 'desktop', 'mobile' ],
+       ],
        'mediawiki.searchSuggest' => [
                'targets' => [ 'desktop', 'mobile' ],
                'scripts' => 'resources/src/mediawiki.searchSuggest/searchSuggest.js',

diff --git a/resources/src/mediawiki.pulsatingdot/mediawiki.pulsatingdot.less b/resources/src/mediawiki.pulsatingdot/mediawiki.pulsatingdot.less
new file mode 100644 (file)
index 0000000..00a5608
--- /dev/null
+++ b/resources/src/mediawiki.pulsatingdot/mediawiki.pulsatingdot.less
@@ -0,0 +1,70 @@
+.mw-pulsating-dot {
+       &:before,
+       &:after {
+               content: '';
+               display: block;
+               position: absolute;
+               border-radius: 50%;
+               background-color: #36c;
+       }
+
+       &:before {
+               width: 36px;
+               height: 36px;
+               top: -18px;
+               left: -18px;
+               opacity: 0;
+               -webkit-animation: mw-pulsating-dot-pulse 3s ease-out;
+               -moz-animation: mw-pulsating-dot-pulse 3s ease-out;
+               animation: mw-pulsating-dot-pulse 3s ease-out;
+               -webkit-animation-iteration-count: infinite;
+               -moz-animation-iteration-count: infinite;
+               animation-iteration-count: infinite;
+       }
+
+       &:after {
+               width: 12px;
+               height: 12px;
+               top: -6px;
+               left: -6px;
+       }
+}
+
+.mw-pulsating-dot-pulse-frames() {
+       0% {
+               transform: scale( 0 );
+               opacity: 0;
+       }
+
+       25% {
+               transform: scale( 0 );
+               opacity: 0.1;
+       }
+
+       50% {
+               transform: scale( 0.1 );
+               opacity: 0.3;
+       }
+
+       75% {
+               transform: scale( 0.5 );
+               opacity: 0.5;
+       }
+
+       100% {
+               transform: scale( 1 );
+               opacity: 0;
+       }
+}
+
+@-webkit-keyframes mw-pulsating-dot-pulse {
+       .mw-pulsating-dot-pulse-frames;
+}
+
+@-moz-keyframes mw-pulsating-dot-pulse {
+       .mw-pulsating-dot-pulse-frames;
+}
+
+@keyframes mw-pulsating-dot-pulse {
+       .mw-pulsating-dot-pulse-frames;
+}