feat: remove ie support css styles (#592)

* feat: remove ie support css styles * feat: remove ms clear style * feat: remove ms-high-contrast media css * feat: remove placeholder mixin --------- Co-authored-by: Sarin Udompanish <[email protected]> Co-authored-by: Wasuwat Limsuparhat <[email protected]>
Refinitiv · Feb 22, 2023 · 851da09 · 851da09
1 parent f479953
commit 851da09
Show file tree

Hide file tree

Showing 36 changed files with 23 additions and 122 deletions.
diff --git a/packages/elemental-theme/src/custom-elements/ef-autosuggest.less b/packages/elemental-theme/src/custom-elements/ef-autosuggest.less
@@ -22,7 +22,6 @@
   [part=content] {
     overflow: auto;
     .touch-action();
-    .ie-scrollbars();
     .mozilla-scrollbars();
   }
 

diff --git a/packages/elemental-theme/src/custom-elements/ef-card.less b/packages/elemental-theme/src/custom-elements/ef-card.less
@@ -53,7 +53,6 @@
     border-top: @separator-width solid @separator-color;
   }
 
-  .ie-scrollbars();
   .mozilla-scrollbars();
 }
 .webkit-scrollbars();
diff --git a/packages/elemental-theme/src/custom-elements/ef-checkbox.less b/packages/elemental-theme/src/custom-elements/ef-checkbox.less
@@ -40,10 +40,9 @@
     opacity: 0.65;
   }
 
-  @media (-ms-high-contrast:none), (pointer:fine){
+  .desktop-specific({
     &:focus [part="container"] {
       .container-focus-styles;
     }
-  }
-
+  });
 }
diff --git a/packages/elemental-theme/src/custom-elements/ef-combo-box.less b/packages/elemental-theme/src/custom-elements/ef-combo-box.less
@@ -42,12 +42,6 @@
     flex-flow: column nowrap;
   }
 
-  .ie-specific({
-    [part~=list] ::slotted(ef-list) {
-      max-height: inherit;
-    }
-  });
-
   [part=selection-badge] {
     flex-shrink: 0;
   }
@@ -56,9 +50,7 @@
     opacity: 0.4;
   }
 
-  .ie-scrollbars();
   .mozilla-scrollbars();
-
 }
 
 .webkit-scrollbars();
diff --git a/packages/elemental-theme/src/custom-elements/ef-dialog.less b/packages/elemental-theme/src/custom-elements/ef-dialog.less
@@ -41,7 +41,6 @@
     border-top: @separator-width solid @separator-color;
     background: @scrollbar-track-background-color;
   }
-  .ie-scrollbars();
   .mozilla-scrollbars();
 }
 

diff --git a/packages/elemental-theme/src/custom-elements/ef-icon.less b/packages/elemental-theme/src/custom-elements/ef-icon.less
@@ -2,11 +2,6 @@
 
   --cdn-prefix: 'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/';
 
-  // to make :active work on IE11
-  svg {
-    pointer-events: none;
-  }
-
   g,
   path,
   rect,

diff --git a/packages/elemental-theme/src/custom-elements/ef-item.less b/packages/elemental-theme/src/custom-elements/ef-item.less
@@ -14,14 +14,6 @@
   box-sizing: border-box;
   .touch-action();
 
-  .ie-specific({
-    &:after { /* IE11 fix for flex */
-      content: '';
-      min-height: inherit;
-      font-size: 0;
-    }
-  });
-
   &[selected] {
     color: @list-item-selected-text-color;
   }

diff --git a/packages/elemental-theme/src/custom-elements/ef-layout.less b/packages/elemental-theme/src/custom-elements/ef-layout.less
@@ -1,4 +1,4 @@
 :host([debug]) {
   outline: 1px solid fade(@dataviz-color-primary, 33%);
-  outline-offset: -1px; // Doesn't work for IE but improves experience for other browsers.
+  outline-offset: -1px;
 }
diff --git a/packages/elemental-theme/src/custom-elements/ef-multi-input.less b/packages/elemental-theme/src/custom-elements/ef-multi-input.less
@@ -27,7 +27,6 @@
   [part=search-holder] {
     align-items: center;
   }
