fomantic-ui 2.9.1-beta.26 → 2.9.1-beta.28

package/src/definitions/elements/button.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type: 'element';
-@element: 'button';
+@type: "element";
+@element: "button";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
             Button
@@ -131,7 +131,7 @@
     }
     .ui.loading.button::before {
         position: absolute;
-        content: '';
+        content: "";
         top: 50%;
         left: 50%;
         margin: @loaderMargin;
@@ -142,7 +142,7 @@
     }
     .ui.loading.button::after {
         position: absolute;
-        content: '';
+        content: "";
         top: 50%;
         left: 50%;
         margin: @loaderMargin;
@@ -640,7 +640,6 @@
 
     /* Tablet Or Below */
     @media only screen and (max-width: @largestMobileScreen) {
-
         .ui.stackable.buttons {
             flex-direction: column;
             width: 100%;
@@ -686,17 +685,17 @@
 
     .ui.compact.buttons .button,
     .ui.compact.button {
-        padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );
+        padding: @compactVerticalPadding @compactHorizontalPadding (@compactVerticalPadding + @shadowOffset);
     }
 
     .ui.compact.icon.buttons .button,
     .ui.compact.icon.button {
-        padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset );
+        padding: @compactVerticalPadding @compactVerticalPadding (@compactVerticalPadding + @shadowOffset);
     }
 
     .ui.compact.labeled.icon.buttons .button,
     .ui.compact.labeled.icon.button {
-        padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset );
+        padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) (@compactVerticalPadding + @shadowOffset);
     }
 
     .ui.compact.labeled.icon.buttons .button > .icon,
@@ -725,7 +724,7 @@
         .ui.ui.ui.ui.@{value}.button {
             font-size: @s;
         }
-    })
+    });
 }
 
 & when (@variationButtonIcon) {
@@ -735,7 +734,7 @@
 
     .ui.icon.buttons .button,
     .ui.icon.button:not(.animated):not(.compact):not(.labeled) {
-        padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset );
+        padding: @verticalPadding @verticalPadding (@verticalPadding + @shadowOffset);
     }
     .ui.animated.icon.button > .content > .icon,
     .ui.icon.buttons .button > .icon,
@@ -812,7 +811,6 @@
         background-color: @transparentBlack;
     }
     & when (@variationButtonGroups) {
-
         .ui.basic.buttons .button:hover {
             box-shadow: @basicHoverBoxShadow inset;
         }
@@ -923,7 +921,6 @@
     }
 
     .ui.tertiary.button:hover {
-
         & when (@tertiaryHoverWithUnderline = true) {
             box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor;
         }
@@ -1718,20 +1715,20 @@
                 color: @a;
             }
         }
