From: Ed Sanders <esanders@wikimedia.org>
Date: Mon, 1 Jul 2019 15:17:52 +0000 (+0100)
Subject: Upstream "pulsating dot" widget from VE
X-Git-Tag: 1.34.0-rc.0~522^2
X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/comptes/?a=commitdiff_plain;h=37d32f70ea289fcd36bdba71be49dba6b166c154;p=lhc%2Fweb%2Fwiklou.git

Upstream "pulsating dot" widget from VE

Bug: T226719
Change-Id: Ibd035ea48b7d0316a7627a91623ff6116ccbae31
---

diff --git a/resources/Resources.php b/resources/Resources.php
index 0c2df6b753..d4dd900b9a 100644
--- 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
index 0000000000..00a5608230
--- /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;
+}