fomantic-ui 2.9.3-beta.9 → 2.9.4-beta.0

package/src/definitions/collections/table.less

@@ -265,24 +265,39 @@
         & when (@variationTableScrollingShort) {
             .ui.scrolling.table.short > tbody {
                 max-height: @scrollingMobileMaxBodyHeight * 0.75;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingMobileMaxBodyHeight * 0.75;
+                }
             }
         }
         & when (@variationTableScrollingVeryShort) {
             .ui.scrolling.table[class*="very short"] > tbody {
                 max-height: @scrollingMobileMaxBodyHeight * 0.5;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingMobileMaxBodyHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.table > tbody {
             max-height: @scrollingMobileMaxBodyHeight;
+            .resizable& when (@variationTableResizable) {
+                height: @scrollingMobileMaxBodyHeight;
+            }
         }
         & when (@variationTableScrollingLong) {
             .ui.scrolling.table.long > tbody {
                 max-height: @scrollingMobileMaxBodyHeight * 2;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingMobileMaxBodyHeight * 2;
+                }
             }
         }
         & when (@variationTableScrollingVeryLong) {
             .ui.scrolling.table[class*="very long"] > tbody {
                 max-height: @scrollingMobileMaxBodyHeight * 3;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingMobileMaxBodyHeight * 3;
+                }
             }
         }
     }
@@ -320,24 +335,39 @@
         & when (@variationTableScrollingShort) {
             .ui.scrolling.table.short > tbody {
                 max-height: @scrollingTabletMaxBodyHeight * 0.75;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingTabletMaxBodyHeight * 0.75;
+                }
             }
         }
         & when (@variationTableScrollingVeryShort) {
             .ui.scrolling.table[class*="very short"] > tbody {
                 max-height: @scrollingTabletMaxBodyHeight * 0.5;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingTabletMaxBodyHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.table > tbody {
             max-height: @scrollingTabletMaxBodyHeight;
+            .resizable& when (@variationTableResizable) {
+                height: @scrollingTabletMaxBodyHeight;
+            }
         }
         & when (@variationTableScrollingLong) {
             .ui.scrolling.table.long > tbody {
                 max-height: @scrollingTabletMaxBodyHeight * 2;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingTabletMaxBodyHeight * 2;
+                }
             }
         }
         & when (@variationTableScrollingVeryLong) {
             .ui.scrolling.table[class*="very long"] > tbody {
                 max-height: @scrollingTabletMaxBodyHeight * 3;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingTabletMaxBodyHeight * 3;
+                }
             }
         }
     }
@@ -345,24 +375,39 @@
         & when (@variationTableScrollingShort) {
             .ui.scrolling.table.short > tbody {
                 max-height: @scrollingComputerMaxBodyHeight * 0.75;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingComputerMaxBodyHeight * 0.75;
+                }
             }
         }
         & when (@variationTableScrollingVeryShort) {
             .ui.scrolling.table[class*="very short"] > tbody {
                 max-height: @scrollingComputerMaxBodyHeight * 0.5;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingComputerMaxBodyHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.table > tbody {
             max-height: @scrollingComputerMaxBodyHeight;
+            .resizable& when (@variationTableResizable) {
+                height: @scrollingComputerMaxBodyHeight;
+            }
         }
         & when (@variationTableScrollingLong) {
             .ui.scrolling.table.long > tbody {
                 max-height: @scrollingComputerMaxBodyHeight * 2;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingComputerMaxBodyHeight * 2;
+                }
             }
         }
         & when (@variationTableScrollingVeryLong) {
             .ui.scrolling.table[class*="very long"] > tbody {
                 max-height: @scrollingComputerMaxBodyHeight * 3;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingComputerMaxBodyHeight * 3;
+                }
             }
         }
     }
@@ -370,24 +415,39 @@
         & when (@variationTableScrollingShort) {
             .ui.scrolling.table.short > tbody {
                 max-height: @scrollingWidescreenMaxBodyHeight * 0.75;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingWidescreenMaxBodyHeight * 0.75;
+                }
             }
         }
         & when (@variationTableScrollingVeryShort) {
             .ui.scrolling.table[class*="very short"] > tbody {
                 max-height: @scrollingWidescreenMaxBodyHeight * 0.5;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingWidescreenMaxBodyHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.table > tbody {
             max-height: @scrollingWidescreenMaxBodyHeight;
+            .resizable& when (@variationTableResizable) {
+                height: @scrollingWidescreenMaxBodyHeight;
+            }
         }
         & when (@variationTableScrollingLong) {
             .ui.scrolling.table.long > tbody {
                 max-height: @scrollingWidescreenMaxBodyHeight * 2;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingWidescreenMaxBodyHeight * 2;
+                }
             }
         }
         & when (@variationTableScrollingVeryLong) {
             .ui.scrolling.table[class*="very long"] > tbody {
                 max-height: @scrollingWidescreenMaxBodyHeight * 3;
+                .resizable& when (@variationTableResizable) {
+                    height: @scrollingWidescreenMaxBodyHeight * 3;
+                }
             }
         }
     }