-  .ie-scrollbars();
   .mozilla-scrollbars();
 }
 

diff --git a/packages/elemental-theme/src/custom-elements/ef-overlay-menu.less b/packages/elemental-theme/src/custom-elements/ef-overlay-menu.less
@@ -19,7 +19,6 @@
     }
   }
 
-  .ie-scrollbars();
   .mozilla-scrollbars();
 }
 

diff --git a/packages/elemental-theme/src/custom-elements/ef-overlay.less b/packages/elemental-theme/src/custom-elements/ef-overlay.less
@@ -11,7 +11,6 @@
     box-shadow: @panel-box-shadow;
   }
 
-  .ie-scrollbars();
   .mozilla-scrollbars();
 }
 

diff --git a/packages/elemental-theme/src/custom-elements/ef-radio-button.less b/packages/elemental-theme/src/custom-elements/ef-radio-button.less
@@ -38,9 +38,9 @@
     opacity: 0.65;
   }
 
-  @media (-ms-high-contrast:none), (pointer:fine){
+  .desktop-specific({
     &:focus [part="container"] {
       .container-focus-styles;
     }
-  }
+  });
 }
diff --git a/packages/elemental-theme/src/custom-elements/ef-rating.less b/packages/elemental-theme/src/custom-elements/ef-rating.less
@@ -47,6 +47,6 @@
 
   &[focused=visible] {
     outline: @input-border-width @input-border-style @input-focused-border-color;
-    outline-offset: 2px; //not support IE11
+    outline-offset: 2px;
   }
 }
diff --git a/packages/elemental-theme/src/custom-elements/ef-select.less b/packages/elemental-theme/src/custom-elements/ef-select.less
@@ -61,7 +61,6 @@
     max-height: var(--list-max-height);
   }
 
-  .ie-scrollbars();
   .mozilla-scrollbars();
 }
 

diff --git a/packages/elemental-theme/src/custom-elements/ef-sidebar-layout.less b/packages/elemental-theme/src/custom-elements/ef-sidebar-layout.less
@@ -3,7 +3,6 @@
 
 :host {
   --sidebar-width: 250px;
-  .ie-scrollbars();
   .mozilla-scrollbars();
 
   &:not([sidebar-position]) [part=sidebar],

diff --git a/packages/elemental-theme/src/custom-elements/ef-tree-item.less b/packages/elemental-theme/src/custom-elements/ef-tree-item.less
@@ -11,12 +11,6 @@
   align-items: center;
   user-select: none;
 
-  &:after { /* IE11 fix for flex */
-    content: '';
-    min-height: inherit;
-    font-size: 0;
-  }
-
   [part=indent] {
     height: 0;
     width: 0;

diff --git a/packages/elemental-theme/src/native-elements/html.less b/packages/elemental-theme/src/native-elements/html.less
@@ -4,7 +4,6 @@ html {
   height: 100%;
   touch-action: manipulation; // Improve tap speed on mobile browsers
   -webkit-tap-highlight-color: rgba(0,0,0,0);
-  .ie-scrollbars();
   .mozilla-scrollbars();
   @css-properties();
 }

diff --git a/packages/elemental-theme/src/responsive.less b/packages/elemental-theme/src/responsive.less
@@ -11,13 +11,7 @@
 }
 
 .desktop-specific(@styles) {
-    @media (-ms-high-contrast:none), (pointer:fine) {
-        @styles();
-    }
-}
-
-.ie-specific(@styles) {
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    @media (pointer:fine) {
         @styles();
     }
 }

diff --git a/packages/elemental-theme/src/shared-styles/aria.less b/packages/elemental-theme/src/shared-styles/aria.less
@@ -1,5 +1,4 @@
 .aria-invisible() {
-  clip: rect(1px, 1px, 1px, 1px); // IE11
   clip-path: inset(50%);
   height: 1px;
   width: 1px;

diff --git a/packages/elemental-theme/src/shared-styles/input.less b/packages/elemental-theme/src/shared-styles/input.less
@@ -47,9 +47,6 @@
       .border(@input-disabled-border-color, @input-disabled-border-color);
     }
   }
-  ::-ms-clear {
-    display: none;
-  }
 }
 // TODO: This function, with when (default()), causes build error in Halo. Need to recheck!
 // .border(@input-border-color: @input-border-color, @input-border-color: @input-border-color) when (default()) {

diff --git a/packages/elemental-theme/src/shared-styles/list.less b/packages/elemental-theme/src/shared-styles/list.less
@@ -8,7 +8,6 @@
   background-color: @list-background-color;
 
   .touch-action();
-  .ie-scrollbars();
   .mozilla-scrollbars();
 
   &:focus {

diff --git a/packages/elemental-theme/src/shared-styles/scrollbar.less b/packages/elemental-theme/src/shared-styles/scrollbar.less
@@ -1,4 +1,4 @@
-// Helper Mixins. Shared between IE & Webkit.
+// Helper Mixins for Webkit.
 .scrollbar-corner-background(@property: background) {
   @{property}: @scrollbar-corner-background-color;
 }
@@ -186,19 +186,6 @@
   }
 }
 
-// Basic colouring for IE
-.ie-scrollbars() {
-  & {
-    .scrollbar-thumb-background(scrollbar-face-color);
-    .scrollbar-thumb-background(scrollbar-shadow-color);
-    .scrollbar-thumb-background(scrollbar-highlight-color);
-    .scrollbar-thumb-background(scrollbar-arrow-color);
-    .scrollbar-track-background(scrollbar-track-color);
-    .scrollbar-corner-background(scrollbar-3dlight-color);
-    .scrollbar-corner-background(scrollbar-darkshadow-color);
-  }
-}
-
 .mozilla-scrollbars () {
   & {
     scrollbar-color: @scrollbar-thumb-background-color @scrollbar-track-background-color;
@@ -207,5 +194,4 @@
 
 .scrollbars() {
   .webkit-scrollbars();
-  .ie-scrollbars();
 }
diff --git a/packages/halo-theme/src/custom-elements/ef-accordion.less b/packages/halo-theme/src/custom-elements/ef-accordion.less
@@ -1,4 +1,3 @@
-// @import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-accordion';
 @import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-accordion';
 
 :host {

diff --git a/packages/halo-theme/src/custom-elements/ef-combo-box.less b/packages/halo-theme/src/custom-elements/ef-combo-box.less
@@ -108,10 +108,4 @@
       border-left-color: @input-focused-border-color;
     }
   }
-
-  // Fix for IE only
-  // Overrides select slotted styles
-  [part=list] ::slotted(ef-list) {
-    display: block;
-  }
 }
diff --git a/packages/halo-theme/src/custom-elements/ef-icon.less b/packages/halo-theme/src/custom-elements/ef-icon.less
@@ -18,19 +18,5 @@
     polygon {
       vector-effect: non-scaling-stroke;
     }
-
-    .ie-specific({
-      g,
-      path,
-      rect,
-      line,
-      circle,
-      ellipse,
-      polyline,
-      polygon {
-        vector-effect: none;
-        stroke-width: calc(@icon-size/0.01em); // Absolute hack for IE to enable stroke scaling!
-      }
-    });
   }
 }
diff --git a/packages/halo-theme/src/custom-elements/ef-select.less b/packages/halo-theme/src/custom-elements/ef-select.less
@@ -58,7 +58,6 @@
       display: none;
     }
   }
-  .ie-scrollbars();
   .mozilla-scrollbars();
 }
 

diff --git a/packages/halo-theme/src/custom-elements/ef-tab-bar.less b/packages/halo-theme/src/custom-elements/ef-tab-bar.less
@@ -74,7 +74,7 @@
     [part=content] {
       ::slotted(ef-tab) {
         border-bottom-color: transparent;
-        border-right: none !important; // won't work on IE11 without important
+        border-right: none;
         background: linear-gradient(@tab-bar-background-color, @tab-bar-background-color) left @border-position / @border-side-size no-repeat,
                     linear-gradient(@tab-bar-background-color, @tab-bar-background-color) right @border-position / @border-side-size no-repeat,
                     linear-gradient(@tab-vertical-border-color, @tab-vertical-border-color) center @border-position / @border-center-size no-repeat;

diff --git a/packages/halo-theme/src/custom-elements/ef-tree-select.less b/packages/halo-theme/src/custom-elements/ef-tree-select.less
@@ -69,10 +69,4 @@
       background: none;
     }
   }
