Browse Source

Modern Business: Fix vertical padding on Media & Text block, See: #770

Allan Cole 6 years ago
parent
commit
78bf21c285

+ 9 - 9
modern-business/sass/blocks/_blocks.scss

@@ -200,31 +200,31 @@
 		}
 
 		@include media(tablet) {
-			padding: $size__vertical-spacing-unit 0;
+			padding: #{2 * $size__vertical-spacing-unit} 0;
 
 			.wp-block-media-text__media {
-				margin-left: -60px;
-				margin-right: 60px;
+				margin-left: -#{2 * $size__vertical-spacing-unit};
+				margin-right: #{2 * $size__vertical-spacing-unit};
 				max-width: calc( 100% );
 			}
 
 			.wp-block-media-text__content {
-				padding: 0 60px 0 0;
+				padding: 0 #{2 * $size__vertical-spacing-unit} 0 0;
 			}
 
 			&.alignfull {
-				margin-left: 60px;
-				margin-right: 60px;
+				margin-left: #{2 * $size__vertical-spacing-unit};
+				margin-right: #{2 * $size__vertical-spacing-unit};
 				max-width: calc( 125% + 30px );
 			}
 
 			&.has-media-on-the-right .wp-block-media-text__media {
-				margin-right: -60px;
-				margin-left: 60px;
+				margin-right: -#{2 * $size__vertical-spacing-unit};
+				margin-left: #{2 * $size__vertical-spacing-unit};
 			}
 
 			&.has-media-on-the-right .wp-block-media-text__content {
-				padding: 0 0 0 60px;
+				padding: 0 0 0 #{2 * $size__vertical-spacing-unit};
 			}
 
 		}

+ 9 - 9
modern-business/style-rtl.css

@@ -3586,27 +3586,27 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text {
-    padding: 32px 0;
+    padding: 64px 0;
   }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__media {
-    margin-right: -60px;
-    margin-left: 60px;
+    margin-right: -64px;
+    margin-left: 64px;
     max-width: calc( 100%);
   }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    padding: 0 0 0 60px;
+    padding: 0 0 0 64px;
   }
   .entry .entry-content .wp-block-media-text.alignfull {
-    margin-right: 60px;
-    margin-left: 60px;
+    margin-right: 64px;
+    margin-left: 64px;
     max-width: calc( 125% + 30px);
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
-    margin-left: -60px;
-    margin-right: 60px;
+    margin-left: -64px;
+    margin-right: 64px;
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
-    padding: 0 60px 0 0;
+    padding: 0 64px 0 0;
   }
 }
 

+ 9 - 9
modern-business/style.css

@@ -3598,27 +3598,27 @@ body.page .main-navigation {
 
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-media-text {
-    padding: 32px 0;
+    padding: 64px 0;
   }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__media {
-    margin-left: -60px;
-    margin-right: 60px;
+    margin-left: -64px;
+    margin-right: 64px;
     max-width: calc( 100%);
   }
   .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    padding: 0 60px 0 0;
+    padding: 0 64px 0 0;
   }
   .entry .entry-content .wp-block-media-text.alignfull {
-    margin-left: 60px;
-    margin-right: 60px;
+    margin-left: 64px;
+    margin-right: 64px;
     max-width: calc( 125% + 30px);
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
-    margin-right: -60px;
-    margin-left: 60px;
+    margin-right: -64px;
+    margin-left: 64px;
   }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
-    padding: 0 0 0 60px;
+    padding: 0 0 0 64px;
   }
 }