Explorar el Código

Alignright and alignleft responsive selectors need to be children of entry-content.

Jeffrey Ong hace 5 años
padre
commit
5538fcc9ac

+ 26 - 26
seedlet/assets/css/ie.css

@@ -501,7 +501,7 @@ hr.wp-block-separator.is-style-wide {
 	}
 }
 
-.alignleft {
+.entry-content > .alignleft {
 	/*rtl:ignore*/
 	margin-left: 0;
 	/*rtl:ignore*/
@@ -677,65 +677,65 @@ hr.wp-block-separator.is-style-wide {
 		margin-left: calc(50vw - 301px);
 		}
 	}
-	.alignleft {
+	.entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc(50vw - 216px);
 		/*rtl:ignore*/
 		margin-right: 25px;
 	}
 	@media only screen and (min-width: 482px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 216px);
 		}
 	}
 	@media only screen and (min-width: 592px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 216px);
 		}
 	}
 	@media only screen and (min-width: 652px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 271px);
 		}
 	}
 	@media only screen and (min-width: 822px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 301px);
 		}
 	}
 	@media only screen and (min-width: 1024px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 301px);
 		}
 	}
 	@media only screen and (min-width: 482px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 216px);
 		}
 	}
 	@media only screen and (min-width: 592px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 216px);
 		}
 	}
 	@media only screen and (min-width: 652px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 271px);
 		}
 	}
 	@media only screen and (min-width: 822px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 301px);
 		}
 	}
 	@media only screen and (min-width: 1024px) {
-		.alignleft {
+		.entry-content > .alignleft {
 		margin-left: calc(50vw - 301px);
 		}
 	}
 }
 
-.alignright {
+.entry-content > .alignright {
 	/*rtl:ignore*/
 	margin-left: 50px;
 	/*rtl:ignore*/
@@ -911,59 +911,59 @@ hr.wp-block-separator.is-style-wide {
 		margin-right: calc(50vw - 301px);
 		}
 	}
-	.alignright {
+	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-left: 25px;
 		/*rtl:ignore*/
 		margin-right: calc(50vw - 216px);
 	}
 	@media only screen and (min-width: 482px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 216px);
 		}
 	}
 	@media only screen and (min-width: 592px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 216px);
 		}
 	}
 	@media only screen and (min-width: 652px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 271px);
 		}
 	}
 	@media only screen and (min-width: 822px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 301px);
 		}
 	}
 	@media only screen and (min-width: 1024px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 301px);
 		}
 	}
 	@media only screen and (min-width: 482px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 216px);
 		}
 	}
 	@media only screen and (min-width: 592px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 216px);
 		}
 	}
 	@media only screen and (min-width: 652px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 271px);
 		}
 	}
 	@media only screen and (min-width: 822px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 301px);
 		}
 	}
 	@media only screen and (min-width: 1024px) {
-		.alignright {
+		.entry-content > .alignright {
 		margin-right: calc(50vw - 301px);
 		}
 	}
@@ -3921,8 +3921,8 @@ table th {
 	margin-left: 25px;
 }
 
-* > .alignleft + *,
-* > .alignright + * {
+[class*="inner-container"] > .alignleft + *,
+[class*="inner-container"] > .alignright + * {
 	margin-top: 0;
 }
 

+ 8 - 2
seedlet/assets/sass/blocks/utilities/_style.scss

@@ -12,6 +12,9 @@
 	/*rtl:ignore*/
 	margin-right: var(--global--spacing-horizontal);
 	margin-bottom: var(--global--spacing-vertical);
+}
+
+.entry-content > .alignleft {
 	@extend %responsive-alignleft-mobile;
 	@extend %responsive-alignleft;
 }
@@ -38,13 +41,16 @@
 	margin-bottom: var(--global--spacing-vertical);
 	/*rtl:ignore*/
 	margin-left: var(--global--spacing-horizontal);
+}
+
+.entry-content > .alignright {
 	@extend %responsive-alignright-mobile;
 	@extend %responsive-alignright;
 }
 
 // Make sure siblings of floated elements are top-aligned when nested