-
-  // Fix for IE only
-  // Overrides select slotted styles
-  [part=list] ::slotted([part=section]) {
-    display: flex;
-  }
 }
diff --git a/packages/halo-theme/src/shared-styles/checkbox.less b/packages/halo-theme/src/shared-styles/checkbox.less
@@ -42,6 +42,6 @@
 
   &[focused=visible] {
     outline: @input-border-width @input-border-style @input-focused-border-color;
-    outline-offset: 2px; //not support IE11
+    outline-offset: 2px;
   }
 }
diff --git a/packages/solar-theme/src/custom-elements/ef-checkbox.less b/packages/solar-theme/src/custom-elements/ef-checkbox.less
@@ -1,4 +1,5 @@
 @import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-checkbox';
+@import '../responsive';
 
 :host {
   [part=container] {
@@ -42,9 +43,9 @@
     background-color: @input-disabled-background-color;
   }
 
-  @media (-ms-high-contrast:none), (pointer:fine){
+  .desktop-specific({
     &:focus [part=container] {
       border: @input-border-width @input-focused-border-style @input-focused-border-color;
     }
-  }
+  });
 }
diff --git a/packages/solar-theme/src/custom-elements/ef-radio-button.less b/packages/solar-theme/src/custom-elements/ef-radio-button.less
@@ -1,4 +1,5 @@
 @import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-radio-button';
+@import '../responsive';
 
 :host {
   [part=container] {
@@ -33,9 +34,10 @@
     border-color: @input-disabled-border-color;
     background-color: @input-disabled-background-color;
   }
-  @media (-ms-high-contrast:none), (pointer:fine){
+
+  .desktop-specific({
     &:focus [part=container] {
       border: @input-border-width @input-focused-border-style @input-focused-border-color;
     }
-  }
+  });
 }
diff --git a/packages/solar-theme/src/custom-elements/ef-select.less b/packages/solar-theme/src/custom-elements/ef-select.less
@@ -49,7 +49,6 @@
     border: 1px solid @popup-border-color;
     background-color: @button-background-color;
   }
-  .ie-scrollbars();
   .mozilla-scrollbars();
 }
 

diff --git a/packages/solar-theme/src/custom-elements/ef-text-field.less b/packages/solar-theme/src/custom-elements/ef-text-field.less
@@ -10,9 +10,9 @@
 
   &[disabled] {
     [part=input] {
-      .placeholder({
+      &::placeholder {
         color: @input-disabled-placeholder-color;
-      });
+      }
     }
   }
 }
diff --git a/packages/solar-theme/src/custom-elements/ef-tree-item.less b/packages/solar-theme/src/custom-elements/ef-tree-item.less
@@ -12,7 +12,7 @@
   }
   &[focused=visible] {
     outline: @tree-item-selected-outline;
-    outline-offset: -1px; // No IE support but it removes a sentient element
+    outline-offset: -1px;
     border-color: transparent;
   }
   &:last-of-type {

diff --git a/packages/solar-theme/src/native-elements/input.less b/packages/solar-theme/src/native-elements/input.less
@@ -18,7 +18,9 @@ input[type=file] {
   .input-solar;
   color: inherit;
   &[disabled] {
-    .placeholder({ color: @input-disabled-placeholder-color });
+    &::placeholder {
+      color: @input-disabled-placeholder-color;
+    }
   }
   &:focus {
     .input-focus;
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,11 +2,6 @@ @@
       --cdn-prefix: 'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/';
-      // to make :active work on IE11
-      svg {
-        pointer-events: none;
-      }
       g,
       path,
       rect,
@@ Expand Down @@