fomantic-ui 2.10.0-beta.2 → 2.10.0-beta.21

package/src/definitions/collections/form.less

@@ -406,9 +406,6 @@
 .ui.form ::placeholder {
     color: @inputPlaceholderColor;
 }
-.ui.form :-ms-input-placeholder when (@supportIE) {
-    color: @inputPlaceholderColor !important;
-}
 .ui.form ::-moz-placeholder {
     opacity: 1;
 }
@@ -416,9 +413,6 @@
 .ui.form :focus::placeholder {
     color: @inputPlaceholderFocusColor;
 }
-.ui.form :focus:-ms-input-placeholder when (@supportIE) {
-    color: @inputPlaceholderFocusColor !important;
-}
 
 /* --------------------
         Focus
@@ -645,7 +639,7 @@
             border-color: @formStates[@@state][inputHoverBorderColor];
         }
 
-        /* Preserve Native Select Stylings */
+        /* Preserve Native Select Styling */
         .ui.form .field.@{state} select {
             -webkit-appearance: menulist-button;
         }
@@ -675,17 +669,11 @@
         .ui.form .@{state} ::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
-        .ui.form .@{state} :-ms-input-placeholder when (@supportIE) {
-            color: @formStates[@@state][inputPlaceholderColor] !important;
-        }
 
         .ui.form .@{state} .ui.dropdown > input:focus ~ .default.text,
         .ui.form .@{state} :focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }
-        .ui.form .@{state} :focus:-ms-input-placeholder when (@supportIE) {
-            color: @formStates[@@state][inputPlaceholderFocusColor] !important;
-        }
 
         /*------------------
             Dropdown State

package/src/definitions/collections/grid.less

@@ -160,58 +160,6 @@
            Variations
 *******************************/
 
-& when (@variationGridPage) {
-    /* -----------------------
-           Page Grid
-    ------------------------- */
-
-    @media only screen and (max-width: @largestMobileScreen) {
-        .ui.page.grid {
-            width: @mobileWidth;
-            padding-left: @mobileGutter;
-            padding-right: @mobileGutter;
-            margin-left: 0;
-            margin-right: 0;
-        }
-    }
-    @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-        .ui.page.grid {
-            width: @tabletWidth;
-            margin-left: @tabletMargin;
-            margin-right: @tabletMargin;
-            padding-left: @tabletGutter;
-            padding-right: @tabletGutter;
-        }
-    }
-    @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-        .ui.page.grid {
-            width: @computerWidth;
-            margin-left: @computerMargin;
-            margin-right: @computerMargin;
-            padding-left: @computerGutter;
-            padding-right: @computerGutter;
-        }
-    }
-    @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
-        .ui.page.grid {
-            width: @largeMonitorWidth;
-            margin-left: @largeMonitorMargin;
-            margin-right: @largeMonitorMargin;
-            padding-left: @largeMonitorGutter;
-            padding-right: @largeMonitorGutter;
-        }
-    }
-    @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-        .ui.page.grid {
-            width: @widescreenMonitorWidth;
-            margin-left: @widescreenMargin;
-            margin-right: @widescreenMargin;
-            padding-left: @widescreenMonitorGutter;
-            padding-right: @widescreenMonitorGutter;
-        }
-    }
-}
-
 /* -------------------
      Column Count
 -------------------- */
@@ -338,13 +286,6 @@
     width: @sixteenColumn !important;
 }
 