@@ -489,6 +549,12 @@
             scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
         }
     }
+    & when (@variationTableResizable) {
+        .ui.resizable.scrolling.table > tbody {
+            resize: @resizableDirection;
+            max-height: none;
+        }
+    }
 }
 & when (@variationTableOverflowing) {
     /* --------------

package/src/definitions/elements/button.less

@@ -120,7 +120,7 @@
     --------------- */
 
     /* Specificity hack */
-    .ui.loading.loading.loading.loading.loading.loading.button {
+    .ui.ui.ui.ui.ui.ui.loading.button {
         position: relative;
         cursor: default;
         text-shadow: none !important;

package/src/definitions/elements/container.less

@@ -195,11 +195,17 @@
         & when (@variationContainerScrollingShort) {
             .ui.scrolling.container.short {
                 max-height: @scrollingMobileMaxHeight * 0.75;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingMobileMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationContainerScrollingVeryShort) {
             .ui.scrolling.container[class*="very short"] {
                 max-height: @scrollingMobileMaxHeight * 0.5;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingMobileMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.container {
@@ -208,11 +214,17 @@
         & when (@variationContainerScrollingLong) {
             .ui.scrolling.container.long {
                 max-height: @scrollingMobileMaxHeight * 2;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingMobileMaxHeight * 2;
+                }
             }
         }
         & when (@variationContainerScrollingVeryLong) {
             .ui.scrolling.container[class*="very long"] {
                 max-height: @scrollingMobileMaxHeight * 3;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingMobileMaxHeight * 3;
+                }
             }
         }
     }
@@ -221,24 +233,39 @@
         & when (@variationContainerScrollingShort) {
             .ui.scrolling.container.short {
                 max-height: @scrollingTabletMaxHeight * 0.75;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingTabletMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationContainerScrollingVeryShort) {
             .ui.scrolling.container[class*="very short"] {
                 max-height: @scrollingTabletMaxHeight * 0.5;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingTabletMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.container {
             max-height: @scrollingTabletMaxHeight;
+            &.resizable when (@variationContainerResizable) {
+                height: @scrollingTabletMaxHeight;
+            }
         }
         & when (@variationContainerScrollingLong) {
             .ui.scrolling.container.long {
                 max-height: @scrollingTabletMaxHeight * 2;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingTabletMaxHeight * 2;
+                }
             }
         }
         & when (@variationContainerScrollingVeryLong) {
             .ui.scrolling.container[class*="very long"] {
                 max-height: @scrollingTabletMaxHeight * 3;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingTabletMaxHeight * 3;
+                }
             }
         }
     }
@@ -246,24 +273,39 @@
         & when (@variationContainerScrollingShort) {
             .ui.scrolling.container.short {
                 max-height: @scrollingComputerMaxHeight * 0.75;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingComputerMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationContainerScrollingVeryShort) {
             .ui.scrolling.container[class*="very short"] {
                 max-height: @scrollingComputerMaxHeight * 0.5;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingComputerMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.container {
             max-height: @scrollingComputerMaxHeight;
+            &.resizable when (@variationContainerResizable) {
+                height: @scrollingComputerMaxHeight;
+            }
         }
         & when (@variationContainerScrollingLong) {
             .ui.scrolling.container.long {
                 max-height: @scrollingComputerMaxHeight * 2;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingComputerMaxHeight * 2;
+                }
             }
         }
         & when (@variationContainerScrollingVeryLong) {
             .ui.scrolling.container[class*="very long"] {
                 max-height: @scrollingComputerMaxHeight * 3;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingComputerMaxHeight * 3;
+                }
             }
         }
     }
@@ -271,27 +313,48 @@
         & when (@variationContainerScrollingShort) {
             .ui.scrolling.container.short {
                 max-height: @scrollingWidescreenMaxHeight * 0.75;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingWidescreenMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationContainerScrollingVeryShort) {
             .ui.scrolling.container[class*="very short"] {
                 max-height: @scrollingWidescreenMaxHeight * 0.5;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingWidescreenMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.container {
             max-height: @scrollingWidescreenMaxHeight;
+            &.resizable when (@variationContainerResizable) {
+                height: @scrollingWidescreenMaxHeight;
+            }
         }
         & when (@variationContainerScrollingLong) {
             .ui.scrolling.container.long {
                 max-height: @scrollingWidescreenMaxHeight * 2;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingWidescreenMaxHeight * 2;
+                }
             }
         }
         & when (@variationContainerScrollingVeryLong) {
             .ui.scrolling.container[class*="very long"] {
                 max-height: @scrollingWidescreenMaxHeight * 3;
+                &.resizable when (@variationContainerResizable) {
+                    height: @scrollingWidescreenMaxHeight * 3;
+                }
             }
         }
     }
+    & when (@variationContainerResizable) {
+        .ui.resizable.scrolling.container {
+            resize: @resizableDirection;
+            max-height: none;
+        }
+    }
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/src/definitions/elements/icon.less

@@ -48,7 +48,7 @@ i.icon {
 }
 
 i.icon::before {
-    background: none !important;
+    background: none;
 }
 
 /*******************************
@@ -322,16 +322,16 @@ i.emphasized.icons:not(.disabled) {
         @c: @colors[@@color][color];
         @l: @colors[@@color][light];
 
-        i.@{color}.icon.icon.icon.icon.icon {
+        i.@{color}.icon.icon.icon.icon.icon.icon {
             color: @c;
         }
         & when (@variationIconInverted) {
-            i.inverted.@{color}.icon.icon.icon.icon.icon {
+            i.inverted.@{color}.icon.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}.icon.icon.icon.icon.icon.icon,
+                i.inverted.circular.@{color}.icon.icon.icon.icon.icon.icon,
                 i.inverted.bordered.@{color}.icons,
                 i.inverted.circular.@{color}.icons {
                     background-color: @c;

package/src/definitions/elements/input.less

@@ -110,7 +110,7 @@
            Loading
     --------------------- */
 
-    .ui.loading.loading.input > i.icon::before {
+    .ui.ui.loading.input > i.icon::before {
         position: absolute;
         content: "";
         top: 50%;
@@ -121,7 +121,7 @@
         border-radius: @circularRadius;
         border: @loaderLineWidth solid @loaderFillColor;
     }
-    .ui.loading.loading.input > i.icon::after {
+    .ui.ui.loading.input > i.icon::after {
         position: absolute;
         content: "";
         top: 50%;

package/src/definitions/elements/label.less

@@ -440,7 +440,22 @@ a.ui.label {
         border-top-color: inherit;
     }
 
-    /* Inside Table */
+    .ui.ui.center.ribbon.label {
+        top: @ribbonCenterOffset;
+        z-index: @ribbonZIndex;
+    }
+    .ui.bottom.ribbon.label::after {
+        bottom: 100%;
+        top: auto;
+        border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0;
+    }
+    .ui.bottom[class*="right ribbon"].label::after {
+        border-width: @ribbonTriangleSize 0 0 @ribbonTriangleSize;
+        border-color: transparent;
+        border-left-color: inherit;
+    }
+
+    /* Inside Image */
     .ui.image > .ribbon.label,
     .ui.card .image > .ribbon.label {
         position: absolute;
@@ -455,6 +470,11 @@ a.ui.label {
         left: @rightRibbonImageOffset;
         padding-left: @horizontalPadding;
     }
+    .ui.card .image > .ui.bottom.ribbon.label,
+    .ui.image > .ui.bottom.ribbon.label {
+        bottom: @ribbonImageBottomDistance;
+        top: auto;
+    }
 
     /* Inside Table */
     .ui.table td > .ui.ribbon.label {

package/src/definitions/elements/list.less

@@ -477,16 +477,16 @@ ol.ui.list ol li,
         color: @linkListItemColor;
         transition: @linkListTransition;
     }
-    .ui.link.list.list a.item:hover,
-    .ui.link.list.list .item a:not(.ui):hover {
+    .ui.ui.link.list a.item:hover,
+    .ui.ui.link.list .item a:not(.ui):hover {
         color: @linkListItemHoverColor;
     }
-    .ui.link.list.list a.item:active,
-    .ui.link.list.list .item a:not(.ui):active {
+    .ui.ui.link.list a.item:active,
+    .ui.ui.link.list .item a:not(.ui):active {
         color: @linkListItemDownColor;
     }
-    .ui.link.list.list .active.item,
-    .ui.link.list.list .active.item a:not(.ui) {
+    .ui.ui.link.list .active.item,
+    .ui.ui.link.list .active.item a:not(.ui) {
         color: @linkListItemActiveColor;
     }
     & when (@variationListInverted) {
@@ -496,16 +496,16 @@ ol.ui.list ol li,
         .ui.inverted.link.list .item a:not(.ui) {
             color: @invertedLinkListItemColor;
         }
-        .ui.inverted.link.list.list a.item:hover,
-        .ui.inverted.link.list.list .item a:not(.ui):hover {
+        .ui.ui.inverted.link.list a.item:hover,
+        .ui.ui.inverted.link.list .item a:not(.ui):hover {
             color: @invertedLinkListItemHoverColor;
         }
-        .ui.inverted.link.list.list a.item:active,
-        .ui.inverted.link.list.list .item a:not(.ui):active {
+        .ui.ui.inverted.link.list a.item:active,
+        .ui.ui.inverted.link.list .item a:not(.ui):active {
             color: @invertedLinkListItemDownColor;
         }
-        .ui.inverted.link.list.list a.active.item,
-        .ui.inverted.link.list.list .active.item a:not(.ui) {
+        .ui.ui.inverted.link.list a.active.item,
+        .ui.ui.inverted.link.list .active.item a:not(.ui) {
             color: @invertedLinkListItemActiveColor;
         }
     }
@@ -681,7 +681,7 @@ ol.ui.list ol li,
     .ui.ordered.list,
     .ui.ordered.list .list:not(.icon),
     ol.ui.list ol {
-        counter-reset: ordered;
+        counter-reset: @orderedCountName;
         margin-left: @orderedCountDistance;
         list-style-type: none;
     }