diff --git a/.stylelintrc.json b/.stylelintrc.json index f4b9f1f02116..f80bfa3e9922 100644 --- a/.stylelintrc.json +++ b/.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, diff --git a/src/components-examples/material/core/ripple-overview/ripple-overview-example.css b/src/components-examples/material/core/ripple-overview/ripple-overview-example.css index 53bec9ab66ec..b344d685eac0 100644 --- a/src/components-examples/material/core/ripple-overview/ripple-overview-example.css +++ b/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; diff --git a/src/dev-app/menubar/mat-menubar-demo.scss b/src/dev-app/menubar/mat-menubar-demo.scss index dfafa9d003e1..4aff08a5ca12 100644 --- a/src/dev-app/menubar/mat-menubar-demo.scss +++ b/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; } diff --git a/src/dev-app/virtual-scroll/virtual-scroll-demo.scss b/src/dev-app/virtual-scroll/virtual-scroll-demo.scss index e33616c99786..3fcffe2c52c2 100644 --- a/src/dev-app/virtual-scroll/virtual-scroll-demo.scss +++ b/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; } } diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.scss index 85af7d50791a..038159605ae0 100644 --- a/src/material-experimental/mdc-form-field/_form-field-native-select.scss +++ b/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 diff --git a/src/material/core/style/_vendor-prefixes.scss b/src/material/core/style/_vendor-prefixes.scss index 2ed60536d5c8..eeedf0d8423d 100644 --- a/src/material/core/style/_vendor-prefixes.scss +++ b/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; } diff --git a/src/material/datepicker/date-range-input.scss b/src/material/datepicker/date-range-input.scss index 7db147eb6539..9f39d4ce45a0 100644 --- a/src/material/datepicker/date-range-input.scss +++ b/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 { diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss index 42e9a6c2e760..77af421bc5fb 100644 --- a/src/material/form-field/_form-field-legacy-theme.scss +++ b/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; diff --git a/src/material/form-field/form-field-input.scss b/src/material/form-field/form-field-input.scss index 2646d3463e00..b995448bdcdc 100644 --- a/src/material/form-field/form-field-input.scss +++ b/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 { diff --git a/src/material/form-field/form-field-legacy.scss b/src/material/form-field/form-field-legacy.scss index a6771fd3cabc..4644b82a24fd 100644 --- a/src/material/form-field/form-field-legacy.scss +++ b/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,