-& when (@variationGridCelled) and (@variationGridPage) {
-    /* Celled Page */
-    .ui.celled.page.grid {
-        box-shadow: none;
-    }
-}
-
 & when (@variationGridWide) {
     /* -------------------
         Column Width
@@ -1724,8 +1665,7 @@
         }
 
         /* Don't pad inside segment or nested grid */
-        .ui.grid .ui.stackable.grid,
-        .ui.segment@{notVertical} .ui.stackable.page.grid {
+        .ui.grid .ui.stackable.grid {
             margin-left: -(@stackableGutter / 2);
             margin-right: -(@stackableGutter / 2);
         }

package/src/definitions/collections/menu.less

@@ -19,7 +19,7 @@
 
 @notSecondary: if(@variationMenuSecondary, e(":not(.secondary)"));
 @notText: if(@variationMenuText, e(":not(.text)"));
-@notTabular: if(@variationMenuTabular, e(":not(.tabular)"));
+@notTabbed: if(@variationMenuTabbed, e(":not(.tabbed)"));
 @notVertical: if(@variationMenuVertical, e(":not(.vertical)"));
 @notBorderless: if(@variationMenuBorderless, e(":not(.borderless)"));
 @notFluid: if(@variationMenuFluid, e(":not(.fluid)"));
@@ -296,11 +296,6 @@
     }
     .ui.vertical.menu .dropdown.item .menu {
         left: 100%;
-        & when (@supportIE) {
-            /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
-            min-width: 0;
-        }
-
         min-width: max-content;
         margin: 0 0 0 @dropdownMenuDistance;
         box-shadow: @dropdownVerticalMenuBoxShadow;
@@ -412,11 +407,11 @@
     }
 }
 @media only screen and (min-width: @tabletBreakpoint) {
-    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .item:not(.right)@{notBorderless}:first-child {
+    .ui.menu@{notSecondary}@{notText}@{notTabbed}@{notBorderless} > .container > .item:not(.right)@{notBorderless}:first-child {
         border-left: @dividerSize solid @dividerBackground;
     }
-    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .right.item@{notBorderless}:last-child,
-    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .right.menu > .item@{notBorderless}:last-child {
+    .ui.menu@{notSecondary}@{notText}@{notTabbed}@{notBorderless} > .container > .right.item@{notBorderless}:last-child,
+    .ui.menu@{notSecondary}@{notText}@{notTabbed}@{notBorderless} > .container > .right.menu > .item@{notBorderless}:last-child {
         border-right: @dividerSize solid @dividerBackground;
     }
 }
@@ -634,156 +629,156 @@ Floated Menu / Item
     }
 }
 