-* > .alignleft + *,
-* > .alignright + * {
+[class*="inner-container"] > .alignleft + *,
+[class*="inner-container"] > .alignright + * {
 	margin-top: 0;
 }
 

+ 11 - 11
seedlet/style-rtl.css

@@ -355,8 +355,8 @@ Included in theme screenshot.
 /**
  * Extends
  */
-.default-max-width, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-thumbnail, .navigation {
+.default-max-width, hr.wp-block-separator.is-style-wide, *[class^="wp-block"]:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce),
+*[class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-thumbnail, .navigation {
 	max-width: var(--responsive--aligndefault-width);
 	margin-right: auto;
 	margin-left: auto;
@@ -368,7 +368,7 @@ Included in theme screenshot.
 	margin-left: auto;
 }
 
-.full-max-width, .wp-block-group .wp-block-group__inner-container > *.alignfull, .entry-content > .alignfull, .singular .post-thumbnail {
+.full-max-width, .wp-block-group .wp-block-group__inner-container > *.alignfull, .alignfull, .singular .post-thumbnail {
 	max-width: calc(100% + (2 * var(--global--spacing-horizontal)));
 	width: calc(100% + (2 * var(--global--spacing-horizontal)));
 	margin-right: calc(-1 * var(--global--spacing-horizontal));
@@ -376,7 +376,7 @@ Included in theme screenshot.
 }
 
 @media only screen and (min-width: 482px) {
-	.full-max-width, .entry-content > .alignfull, .singular .post-thumbnail {
+	.full-max-width, .alignfull, .singular .post-thumbnail {
 		max-width: var(--responsive--alignfull-width);
 		width: auto;
 		margin-right: auto;
@@ -384,32 +384,32 @@ Included in theme screenshot.
 	}
 }
 
-.alignwide [class*="inner-container"] > .alignwide, .entry-content > .alignfull [class*="inner-container"] > .alignwide {
+.alignwide [class*="inner-container"] > .alignwide, .alignfull [class*="inner-container"] > .alignwide {
 	margin-right: auto;
 	margin-left: auto;
 	width: var(--responsive--alignwide-width);
 	max-width: var(--responsive--alignfull-width);
 }
 
-.alignleft {
+.entry-content > .alignleft {
 	margin-left: 0;
 	margin-right: var(--responsive--spacing-horizontal);
 }
 
 @media only screen and (min-width: 482px) {
-	.entry-content .wp-block-file.alignleft, .entry-content .wp-block-pullquote.alignleft, .entry-content .wp-block-video.alignleft, .alignleft {
+	.entry-content .wp-block-file.alignleft, .entry-content .wp-block-pullquote.alignleft, .entry-content .wp-block-video.alignleft, .entry-content > .alignleft {
 		margin-left: var(--responsive--alignleft-margin);
 		margin-right: var(--global--spacing-horizontal);
 	}
 }
 
-.alignright {
+.entry-content > .alignright {
 	margin-left: var(--responsive--spacing-horizontal);
 	margin-right: 0;
 }
 
 @media only screen and (min-width: 482px) {
-	.entry-content .wp-block-file.alignright, .entry-content .wp-block-pullquote.alignright, .entry-content .wp-block-video.alignright, .alignright {
+	.entry-content .wp-block-file.alignright, .entry-content .wp-block-pullquote.alignright, .entry-content .wp-block-video.alignright, .entry-content > .alignright {
 		margin-left: var(--global--spacing-horizontal);
 		margin-right: var(--responsive--alignright-margin);
 	}
@@ -2369,8 +2369,8 @@ table th,
 	margin-left: var(--global--spacing-horizontal);
 }
 
-* > .alignleft + *,
-* > .alignright + * {
+[class*="inner-container"] > .alignleft + *,
+[class*="inner-container"] > .alignright + * {
 	margin-top: 0;
 }
 

+ 6 - 6
seedlet/style.css

@@ -391,7 +391,7 @@ Included in theme screenshot.
 	max-width: var(--responsive--alignfull-width);
 }
 
-.alignleft {
+.entry-content > .alignleft {
 	/*rtl:ignore*/
 	margin-left: 0;
 	/*rtl:ignore*/
@@ -399,7 +399,7 @@ Included in theme screenshot.
 }
 
 @media only screen and (min-width: 482px) {
-	.entry-content .wp-block-file.alignleft, .entry-content .wp-block-pullquote.alignleft, .entry-content .wp-block-video.alignleft, .alignleft {
+	.entry-content .wp-block-file.alignleft, .entry-content .wp-block-pullquote.alignleft, .entry-content .wp-block-video.alignleft, .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: var(--responsive--alignleft-margin);
 		/*rtl:ignore*/
@@ -407,7 +407,7 @@ Included in theme screenshot.
 	}
 }
 
-.alignright {
+.entry-content > .alignright {
 	/*rtl:ignore*/
 	margin-left: var(--responsive--spacing-horizontal);
 	/*rtl:ignore*/
@@ -415,7 +415,7 @@ Included in theme screenshot.
 }
 
 @media only screen and (min-width: 482px) {
-	.entry-content .wp-block-file.alignright, .entry-content .wp-block-pullquote.alignright, .entry-content .wp-block-video.alignright, .alignright {
+	.entry-content .wp-block-file.alignright, .entry-content .wp-block-pullquote.alignright, .entry-content .wp-block-video.alignright, .entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-left: var(--global--spacing-horizontal);
 		/*rtl:ignore*/
@@ -2382,8 +2382,8 @@ table th,
 	margin-left: var(--global--spacing-horizontal);
 }
 
-* > .alignleft + *,
-* > .alignright + * {
+[class*="inner-container"] > .alignleft + *,
+[class*="inner-container"] > .alignright + * {
 	margin-top: 0;
 }