refactor(multiple): clean up IE vendor prefixes (#23416)

Cleans up the styles specifically for IE and Edge.

Author: crisbeto

.stylelintrc.json

@@ -17,7 +17,7 @@
   ],
   "rules": {
     "material/no-prefixes": [true, {
-      "browsers": ["last 2 versions", "not dead", "not and_qq > 0", "not OperaMini all"],
+      "browsers": ["last 2 versions", "not dead", "not and_qq > 0", "not OperaMini all", "not ie > 0", "not edge < 78"],
       "filePattern": "**/!(*-example.css)"
     }],
     "material/theme-mixin-api": true,

src/components-examples/material/core/ripple-overview/ripple-overview-example.css

@@ -9,7 +9,6 @@
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
-  -ms-user-select: none;
 
   -webkit-user-drag: none;
   -webkit-tap-highlight-color: transparent;

src/dev-app/menubar/mat-menubar-demo.scss

@@ -24,5 +24,4 @@
   padding: 16px;
   -webkit-user-select: none;
   -moz-user-select: none;
-  -ms-user-select: none;
 }

src/dev-app/virtual-scroll/virtual-scroll-demo.scss

@@ -15,9 +15,7 @@
   }
 
   .demo-item {
-    -ms-writing-mode: tb-lr;
     -webkit-writing-mode: vertical-lr;
-    // stylelint-disable-next-line material/no-prefixes
     writing-mode: vertical-lr;
   }
 }

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use 'sass:math';
 @use '../mdc-helpers/mdc-helpers';
-@use '../../cdk/a11y';
 @use '../../material/core/theming/palette';
 @use '@material/theme/theme-color' as mdc-theme-color;
 
@@ -25,36 +24,12 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
     display: inline-flex;
     box-sizing: border-box;
 
-    // Hides the default arrow native selects.
-    &::-ms-expand {
-      display: none;
-    }
-
     // By default the cursor does not change when hovering over a select. We want to
     // change this for non-disabled select elements so that it's more obvious that the
     // control can be clicked.
     &:not(:disabled) {
       cursor: pointer;
     }
-
-    // As a part of its user agent styling, IE11 has a blue box inside each focused `select`
-    // element which we have to reset. Note that this needs to be in its own selector, because
-    // having it together with another one will cause other browsers to ignore it.
-    &::-ms-value {
-      // We need to reset the `color` as well, because IE sets it to white.
-      color: inherit;
-      background: none;
-
-      // IE and Edge in high contrast mode reset the color for a focused select to the same color
-      // as the background, however this causes it blend in because we've reset the `background`
-      // above. We have to add a more specific selector in order to ensure that it gets the
-      // `color` from our theme instead.
-      @include a11y.high-contrast(active, off) {
-        .mat-focused & {
-          color: inherit;
-        }
-      }
-    }
   }
 
   // Native select elements with the `matInput` directive should have Material Design

src/material/core/style/_vendor-prefixes.scss

@@ -2,7 +2,6 @@
 @mixin user-select($value) {
   -webkit-user-select: $value;
   -moz-user-select: $value;
-  -ms-user-select: $value;
   user-select: $value;
 }
 
@@ -19,6 +18,8 @@
     @content;
   }
 
+  // Note: this isn't necessary anymore since we don't support
+  // IE, but it caused some presubmit failures in #23416.
   &:-ms-input-placeholder {
     @content;
   }

src/material/datepicker/date-range-input.scss

@@ -55,12 +55,6 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci
   -webkit-appearance: none;
   width: 100%;
 
-  // Remove IE's default clear and reveal icons.
-  &::-ms-clear,
-  &::-ms-reveal {
-    display: none;
-  }
-
   // Undo the red box-shadow glow added by Firefox on invalid inputs.
   // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
   &:-moz-ui-invalid {

src/material/form-field/_form-field-legacy-theme.scss

@@ -50,11 +50,6 @@ $legacy-dedupe: 0;
   // translateZ fixes.
   transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
   translateZ(0.001px + $legacy-dedupe);
-  // The tricks above used to smooth out the animation on chrome and firefox actually make things
-  // worse on IE, so we don't include them in the IE version.
-  -ms-transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)
-                  scale($font-scale);
-
   width: math.div(100%, $font-scale) + $legacy-dedupe;
 
   $legacy-dedupe: $legacy-dedupe + 0.00001 !global;

src/material/form-field/form-field-input.scss

@@ -44,12 +44,6 @@
     box-shadow: none;
   }
 
-  // Remove IE's default clear and reveal icons.
-  &::-ms-clear,
-  &::-ms-reveal {
-    display: none;
-  }
-
   // Clear Safari's decorations for search fields.
   &,
   &::-webkit-search-cancel-button,
@@ -100,12 +94,6 @@
     // happen, however it's possible to do it when clicking on a disabled input (see #13479).
     @include vendor-prefixes.user-select(none);
 
-    &:-ms-input-placeholder {
-      // fix IE11 not able to focus programmatically with css style -ms-user-select: none
-      // see https://github.com/angular/components/issues/15093
-      -ms-user-select: text;
-    }
-
     // Delay the transition until the label has animated about a third of the way through, in
     // order to prevent the placeholder from overlapping for a split second.
     transition: color variables.$swift-ease-out-duration
@@ -169,10 +157,6 @@ select.mat-input-element {
   top: -1em;
   margin-bottom: -1em;
 
-  &::-ms-expand {
-    display: none;
-  }
-
   // The `outline: none` from `.mat-input-element` works on all browsers, however Firefox also
   // adds a special `focus-inner` which we have to disable explicitly. See:
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Firefox
@@ -183,26 +167,6 @@ select.mat-input-element {
   &:not(:disabled) {
     cursor: pointer;
   }
-
-  // As a part of its user agent styling, IE11 has a blue box inside each focused
-  // `select` element which we have to reset. Note that this needs to be in its own
-  // selector, because having it together with another one will cause other browsers
-  // to ignore it.
-  &::-ms-value {
-    // We need to reset the `color` as well, because IE sets it to white.
-    color: inherit;
-    background: none;
-
-    // IE and Edge in high contrast mode reset the color for a focused select to the same color
-    // as the background, however this causes it blend in because we've reset the `background`
-    // above. We have to add a more specific selector in order to ensure that it gets the
-    // `color` from our theme instead.
-    @include a11y.high-contrast(active, off) {
-      .mat-focused & {
-        color: inherit;
-      }
-    }
-  }
 }
 
 .mat-form-field-type-mat-native-select {

src/material/form-field/form-field-legacy.scss

@@ -10,7 +10,6 @@ $legacy-underline-height: 1px !default;
 .mat-form-field-appearance-legacy {
   .mat-form-field-label {
     transform: perspective(100px);
-    -ms-transform: none;
   }
 
   .mat-form-field-prefix,