beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Add a nested wide-width %extend, avoid .woocommerce.widget selectors.

Browse source
This commit is contained in:
Allan Cole 2019-10-22 19:03:46 -04:00
parent 8dc1c54820
commit 54e889cf39
2 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
varia/sass/abstracts/_responsive-logic.scss
View file

@ -3,7 +3,7 @@
*/
/* Responsive width-content overrides */
$horizontal-padding: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
$horizontal-padding: (2 * map-deep-get($config-global, "spacing", "horizontal"));
$content-width-flex: 100%;
$content-width-sm: calc( #{map-deep-get($config-global, "breakpoint", "sm")} - #{$horizontal-padding} );
$content-width-md: calc( #{map-deep-get($config-global, "breakpoint", "md")} - #{$horizontal-padding} );
@ -110,6 +110,19 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
}
}
%responsive-alignfull-nested {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
@include media(mobile) {
width: calc(100% - #{2 * $horizontal-padding});
max-width: 100%;
}
}
%responsive-alignright {
/*rtl:ignore*/

4
varia/sass/vendors/woocommerce/layout/_structure.scss vendored
View file

@ -7,7 +7,7 @@
* WooCommerce Wrapper Width
*/
body[class*="woocommerce"] #page .woocommerce,
body[class*="woocommerce"] #page .woocommerce:not(.widget),
body[class*="woocommerce"] #page #woocommerce-wrapper,
body[class*="woocommerce"] #page .woocommerce-Tabs-panel.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment) {
@ -17,7 +17,7 @@ body[class*="woocommerce"] #page .woocommerce-Tabs-panel.entry-content > *:not(.
@if $wc-wrapper-width == wide {
@extend %responsive-alignwide-nested;
} @else if $wc-wrapper-width == full {
@extend %responsive-alignfull;
@extend %responsive-alignfull-nested;
} @else {
// Default width
}