Remove IE11 specific styles (#49027)
* Remove IE11 specific styles * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Remove unused mixin * Remove additional IE/edge styles --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Roy Ho
GitHub
parent
025b5f1a8f
commit
780f27256f
|
|
@ -195,39 +195,6 @@ $fontSizes: (
|
|||
overflow-wrap: anywhere;
|
||||
// Safari supports word-break.
|
||||
word-break: break-word;
|
||||
// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
|
||||
-ms-word-break: break-all;
|
||||
}
|
||||
|
||||
// Add support for content alignment classes
|
||||
@mixin with-alignment() {
|
||||
// Apply max-width to floated items that have no intrinsic width
|
||||
&.alignleft,
|
||||
&.alignright {
|
||||
max-width: $content-width * 0.5;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
|
||||
// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
font-size: 0;
|
||||
min-height: inherit;
|
||||
|
||||
// IE doesn't support flex so omit that.
|
||||
@supports (position: sticky) {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Aligned cover blocks should not use our global alignment rules
|
||||
&.aligncenter,
|
||||
&.alignleft,
|
||||
&.alignright {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Shows an semi-transparent overlay
|
||||
|
|
@ -275,13 +242,6 @@ $fontSizes: (
|
|||
}
|
||||
}
|
||||
|
||||
// Wraps the content with a media query specially targeting IE11.
|
||||
@mixin ie11() {
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Positions an element absolutely and stretches it over the container
|
||||
@mixin absolute-stretch() {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -248,80 +248,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin ie-fixes() {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
height: 24px;
|
||||
}
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
background: #{$studio-woocommerce-purple-30};
|
||||
width: 100%;
|
||||
top: 7px;
|
||||
}
|
||||
.wc-block-components-price-slider__range-input {
|
||||
height: 24px;
|
||||
pointer-events: auto;
|
||||
&::-ms-track {
|
||||
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
|
||||
background: transparent;
|
||||
/*leave room for the larger thumb to overflow with a transparent border */
|
||||
border-color: transparent;
|
||||
border-width: 7px 0;
|
||||
/*remove default tick marks*/
|
||||
color: transparent;
|
||||
}
|
||||
&::-ms-fill-lower {
|
||||
background: #e1e1e1;
|
||||
box-shadow: 0 0 0 1px inset #b8b8b8;
|
||||
}
|
||||
&::-ms-fill-upper {
|
||||
background: transparent;
|
||||
}
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
transform: translate(1px, 0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.wc-block-components-price-slider__range-input--max {
|
||||
&::-ms-fill-upper {
|
||||
background: #e1e1e1;
|
||||
box-shadow: 0 0 0 1px inset #b8b8b8;
|
||||
}
|
||||
&::-ms-fill-lower {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.wc-block-components-price-slider {
|
||||
&.is-loading.is-disabled {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
@include placeholder();
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&.is-disabled:not(.is-loading) {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* IE 11 will not support multi-range slider due to poor pointer-events support on the thumb. Reverts to 2 sliders. */
|
||||
|
||||
@include ie11() {
|
||||
@include ie-fixes();
|
||||
}
|
||||
|
||||
// Targets Edge <= 18.
|
||||
@supports (-ms-ime-align:auto) {
|
||||
@include ie-fixes();
|
||||
}
|
||||
|
||||
.theme-twentytwentyone {
|
||||
$border-width: 3px;
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
|
|
@ -372,19 +298,4 @@
|
|||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
@include ie11() {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
border: 0;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
}
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
display: none;
|
||||
}
|
||||
.wc-block-price-filter__range-input {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
display: block;
|
||||
color: inherit;
|
||||
flex-grow: 1;
|
||||
// Required by IE11.
|
||||
flex-basis: 0;
|
||||
}
|
||||
.wc-block-components-totals-footer-item {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -109,14 +109,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Hack to hide the check mark in IE11
|
||||
// See comment: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2320/#issuecomment-621936576
|
||||
@include ie11() {
|
||||
.wc-block-components-checkbox__mark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-twentytwentyone {
|
||||
.wc-block-components-checkbox__input[type="checkbox"],
|
||||
.has-dark-controls .wc-block-components-checkbox__input[type="checkbox"] {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: tweak
|
||||
|
||||
Remove unneeded IE styling as IE is no longer supported
|
||||
Loading…
Reference in New Issue