fomantic-ui 2.9.0-beta.32 → 2.9.0-beta.321

package/src/definitions/elements/container.less

@@ -42,8 +42,10 @@
       .ui.ui.ui.relaxed.grid.container {
         width: @mobileRelaxedGridWidth;
       }
-      .ui.ui.ui.very.relaxed.grid.container {
-        width: @mobileVeryRelaxedGridWidth;
+      & when (@variationContainerVeryRelaxed) {
+        .ui.ui.ui.very.relaxed.grid.container {
+          width: @mobileVeryRelaxedGridWidth;
+        }
       }
     }
   }
@@ -64,8 +66,10 @@
       .ui.ui.ui.relaxed.grid.container {
         width: @tabletRelaxedGridWidth;
       }
-      .ui.ui.ui.very.relaxed.grid.container {
-        width: @tabletVeryRelaxedGridWidth;
+      & when (@variationContainerVeryRelaxed) {
+        .ui.ui.ui.very.relaxed.grid.container {
+          width: @tabletVeryRelaxedGridWidth;
+        }
       }
     }
   }
@@ -86,8 +90,10 @@
       .ui.ui.ui.relaxed.grid.container {
         width: @computerRelaxedGridWidth;
       }
-      .ui.ui.ui.very.relaxed.grid.container {
-        width: @computerVeryRelaxedGridWidth;
+      & when (@variationContainerVeryRelaxed) {
+        .ui.ui.ui.very.relaxed.grid.container {
+          width: @computerVeryRelaxedGridWidth;
+        }
       }
     }
   }
@@ -108,8 +114,10 @@
       .ui.ui.ui.relaxed.grid.container {
         width: @largeMonitorRelaxedGridWidth;
       }
-      .ui.ui.ui.very.relaxed.grid.container {
-        width: @largeMonitorVeryRelaxedGridWidth;
+      & when (@variationContainerVeryRelaxed) {
+        .ui.ui.ui.very.relaxed.grid.container {
+          width: @largeMonitorVeryRelaxedGridWidth;
+        }
       }
     }
   }
@@ -129,6 +137,25 @@
   }
 }
 
+& when (@variationContainerWide) {
+  /* Wide Container */
+  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+    .ui.ui.ui.wide.container {
+      width: @tabletWideWidth;
+    }
+  }
+  @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+    .ui.ui.ui.wide.container {
+      width: @computerWideWidth;
+    }
+  }
+  @media only screen and (min-width: @largeMonitorBreakpoint) {
+    .ui.ui.ui.wide.container {
+      width: @largeMonitorWideWidth;
+    }
+  }
+}
+
 & when (@variationContainerFluid) {
   /* Fluid */
   .ui.fluid.container {
@@ -156,5 +183,115 @@
     hyphens: auto;
   }
 }
