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

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.1-beta.8+edc5e7e
+ * # 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.8+edc5e7e",
+  "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/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;

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;