feat(chore): optional compile for ie specific code

This PR makes all IE specific LESS code optional. By default the new variable @supportIE (introduced by #2359 ) is true, so the code compiles as before Early Edge Legacy versions still use the IE11 engine / -ms prefix syntax, so setting supportIE: false; will also disable support for those browsers.
fomantic · May 31, 2022 · 4ee9307 · 4ee9307
1 parent 83e6d77
commit 4ee9307
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 100 deletions.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -395,7 +395,7 @@
 .ui.form ::-webkit-input-placeholder {
   color: @inputPlaceholderColor;
 }
-.ui.form :-ms-input-placeholder {
+.ui.form :-ms-input-placeholder when (@supportIE) {
   color: @inputPlaceholderColor !important;
 }
 .ui.form ::-moz-placeholder {
@@ -406,7 +406,7 @@
 .ui.form :focus::-webkit-input-placeholder {
   color: @inputPlaceholderFocusColor;
 }
-.ui.form :focus:-ms-input-placeholder {
+.ui.form :focus:-ms-input-placeholder when (@supportIE) {
   color: @inputPlaceholderFocusColor !important;
 }
 .ui.form :focus::-moz-placeholder {
@@ -600,7 +600,7 @@
         border-radius: @formStates[@@state][borderRadius];
         box-shadow: @formStates[@@state][boxShadow];
       }
-      .ui.form .field input:not(:-ms-input-placeholder):invalid {
+      .ui.form .field input:not(:-ms-input-placeholder):invalid when (@supportIE) {
         color: @c;
         background: @bg;
         border-color: @formStates[@@state][borderColor];
@@ -662,7 +662,7 @@
     .ui.form .@{state} ::-webkit-input-placeholder {
       color: @formStates[@@state][inputPlaceholderColor];
     }
-    .ui.form .@{state} :-ms-input-placeholder {
+    .ui.form .@{state} :-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderColor] !important;
     }
     .ui.form .@{state} ::-moz-placeholder {
@@ -672,7 +672,7 @@
     .ui.form .@{state} :focus::-webkit-input-placeholder {
       color: @formStates[@@state][inputPlaceholderFocusColor];
     }
-    .ui.form .@{state} :focus:-ms-input-placeholder {
+    .ui.form .@{state} :focus:-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderFocusColor] !important;
     }
     .ui.form .@{state} :focus::-moz-placeholder {

diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
@@ -293,8 +293,10 @@
   }
   .ui.vertical.menu .dropdown.item .menu {
     left: 100%;
-    /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
-    min-width: 0;
+    & 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;
@@ -1599,8 +1601,10 @@ Floated Menu / Item
   }
   & when (@variationMenuVertical) {
     .ui.compact.vertical.menu {
-    /* IE hack to make dropdown icons appear inline */
-      display: -ms-inline-flexbox !important;
+      & when (@supportIE) {
+        /* IE hack to make dropdown icons appear inline */
+        display: -ms-inline-flexbox !important;
+      }
       display: inline-block;
     }
   }

diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
@@ -438,25 +438,29 @@
   .ui.scrolling.table > thead,
   .ui.scrolling.table > tfoot {
     scrollbar-color: currentColor currentColor;
-    scrollbar-face-color: currentColor;
-    scrollbar-shadow-color: currentColor;
-    scrollbar-track-color: currentColor;
-    scrollbar-arrow-color: currentColor;
+    & when (@supportIE) {
+      scrollbar-face-color: currentColor;
+      scrollbar-shadow-color: currentColor;
+      scrollbar-track-color: currentColor;
+      scrollbar-arrow-color: currentColor;
+    }
   }
+  & when (@supportIE) {
   /* IE scrollbar color needs hex values */
-  @media all and (-ms-high-contrast:none) {
-    .ui.scrolling.table > thead {
-      color: @headerBackgroundHex;
-    }
-    .ui.scrolling.table > tfoot {
-      color: @footerBackgroundHex;
-    }
-    & when (@variationTableInverted) {
-      .ui.inverted.scrolling.table > thead {
-        color: @invertedHeaderBackgroundHex;
+    @media all and (-ms-high-contrast: none) {
+      .ui.scrolling.table > thead {
+        color: @headerBackgroundHex;
+      }
+      .ui.scrolling.table > tfoot {
+        color: @footerBackgroundHex;
       }
-      .ui.inverted.scrolling.table > tfoot {
-        color: @invertedFooterBackgroundHex;
+      & when (@variationTableInverted) {
+        .ui.inverted.scrolling.table > thead {
+          color: @invertedHeaderBackgroundHex;
+        }
+        .ui.inverted.scrolling.table > tfoot {
+          color: @invertedFooterBackgroundHex;
+        }
       }
     }
   }
@@ -474,12 +478,13 @@
       background: @thumbInvertedHoverBackground;
     }
     .ui.inverted.scrolling.table > tbody {
-      /* IE11 */
-      scrollbar-face-color: @thumbInvertedBackgroundHex;
-      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-      scrollbar-track-color: @trackInvertedBackgroundHex;
-      scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+      & when (@supportIE) {
+        /* IE11 */
+        scrollbar-face-color: @thumbInvertedBackgroundHex;
+        scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+        scrollbar-track-color: @trackInvertedBackgroundHex;
+        scrollbar-arrow-color: @trackInvertedBackgroundHex;
+      }
       /* firefox : first color thumb, second track */
       scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
     }

diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less
@@ -77,7 +77,7 @@
   color: @placeholderColor;
   opacity: 1;
 }
-.ui.input > input:-ms-input-placeholder {
+.ui.input > input:-ms-input-placeholder when (@supportIE){
   color: @placeholderColor;
 }
 
@@ -170,9 +170,11 @@
 .ui.input > input:focus::-moz-placeholder {
   color: @placeholderFocusColor;
 }
-.ui.input.focus > input:-ms-input-placeholder,
-.ui.input > input:focus:-ms-input-placeholder {
-  color: @placeholderFocusColor;
+& when (@supportIE) {
+  .ui.input.focus > input:-ms-input-placeholder,
+  .ui.input > input:focus:-ms-input-placeholder {
+    color: @placeholderFocusColor;
+  }
 }
 
 
@@ -196,7 +198,7 @@
         color: @formStates[@@state][color];
         box-shadow: @formStates[@@state][boxShadow];
       }
-      .ui.input > input:not(:-ms-input-placeholder):invalid {
+      .ui.input > input:not(:-ms-input-placeholder):invalid when (@supportIE){
         background-color: @formStates[@@state][background];
         border-color: @formStates[@@state][borderColor];
         color: @formStates[@@state][color];
@@ -211,7 +213,7 @@
     .ui.input.@{state} > input::-moz-placeholder {
       color: @formStates[@@state][inputPlaceholderColor];
     }
-    .ui.input.@{state} > input:-ms-input-placeholder {
+    .ui.input.@{state} > input:-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderColor] !important;
     }
 
@@ -222,7 +224,7 @@
     .ui.input.@{state} > input:focus::-moz-placeholder {
       color: @formStates[@@state][inputPlaceholderFocusColor];
     }
-    .ui.input.@{state} > input:focus:-ms-input-placeholder {
+    .ui.input.@{state} > input:focus:-ms-input-placeholder when (@supportIE){
       color: @formStates[@@state][inputPlaceholderFocusColor] !important;
     }
   })
@@ -277,7 +279,7 @@
     .ui.transparent.inverted.input > input::-moz-placeholder {
       color: @transparentInvertedPlaceholderColor;
     }
-    .ui.transparent.inverted.input > input:-ms-input-placeholder {
+    .ui.transparent.inverted.input > input:-ms-input-placeholder when (@supportIE) {
       color: @transparentInvertedPlaceholderColor;
     }
   }
@@ -672,28 +674,30 @@
       color: @fileButtonTextColor;
     }
   }
-  .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;
+  & 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;
+    /* 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;
+      }
     }
   }
 
@@ -769,12 +773,14 @@
           background: @h;
         }
       }
-      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;
+      & 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,

diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
@@ -460,7 +460,9 @@
     /* Horizontal Segment */
     .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
       flex: 1 1 auto;
-      -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+      & when (@supportIE) {
+        -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+      }
     }
     .ui.horizontal.segments > .segment {
       margin: 0;

diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less
@@ -153,12 +153,13 @@ a:hover {
     background: @thumbHoverBackground;
   }
   body .ui {
-    /* IE11 */
-    scrollbar-face-color: @thumbBackgroundHex;
-    scrollbar-shadow-color: @thumbBackgroundHex;
-    scrollbar-track-color: @trackBackgroundHex;
-    scrollbar-arrow-color: @trackBackgroundHex;
-
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbBackgroundHex;
+      scrollbar-shadow-color: @thumbBackgroundHex;
+      scrollbar-track-color: @trackBackgroundHex;
+      scrollbar-arrow-color: @trackBackgroundHex;
+    }
     /* firefox : first color thumb, second track*/
     scrollbar-color:  @thumbBackground @trackBackground;
     scrollbar-width: thin;
@@ -179,12 +180,13 @@ a:hover {
   }
 
   body .ui.inverted:not(.dimmer) {
-    /* IE11 */
-    scrollbar-face-color: @thumbInvertedBackgroundHex;
-    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-    scrollbar-track-color: @trackInvertedBackgroundHex;
-    scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbInvertedBackgroundHex;
+      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+      scrollbar-track-color: @trackInvertedBackgroundHex;
+      scrollbar-arrow-color: @trackInvertedBackgroundHex;
+    }
     /* firefox : first color thumb, second track */
     scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
   }

diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less
@@ -82,12 +82,13 @@
     background: @thumbInvertedHoverBackground;
   }
   .ui.dimmer:not(.inverted) {
-    /* IE11 */
-    scrollbar-face-color: @thumbInvertedBackgroundHex;
-    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-    scrollbar-track-color: @trackInvertedBackgroundHex;
-    scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbInvertedBackgroundHex;
+      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+      scrollbar-track-color: @trackInvertedBackgroundHex;
+      scrollbar-arrow-color: @trackInvertedBackgroundHex;
+    }
     /* firefox : first color thumb, second track */
     scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
   }

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
@@ -1343,12 +1343,13 @@ select.ui.dropdown {
   .ui.dropdown > .visible.menu .scrolling.menu {
     display: block;
   }
-
-  /* Scrollbar in IE */
-  @media all and (-ms-high-contrast:none) {
-    .ui.scrolling.dropdown .menu,
-    .ui.dropdown .scrolling.menu {
-      min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
+  & when (@supportIE) {
+    /* Scrollbar in IE */
+    @media all and (-ms-high-contrast: none) {
+      .ui.scrolling.dropdown .menu,
+      .ui.dropdown .scrolling.menu {
+        min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
+      }
     }
   }
   @media only screen and (max-width : @largestMobileScreen) {
@@ -1435,8 +1436,10 @@ select.ui.dropdown {
   }
   .ui.simple.dropdown .menu {
     position: absolute;
-    /* IE hack to make dropdown icons appear inline */
-    display: -ms-inline-flexbox !important;
+    & when (@supportIE) {
+      /* IE hack to make dropdown icons appear inline */
+      display: -ms-inline-flexbox !important;
+    }
     display: block;
     overflow: hidden;
     top: -9999px;
@@ -1952,12 +1955,13 @@ select.ui.dropdown {
     }
     .ui.dropdown .inverted.menu,
     .ui.inverted.dropdown .menu {
-      /* IE11 */
-      scrollbar-face-color: @thumbInvertedBackgroundHex;
-      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-      scrollbar-track-color: @trackInvertedBackgroundHex;
-      scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+      & when (@supportIE) {
+        /* IE11 */
+        scrollbar-face-color: @thumbInvertedBackgroundHex;
+        scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+        scrollbar-track-color: @trackInvertedBackgroundHex;
+        scrollbar-arrow-color: @trackInvertedBackgroundHex;
+      }
       /* firefox : first color thumb, second track */
       scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
     }