Explorar el Código

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

Allan Cole hace 5 años
padre
commit
54e889cf39

+ 14 - 1
varia/sass/abstracts/_responsive-logic.scss

@@ -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*/

+ 2 - 2
varia/sass/vendors/woocommerce/layout/_structure.scss

@@ -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
 	}