-    })
+    });
 }
 
 & when not (@variationButtonConsequences = false) {
     each(@variationButtonConsequences, {
         @consequence: @value;
 
-        @_backgroundColor: '@{consequence}Color';
-        @_backgroundColorHover: '@{consequence}ColorHover';
-        @_backgroundColorFocus: '@{consequence}ColorFocus';
-        @_backgroundColorDown: '@{consequence}ColorDown';
-        @_backgroundColorActive: '@{consequence}ColorActive';
-        @_textColor: '@{consequence}TextColor';
-        @_textShadow: '@{consequence}TextShadow';
+        @_backgroundColor: "@{consequence}Color";
+        @_backgroundColorHover: "@{consequence}ColorHover";
+        @_backgroundColorFocus: "@{consequence}ColorFocus";
+        @_backgroundColorDown: "@{consequence}ColorDown";
+        @_backgroundColorActive: "@{consequence}ColorActive";
+        @_textColor: "@{consequence}TextColor";
+        @_textShadow: "@{consequence}TextShadow";
 
         /* Standard */
         .ui.@{consequence}.buttons .button,
@@ -1805,7 +1802,7 @@
                 margin-left: -@basicColoredBorderSize;
             }
         }
-    })
+    });
 }
 
 & when (@variationButtonGroups) {
@@ -1827,7 +1824,7 @@
 
     /* Clearfix */
     .ui.buttons::after {
-        content: '.';
+        content: ".";
         display: block;
         height: 0;
         clear: both;
@@ -1857,7 +1854,7 @@
         border-bottom-right-radius: @borderRadius;
     }
     & when (@variationButtonVertical) {
-        /* Vertical  Style */
+        /* Vertical Style */
         .ui.vertical.buttons {
             display: inline-flex;
             flex-direction: column;
@@ -1975,7 +1972,7 @@
             }
             & when (@variationButtonInverted) {
                 .ui.spaced.basic.inverted.buttons .basic.button {
-                    margin-bottom: e(%('calc(%d + %d)', @spacedMargin, @basicColoredBorderSize));
+                    margin-bottom: e(%("calc(%d + %d)", @spacedMargin, @basicColoredBorderSize));
                     margin-top: @basicColoredBorderSize;
                 }
             }

package/src/definitions/elements/container.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type: 'element';
-@element: 'container';
+@type: "element";
+@element: "container";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
             Container

package/src/definitions/elements/divider.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type: 'element';
-@element: 'divider';
+@type: "element";
+@element: "divider";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
             Divider
@@ -68,7 +68,7 @@
 
     .ui.horizontal.divider::before,
     .ui.horizontal.divider::after {
-        content: '';
+        content: "";
         display: table-cell;
         position: relative;
         top: 50%;
@@ -107,7 +107,7 @@
     .ui.vertical.divider::after {
         position: absolute;
         left: 50%;
-        content: '';
+        content: "";
         z-index: 3;
         border-left: @shadowWidth @borderStyle @shadowColor;
         border-right: @highlightWidth @borderStyle @highlightColor;
@@ -125,7 +125,6 @@
 
     /* Inside grid */
     @media only screen and (max-width: @largestMobileScreen) {
-
         .ui.stackable.grid .ui.vertical.divider,
         .ui.grid .stackable.row .ui.vertical.divider {
             display: table;
@@ -148,7 +147,7 @@
             left: 0;
             border-left: none;
             border-right: none;
-            content: '';
+            content: "";
             display: table-cell;
             position: relative;
             top: 50%;
@@ -283,7 +282,7 @@
         .ui.@{value}.divider {
             font-size: @s;
         }
-    })
+    });
 }
 
 .loadUIOverrides();

package/src/definitions/elements/emoji.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type: 'element';
-@element: 'emoji';
+@type: "element";
+@element: "emoji";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
              Emoji
@@ -28,12 +28,12 @@ em[data-emoji] {
 }
 
 em[data-emoji]::before {
-    content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
+    content: "\00A0\00A0\00A0\00A0\00A0\00A0\00A0";
     display: inline-block;
     line-height: @emojiLineHeight;
     background-repeat: no-repeat;
     background-position: center center;
-    & when not (@emojiFileType = 'svg') {
+    & when not (@emojiFileType = "svg") {
         background-size: contain;
     }
 }
@@ -80,12 +80,12 @@ each(@size-map, {
 each(@emoji-map, {
     & when (@variationEmojiColons) {
         em[data-emoji=":@{value}:"]::before {
-            background-image: url('@{emojiPath}@{key}.@{emojiFileType}');
+            background-image: url("@{emojiPath}@{key}.@{emojiFileType}");
         }
         em[data-emoji="@{value}"]::before:extend(em[data-emoji=":@{value}:"]::before) when (@variationEmojiNoColons) {}
     }
     em[data-emoji="@{value}"]::before when (@variationEmojiNoColons) and not (@variationEmojiColons) {
-        background-image: url('@{emojiPath}@{key}.@{emojiFileType}');
+        background-image: url("@{emojiPath}@{key}.@{emojiFileType}");
     }
 });
 

package/src/definitions/elements/flag.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type: 'element';
-@element: 'flag';
+@type: "element";
+@element: "flag";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
              Flag
@@ -27,12 +27,12 @@ i.flag:not(.icon) {
 }
 
 i.flag:not(.icon)::before {
-    content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
+    content: "\00A0\00A0\00A0\00A0\00A0\00A0\00A0";
     display: inline-block;
     line-height: @flagLineHeight;
     background-repeat: no-repeat;
     background-position: center center;
-    & when not (@flagFileType = 'svg') {
+    & when not (@flagFileType = "svg") {
         background-size: contain;
     }
 }
@@ -48,27 +48,27 @@ each(@size-map, {
 
 // for simplicity, class and alias names have to be unique and different to countrycode otherwise false
 each(@flags, {
-    @unicode: replace(@key, '@', '');
-    @cc: replace(@flags[@@unicode][countrycode], '_', '.', 'g');
-    @cls: replace(@flags[@@unicode][class], '_', '.', 'g');
-    @alias: replace(@flags[@@unicode][aliasClass], '_', '.', 'g');
-    @alias2: replace(@flags[@@unicode][aliasClass2], '_', '.', 'g');
+    @unicode: replace(@key, "@", "");
+    @cc: replace(@flags[@@unicode][countrycode], "_", ".", "g");
+    @cls: replace(@flags[@@unicode][class], "_", ".", "g");
+    @alias: replace(@flags[@@unicode][aliasClass], "_", ".", "g");
+    @alias2: replace(@flags[@@unicode][aliasClass2], "_", ".", "g");
     & when (@cls = false){
         i.flag.@{cc}::before {
-            background-image: url('@{flagPath}@{unicode}.@{flagFileType}');
+            background-image: url("@{flagPath}@{unicode}.@{flagFileType}");
         }
     }
     & when not (@cls = false) and (@alias = false) {
         i.flag.@{cc}::before,
         i.flag.@{cls}::before {
-            background-image: url('@{flagPath}@{unicode}.@{flagFileType}');
+            background-image: url("@{flagPath}@{unicode}.@{flagFileType}");
         }
     }
     & when not (@cls = false) and not (@alias = false) and (@alias2 = false) {
         i.flag.@{cc}::before,
         i.flag.@{cls}::before,
         i.flag.@{alias}::before {
-            background-image: url('@{flagPath}@{unicode}.@{flagFileType}');
+            background-image: url("@{flagPath}@{unicode}.@{flagFileType}");
         }
     }
     & when not (@alias2 = false) {
@@ -76,7 +76,7 @@ each(@flags, {
         i.flag.@{cls}::before,
         i.flag.@{alias}::before,
         i.flag.@{alias2}::before {
-            background-image: url('@{flagPath}@{unicode}.@{flagFileType}');
+            background-image: url("@{flagPath}@{unicode}.@{flagFileType}");
         }
     }
 });

package/src/definitions/elements/header.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type: 'element';
-@element: 'header';
+@type: "element";
+@element: "header";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
             Header
@@ -152,7 +152,7 @@
                 font-size: @@sf;
             }
         }
-    })
+    });
 }
 
 /* --------------
@@ -178,7 +178,7 @@
                 font-size: @@shf;
             }
         }
-    })
+    });
 }
 
 & when (@variationHeaderSub) {
@@ -207,7 +207,7 @@
         margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
     }
     .ui.icon.header::after {
-        content: '';
+        content: "";
         display: block;
         height: 0;
         clear: both;
@@ -332,7 +332,7 @@
                 border-bottom: @dividedColoredBorderWidth solid @l;
             }
         }
-    })
+    });
 }
 
 & when (@variationHeaderAligned) {
@@ -358,7 +358,7 @@
     }
     .ui.justified.header::after {
         display: inline-block;
-        content: '';
+        content: "";
         width: 100%;
     }
 }
@@ -436,8 +436,8 @@
             .ui.@{value}.block.header {
                 font-size: @@s;
             }
-        })
-  }
+        });
+    }
 }
 
 & when (@variationHeaderAttached) {
@@ -478,8 +478,8 @@
             .ui.@{value}.attached.header {
                 font-size: @@s;
             }
-        })
-  }
+        });
+    }
 }
 
 /* -------------------

package/src/definitions/elements/icon.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type: 'element';
-@element: 'icon';
+@type: "element";
+@element: "icon";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
              Icon
@@ -27,7 +27,7 @@
                 @{key}: @value;
             });
         }
-    })
+    });
 }
 
 i.icon {
@@ -339,7 +339,7 @@ i.emphasized.icons:not(.disabled) {
                 }
             }
         }
-    })
+    });
 }
 
 /* -------------------
@@ -360,7 +360,7 @@ i.icons {
             font-size: @s;
             vertical-align: middle;
         }
-    })
+    });
 }
 
 & when (@variationIconGroups) or (@variationIconCorner) {
@@ -513,12 +513,15 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     }
 }
 
-.generateIcons(@map, @fontFamily) {
+.generateIcons(@map, @fontFamily: false, @pseudo: before) {
     each(@map, {
-        @escapedKey: replace(@key, '^([0-9])', '\3$1 ');
-        @normalizedKey: replace(@escapedKey, '_', '.', 'g');
-        i.icon.@{normalizedKey}::before {
-            content: '@{value}';
+        @escapedKey: replace(@key, "^([0-9])", "\3$1 ");
+        @normalizedKey: replace(@escapedKey, "_", @iconClassSeparator, "g");
+        @unorderedKey: e(%(".%s::%s",@normalizedKey, @pseudo));
+        @orderedKey: e(%('[%s*="%s"]::%s', @iconForcedAttribute, @normalizedKey, @pseudo));
+        @selectorKey: if(@iconForcedOrder or @iconClassSeparator = " ", @orderedKey, @unorderedKey);
+        i.icon@{selectorKey} {
+            content: "@{value}";
             & when not (@fontFamily = false) {
                 font-family: @fontFamily;
             }
@@ -526,19 +529,9 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     });
 };
 
-.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) */
-    .generateIcons(@icon-deprecated-map, false);
+    .generateIcons(@icon-deprecated-map);
 }
 
 & when (@variationIconSolid) {
@@ -547,10 +540,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     *******************************/
 
     /* Icons */
-    .generateIcons(@icon-map, false);
+    .generateIcons(@icon-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-aliases-map, false);
+        .generateIcons(@icon-aliases-map);
     }
 }
 
