fomantic-ui 2.9.0-beta.99 → 2.9.0

package/src/definitions/elements/divider.less

@@ -71,8 +71,8 @@
     text-align: center;
   }
 
-  .ui.horizontal.divider:before,
-  .ui.horizontal.divider:after {
+  .ui.horizontal.divider::before,
+  .ui.horizontal.divider::after {
     content: '';
     display: table-cell;
     position: relative;
@@ -81,10 +81,10 @@
     background-repeat: no-repeat;
   }
 
-  .ui.horizontal.divider:before {
+  .ui.horizontal.divider::before {
     background-position: right @horizontalDividerMargin top 50%;
   }
-  .ui.horizontal.divider:after {
+  .ui.horizontal.divider::after {
     background-position: left @horizontalDividerMargin top 50%;
   }
 }
@@ -110,8 +110,8 @@
     transform: translateX(-50%);
   }
 
-  .ui.vertical.divider:before,
-  .ui.vertical.divider:after {
+  .ui.vertical.divider::before,
+  .ui.vertical.divider::after {
     position: absolute;
     left: 50%;
     content: '';
@@ -124,10 +124,10 @@
     height: @verticalDividerHeight;
   }
 
-  .ui.vertical.divider:before {
+  .ui.vertical.divider::before {
     top: -100%;
   }
-  .ui.vertical.divider:after {
+  .ui.vertical.divider::after {
     top: auto;
     bottom: 0;
   }
@@ -150,10 +150,10 @@
       transform: none;
     }
 
-    .ui.stackable.grid .ui.vertical.divider:before,
-    .ui.grid .stackable.row .ui.vertical.divider:before,
-    .ui.stackable.grid .ui.vertical.divider:after,
-    .ui.grid .stackable.row .ui.vertical.divider:after {
+    .ui.stackable.grid .ui.vertical.divider::before,
+    .ui.grid .stackable.row .ui.vertical.divider::before,
+    .ui.stackable.grid .ui.vertical.divider::after,
+    .ui.grid .stackable.row .ui.vertical.divider::after {
       left: 0;
       border-left: none;
       border-right: none;
@@ -165,12 +165,12 @@
       background-repeat: no-repeat;
     }
 
-    .ui.stackable.grid .ui.vertical.divider:before,
-    .ui.grid .stackable.row .ui.vertical.divider:before {
+    .ui.stackable.grid .ui.vertical.divider::before,
+    .ui.grid .stackable.row .ui.vertical.divider::before {
       background-position: right @horizontalDividerMargin top 50%;
     }
-    .ui.stackable.grid .ui.vertical.divider:after,
-    .ui.grid .stackable.row .ui.vertical.divider:after {
+    .ui.stackable.grid .ui.vertical.divider::after,
+    .ui.grid .stackable.row .ui.vertical.divider::after {
       background-position: left @horizontalDividerMargin top 50%;
     }
   }
@@ -194,18 +194,18 @@
        Header
   ---------------*/
   .ui.horizontal.divider[class*="left aligned"] {
-    &:before {
+    &::before {
       display: none;
     }
-    &:after {
+    &::after {
       width: 100%;
     }
   }
   .ui.horizontal.divider[class*="right aligned"] {
-    &:before {
+    &::before {
       width: 100%;
     }
-    &:after {
+    &::after {
       display: none;
     }
   }
@@ -224,8 +224,8 @@
     border-color: transparent !important;
   }
 
-  .ui.hidden.divider:before,
-  .ui.hidden.divider:after {
+  .ui.hidden.divider::before,
+  .ui.hidden.divider::after {
     display: none;
   }
 }
@@ -240,8 +240,8 @@
     color: @invertedTextColor;
   }
   .ui.divider.inverted,
-  .ui.divider.inverted:after,
-  .ui.divider.inverted:before {
+  .ui.divider.inverted::after,
+  .ui.divider.inverted::before {
     border-top-color: @invertedShadowColor !important;
     border-left-color: @invertedShadowColor !important;
     border-bottom-color: @invertedHighlightColor !important;

package/src/definitions/elements/emoji.less

@@ -31,7 +31,7 @@ em[data-emoji] {
   backface-visibility: hidden;
 }
 
-em[data-emoji]:before {
+em[data-emoji]::before {
   content:'\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
   display: inline-block;
   line-height: @emojiLineHeight;
@@ -59,7 +59,7 @@ em[data-emoji]:before {
 *******************************/
 
 & when (@variationEmojiLoading) {
-  em[data-emoji].loading:before {
+  em[data-emoji].loading::before {
     animation: loader @loadingDuration linear infinite;
   }
 }
@@ -75,4 +75,27 @@ em[data-emoji]:before {
   }
 }
 
+/*rtl:begin:ignore*/
+
+each(@size-map, {
+  em[data-emoji].@{key} {
+    font-size: 1.5em * @value;
+    vertical-align: middle;
+  }
+});
+
+each(@emoji-map,{
+  & when (@variationEmojiColons) {
+    em[data-emoji=":@{value}:"]::before {
+      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}");
+  }
+});
+
+/*rtl:end:ignore*/
+
 .loadUIOverrides();

package/src/definitions/elements/flag.less

@@ -28,7 +28,7 @@ i.flag:not(.icon) {
   backface-visibility: hidden;
 }
 
-i.flag:not(.icon):before {
+i.flag:not(.icon)::before {
   content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
   display: inline-block;
   line-height: @flagLineHeight;
@@ -39,4 +39,50 @@ i.flag:not(.icon):before {
   }
 }
 
+each(@size-map, {
+  i.flag.@{key} {
+    font-size: 1.5em * @value;
+    vertical-align: middle;
+  }
+});
+
+/*rtl:begin:ignore*/
+
+// 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');
+  & when (@cls = false){
+    i.flag.@{cc}::before {
+      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}");
+    }
+  }
+  & 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}");
+    }
+  }
+  & when not (@alias2 = false) {
+    i.flag.@{cc}::before,
+    i.flag.@{cls}::before,
+    i.flag.@{alias}::before,
+    i.flag.@{alias2}::before {
+      background-image: url("@{flagPath}@{unicode}.@{flagFileType}");
+    }
+  }
+});
+
+/*rtl:end:ignore*/
+
 .loadUIOverrides();

package/src/definitions/elements/header.less

@@ -212,7 +212,7 @@
     text-align: center;
     margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin;
   }
-  .ui.icon.header:after {
+  .ui.icon.header::after {
     content: '';
     display: block;
     height: 0;
@@ -223,6 +223,7 @@
   .ui.icon.header:first-child {
     margin-top: @iconHeaderFirstMargin;
   }
+  .ui.icon.header > .image.icon,
   .ui.icon.header > .icons,
   .ui.icon.header > i.icon {
     float: none;
@@ -249,6 +250,7 @@
     font-size: @squareHeaderIconSize;
   }
   & when (@variationHeaderBlock) {
+    .ui.block.icon.header > .image.icon,
     .ui.block.icon.header > .icons,
     .ui.block.icon.header > i.icon {
       margin-bottom: 0;
@@ -362,7 +364,7 @@
   .ui.justified.header {
     text-align: justify;
   }
-  .ui.justified.header:after {
+  .ui.justified.header::after {
     display: inline-block;
     content: '';
     width: 100%;

package/src/definitions/elements/icon.less

@@ -23,16 +23,13 @@
              Icon
 *******************************/
 & when (@importIcons) {
-  @font-face {
-    font-family: 'Icons';
-    src: @fallbackSRC;
-    src: @src;
-    font-style: normal;
-    font-weight: @normal;
-    font-variant: normal;
-    text-decoration: inherit;
-    text-transform: none;
-  }
+  each(@fonts, {
+    @font-face {
+      each(@value,{
+          @{key}: @value;
+      });
+    }
+  })
 }
 
 i.icon {
@@ -44,7 +41,7 @@ i.icon {
   width: @width;
   height: @height;
 
-  font-family: 'Icons';
+  font-family: @fontName;
   font-style: normal;
   font-weight: @normal;
   text-decoration: inherit;
@@ -56,7 +53,7 @@ i.icon {
   backface-visibility: hidden;
 }
 
-i.icon:before {
+i.icon::before {
   background: none !important;
 }
 
@@ -519,4 +516,86 @@ i.icons {
   }
 }
 
+.generateIcons(@map, @fontFamily) {
+  each(@map,{
+    @escapedKey: replace(@key,'^([0-9])','\3$1 ');
+    @normalizedKey: replace(@escapedKey,'_','.','g');
+    i.icon.@{normalizedKey}::before {
+      content: "@{value}";
+      & when not (@fontFamily = false) {
+        font-family: @fontFamily;
+      }
+    }
+  });
+};
+
+& when (@variationIconDeprecated) {
+
+  /* Deprecated *In/Out Naming Conflict) */
+  .generateIcons(@icon-deprecated-map,false);
+}
+
+& when (@variationIconSolid) {
+  /*******************************
+          Solid Icons
+  *******************************/
+
+  /* Icons */
+  .generateIcons(@icon-map,false);
+  & when (@variationIconAliases) {
+
+    /* Aliases */
+    .generateIcons(@icon-aliases-map,false);
+  }
+}
+
+& when (@variationIconOutline) {
+  /*******************************
+           Outline Icons
+  *******************************/
+
+  i.icon.outline {
+    font-family: @outlineFontName;
+  }
+
+  /* Icons */
+  .generateIcons(@icon-outline-map,false);
+  & when (@variationIconAliases) {
+
+    /* Aliases */
+    .generateIcons(@icon-outline-aliases-map,false);
+  }
+}
+
+& when (@variationIconThin) {
+  /*******************************
+         Thin Icons
+  *******************************/
+
+  /* Icons */
+  i.icon.thin {
+    font-family: @thinFontName;
+  }
+  .generateIcons(@icon-thin-map,false);
+  & when (@variationIconAliases) {
+
+    /* Aliases */
+    .generateIcons(@icon-thin-aliases-map,false);
+  }
+}
+
+& when(@variationIconBrand) {
+  /*******************************
+            Brand Icons
+  *******************************/
+
+  /* Icons */
+  .generateIcons(@icon-brand-map,@brandFontName);
+  & when (@variationIconAliases) {
+
+    /* Aliases */
+    .generateIcons(@icon-brand-aliases-map,@brandFontName);
+  }
+}
+
 .loadUIOverrides();