fomantic-ui 2.9.1-beta.7 → 2.9.1-beta.8

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.1-beta.7+d459c42
+ * # Fomantic UI - 2.9.1-beta.8+edc5e7e
  * https://github.com/fomantic/Fomantic-UI
  * https://fomantic-ui.com/
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.1-beta.7+d459c42",
+  "version": "2.9.1-beta.8+edc5e7e",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/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();

package/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;

package/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%;