+& when (@variationContainerScrolling) {
+  /*--------------
+    Scrolling
+  ---------------*/
+  .ui.scrolling.container {
+    overflow: auto;
+  }
+  @media only screen and (max-width : @largestMobileScreen) {
+    & when (@variationContainerScrollingShort) {
+      .ui.scrolling.container.short {
+        max-height: @scrollingMobileMaxHeight * 0.75;
+      }
+    }
+    & when (@variationContainerScrollingVeryShort) {
+      .ui.scrolling.container[class*="very short"] {
+        max-height: @scrollingMobileMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.container {
+      max-height: @scrollingMobileMaxHeight;
+    }
+    & when (@variationContainerScrollingLong) {
+      .ui.scrolling.container.long {
+        max-height: @scrollingMobileMaxHeight * 2;
+      }
+    }
+    & when (@variationContainerScrollingVeryLong) {
+      .ui.scrolling.container[class*="very long"] {
+        max-height: @scrollingMobileMaxHeight * 3;
+      }
+    }
+  }
+
+  @media only screen and (min-width: @tabletBreakpoint) {
+    & when (@variationContainerScrollingShort) {
+      .ui.scrolling.container.short {
+        max-height: @scrollingTabletMaxHeight * 0.75;
+      }
+    }
+    & when (@variationContainerScrollingVeryShort) {
+      .ui.scrolling.container[class*="very short"] {
+        max-height: @scrollingTabletMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.container {
+      max-height: @scrollingTabletMaxHeight;
+    }
+    & when (@variationContainerScrollingLong) {
+      .ui.scrolling.container.long {
+        max-height: @scrollingTabletMaxHeight * 2;
+      }
+    }
+    & when (@variationContainerScrollingVeryLong) {
+      .ui.scrolling.container[class*="very long"] {
+        max-height: @scrollingTabletMaxHeight * 3;
+      }
+    }
+  }
+  @media only screen and (min-width: @computerBreakpoint) {
+    & when (@variationContainerScrollingShort) {
+      .ui.scrolling.container.short {
+        max-height: @scrollingComputerMaxHeight * 0.75;
+      }
+    }
+    & when (@variationContainerScrollingVeryShort) {
+      .ui.scrolling.container[class*="very short"] {
+        max-height: @scrollingComputerMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.container {
+      max-height: @scrollingComputerMaxHeight;
+    }
+    & when (@variationContainerScrollingLong) {
+      .ui.scrolling.container.long {
+        max-height: @scrollingComputerMaxHeight * 2;
+      }
+    }
+    & when (@variationContainerScrollingVeryLong) {
+      .ui.scrolling.container[class*="very long"]{
+        max-height: @scrollingComputerMaxHeight * 3;
+      }
+    }
+  }
+  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
+    & when (@variationContainerScrollingShort) {
+      .ui.scrolling.container.short {
+        max-height: @scrollingWidescreenMaxHeight * 0.75;
+      }
+    }
+    & when (@variationContainerScrollingVeryShort) {
+      .ui.scrolling.container[class*="very short"] {
+        max-height: @scrollingWidescreenMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.container {
+      max-height: @scrollingWidescreenMaxHeight;
+    }
+    & when (@variationContainerScrollingLong) {
+      .ui.scrolling.container.long {
+        max-height: @scrollingWidescreenMaxHeight * 2;
+      }
+    }
+    & when (@variationContainerScrollingVeryLong) {
+      .ui.scrolling.container[class*="very long"] {
+        max-height: @scrollingWidescreenMaxHeight * 3;
+      }
+    }
+  }
+}
+
 
 .loadUIOverrides();

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;
@@ -47,8 +47,10 @@ em[data-emoji]:before {
              States
 *******************************/
 
-em[data-emoji].disabled {
-  opacity: @disabledOpacity;
+& when (@variationEmojiDisabled) {
+  em[data-emoji].disabled {
+    opacity: @disabledOpacity;
+  }
 }
 
 
@@ -56,17 +58,44 @@ em[data-emoji].disabled {
            Variations
 *******************************/
 
-em[data-emoji].loading:before {
-  animation: loader @loadingDuration linear infinite;
+& when (@variationEmojiLoading) {
+  em[data-emoji].loading::before {
+    animation: loader @loadingDuration linear infinite;
+  }
 }
 
 
-/*-------------------
-         Link
---------------------*/
+& when (@variationEmojiLink) {
+  /*-------------------
+           Link
+  --------------------*/
 
-em[data-emoji].link:not(.disabled) {
-  cursor: pointer;
+  em[data-emoji].link:not(.disabled) {
+    cursor: pointer;
+  }
 }
 
+/*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

@@ -24,29 +24,65 @@
 *******************************/
 
 i.flag:not(.icon) {
-  display: inline-block;
-
-  width: @width;
-  height: @height;
-
-  line-height: @height;
-  vertical-align: @verticalAlign;
-  margin: 0 @margin 0 0;
-
-  text-decoration: inherit;
-
   speak: none;
-  -webkit-font-smoothing: antialiased;
   backface-visibility: hidden;
 }
 
-/* Sprite */
-i.flag:not(.icon):before {
+i.flag:not(.icon)::before {
+  content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
   display: inline-block;
-  content: '';
-  background: url(@spritePath) no-repeat -108px -1976px;
-  width: @width;
-  height: @height;
+  line-height: @flagLineHeight;
+  background-repeat: no-repeat;
+  background-position: center center;
+  & when not (@flagFileType = 'svg') {
+    background-size: contain;
+  }
 }
 
+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,15 +250,18 @@
     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;
     }
   }
-  .ui.icon.header.aligned {
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
+  & when (@variationHeaderAligned) {
+    .ui.icon.header.aligned {
+      margin-left: auto;
+      margin-right: auto;
+      display: block;
+    }
   }
 }
 
@@ -306,37 +310,38 @@
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @h: @colors[@@color][hover];
-  @lh: @colors[@@color][lightHover];
-
-  .ui.@{color}.header {
-    color: @c;
-  }
-  a.ui.@{color}.header:hover {
-    color: @h;
-  }
-  & when (@variationHeaderDividing) {
-    .ui.@{color}.dividing.header {
-      border-bottom: @dividedColoredBorderWidth solid @c;
+& when not (@variationHeaderColors = false) {
+  each(@variationHeaderColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    @h: @colors[@@color][hover];
+    @lh: @colors[@@color][lightHover];
+
+    .ui.@{color}.header {
+      color: @c;
     }
-  }
-  & when (@variationHeaderInverted) {
-    .ui.inverted.@{color}.header.header.header {
-      color: @l;
+    a.ui.@{color}.header:hover {
+      color: @h;
     }
-    a.ui.inverted.@{color}.header.header.header:hover {
-      color: @lh;
+    & when (@variationHeaderDividing) {
+      .ui.@{color}.dividing.header {
+        border-bottom: @dividedColoredBorderWidth solid @c;
+      }
     }
-    .ui.inverted.@{color}.dividing.header {
-      border-bottom: @dividedColoredBorderWidth solid @l;
+    & when (@variationHeaderInverted) {
+      .ui.inverted.@{color}.header.header.header {
+        color: @l;
+      }
+      a.ui.inverted.@{color}.header.header.header:hover {
+        color: @lh;
+      }
+      .ui.inverted.@{color}.dividing.header {
+        border-bottom: @dividedColoredBorderWidth solid @l;
+      }
     }
-  }
-})
+  })
+}
 
 & when (@variationHeaderAligned) {
   /*-------------------
@@ -359,7 +364,7 @@ each(@colors, {
   .ui.justified.header {
     text-align: justify;
   }
-  .ui.justified.header:after {
+  .ui.justified.header::after {
     display: inline-block;
     content: '';
     width: 100%;
@@ -403,8 +408,10 @@ each(@colors, {
     padding-bottom: @dividedBorderPadding;
     border-bottom: @dividedBorder;
   }
-  .ui.dividing.header .sub.header {
-    padding-bottom: @dividedSubHeaderPadding;
+  & when (@variationHeaderSub) {
+    .ui.dividing.header .sub.header {
+      padding-bottom: @dividedSubHeaderPadding;
+    }
   }
   .ui.dividing.header i.icon {
     margin-bottom: @dividedIconPadding;
@@ -454,8 +461,10 @@ each(@colors, {
     border: @attachedBorder;
     border-radius: 0;
   }
-  .ui.attached.block.header {
-    background: @blockBackground;
+  & when (@variationHeaderBlock) {
+    .ui.attached.block.header {
+      background: @blockBackground;
+    }
   }
   .ui.attached:not(.top).header {
     border-top: none;