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

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.1-beta.7+d459c42
+ * # Fomantic UI - 2.9.1-beta.9+845150e
  * 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.9+845150e",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/elements/icon.less

@@ -163,7 +163,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
     transform: scale(1, -1);
   }
 
-  & when(@variationIconGroups) {
+  & when (@variationIconGroups) {
     .icons i.flipped.icon:not(.corner):not(:first-child),
     .icons i.horizontally.flipped.icon:not(.corner):not(:first-child) {
       transform: translateX(-50%) translateY(-50%) scale(-1, 1);
@@ -194,7 +194,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
     transform: rotate(180deg);
   }
 
-  & when(@variationIconGroups) {
+  & when (@variationIconGroups) {
     .icons i.rotated.rotated.icon:not(.corner):not(:first-child),
     .icons i.right.rotated.icon:not(.corner):not(:first-child),
     .icons i.clockwise.rotated.icon:not(.corner):not(:first-child) {
@@ -245,7 +245,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
     transform: scale(1, -1) rotate(180deg);
   }
 
-  & when(@variationIconGroups) {
+  & when (@variationIconGroups) {
     .icons i.rotated.flipped.icon:not(.corner):not(:first-child),
     .icons i.right.rotated.flipped.icon:not(.corner):not(:first-child),
     .icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
@@ -529,6 +529,16 @@ i.icons {
   });
 };
 
+.generateSecondaryIcons(@map) {
+  each(@map,{
+    @escapedKey: replace(@key,'^([0-9])','\3$1 ');
+    @normalizedKey: replace(@escapedKey,'_','.','g');
+    i.icon.@{normalizedKey}::after {
+      content: "@{value}";
+    }
+  });
+};
+
 & when (@variationIconDeprecated) {
 
   /* Deprecated *In/Out Naming Conflict) */
@@ -584,7 +594,7 @@ i.icons {
   }
 }
 
-& when(@variationIconBrand) {
+& when (@variationIconBrand) {
   /*******************************
             Brand Icons
   *******************************/
@@ -598,4 +608,68 @@ i.icons {
   }
 }
 
+& when (@variationIconDuotone) {
+  /*******************************
+            Duotone Icons
+  *******************************/
+
+  /* Make duotone icons use the proper font */
+  i.icon.duotone {
+    font-family: @duotoneFontName;
+    /* To position the secondary layer on top of the first layer */
+    position: relative;
+  }
+
+  /* Set the default opacity levels and colors for each layer */
+  i.icon.duotone::before {
+    color: @duotonePrimaryColor;
+    opacity: @duotonePrimaryOpacity;
+  }
+
+  i.icon.duotone::after {
+    /* Position secondary layer to the left, centered horizontally and aligned vertically to flex with different line heights */
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+
+    color: @duotoneSecondaryColor;
+    opacity: @duotoneSecondaryOpacity;
+  }
+
+  .generateIcons(@icon-duotone-map,false);
+  .generateSecondaryIcons(@icon-duotone-secondary-map);
+
+  & when (@variationIconAliases) {
+
+    /* Aliases */
+    .generateIcons(@icon-duotone-aliases-map,false);
+    .generateSecondaryIcons(@icon-duotone-secondary-aliases-map);
+  }
+
+  /*
+   * Colors for duotone icons, in the form `primary-secondary`(e.g. `black-grey duotone icon`).
+   */
+  & when not (@variationIconColors = false) {
+    each(@variationIconColors, {
+      @color: @value;
+      @c: @colors[@@color][color];
+      @l: @colors[@@color][light];
+
+      i.icon.duotone[class*="@{color}-"]::before,
+      i.icon.duotone[class*="-@{color}"]::after {
+        color: @c;
+      }
+
+      & when (@variationIconInverted) {
+        i.icon.inverted.duotone[class*="@{color}-"]::before,
+        i.icon.inverted.duotone[class*="-@{color}"]::after {
+          color: @l;
+        }
+      }
+    })
+  }
+}
+
 .loadUIOverrides();

package/src/definitions/modules/nag.less

@@ -104,7 +104,6 @@ a.ui.nag {
   .ui.overlay.nags,
   .ui.overlay.nag {
     position: absolute;
-    display: block;
   }
 }
 

package/src/definitions/modules/popup.less

@@ -805,6 +805,56 @@
   }
 }
 
+& when not (@variationPopupColors = false) {
+  each(@variationPopupColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    & when not (@variationPopupTooltip) {
+      .ui.ui.ui.@{color}.popup::before,
+      .ui.@{color}.popup {
+        background: @c;
+        color: @white;
+        border: none;
+      }
+      .ui.ui.ui.@{color}.popup::before {
+        box-shadow: none;
+      }
+      & when (@variationPopupInverted) {
+        .ui.inverted.@{color}.popup::before,
+        .ui.inverted.@{color}.popup {
+          background: @l;
+          color: @black;
+        }
+      }
+    }
+    & when (@variationPopupTooltip) {
+      .ui.ui.ui.@{color}.popup::before,
+      .ui.@{color}.popup,
+      [data-tooltip][data-variation~="@{color}"]::after,
+      [data-tooltip][data-variation~="@{color}"]::before {
+        background: @c;
+        color: @white;
+        border: none;
+      }
+      .ui.ui.ui.@{color}.popup::before,
+      [data-tooltip][data-variation~="@{color}"]::before {
+        box-shadow: none;
+      }
+      & when (@variationPopupInverted) {
+        .ui.ui.ui.inverted.@{color}.popup::before,
+        .ui.inverted.@{color}.popup,
+        [data-tooltip][data-inverted][data-variation~="@{color}"]::after,
+        [data-tooltip][data-inverted][data-variation~="@{color}"]::before {
+          background: @l;
+          color: @black;
+        }
+      }
+    }
+  })
+}
+
 & when (@variationPopupFlowing) {
   /*--------------
        Flowing

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/elements/icon.variables

@@ -41,6 +41,7 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
 @outlineFontName: 'outline-icons';
 @thinFontName: 'thin-icons';
 @brandFontName: 'brand-icons';
+@duotoneFontName: 'duotone-icons';
 
 @fonts: {
 @solid: {
@@ -2062,6 +2063,14 @@ ycombinator: \f23b;
 youtube_play: \f167;
 };
 
+@icon-duotone-map: {
+};
+@icon-duotone-secondary-map: {
+};
+@icon-duotone-aliases-map: {
+};
+@icon-duotone-secondary-aliases-map: {
+};
 
 /*--------------
    Definition
@@ -2117,3 +2126,9 @@ youtube_play: \f167;
 @big: 2em;
 @huge: 4em;
 @massive: 8em;
+
+/* Duotone specifics */
+@duotonePrimaryColor: inherit;
+@duotonePrimaryOpacity: 1;
+@duotoneSecondaryColor: inherit;
+@duotoneSecondaryOpacity: 0.4;

package/src/themes/default/globals/variation.variables

@@ -91,7 +91,8 @@
 @variationIconAliases: true;
 @variationIconOutline: true;
 @variationIconBrand: true;
-@variationIconThin: true; /* Font Awesome Pro only */
+@variationIconThin: false; /* Font Awesome Pro only */
+@variationIconDuotone: false; /* Font Awesome Pro only */
 @variationIconDisabled: true;
 @variationIconInverted: true;
 @variationIconLoading: true;
@@ -716,6 +717,8 @@
 /* Transition */
 @variationTransitionDisabled: true;
 @variationTransitionLoading: true;
+@variationTransitionLooping: true;
+@variationTransitionInverted: true;
 @variationTransitionBrowse: true;
 @variationTransitionDrop: true;
 @variationTransitionFade: true;
@@ -732,6 +735,8 @@
 @variationTransitionPulse: true;
 @variationTransitionJiggle: true;
 @variationTransitionGlow: true;
+@variationTransitionPulsating: true;
+@variationTransitionColors: @variationAllColors;
 
 /* Emojis */
 @variationEmojiColons: true;

package/src/themes/default/modules/nag.variables

@@ -11,7 +11,7 @@
 @zIndex: 999;
 @margin: 0;
 
-@background: #777777;
+@background: #909090;
 @opacity: 0.95;
 @minHeight: 0;
 @padding: 0.75em 1em;

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