fomantic-ui 2.9.3-beta.19 → 2.9.3-beta.20

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/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/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;
         }
     }

package/src/definitions/elements/loader.less

@@ -62,16 +62,16 @@
 & when (@variationLoaderSpeeds) {
     /* Speeds */
 
-    .ui.fast.loading.loading::after,
-    .ui.fast.loading.loading .input > i.icon::after,
-    .ui.fast.loading.loading > i.icon::after,
+    .ui.ui.fast.loading::after,
+    .ui.ui.fast.loading .input > i.icon::after,
+    .ui.ui.fast.loading > i.icon::after,
     .ui.fast.loader::after {
         animation-duration: @loaderSpeedFast;
     }
 
-    .ui.slow.loading.loading::after,
-    .ui.slow.loading.loading .input > i.icon::after,
-    .ui.slow.loading.loading > i.icon::after,
+    .ui.ui.slow.loading::after,
+    .ui.ui.slow.loading .input > i.icon::after,
+    .ui.ui.slow.loading > i.icon::after,
     .ui.slow.loader::after {
         animation-duration: @loaderSpeedSlow;
     }
@@ -204,49 +204,49 @@
         @c: @colors[@@color][color];
         @l: @colors[@@color][light];
 
-        .ui.@{color}.elastic.loader.loader::before,
+        .ui.ui.@{color}.elastic.loader::before,
         .ui.@{color}.basic.elastic.loading.button::before,
         .ui.@{color}.basic.elastic.loading.button::after,
-        .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
-        .ui.@{color}.elastic.loading.loading.loading .input > i.icon::before,
-        .ui.@{color}.elastic.loading.loading.loading.loading > i.icon::before,
-        .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button)::after,
-        .ui.@{color}.loading.loading.loading.loading .input > i.icon::after,
-        .ui.@{color}.loading.loading.loading.loading > i.icon::after,
-        .ui.@{color}.loader.loader.loader::after {
+        .ui.ui.ui.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before,
+        .ui.ui.ui.@{color}.elastic.loading .input > i.icon::before,
+        .ui.ui.ui.ui.@{color}.elastic.loading > i.icon::before,
+        .ui.ui.ui.ui.@{color}.loading:not(.usual):not(.button)::after,
+        .ui.ui.ui.ui.@{color}.loading .input > i.icon::after,
+        .ui.ui.ui.ui.@{color}.loading > i.icon::after,
+        .ui.ui.ui.@{color}.loader::after {
             color: @c;
         }
         .ui.inverted.@{color}.elastic.loader::before,
-        .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
-        .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon::before,
-        .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon::before,
-        .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual)::after,
-        .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon::after,
-        .ui.inverted.@{color}.loading.loading.loading.loading > i.icon::after,
-        .ui.inverted.@{color}.loader.loader.loader::after {
+        .ui.ui.ui.inverted.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before,
+        .ui.ui.ui.inverted.@{color}.elastic.loading .input > i.icon::before,
+        .ui.ui.ui.inverted.@{color}.elastic.loading > i.icon::before,
+        .ui.ui.ui.ui.inverted.@{color}.loading:not(.usual)::after,
+        .ui.ui.ui.ui.inverted.@{color}.loading .input > i.icon::after,
+        .ui.ui.ui.ui.inverted.@{color}.loading > i.icon::after,
+        .ui.ui.ui.inverted.@{color}.loader::after {
             color: @l;
         }
     });
 }
 
