Extract IE11 specific styles to IE stylesheet (https://github.com/woocommerce/woocommerce-admin/pull/1199)
* Extract IE11 specific styles to IE stylesheet * Enqueue IE stylesheet conditionally * Use server-side http user agent to detect IE11 IE11 and up does not detect conditional comments for stylesheets so match user agent string and conditionally load stylesheet.
This commit is contained in:
Joshua T Flowers
Timmy Crawford
parent
21ab4da93e
commit
8dc3398636
|
|
@ -214,6 +214,16 @@ function wc_admin_enqueue_script() {
|
|||
|
||||
wp_enqueue_script( WC_ADMIN_APP );
|
||||
wp_enqueue_style( WC_ADMIN_APP );
|
||||
|
||||
// Use server-side detection to prevent unneccessary stylesheet loading in other browsers.
|
||||
$user_agent = isset( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : ''; // WPCS: sanitization ok.
|
||||
preg_match( '/MSIE (.*?);/', $user_agent, $matches );
|
||||
if ( count( $matches ) < 2 ) {
|
||||
preg_match( '/Trident\/\d{1,2}.\d{1,2}; rv:([0-9]*)/', $user_agent, $matches );
|
||||
}
|
||||
if ( count( $matches ) > 1 ) {
|
||||
wp_enqueue_style( 'wc-components-ie' );
|
||||
}
|
||||
}
|
||||
add_action( 'admin_enqueue_scripts', 'wc_admin_enqueue_script' );
|
||||
|
||||
|
|
|
|||
|
|
@ -102,6 +102,13 @@ function wc_admin_register_script() {
|
|||
filemtime( wc_admin_dir_path( 'dist/components/style.css' ) )
|
||||
);
|
||||
|
||||
wp_register_style(
|
||||
'wc-components-ie',
|
||||
wc_admin_url( 'dist/components/ie.css' ),
|
||||
array( 'wp-edit-blocks' ),
|
||||
filemtime( wc_admin_dir_path( 'dist/components/ie.css' ) )
|
||||
);
|
||||
|
||||
wp_register_style(
|
||||
WC_ADMIN_APP,
|
||||
wc_admin_url( "dist/{$entry}/style.css" ),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* Internal Dependencies
|
||||
*/
|
||||
@import 'segmented-selection/ie.scss';
|
||||
@import 'summary/ie.scss';
|
||||
@import 'table/ie.scss';
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.woocommerce-segmented-selection__item {
|
||||
display: block;
|
||||
@include set-grid-item-position( 2, 10 );
|
||||
|
||||
&:nth-child(2n) {
|
||||
border-left: 1px solid $core-grey-light-700;
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
}
|
||||
|
||||
&:nth-child(-n + 2) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,24 +14,6 @@
|
|||
background-color: $core-grey-light-700;
|
||||
}
|
||||
|
||||
.woocommerce-segmented-selection__item {
|
||||
display: block;
|
||||
@include set-grid-item-position( 2, 10 );
|
||||
|
||||
&:nth-child(2n) {
|
||||
border-left: 1px solid $core-grey-light-700;
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
}
|
||||
|
||||
&:nth-child(-n + 2) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-segmented-selection__label {
|
||||
background-color: $core-grey-light-100;
|
||||
padding: $gap-small $gap-small $gap-small $gap-larger;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
|
||||
// IE11 doesn't auto-position grid children, so their position must be set manually
|
||||
.has-1-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 1, 1 );
|
||||
}
|
||||
|
||||
.has-2-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 2, 2 );
|
||||
}
|
||||
|
||||
.has-3-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 3, 3 );
|
||||
}
|
||||
|
||||
.has-4-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 4, 4 );
|
||||
}
|
||||
|
||||
.has-5-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 5, 5 );
|
||||
}
|
||||
|
||||
.has-6-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 6, 6 );
|
||||
|
||||
@include breakpoint( '<1440px' ) {
|
||||
@include set-grid-item-position( 3, 6 );
|
||||
}
|
||||
}
|
||||
|
||||
.has-7-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 4, 7 );
|
||||
}
|
||||
|
||||
.has-8-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 4, 8 );
|
||||
}
|
||||
|
||||
.has-9-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 5, 9 );
|
||||
|
||||
@include breakpoint( '<1440px' ) {
|
||||
@include set-grid-item-position( 3, 9 );
|
||||
}
|
||||
}
|
||||
|
||||
.has-10-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 5, 10 );
|
||||
|
||||
@include breakpoint( '<1440px' ) {
|
||||
@include set-grid-item-position( 4, 10 );
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( '<960px' ) {
|
||||
@for $i from 1 through 10 {
|
||||
.woocommerce-summary > .woocommerce-summary__item-container:nth-child(#{$i}) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 2;
|
||||
grid-row-start: #{$i};
|
||||
grid-row-end: #{$i+1};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -257,70 +257,6 @@ $inner-border: $core-grey-light-500;
|
|||
}
|
||||
}
|
||||
|
||||
// IE11 doesn't auto-position grid children, so their position must be set manually
|
||||
.has-1-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 1, 1 );
|
||||
}
|
||||
|
||||
.has-2-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 2, 2 );
|
||||
}
|
||||
|
||||
.has-3-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 3, 3 );
|
||||
}
|
||||
|
||||
.has-4-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 4, 4 );
|
||||
}
|
||||
|
||||
.has-5-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 5, 5 );
|
||||
}
|
||||
|
||||
.has-6-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 6, 6 );
|
||||
|
||||
@include breakpoint( '<1440px' ) {
|
||||
@include set-grid-item-position( 3, 6 );
|
||||
}
|
||||
}
|
||||
|
||||
.has-7-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 4, 7 );
|
||||
}
|
||||
|
||||
.has-8-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 4, 8 );
|
||||
}
|
||||
|
||||
.has-9-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 5, 9 );
|
||||
|
||||
@include breakpoint( '<1440px' ) {
|
||||
@include set-grid-item-position( 3, 9 );
|
||||
}
|
||||
}
|
||||
|
||||
.has-10-items .woocommerce-summary__item-container {
|
||||
@include set-grid-item-position( 5, 10 );
|
||||
|
||||
@include breakpoint( '<1440px' ) {
|
||||
@include set-grid-item-position( 4, 10 );
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( '<960px' ) {
|
||||
@for $i from 1 through 10 {
|
||||
.woocommerce-summary > .woocommerce-summary__item-container:nth-child(#{$i}) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 2;
|
||||
grid-row-start: #{$i};
|
||||
grid-row-end: #{$i+1};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-summary__item {
|
||||
display: block;
|
||||
padding: $spacing;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
.woocommerce-table {
|
||||
&.has-compare,
|
||||
&.has-search {
|
||||
.woocommerce-card__action {
|
||||
.woocommerce-table__compare {
|
||||
align-self: center;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.woocommerce-search {
|
||||
align-self: center;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.woocommerce-table__download-button {
|
||||
align-self: center;
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -27,24 +27,6 @@
|
|||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
|
||||
.woocommerce-table__compare {
|
||||
align-self: center;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.woocommerce-search {
|
||||
align-self: center;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.woocommerce-table__download-button {
|
||||
align-self: center;
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( '<960px' ) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue