Browse Source

Fix alignleft alignright.

Jeffrey Ong 5 years ago
parent
commit
977b2f64bb
4 changed files with 104 additions and 18 deletions
  1. 80 12
      seedlet/assets/css/ie.css
  2. 4 2
      seedlet/assets/sass/blocks/utilities/_style.scss
  3. 10 2
      seedlet/style-rtl.css
  4. 10 2
      seedlet/style.css

+ 80 - 12
seedlet/assets/css/ie.css

@@ -155,63 +155,63 @@ hr.wp-block-separator.is-style-wide {
 	max-width: 602px;
 	}
 }
-.entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
 	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
 }
 @media only screen and (min-width: 482px) {
-	.entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
+	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
 	max-width: 432px;
 	}
 }
 @media only screen and (min-width: 592px) {
-	.entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
+	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
 	max-width: 432px;
 	}
 }
 @media only screen and (min-width: 652px) {
-	.entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
+	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
 	max-width: 542px;
 	}
 }
 @media only screen and (min-width: 822px) {
-	.entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
+	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
 	max-width: 602px;
 	}
 }
 @media only screen and (min-width: 1024px) {
-	.entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
+	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce) {
 	max-width: 602px;
 	}
 }
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator) {
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
 	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
 }
 @media only screen and (min-width: 482px) {
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator) {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
 	max-width: 432px;
 	}
 }
 @media only screen and (min-width: 592px) {
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator) {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
 	max-width: 432px;
 	}
 }
 @media only screen and (min-width: 652px) {
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator) {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
 	max-width: 542px;
 	}
 }
 @media only screen and (min-width: 822px) {
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator) {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
 	max-width: 602px;
 	}
 }
 @media only screen and (min-width: 1024px) {
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator) {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
 	max-width: 602px;
 	}
 }
@@ -3562,6 +3562,40 @@ table th {
 	margin-bottom: 30px;
 }
 
+.entry-content > .alignleft {
+	max-width: 100%;
+}
+
+@media only screen and (min-width: 482px) {
+	.entry-content > .alignleft {
+	max-width: 432px;
+	}
+}
+
+@media only screen and (min-width: 592px) {
+	.entry-content > .alignleft {
+	max-width: 432px;
+	}
+}
+
+@media only screen and (min-width: 652px) {
+	.entry-content > .alignleft {
+	max-width: 542px;
+	}
+}
+
+@media only screen and (min-width: 822px) {
+	.entry-content > .alignleft {
+	max-width: 602px;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignleft {
+	max-width: 602px;
+	}
+}
+
 /**
  * .aligncenter
  */
@@ -3586,6 +3620,40 @@ table th {
 	margin-left: 25px;
 }
 
+.entry-content > .alignright {
+	max-width: 100%;
+}
+
+@media only screen and (min-width: 482px) {
+	.entry-content > .alignright {
+	max-width: 432px;
+	}
+}
+
+@media only screen and (min-width: 592px) {
+	.entry-content > .alignright {
+	max-width: 432px;
+	}
+}
+
+@media only screen and (min-width: 652px) {
+	.entry-content > .alignright {
+	max-width: 542px;
+	}
+}
+
+@media only screen and (min-width: 822px) {
+	.entry-content > .alignright {
+	max-width: 602px;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignright {
+	max-width: 602px;
+	}
+}
+
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignright + * {
 	margin-top: 0;

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

@@ -3,8 +3,8 @@
 /**
  * These selectors set the default max width for content appearing inside a post or page. 
  */
-.entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator) {
+.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) {
 	@extend %responsive-aligndefault-width;
 }
 
@@ -25,6 +25,7 @@
 // Targeting the .entry-content class is necessary to ensure these styles 
 // only apply when the block isn't nested.
 .entry-content > .alignleft {
+	max-width: var(--responsive--aligndefault-width);
 	@extend %responsive-alignleft-mobile;
 	@extend %responsive-alignleft;
 }
@@ -57,6 +58,7 @@
 // Targeting the .entry-content class is necessary to ensure these styles 
 // only apply when the block isn't nested.
 .entry-content > .alignright {
+	max-width: var(--responsive--aligndefault-width);
 	@extend %responsive-alignright-mobile;
 	@extend %responsive-alignright;
 }

+ 10 - 2
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 > .alignleft, .entry-content > .alignright, .entry-content .wp-audio-shortcode, .post-thumbnail, .navigation {
+.default-max-width, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-separator):not(.entry-attachment):not(.woocommerce),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-thumbnail, .navigation {
 	max-width: var(--responsive--aligndefault-width);
 	margin-right: auto;
 	margin-left: auto;
@@ -2348,6 +2348,10 @@ table th,
 	margin-bottom: var(--global--spacing-vertical);
 }
 
+.entry-content > .alignleft {
+	max-width: var(--responsive--aligndefault-width);
+}
+
 /**
  * .aligncenter
  */
@@ -2370,6 +2374,10 @@ table th,
 	margin-left: var(--global--spacing-horizontal);
 }
 
+.entry-content > .alignright {
+	max-width: var(--responsive--aligndefault-width);
+}
+
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignright + * {
 	margin-top: 0;

+ 10 - 2
seedlet/style.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(.wp-block-separator):not(.entry-attachment):not(.woocommerce),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-thumbnail, .navigation {
+.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 {
 	max-width: var(--responsive--aligndefault-width);
 	margin-left: auto;
 	margin-right: auto;
@@ -2359,6 +2359,10 @@ table th,
 	margin-bottom: var(--global--spacing-vertical);
 }
 
+.entry-content > .alignleft {
+	max-width: var(--responsive--aligndefault-width);
+}
+
 /**
  * .aligncenter
  */
@@ -2383,6 +2387,10 @@ table th,
 	margin-left: var(--global--spacing-horizontal);
 }
 
+.entry-content > .alignright {
+	max-width: var(--responsive--aligndefault-width);
+}
+
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignright + * {
 	margin-top: 0;