-.ui.elastic.loader.loader::before,
-.ui.elastic.loading.loading.loading::before,
-.ui.elastic.loading.loading.loading .input > i.icon::before,
-.ui.elastic.loading.loading.loading > i.icon::before,
-.ui.loading.loading.loading.loading:not(.usual)::after,
-.ui.loading.loading.loading.loading .input > i.icon::after,
-.ui.loading.loading.loading.loading > i.icon::after,
-.ui.loader.loader.loader::after {
+.ui.ui.elastic.loader::before,
+.ui.ui.ui.elastic.loading::before,
+.ui.ui.ui.elastic.loading .input > i.icon::before,
+.ui.ui.ui.elastic.loading > i.icon::before,
+.ui.ui.ui.ui.loading:not(.usual)::after,
+.ui.ui.ui.ui.loading .input > i.icon::after,
+.ui.ui.ui.ui.loading > i.icon::after,
+.ui.ui.ui.loader::after {
     border-color: currentColor;
 }
-.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic)::before {
+.ui.ui.ui.ui.elastic.loading.button:not(.inverted):not(.basic)::before {
     color: @invertedLoaderLineColor;
 }
 .ui.elastic.basic.loading.button::before,
 .ui.elastic.basic.loading.button::after {
     color: @loaderLineColor;
 }
-.ui.double.loading.loading.loading.loading.button::after {
+.ui.ui.ui.ui.double.loading.button::after {
     border-bottom-color: currentColor;
 }
 
@@ -278,30 +278,30 @@
     }
 }
 
-.ui.loading.loading.loading.loading.loading.loading::after,
-.ui.loading.loading.loading.loading.loading.loading .input > i.icon::after,
-.ui.loading.loading.loading.loading.loading.loading > i.icon::after,
-.ui.loader.loader.loader.loader.loader::after {
+.ui.ui.ui.ui.ui.ui.loading::after,
+.ui.ui.ui.ui.ui.ui.loading .input > i.icon::after,
+.ui.ui.ui.ui.ui.ui.loading > i.icon::after,
+.ui.ui.ui.ui.ui.loader::after {
     border-left-color: transparent;
     border-right-color: transparent;
 }
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double)::after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon::after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon::after,
-.ui.loader.loader.loader.loader.loader.loader:not(.double)::after {
+.ui.ui.ui.ui.ui.ui.ui.loading:not(.double)::after,
+.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) .input > i.icon::after,
+.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) > i.icon::after,
+.ui.ui.ui.ui.ui.ui.loader:not(.double)::after {
     border-bottom-color: transparent;
 }
