Переглянути джерело

fixes for left and right align from TT1

Maggie Cabrera 4 роки тому
батько
коміт
98141b6ee7

+ 1 - 9
seedlet/assets/sass/blocks/gallery/_style.scss

@@ -1,8 +1,6 @@
 .wp-block-gallery {
 .wp-block-gallery {
 
 
-	&:not(.alignfull) {
-		margin: 0 auto;
-	}
+	margin: 0 auto;
 
 
 	.blocks-gallery-image,
 	.blocks-gallery-image,
 	.blocks-gallery-item {
 	.blocks-gallery-item {
@@ -15,12 +13,6 @@
 		}
 		}
 	}
 	}
 
 
-	// Apply max-width to floated items that have no intrinsic width.
-	&.alignleft,
-	&.alignright {
-		max-width: 50%;
-	}
-
 	&.alignfull {
 	&.alignfull {
 		.blocks-gallery-grid {
 		.blocks-gallery-grid {
 			width: 100%;
 			width: 100%;

+ 33 - 11
seedlet/assets/sass/blocks/utilities/_style.scss

@@ -14,22 +14,33 @@
 .alignleft {
 .alignleft {
 	/*rtl:ignore*/
 	/*rtl:ignore*/
 	text-align: left;
 	text-align: left;
-	/*rtl:ignore*/
-	float: left;
 	margin-top: 0;
 	margin-top: 0;
-	/*rtl:ignore*/
-	margin-right: var(--global--spacing-horizontal);
-	margin-bottom: var(--global--spacing-vertical);
 }
 }
 
 
 // Targeting the .entry-content class is necessary to ensure these styles
 // Targeting the .entry-content class is necessary to ensure these styles
 // only apply when the block isn't nested.
 // only apply when the block isn't nested.
 .entry-content > .alignleft {
 .entry-content > .alignleft {
 	max-width: var(--responsive--aligndefault-width);
 	max-width: var(--responsive--aligndefault-width);
-	@extend %responsive-alignleft-mobile;
 	@extend %responsive-alignleft;
 	@extend %responsive-alignleft;
 }
 }
 
 
+@include media(mobile) {
+
+	.alignleft {
+
+		/*rtl:ignore*/
+		float: left;
+
+		/*rtl:ignore*/
+		margin-right: var(--global--spacing-horizontal);
+		margin-bottom: var(--global--spacing-vertical);
+	}
+
+	.entry-content > .alignleft {
+		max-width: calc(50% - var(--responsive--alignleft-margin));
+	}
+}
+
 /**
 /**
  * .aligncenter
  * .aligncenter
  */
  */
@@ -46,22 +57,33 @@
  * .alignright
  * .alignright
  */
  */
 .alignright {
 .alignright {
-	/*rtl:ignore*/
-	float: right;
 	margin-top: 0;
 	margin-top: 0;
 	margin-bottom: var(--global--spacing-vertical);
 	margin-bottom: var(--global--spacing-vertical);
-	/*rtl:ignore*/
-	margin-left: var(--global--spacing-horizontal);
 }
 }
 
 
 // Targeting the .entry-content class is necessary to ensure these styles
 // Targeting the .entry-content class is necessary to ensure these styles
 // only apply when the block isn't nested.
 // only apply when the block isn't nested.
 .entry-content > .alignright {
 .entry-content > .alignright {
 	max-width: var(--responsive--aligndefault-width);
 	max-width: var(--responsive--aligndefault-width);
-	@extend %responsive-alignright-mobile;
 	@extend %responsive-alignright;
 	@extend %responsive-alignright;
 }
 }
 
 
+@include media(mobile) {
+
+	.alignright {
+
+		/*rtl:ignore*/
+		float: right;
+
+		/*rtl:ignore*/
+		margin-left: var(--global--spacing-horizontal);
+	}
+
+	.entry-content > .alignright {
+		max-width: calc(50% - var(--responsive--alignright-margin));
+	}
+}
+
 // Make sure siblings of floated elements are top-aligned when nested
 // Make sure siblings of floated elements are top-aligned when nested
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignright + * {
 [class*="inner-container"] > .alignright + * {

+ 22 - 20
seedlet/style-rtl.css

@@ -360,11 +360,6 @@ Included in theme screenshot and in block patterns.
 	max-width: var(--responsive--alignfull-width);
 	max-width: var(--responsive--alignfull-width);
 }
 }
 
 
-.entry-content > .alignleft {
-	margin-left: 0;
-	margin-right: var(--responsive--spacing-horizontal);
-}
-
 @media only screen and (min-width: 482px) {
 @media only screen and (min-width: 482px) {
 	.entry-content > .alignleft {
 	.entry-content > .alignleft {
 		margin-left: var(--responsive--alignleft-margin);
 		margin-left: var(--responsive--alignleft-margin);
@@ -372,11 +367,6 @@ Included in theme screenshot and in block patterns.
 	}
 	}
 }
 }
 
 
-.entry-content > .alignright {
-	margin-left: var(--responsive--spacing-horizontal);
-	margin-right: 0;
-}
-
 @media only screen and (min-width: 482px) {
 @media only screen and (min-width: 482px) {
 	.entry-content > .alignright {
 	.entry-content > .alignright {
 		margin-left: var(--global--spacing-horizontal);
 		margin-left: var(--global--spacing-horizontal);
@@ -1496,7 +1486,7 @@ object {
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 }
 
 
-.wp-block-gallery:not(.alignfull) {
+.wp-block-gallery {
 	margin: 0 auto;
 	margin: 0 auto;
 }
 }
 
 
@@ -1507,10 +1497,6 @@ object {
 	font: var(--global--font-size-sm);
 	font: var(--global--font-size-sm);
 }
 }
 
 
-.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
-	max-width: 50%;
-}
-
 .wp-block-gallery.alignfull .blocks-gallery-grid {
 .wp-block-gallery.alignfull .blocks-gallery-grid {
 	width: 100%;
 	width: 100%;
 }
 }
@@ -2384,16 +2370,24 @@ table th,
  */
  */
 .alignleft {
 .alignleft {
 	text-align: left;
 	text-align: left;
-	float: left;
 	margin-top: 0;
 	margin-top: 0;
-	margin-right: var(--global--spacing-horizontal);
-	margin-bottom: var(--global--spacing-vertical);
 }
 }
 
 
 .entry-content > .alignleft {
 .entry-content > .alignleft {
 	max-width: var(--responsive--aligndefault-width);
 	max-width: var(--responsive--aligndefault-width);
 }
 }
 
 
+@media only screen and (min-width: 482px) {
+	.alignleft {
+		float: left;
+		margin-right: var(--global--spacing-horizontal);
+		margin-bottom: var(--global--spacing-vertical);
+	}
+	.entry-content > .alignleft {
+		max-width: calc(50% - var(--responsive--alignleft-margin));
+	}
+}
+
 /**
 /**
  * .aligncenter
  * .aligncenter
  */
  */
@@ -2410,16 +2404,24 @@ table th,
  * .alignright
  * .alignright
  */
  */
 .alignright {
 .alignright {
-	float: right;
 	margin-top: 0;
 	margin-top: 0;
 	margin-bottom: var(--global--spacing-vertical);
 	margin-bottom: var(--global--spacing-vertical);
-	margin-left: var(--global--spacing-horizontal);
 }
 }
 
 
 .entry-content > .alignright {
 .entry-content > .alignright {
 	max-width: var(--responsive--aligndefault-width);
 	max-width: var(--responsive--aligndefault-width);
 }
 }
 
 
+@media only screen and (min-width: 482px) {
+	.alignright {
+		float: right;
+		margin-left: var(--global--spacing-horizontal);
+	}
+	.entry-content > .alignright {
+		max-width: calc(50% - var(--responsive--alignright-margin));
+	}
+}
+
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignright + * {
 [class*="inner-container"] > .alignright + * {
 	margin-top: 0;
 	margin-top: 0;

+ 26 - 28
seedlet/style.css

@@ -360,13 +360,6 @@ Included in theme screenshot and in block patterns.
 	max-width: var(--responsive--alignfull-width);
 	max-width: var(--responsive--alignfull-width);
 }
 }
 
 
-.entry-content > .alignleft {
-	/*rtl:ignore*/
-	margin-left: 0;
-	/*rtl:ignore*/
-	margin-right: var(--responsive--spacing-horizontal);
-}
-
 @media only screen and (min-width: 482px) {
 @media only screen and (min-width: 482px) {
 	.entry-content > .alignleft {
 	.entry-content > .alignleft {
 		/*rtl:ignore*/
 		/*rtl:ignore*/
@@ -376,13 +369,6 @@ Included in theme screenshot and in block patterns.
 	}
 	}
 }
 }
 
 
-.entry-content > .alignright {
-	/*rtl:ignore*/
-	margin-left: var(--responsive--spacing-horizontal);
-	/*rtl:ignore*/
-	margin-right: 0;
-}
-
 @media only screen and (min-width: 482px) {
 @media only screen and (min-width: 482px) {
 	.entry-content > .alignright {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		/*rtl:ignore*/
@@ -1504,7 +1490,7 @@ object {
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 }
 
 
-.wp-block-gallery:not(.alignfull) {
+.wp-block-gallery {
 	margin: 0 auto;
 	margin: 0 auto;
 }
 }
 
 
@@ -1515,10 +1501,6 @@ object {
 	font: var(--global--font-size-sm);
 	font: var(--global--font-size-sm);
 }
 }
 
 
-.wp-block-gallery.alignleft, .wp-block-gallery.alignright {
-	max-width: 50%;
-}
-
 .wp-block-gallery.alignfull .blocks-gallery-grid {
 .wp-block-gallery.alignfull .blocks-gallery-grid {
 	width: 100%;
 	width: 100%;
 }
 }
@@ -2393,18 +2375,26 @@ table th,
 .alignleft {
 .alignleft {
 	/*rtl:ignore*/
 	/*rtl:ignore*/
 	text-align: left;
 	text-align: left;
-	/*rtl:ignore*/
-	float: left;
 	margin-top: 0;
 	margin-top: 0;
-	/*rtl:ignore*/
-	margin-right: var(--global--spacing-horizontal);
-	margin-bottom: var(--global--spacing-vertical);
 }
 }
 
 
 .entry-content > .alignleft {
 .entry-content > .alignleft {
 	max-width: var(--responsive--aligndefault-width);
 	max-width: var(--responsive--aligndefault-width);
 }
 }
 
 
+@media only screen and (min-width: 482px) {
+	.alignleft {
+		/*rtl:ignore*/
+		float: left;
+		/*rtl:ignore*/
+		margin-right: var(--global--spacing-horizontal);
+		margin-bottom: var(--global--spacing-vertical);
+	}
+	.entry-content > .alignleft {
+		max-width: calc(50% - var(--responsive--alignleft-margin));
+	}
+}
+
 /**
 /**
  * .aligncenter
  * .aligncenter
  */
  */
@@ -2421,18 +2411,26 @@ table th,
  * .alignright
  * .alignright
  */
  */
 .alignright {
 .alignright {
-	/*rtl:ignore*/
-	float: right;
 	margin-top: 0;
 	margin-top: 0;
 	margin-bottom: var(--global--spacing-vertical);
 	margin-bottom: var(--global--spacing-vertical);
-	/*rtl:ignore*/
-	margin-left: var(--global--spacing-horizontal);
 }
 }
 
 
 .entry-content > .alignright {
 .entry-content > .alignright {
 	max-width: var(--responsive--aligndefault-width);
 	max-width: var(--responsive--aligndefault-width);
 }
 }
 
 
+@media only screen and (min-width: 482px) {
+	.alignright {
+		/*rtl:ignore*/
+		float: right;
+		/*rtl:ignore*/
+		margin-left: var(--global--spacing-horizontal);
+	}
+	.entry-content > .alignright {
+		max-width: calc(50% - var(--responsive--alignright-margin));
+	}
+}
+
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignleft + *,
 [class*="inner-container"] > .alignright + * {
 [class*="inner-container"] > .alignright + * {
 	margin-top: 0;
 	margin-top: 0;

Різницю між файлами не показано, бо вона завелика
+ 0 - 0
seedlet/style.css.map


Деякі файли не було показано, через те що забагато файлів було змінено