fomantic-ui 2.9.0-beta.2 → 2.9.0-beta.202

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;
+        }
       }
     }
   }
@@ -156,5 +164,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/emoji.less

@@ -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,21 @@ 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;
+  }
 }
 
 .loadUIOverrides();

package/src/definitions/elements/flag.less

@@ -24,29 +24,19 @@
 *******************************/
 
 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 {
+  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;
+  }
 }
 
 .loadUIOverrides();

package/src/definitions/elements/header.less

@@ -254,10 +254,12 @@
       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 +308,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) {
   /*-------------------
@@ -403,8 +406,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 +459,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;

package/src/definitions/elements/icon.less

@@ -22,16 +22,17 @@
 /*******************************
              Icon
 *******************************/
-
-@font-face {
-  font-family: 'Icons';
-  src: @fallbackSRC;
-  src: @src;
-  font-style: normal;
-  font-weight: @normal;
-  font-variant: normal;
-  text-decoration: inherit;
-  text-transform: none;
+& 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;
+  }
 }
 
 i.icon {
@@ -104,6 +105,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
           Fitted
   --------------------*/
 
+  i.fitted.icons,
   i.fitted.icon {
     width: auto;
     margin: 0 !important;
@@ -319,30 +321,31 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  i.@{color}.icon.icon.icon.icon.icon {
-    color: @c;
-  }
-  & when (@variationIconInverted) {
-    i.inverted.@{color}.icon.icon.icon.icon.icon {
-      color: @l;
+& when not (@variationIconColors = false) {
+  each(@variationIconColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    i.@{color}.icon.icon.icon.icon.icon {
+      color: @c;
     }
-    & when (@variationIconBordered) or (@variationIconCircular) {
-      i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
-      i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
-      i.inverted.bordered.@{color}.icons,
-      i.inverted.circular.@{color}.icons {
-        background-color: @c;
-        color: @white;
+    & when (@variationIconInverted) {
+      i.inverted.@{color}.icon.icon.icon.icon.icon {
+        color: @l;
+      }
+      & when (@variationIconBordered) or (@variationIconCircular) {
+        i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
+        i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
+        i.inverted.bordered.@{color}.icons,
+        i.inverted.circular.@{color}.icons {
+          background-color: @c;
+          color: @white;
+        }
       }
     }
-  }
-})
+  })
+}
 
 
 /*-------------------
@@ -375,6 +378,10 @@ i.icons {
     display: inline-block;
     position: relative;
     line-height: 1;
+    min-width: @width;
+    min-height: @height;
+    margin: 0 @distanceFromText 0 0;
+    text-align: center;
   }
 
   i.icons .icon {