feat(transition): pulsating variant

This PR adds a new pulsating transition. Any element getting the looping pulsating transition will have its box border begging for some attention
fomantic · Nov 5, 2022 · edc5e7e · edc5e7e
1 parent d459c42
commit edc5e7e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/src/definitions/modules/transition.less b/src/definitions/modules/transition.less
@@ -73,10 +73,45 @@
 /*******************************
           Variations
 *******************************/
-& when (@variationTransitionLoading) {
+& when (@variationTransitionLooping) {
   .looping.transition {
     animation-iteration-count: infinite;
   }
 }
 
+& when (@variationTransitionPulsating) {
+  /* Pulsating */
+  .pulsating.transition {
+    animation-name: pulsating;
+    animation-duration: @pulsatingDuration;
+    box-shadow: 0 0 0 0 fade(@pulsatingColor, @pulsatingOpacity);
+  }
+  & when (@variationTransitionInverted) {
+    .inverted.pulsating.transition {
+      box-shadow: 0 0 0 0 fade(@pulsatingInvertedColor, @pulsatingInvertedOpacity);
+    }
+  }
+  @keyframes pulsating {
+    100% {
+      box-shadow: 0 0 0 @pulsatingDistance rgba(255,255,255,0);
+    }
+  }
+  & when not (@variationTransitionColors = false) {
+    each(@variationTransitionColors, {
+      @color: @value;
+      @c: @colors[@@color][color];
+      @l: @colors[@@color][light];
+
+      .@{color}.pulsating.transition {
+        box-shadow: 0 0 0 0 fade(@c, @pulsatingOpacity);
+      }
+      & when (@variationTransitionInverted) {
+        .@{color}.inverted.pulsating.transition {
+          box-shadow: 0 0 0 0 fade(@l, @pulsatingInvertedOpacity);
+        }
+      }
+    })
+  }
+}
+
 .loadUIOverrides();
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -716,6 +716,8 @@
 /* Transition */
 @variationTransitionDisabled: true;
 @variationTransitionLoading: true;
+@variationTransitionLooping: true;
+@variationTransitionInverted: true;
 @variationTransitionBrowse: true;
 @variationTransitionDrop: true;
 @variationTransitionFade: true;
@@ -732,6 +734,8 @@
 @variationTransitionPulse: true;
 @variationTransitionJiggle: true;
 @variationTransitionGlow: true;
+@variationTransitionPulsating: true;
+@variationTransitionColors: @variationAllColors;
 
 /* Emojis */
 @variationEmojiColons: true;

diff --git a/src/themes/default/modules/transition.variables b/src/themes/default/modules/transition.variables
@@ -7,4 +7,11 @@
 @transitionDefaultDuration: 300ms;
 
 @use3DAcceleration: translateZ(0);
-@backfaceVisibility: hidden;
+@backfaceVisibility: hidden;
+
+@pulsatingColor: #808080;
+@pulsatingInvertedColor: #ffffff;
+@pulsatingDuration: 2000ms;
+@pulsatingDistance: 0.8rem;
+@pulsatingOpacity: 50%;
+@pulsatingInvertedOpacity: 70%;