Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Create IE11 SCSS mixin (https://github.com/woocommerce/woocommerce-blocks/pull/3473)

This commit is contained in:
Albert Juhé Lluveras 2020-12-01 09:04:52 +01:00 committed by GitHub
parent ca26289ece
commit 281cc99291
3 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
View File

@ -145,6 +145,13 @@ $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;
}
}
// Converts a px unit to em.
@function em($size, $base: 16px) {
@return $size / $base * 1em;

2
plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
View File

@ -56,7 +56,7 @@
// Hack to hide the check mark in IE11
// See comment: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2320/#issuecomment-621936576
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@include ie11() {
.wc-block-components-checkbox__mark {
display: none;
}

32
plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
View File

@ -212,7 +212,7 @@
}
}
@mixin ie {
@mixin ie-fixes() {
.wc-block-components-price-slider__range-input-wrapper {
background: transparent;
box-shadow: none;
@ -263,27 +263,31 @@
}
}
&.is-loading,
&.is-disabled {
.wc-block-components-price-slider__range-input-wrapper {
@include placeholder();
box-shadow: none;
.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;
&.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. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@include ie;
@include ie11() {
@include ie-fixes();
}
// Targets Edge <= 18.
@supports (-ms-ime-align:auto) {
@include ie;
@include ie-fixes();
}
.theme-twentytwentyone {
@ -335,7 +339,7 @@
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@include ie11() {
.wc-block-components-price-slider__range-input-wrapper {
border: 0;
height: auto;