From 4c13a8869c2e65b466f79e725c44a1b79a259087 Mon Sep 17 00:00:00 2001 From: Eric Amodio Date: Thu, 1 Jun 2023 18:22:01 -0400 Subject: [PATCH] Adds pulse on interactive items --- src/webviews/apps/welcome/welcome.html | 4 ++-- src/webviews/apps/welcome/welcome.scss | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html index 2da74c5..d052d21 100644 --- a/src/webviews/apps/welcome/welcome.html +++ b/src/webviews/apps/welcome/welcome.html @@ -187,14 +187,14 @@ xmlns="http://www.w3.org/2000/svg" > - + '; +} + +@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;