-.ui.loading.loading.loading.loading.loading.loading.card::after,
-.ui.loading.loading.loading.loading.loading.loading.segments::after,
-.ui.loading.loading.loading.loading.loading.loading.segment::after,
-.ui.loading.loading.loading.loading.loading.loading.form::after {
+.ui.ui.ui.ui.ui.ui.loading.card::after,
+.ui.ui.ui.ui.ui.ui.loading.segments::after,
+.ui.ui.ui.ui.ui.ui.loading.segment::after,
+.ui.ui.ui.ui.ui.ui.loading.form::after {
     border-left-color: @loaderFillColor;
     border-right-color: @loaderFillColor;
 }
-.ui.loading.loading.loading.loading.loading.loading.card:not(.double)::after,
-.ui.loading.loading.loading.loading.loading.loading.segments:not(.double)::after,
-.ui.loading.loading.loading.loading.loading.loading.segment:not(.double)::after,
-.ui.loading.loading.loading.loading.loading.loading.form:not(.double)::after {
+.ui.ui.ui.ui.ui.ui.loading.card:not(.double)::after,
+.ui.ui.ui.ui.ui.ui.loading.segments:not(.double)::after,
+.ui.ui.ui.ui.ui.ui.loading.segment:not(.double)::after,
+.ui.ui.ui.ui.ui.ui.loading.form:not(.double)::after {
     border-bottom-color: @loaderFillColor;
 }
 
@@ -316,17 +316,17 @@
     .ui.inverted.dimmer > .ui.elastic.loader {
         color: @loaderLineColor;
     }
-    .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-    .ui.elastic.loading.loading .input > i.icon::after,
-    .ui.elastic.loading.loading > i.icon::after,
-    .ui.elastic.loader.loader::after {
+    .ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+    .ui.ui.elastic.loading .input > i.icon::after,
+    .ui.ui.elastic.loading > i.icon::after,
+    .ui.ui.elastic.loader::after {
         animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
         animation-delay: 0.3s;
     }
-    .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-    .ui.elastic.loading.loading.loading .input > i.icon::before,
-    .ui.elastic.loading.loading.loading > i.icon::before,
-    .ui.elastic.loader.loader::before {
+    .ui.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+    .ui.ui.ui.elastic.loading .input > i.icon::before,
+    .ui.ui.ui.elastic.loading > i.icon::before,
+    .ui.ui.elastic.loader::before {
         animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
         // https://github.com/fomantic/Fomantic-UI/pull/363
         // stylelint-disable-next-line property-no-vendor-prefix
@@ -339,30 +339,30 @@
         }
     }
     & when (@variationLoaderSpeeds) {
-        .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-        .ui.slow.elastic.loading.loading .input > i.icon::after,
-        .ui.slow.elastic.loading.loading > i.icon::after,
-        .ui.slow.elastic.loader.loader::after {
+        .ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+        .ui.ui.slow.elastic.loading .input > i.icon::after,
+        .ui.ui.slow.elastic.loading > i.icon::after,
+        .ui.ui.slow.elastic.loader::after {
             animation-duration: 1.5s;
             animation-delay: 0.45s;
         }
-        .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-        .ui.slow.elastic.loading.loading.loading .input > i.icon::before,
-        .ui.slow.elastic.loading.loading.loading > i.icon::before,
-        .ui.slow.elastic.loader.loader::before {
+        .ui.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+        .ui.ui.ui.slow.elastic.loading .input > i.icon::before,
+        .ui.ui.ui.slow.elastic.loading > i.icon::before,
+        .ui.ui.slow.elastic.loader::before {
             animation-duration: 1.5s;
         }
-        .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-        .ui.fast.elastic.loading.loading .input > i.icon::after,
-        .ui.fast.elastic.loading.loading > i.icon::after,
-        .ui.fast.elastic.loader.loader::after {
+        .ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+        .ui.ui.fast.elastic.loading .input > i.icon::after,
+        .ui.ui.fast.elastic.loading > i.icon::after,
+        .ui.ui.fast.elastic.loader::after {
             animation-duration: 0.66s;
             animation-delay: 0.2s;
         }
-        .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-        .ui.fast.elastic.loading.loading.loading .input > i.icon::before,
-        .ui.fast.elastic.loading.loading.loading > i.icon::before,
-        .ui.fast.elastic.loader.loader::before {
+        .ui.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+        .ui.ui.ui.fast.elastic.loading .input > i.icon::before,
+        .ui.ui.ui.fast.elastic.loading > i.icon::before,
+        .ui.ui.fast.elastic.loader::before {
             animation-duration: 0.66s;
         }
     }

package/src/definitions/elements/segment.less

@@ -368,13 +368,13 @@
            Raised
     -------------------- */
 
-    .ui.raised.raised.segments,
-    .ui.raised.raised.segment {
+    .ui.ui.raised.segments,
+    .ui.ui.raised.segment {
         box-shadow: @raisedBoxShadow;
     }
     & when (@variationSegmentInverted) {
-        .ui.inverted.raised.raised.segments,
-        .ui.inverted.raised.raised.segment {
+        .ui.ui.inverted.raised.segments,
+        .ui.ui.inverted.raised.segment {
             box-shadow: @invertedRaisedBoxShadow;
         }
     }
@@ -848,24 +848,39 @@
         & when (@variationSegmentScrollingShort) {
             .ui.scrolling.segment.short {
                 max-height: @scrollingMobileMaxHeight * 0.75;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingMobileMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryShort) {
             .ui.scrolling.segment[class*="very short"] {
                 max-height: @scrollingMobileMaxHeight * 0.5;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingMobileMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.segment {
             max-height: @scrollingMobileMaxHeight;
+            &.resizable when (@variationSegmentResizable) {
+                height: @scrollingMobileMaxHeight;
+            }
         }
         & when (@variationSegmentScrollingLong) {
             .ui.scrolling.segment.long {
                 max-height: @scrollingMobileMaxHeight * 2;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingMobileMaxHeight * 2;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryLong) {
             .ui.scrolling.segment[class*="very long"] {
                 max-height: @scrollingMobileMaxHeight * 3;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingMobileMaxHeight * 3;
+                }
             }
         }
     }
@@ -874,24 +889,39 @@
         & when (@variationSegmentScrollingShort) {
             .ui.scrolling.segment.short {
                 max-height: @scrollingTabletMaxHeight * 0.75;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingTabletMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryShort) {
             .ui.scrolling.segment[class*="very short"] {
                 max-height: @scrollingTabletMaxHeight * 0.5;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingTabletMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.segment {
             max-height: @scrollingTabletMaxHeight;
+            &.resizable when (@variationSegmentResizable) {
+                height: @scrollingTabletMaxHeight;
+            }
         }
         & when (@variationSegmentScrollingLong) {
             .ui.scrolling.segment.long {
                 max-height: @scrollingTabletMaxHeight * 2;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingTabletMaxHeight * 2;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryLong) {
             .ui.scrolling.segment[class*="very long"] {
                 max-height: @scrollingTabletMaxHeight * 3;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingTabletMaxHeight * 3;
+                }
             }
         }
     }
@@ -899,24 +929,39 @@
         & when (@variationSegmentScrollingShort) {
             .ui.scrolling.segment.short {
                 max-height: @scrollingComputerMaxHeight * 0.75;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingComputerMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryShort) {
             .ui.scrolling.segment[class*="very short"] {
                 max-height: @scrollingComputerMaxHeight * 0.5;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingComputerMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.segment {
             max-height: @scrollingComputerMaxHeight;
+            &.resizable when (@variationSegmentResizable) {
+                height: @scrollingComputerMaxHeight;
+            }
         }
         & when (@variationSegmentScrollingLong) {
             .ui.scrolling.segment.long {
                 max-height: @scrollingComputerMaxHeight * 2;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingComputerMaxHeight * 2;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryLong) {
             .ui.scrolling.segment[class*="very long"] {
                 max-height: @scrollingComputerMaxHeight * 3;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingComputerMaxHeight * 3;
+                }
             }
         }
     }
@@ -924,27 +969,48 @@
         & when (@variationSegmentScrollingShort) {
             .ui.scrolling.segment.short {
                 max-height: @scrollingWidescreenMaxHeight * 0.75;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingWidescreenMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryShort) {
             .ui.scrolling.segment[class*="very short"] {
                 max-height: @scrollingWidescreenMaxHeight * 0.5;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingWidescreenMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.segment {
             max-height: @scrollingWidescreenMaxHeight;
+            &.resizable when (@variationSegmentResizable) {
+                height: @scrollingWidescreenMaxHeight;
+            }
         }
         & when (@variationSegmentScrollingLong) {
             .ui.scrolling.segment.long {
                 max-height: @scrollingWidescreenMaxHeight * 2;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingWidescreenMaxHeight * 2;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryLong) {
             .ui.scrolling.segment[class*="very long"] {
                 max-height: @scrollingWidescreenMaxHeight * 3;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingWidescreenMaxHeight * 3;
+                }
             }
         }
     }
+    & when (@variationSegmentResizable) {
+        .ui.resizable.scrolling.segment {
+            resize: @resizableDirection;
+            max-height: none;
+        }
+    }
 }
 
 /* -------------------

package/src/definitions/modules/dimmer.less

@@ -220,7 +220,7 @@ body.dimmable > .dimmer {
     .light.light.light.light.light.dimmer {
         background: @lightBackgroundColor;
     }
-    .very.light.light.light.light.dimmer {
+    .very.very.very.very.light.dimmer {
         background: @veryLightBackgroundColor;
     }
 }
@@ -249,7 +249,7 @@ body.dimmable > .dimmer {
         .light.light.light.light.light.inverted.dimmer {
             background: @lightInvertedBackgroundColor;
         }
-        .very.light.light.light.light.inverted.dimmer {
+        .very.very.very.very.light.inverted.dimmer {
             background: @veryLightInvertedBackgroundColor;
         }
     }