Adds pulse on interactive items

src/webviews/apps/welcome/welcome.html

@@ -187,14 +187,14 @@
 						xmlns="http://www.w3.org/2000/svg"
 					>
 						<rect
-							class="toolbar-icon-accent toolbar-icon__revision"
+							class="toolbar-icon-accent toolbar-icon__revision-bg"
 							x="-3"
 							y="-2"
 							width="22"
 							height="calc(100% + 4px)"
 							rx="4"
 						/>
-						<g class="toolbar-icon">
+						<g class="toolbar-icon toolbar-icon__revision">
 							<path
 								class="toolbar-icon active"
 								d="M5.2747 7.5C5.5256 4.9733 7.6573 3 10.25 3C12.8427 3 14.9745 4.9733 15.2253 7.5H16V8.5H15.2253C14.9745 11.0267 12.8427 13 10.25 13C7.6573 13 5.5255 11.0267 5.2747 8.5H1.5642L4 10.9358L3.2929 11.6429L0 8.35V7.6429L3.2929 4.35L4 5.0571L1.5607 7.4964V7.5H5.2747ZM10.25 4C8.0409 4 6.25 5.7909 6.25 8C6.25 10.2091 8.0409 12 10.25 12C12.4591 12 14.25 10.2091 14.25 8C14.25 5.7909 12.4591 4 10.25 4Z"

src/webviews/apps/welcome/welcome.scss

@@ -503,6 +503,25 @@ gk-card p {
 	}
 }
 
+@property --pulse-scale {
+	initial-value: 1.06;
+	inherits: false;
+	syntax: '<number>';
+}
+
+@keyframes pulse {
+	0%,
+	2%,
+	98%,
+	100% {
+		transform: scale(1);
+	}
+	1%,
+	99% {
+		transform: scale(var(--pulse-scale));
+	}
+}
+
 .toolbar {
 	fill: var(--vscode-menu-background);
 
@@ -510,6 +529,13 @@ gk-card p {
 		fill: var(--vscode-icon-foreground);
 
 		&__annotations {
+			&:not(.inactive) {
+				--pulse-scale: 1.06;
+				transform-origin: center center;
+				animation: pulse 8s ease-in-out 4s;
+				animation-iteration-count: infinite;
+			}
+
 			path:first-child {
 				fill: #f05133;
 				stroke: none;
@@ -533,6 +559,13 @@ gk-card p {
 		}
 
 		&__revision {
+			--pulse-scale: 1.12;
+			transform-origin: center left;
+			animation: pulse 8s ease-in-out 6s;
+			animation-iteration-count: infinite;
+		}
+
+		&__revision-bg {
 			body[data-feature-revision='off'] & {
 				fill: none;