-& when (@variationMenuTabular) {
+& when (@variationMenuTabbed) {
     /* --------------
-         Tabular
+         Tabbed
     --------------- */
 
-    .ui.tabular.menu {
+    .ui.tabbed.menu {
         border-radius: 0;
         box-shadow: none !important;
         border: none;
-        background: @tabularBackground;
-        border-bottom: @tabularBorderWidth solid @tabularBorderColor;
+        background: @tabbedBackground;
+        border-bottom: @tabbedBorderWidth solid @tabbedBorderColor;
     }
-    .ui.tabular.fluid.menu {
-        width: @tabularFluidWidth !important;
+    .ui.tabbed.fluid.menu {
+        width: @tabbedFluidWidth !important;
     }
-    .ui.tabular.menu .item {
+    .ui.tabbed.menu .item {
         background: transparent;
         border-bottom: none;
-        border-left: @tabularBorderWidth solid transparent;
-        border-right: @tabularBorderWidth solid transparent;
-        border-top: @tabularOppositeBorderWidth solid transparent;
-        padding: @tabularVerticalPadding @tabularHorizontalPadding;
-        color: @tabularTextColor;
+        border-left: @tabbedBorderWidth solid transparent;
+        border-right: @tabbedBorderWidth solid transparent;
+        border-top: @tabbedOppositeBorderWidth solid transparent;
+        padding: @tabbedVerticalPadding @tabbedHorizontalPadding;
+        color: @tabbedTextColor;
     }
-    .ui.tabular.menu .item::before {
+    .ui.tabbed.menu .item::before {
         display: none;
     }
 
     /* Hover */
-    .ui.tabular.menu .item:hover {
+    .ui.tabbed.menu .item:hover {
         background-color: transparent;
-        color: @tabularHoveredTextColor;
+        color: @tabbedHoveredTextColor;
     }
 
     /* Active */
-    .ui.tabular.menu .active.item {
-        background: @tabularActiveBackground;
-        color: @tabularActiveColor;
-        border-top-width: @tabularBorderWidth;
-        border-color: @tabularBorderColor;
-        font-weight: @tabularActiveWeight;
-        margin-bottom: -@tabularBorderWidth;
-        box-shadow: @tabularActiveBoxShadow;
-        border-radius: @tabularBorderRadius @tabularBorderRadius 0 0 !important;
+    .ui.tabbed.menu .active.item {
+        background: @tabbedActiveBackground;
+        color: @tabbedActiveColor;
+        border-top-width: @tabbedBorderWidth;
+        border-color: @tabbedBorderColor;
+        font-weight: @tabbedActiveWeight;
+        margin-bottom: -@tabbedBorderWidth;
+        box-shadow: @tabbedActiveBoxShadow;
+        border-radius: @tabbedBorderRadius @tabbedBorderRadius 0 0 !important;
         &:hover {
             cursor: default;
         }
     }
 
     /* Coupling with segment for attachment */
-    .ui.tabular.menu ~ .attached:not(.top).segment {
+    .ui.tabbed.menu ~ .attached:not(.top).segment {
         border-top: none;
         margin-left: 0;
         margin-top: 0;
         margin-right: 0;
         width: 100%;
     }
-    .top.attached.segment + .ui.bottom.tabular.menu {
+    .top.attached.segment + .ui.bottom.tabbed.menu {
         position: relative;
-        width: @tabularFluidWidth;
-        left: -@tabularFluidOffset;
+        width: @tabbedFluidWidth;
+        left: -@tabbedFluidOffset;
     }
 
-    /* Bottom Vertical Tabular */
-    .ui.bottom.tabular.menu {
-        background: @tabularBackground;
+    /* Bottom Vertical Tabbed */
+    .ui.bottom.tabbed.menu {
+        background: @tabbedBackground;
         border-radius: 0;
         box-shadow: none !important;
         border-bottom: none;
-        border-top: @tabularBorderWidth solid @tabularBorderColor;
+        border-top: @tabbedBorderWidth solid @tabbedBorderColor;
     }
-    .ui.bottom.tabular.menu .item {
+    .ui.bottom.tabbed.menu .item {
         background: none;
-        border-left: @tabularBorderWidth solid transparent;
-        border-right: @tabularBorderWidth solid transparent;
-        border-bottom: @tabularBorderWidth solid transparent;
+        border-left: @tabbedBorderWidth solid transparent;
+        border-right: @tabbedBorderWidth solid transparent;
+        border-bottom: @tabbedBorderWidth solid transparent;
         border-top: none;
     }
-    .ui.bottom.tabular.menu .active.item {
-        background: @tabularActiveBackground;
-        color: @tabularActiveColor;
-        border-color: @tabularBorderColor;
-        margin: -@tabularBorderWidth 0 0 0;
-        border-radius: 0 0 @tabularBorderRadius @tabularBorderRadius !important;
+    .ui.bottom.tabbed.menu .active.item {
+        background: @tabbedActiveBackground;
+        color: @tabbedActiveColor;
+        border-color: @tabbedBorderColor;
+        margin: -@tabbedBorderWidth 0 0 0;
+        border-radius: 0 0 @tabbedBorderRadius @tabbedBorderRadius !important;
     }
     & when (@variationMenuVertical) {
-        /* Vertical Tabular (Left) */
-        .ui.vertical.tabular.menu {
-            background: @tabularVerticalBackground;
+        /* Vertical Tabbed (Left) */
+        .ui.vertical.tabbed.menu {
+            background: @tabbedVerticalBackground;
             border-radius: 0;
             box-shadow: none !important;
             border-bottom: none;
-            border-right: @tabularBorderWidth solid @tabularBorderColor;
+            border-right: @tabbedBorderWidth solid @tabbedBorderColor;
         }
-        .ui.vertical.tabular.menu .item {
+        .ui.vertical.tabbed.menu .item {
             background: none;
-            border-left: @tabularBorderWidth solid transparent;
-            border-bottom: @tabularBorderWidth solid transparent;
-            border-top: @tabularBorderWidth solid transparent;
+            border-left: @tabbedBorderWidth solid transparent;
+            border-bottom: @tabbedBorderWidth solid transparent;
+            border-top: @tabbedBorderWidth solid transparent;
             border-right: none;
         }
-        .ui.vertical.tabular.menu .active.item {
-            background: @tabularActiveBackground;
-            color: @tabularActiveColor;
-            border-color: @tabularBorderColor;
-            margin: 0 -@tabularBorderWidth 0 0;
-            border-radius: @tabularBorderRadius 0 0 @tabularBorderRadius !important;
+        .ui.vertical.tabbed.menu .active.item {
+            background: @tabbedActiveBackground;
+            color: @tabbedActiveColor;
+            border-color: @tabbedBorderColor;
+            margin: 0 -@tabbedBorderWidth 0 0;
+            border-radius: @tabbedBorderRadius 0 0 @tabbedBorderRadius !important;
         }
 
-        /* Vertical Right Tabular */
-        .ui.vertical.right.tabular.menu {
-            background: @tabularVerticalBackground;
+        /* Vertical Right Tabbed */
+        .ui.vertical.right.tabbed.menu {
+            background: @tabbedVerticalBackground;
             border-radius: 0;
             box-shadow: none !important;
             border-bottom: none;
             border-right: none;
-            border-left: @tabularBorderWidth solid @tabularBorderColor;
+            border-left: @tabbedBorderWidth solid @tabbedBorderColor;
         }
-        .ui.vertical.right.tabular.menu .item {
+        .ui.vertical.right.tabbed.menu .item {
             background: none;
-            border-right: @tabularBorderWidth solid transparent;
-            border-bottom: @tabularBorderWidth solid transparent;
-            border-top: @tabularBorderWidth solid transparent;
+            border-right: @tabbedBorderWidth solid transparent;
+            border-bottom: @tabbedBorderWidth solid transparent;
+            border-top: @tabbedBorderWidth solid transparent;
             border-left: none;
         }
-        .ui.vertical.right.tabular.menu .active.item {
-            background: @tabularActiveBackground;
-            color: @tabularActiveColor;
-            border-color: @tabularBorderColor;
-            margin: 0 0 0 -@tabularBorderWidth;
-            border-radius: 0 @tabularBorderRadius @tabularBorderRadius 0 !important;
+        .ui.vertical.right.tabbed.menu .active.item {
+            background: @tabbedActiveBackground;
+            color: @tabbedActiveColor;
+            border-color: @tabbedBorderColor;
+            margin: 0 0 0 -@tabbedBorderWidth;
+            border-radius: 0 @tabbedBorderRadius @tabbedBorderRadius 0 !important;
         }
     }
 
     /* Dropdown */
-    .ui.tabular.menu .active.dropdown.item {
+    .ui.tabbed.menu .active.dropdown.item {
         margin-bottom: 0;
-        border-left: @tabularBorderWidth solid transparent;
-        border-right: @tabularBorderWidth solid transparent;
-        border-top: @tabularOppositeBorderWidth solid transparent;
+        border-left: @tabbedBorderWidth solid transparent;
+        border-right: @tabbedBorderWidth solid transparent;
+        border-top: @tabbedOppositeBorderWidth solid transparent;
         border-bottom: none;
     }
     & when (@variationMenuInverted) {
-        .ui.inverted.tabular.menu .active.item,
-        .ui.inverted.tabular.menu .active.item:hover {
-            background: @invertedTabularActiveBackground;
-            border-color: @invertedTabularBorderColor;
+        .ui.inverted.tabbed.menu .active.item,
+        .ui.inverted.tabbed.menu .active.item:hover {
+            background: @invertedTabbedActiveBackground;
+            border-color: @invertedTabbedBorderColor;
         }
-        .ui.inverted.tabular.menu .item:not(.active):hover {
-            color: @invertedTabularHoveredTextColor;
+        .ui.inverted.tabbed.menu .item:not(.active):hover {
+            color: @invertedTabbedHoveredTextColor;
             background: transparent;
             cursor: pointer;
         }
@@ -1598,12 +1593,6 @@ Floated Menu / Item
     }
     & when (@variationMenuVertical) {
         .ui.compact.vertical.menu {
-            & when (@supportIE) {
-                /* IE hack to make dropdown icons appear inline */
-                // stylelint-disable-next-line value-no-vendor-prefix
-                display: -ms-inline-flexbox !important;
-            }
-
             display: inline-block;
         }
     }
@@ -1654,8 +1643,8 @@ Floated Menu / Item
         text-align: center;
         justify-content: center;
     }
-    .ui.attached[class*="equal width"].menu@{notTabular},
-    .ui.attached.item.menu@{notTabular} {
+    .ui.attached[class*="equal width"].menu@{notTabbed},
+    .ui.attached.item.menu@{notTabbed} {
         margin: 0 @attachedHorizontalOffset !important;
     }
 
@@ -1914,22 +1903,22 @@ Floated Menu / Item
         border-radius: 0 0 0 @borderRadius;
     }
 
-    /* Tabular Attached */
-    .ui.attached.menu@{notTabular}@{notText} {
+    /* Tabbed Attached */
+    .ui.attached.menu@{notTabbed}@{notText} {
         border: @attachedBorder;
     }
     & when (@variationMenuInverted) {
         .ui.attached.inverted.menu {
             border: none;
         }
-        & when (@variationMenuTabular) {
-            .ui[class*="top attached"].inverted.tabular.menu {
-                border-bottom: @invertedTabularBorder;
+        & when (@variationMenuTabbed) {
+            .ui[class*="top attached"].inverted.tabbed.menu {
+                border-bottom: @invertedTabbedBorder;
             }
         }
     }
-    & when (@variationMenuTabular) {
-        .ui.attached.tabular.menu {
+    & when (@variationMenuTabbed) {
+        .ui.attached.tabbed.menu {
             margin-left: 0;
             margin-right: 0;
             width: 100%;
@@ -1947,7 +1936,7 @@ Floated Menu / Item
         & .item:first-child::before {
             display: none;
         }
-        &@{notSecondary}@{notText}@{notTabular}@{notBorderless} .item {
+        &@{notSecondary}@{notText}@{notTabbed}@{notBorderless} .item {
             &:last-of-type,
             &:last-child {
                 border-right: @dividerSize solid @dividerBackground;
@@ -1955,7 +1944,7 @@ Floated Menu / Item
         }
     }
     & when (@variationMenuWrapped) {
-        .ui.wrapped.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} .item {
+        .ui.wrapped.menu@{notSecondary}@{notText}@{notTabbed}@{notBorderless} .item {
             &:first-child {
                 border-bottom-left-radius: 0;
             }
@@ -2029,5 +2018,10 @@ Floated Menu / Item
     }
 }
 
+& when (@variationMenuTabbedLegacyTabular) {
+    .tabbed:extend(.tabular all) {
+    }
+}
+
 // stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/collections/table.less

@@ -519,32 +519,6 @@
             }
         }
 
-        & when (@supportIE) {
-            /* IE scrollbar color needs hex values */
-            @media all and (-ms-high-contrast: none) {
-                .ui.scrolling.table > thead,
-                .ui.scrolling.table > tfoot {
-                    scrollbar-face-color: currentColor;
-                    scrollbar-shadow-color: currentColor;
-                    scrollbar-track-color: currentColor;
-                    scrollbar-arrow-color: currentColor;
-                }
-                .ui.scrolling.table > thead {
-                    color: @headerBackgroundHex;
-                }
-                .ui.scrolling.table > tfoot {
-                    color: @footerBackgroundHex;
-                }
-                & when (@variationTableInverted) {
-                    .ui.inverted.scrolling.table > thead {
-                        color: @invertedHeaderBackgroundHex;
-                    }
-                    .ui.inverted.scrolling.table > tfoot {
-                        color: @invertedFooterBackgroundHex;
-                    }
-                }
-            }
-        }
         & when (@variationTableInverted) {
             .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track {
                 background: @trackInvertedBackground;
@@ -558,15 +532,7 @@
             .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover {
                 background: @thumbInvertedHoverBackground;
             }
-            & when (@supportIE) {
-                .ui.inverted.scrolling.table > tbody {
-                    /* IE11 */
-                    scrollbar-face-color: @thumbInvertedBackgroundHex;
-                    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-                    scrollbar-track-color: @trackInvertedBackgroundHex;
-                    scrollbar-arrow-color: @trackInvertedBackgroundHex;
-                }
-            }
+
             @supports (-moz-appearance: none) {
                 .ui.inverted.scrolling.table > tbody {
                     /* firefox: first color thumb, second track */

package/src/definitions/elements/input.less

@@ -78,9 +78,6 @@
 .ui.input > input::-moz-placeholder {
     opacity: 1;
 }
-.ui.input > input:-ms-input-placeholder when (@supportIE) {
-    color: @placeholderColor;
-}
 
 /*******************************
             States
@@ -166,12 +163,6 @@
 .ui.input > input:focus::placeholder {
     color: @placeholderFocusColor;
 }
-& when (@supportIE) {
-    .ui.input.focus > input:-ms-input-placeholder,
-    .ui.input > input:focus:-ms-input-placeholder {
-        color: @placeholderFocusColor;
-    }
-}
 
 & when not (@variationInputStates = false) {
     /* --------------------
@@ -193,29 +184,17 @@
                 color: @formStates[@@state][color];
                 box-shadow: @formStates[@@state][boxShadow];
             }
-            .ui.input > input:not(:-ms-input-placeholder):invalid when (@supportIE){
-                background-color: @formStates[@@state][background];
-                border-color: @formStates[@@state][borderColor];
-                color: @formStates[@@state][color];
-                box-shadow: @formStates[@@state][boxShadow];
-            }
         }
 
         /* Placeholder */
         .ui.input.@{state} > input::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
-        .ui.input.@{state} > input:-ms-input-placeholder when (@supportIE) {
-            color: @formStates[@@state][inputPlaceholderColor] !important;
-        }
 
         /* Focused Placeholder */
         .ui.input.@{state} > input:focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }
-        .ui.input.@{state} > input:focus:-ms-input-placeholder when (@supportIE){
-            color: @formStates[@@state][inputPlaceholderFocusColor] !important;
-        }
     });
 }
 
@@ -265,9 +244,6 @@
         .ui.transparent.inverted.input > input::placeholder {
             color: @transparentInvertedPlaceholderColor;
         }
-        .ui.transparent.inverted.input > input:-ms-input-placeholder when (@supportIE) {
-            color: @transparentInvertedPlaceholderColor;
-        }
     }
 }
 
@@ -675,33 +651,6 @@
             color: @fileButtonTextColor;
         }
     }
-    & when (@supportIE) {
-        .ui.action.file.input input[type="file"]::-ms-browse {
-            display: none;
-        }
-        .ui.form .field input[type="file"]::-ms-browse,
-        .ui.file.input input[type="file"]::-ms-browse {
-            border: none;
-            cursor: pointer;
-            padding: @padding;
-            margin: 0;
-            background: @fileButtonBackground;
-            font-weight: @fileButtonFontWeight;
-            color: @fileButtonTextColor;
-            &:hover {
-                background: @fileButtonBackgroundHover;
-                color: @fileButtonTextColor;
-            }
-        }
-
-        /* IE needs additional styling for input field :S */
-        @media all and (-ms-high-contrast: none) {
-            .ui.file.input > input[type="file"],
-            input[type="file"].ui.file.input {
-                padding: 0 !important;
-            }
-        }
-    }
 
     .ui.action.file.input input[type="file"]::file-selector-button {
         display: none;
@@ -776,16 +725,7 @@
                     background: @h;
                 }
             }
-            & when (@supportIE) {
-                input[type="file"].ui.@{color}.file.input::-ms-browse,
-                .ui.@{color}.file.input input[type="file"]::-ms-browse {
-                    background: @c;
-                    color: @white;
-                    &:hover {
-                        background: @h;
-                    }
-                }
-            }
+
             input[type="file"].ui.@{color}.file.input::file-selector-button,
             .ui.@{color}.file.input input[type="file"]::file-selector-button {
                 background: @c;

package/src/definitions/elements/segment.less

@@ -94,7 +94,6 @@
 }
 
 /* Grid */
-.ui.page.grid.segment,
 .ui.grid > .row > .ui.segment.column,
 .ui.grid > .ui.segment.column {
     padding-top: @pageGridMargin;
@@ -484,11 +483,6 @@
         /* Horizontal Segment */
         .ui.horizontal.segments@{notCompact} > .segment@{notCompact} {
             flex: 1 1 auto;
-            & when (@supportIE) {
-                // https://github.com/Semantic-Org/Semantic-UI/issues/2550
-                // stylelint-disable-next-line property-no-vendor-prefix
-                -ms-flex: 1 1 0;
-            }
         }
         .ui.horizontal.segments > .segment {
             margin: 0;