Browse Source

Professional Business: Fix the cover headings alignment

Danny Dudzic 6 years ago
parent
commit
9239f3d8fb

+ 14 - 0
professional-business/sass/blocks/_blocks.scss

@@ -568,6 +568,20 @@
 			}
 		}
 
+		h2 {
+			&.has-text-align-left {
+				text-align: left;
+			}
+
+			&.has-text-align-center {
+				text-align: center;
+			}
+
+			&.has-text-align-right {
+				text-align: right;
+			}
+		}
+
 		h3 {
 			font-size: $font__size-md;
 

+ 16 - 5
professional-business/style-editor.css

@@ -1203,7 +1203,7 @@ figcaption,
   font-size: 1.6875em;
   max-width: 100%;
   padding: 0;
-  text-align: left;
+  text-align: inherit;
 }
 
 @media only screen and (min-width: 768px) {
@@ -1213,6 +1213,21 @@ figcaption,
   }
 }
 
+.wp-block-cover .wp-block-cover__inner-container h2.has-text-align-left,
+.wp-block-cover .wp-block-cover-text h2.has-text-align-left {
+  text-align: left;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h2.has-text-align-center,
+.wp-block-cover .wp-block-cover-text h2.has-text-align-center {
+  text-align: center;
+}
+
+.wp-block-cover .wp-block-cover__inner-container h2.has-text-align-right,
+.wp-block-cover .wp-block-cover-text h2.has-text-align-right {
+  text-align: right;
+}
+
 .wp-block-cover .wp-block-cover__inner-container h3,
 .wp-block-cover .wp-block-cover-text h3 {
   font-size: 1.125em;
@@ -1309,18 +1324,14 @@ figcaption,
 }
 
 @media only screen and (min-width: 768px) {
-  .wp-block[data-type="core/cover"][data-align="wide"] h2,
   .wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
-  .wp-block[data-type="core/cover"][data-align="full"] h2,
   .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
     max-width: calc(8 * (100vw / 12) - 43px);
   }
 }
 
 @media only screen and (min-width: 1168px) {
-  .wp-block[data-type="core/cover"][data-align="wide"] h2,
   .wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
-  .wp-block[data-type="core/cover"][data-align="full"] h2,
   .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
     max-width: calc(6 * (100vw / 12) - 43px);
   }

+ 13 - 3
professional-business/style-editor.scss

@@ -329,11 +329,23 @@ figcaption,
 			font-size: $font__size-lg;
 			max-width: 100%;
 			padding: 0;
-			text-align: left;
+			text-align: inherit;
 
 			@include media(tablet) {
 				font-size: $font__size-xl;
 			}
+
+			&.has-text-align-left {
+				text-align: left;
+			}
+
+			&.has-text-align-center {
+				text-align: center;
+			}
+
+			&.has-text-align-right {
+				text-align: right;
+			}
 		}
 
 		h3 {
@@ -419,7 +431,6 @@ figcaption,
 
 	@include media(tablet) {
 
-		h2,
 		.wp-block-cover-text {
 			max-width: calc(8 * (100vw / 12) - 43px); // 43px is the 28px + 15px -- half of the padding on blocks like paragraph
 		}
@@ -427,7 +438,6 @@ figcaption,
 
 	@include media(desktop) {
 
-		h2,
 		.wp-block-cover-text {
 			max-width: calc(6 * (100vw / 12) - 43px); // 43px is the 28px + 15px -- half of the padding on blocks like paragraph
 		}

+ 15 - 0
professional-business/style-rtl.css

@@ -4023,6 +4023,21 @@ body.page .main-navigation {
   }
 }
 
+.entry .entry-content .wp-block-cover-image h2.has-text-align-left,
+.entry .entry-content .wp-block-cover h2.has-text-align-left {
+  text-align: right;
+}
+
+.entry .entry-content .wp-block-cover-image h2.has-text-align-center,
+.entry .entry-content .wp-block-cover h2.has-text-align-center {
+  text-align: center;
+}
+
+.entry .entry-content .wp-block-cover-image h2.has-text-align-right,
+.entry .entry-content .wp-block-cover h2.has-text-align-right {
+  text-align: left;
+}
+
 .entry .entry-content .wp-block-cover-image h3,
 .entry .entry-content .wp-block-cover h3 {
   font-size: 1.125em;

+ 15 - 0
professional-business/style.css

@@ -4035,6 +4035,21 @@ body.page .main-navigation {
   }
 }
 
+.entry .entry-content .wp-block-cover-image h2.has-text-align-left,
+.entry .entry-content .wp-block-cover h2.has-text-align-left {
+  text-align: left;
+}
+
+.entry .entry-content .wp-block-cover-image h2.has-text-align-center,
+.entry .entry-content .wp-block-cover h2.has-text-align-center {
+  text-align: center;
+}
+
+.entry .entry-content .wp-block-cover-image h2.has-text-align-right,
+.entry .entry-content .wp-block-cover h2.has-text-align-right {
+  text-align: right;
+}
+
 .entry .entry-content .wp-block-cover-image h3,
 .entry .entry-content .wp-block-cover h3 {
   font-size: 1.125em;