@@ -564,10 +557,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     }
 
     /* Icons */
-    .generateIcons(@icon-outline-map, false);
+    .generateIcons(@icon-outline-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-outline-aliases-map, false);
+        .generateIcons(@icon-outline-aliases-map);
     }
 }
 
@@ -580,10 +573,10 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
     i.icon.thin {
         font-family: @thinFontName;
     }
-    .generateIcons(@icon-thin-map, false);
+    .generateIcons(@icon-thin-map);
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-thin-aliases-map, false);
+        .generateIcons(@icon-thin-aliases-map);
     }
 }
 
@@ -630,13 +623,13 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
         opacity: @duotoneSecondaryOpacity;
     }
 
-    .generateIcons(@icon-duotone-map, false);
-    .generateSecondaryIcons(@icon-duotone-secondary-map);
+    .generateIcons(@icon-duotone-map);
+    .generateIcons(@icon-duotone-secondary-map, false, after);
 
     & when (@variationIconAliases) {
         /* Aliases */
-        .generateIcons(@icon-duotone-aliases-map, false);
-        .generateSecondaryIcons(@icon-duotone-secondary-aliases-map);
+        .generateIcons(@icon-duotone-aliases-map);
+        .generateIcons(@icon-duotone-secondary-aliases-map, false, after);
     }
 
     /*
@@ -659,8 +652,8 @@ and ((@variationIconBordered) or (@variationIconCircular)) {
                     color: @l;
                 }
             }
-        })
-  }
+        });
+    }
 }
 
 .loadUIOverrides();

package/src/definitions/elements/image.less

@@ -12,10 +12,10 @@
             Theme
 *******************************/
 
-@type: 'element';
-@element: 'image';
+@type: "element";
+@element: "image";
 
-@import (multiple) '../../theme.config';
+@import (multiple) "../../theme.config";
 
 /*******************************
              Image
@@ -291,7 +291,7 @@ img.ui.image {
             height: auto;
             font-size: @s;
         }
-    })
+    });
 }
 
 & when (@variationImageGroups) {