Browse Source

Sophisticated Business: Fix excess text side padding for the full width stacked Media & Text

Takashi Irie 6 years ago
parent
commit
0cce5ff4d6

+ 17 - 30
sophisticated-business/sass/blocks/_blocks.scss

@@ -839,26 +839,7 @@
 			}
 		}
 
-		&.alignfull .wp-block-media-text__content {
-			padding: 0 1rem;
-
-			@include media(tablet) {
-				padding-left: 8%;
-				padding-right: 8%;
-				margin-left: 0;
-			}
-
-			@include media(desktop) {
-				padding-left: 1rem;
-				padding-right: 1rem;
-				margin-left: 7.5%;
-			}
-		}
-
 		.wp-block-media-text__content {
-			padding-left: 1rem;
-			padding-right: 1rem;
-
 			h1, h2, h3, h4, h5, h6 {
 				text-align: left;
 			}
@@ -870,26 +851,32 @@
 
 			@include media(desktop) {
 				border-left: 2px solid rgba(255,255,255,0.15);
+				margin-left: 7.5%;
+				margin-right: 7.5%;
+				padding-left: 1rem;
+				padding-right: 1rem;
 			}
 		}
 
-		@include media(tablet) {
+		&.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
+			padding: 0 1rem;
 
-			.wp-block-media-text__content {
-				margin-left: 0;
+			@include media(mobile) {
+				padding: 0 8%;
 			}
 
-			&.alignfull + .wp-block-media-text {
-				margin-top: -$size__vertical-spacing-unit;
+			@include media(desktop) {
+				border-left: 2px solid rgba(255,255,255,0.15);
+				margin-left: 7.5%;
+				margin-right: 7.5%;
+				padding-left: 1rem;
+				padding-right: 1rem;
 			}
 		}
 
-		@include media(desktop) {
-
-			.wp-block-media-text__content {
-				padding-left: 8%;
-				padding-right: 8%;
-				margin-left: 0;
+		@include media(tablet) {
+			&.alignfull + .wp-block-media-text {
+				margin-top: -$size__vertical-spacing-unit;
 			}
 		}
 

+ 12 - 1
sophisticated-business/style-editor.css

@@ -697,7 +697,18 @@ figcaption,
     border-left: 2px solid rgba(255, 255, 255, 0.15);
     margin-left: 0;
     margin-right: 0;
-    padding-left: 0.25em;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+[data-type="core/media-text"][data-align="full"] .is-stacked-on-mobile .block-editor-inner-blocks {
+  padding: 0 1rem;
+}
+
+@media only screen and (min-width: 600px) {
+  [data-type="core/media-text"][data-align="full"] .is-stacked-on-mobile .block-editor-inner-blocks {
+    padding: 0 8%;
   }
 }
 

+ 10 - 1
sophisticated-business/style-editor.scss

@@ -694,7 +694,16 @@ figcaption,
 			border-left: 2px solid rgba(255,255,255,0.15);
 			margin-left: 0;
 			margin-right: 0;
-			padding-left: 0.25em;
+			padding-left: 8px;
+			padding-right: 8px;
+		}
+	}
+
+	&[data-align="full"] .is-stacked-on-mobile .block-editor-inner-blocks {
+		padding: 0 1rem;
+
+		@include media(mobile) {
+			padding: 0 8%;
 		}
 	}
 }

+ 20 - 32
sophisticated-business/style-rtl.css

@@ -4194,63 +4194,51 @@ body.page .main-navigation {
   }
 }
 
-.entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
-  padding: 0 1rem;
+.entry .entry-content .wp-block-media-text .wp-block-media-text__content h1, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h2, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h3, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h4, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h5, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h6 {
+  text-align: right;
 }
 
-@media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
-    padding-right: 8%;
-    padding-left: 8%;
-    margin-right: 0;
-  }
+.entry .entry-content .wp-block-media-text .wp-block-media-text__content a,
+.entry .entry-content .wp-block-media-text .wp-block-media-text__content a:hover {
+  color: inherit;
 }
 
 @media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
+  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
+    border-right: 2px solid rgba(255, 255, 255, 0.15);
+    margin-right: 7.5%;
+    margin-left: 7.5%;
     padding-right: 1rem;
     padding-left: 1rem;
-    margin-right: 7.5%;
   }
 }
 
-.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.entry .entry-content .wp-block-media-text .wp-block-media-text__content h1, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h2, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h3, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h4, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h5, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h6 {
-  text-align: right;
+.entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
+  padding: 0 1rem;
 }
 
-.entry .entry-content .wp-block-media-text .wp-block-media-text__content a,
-.entry .entry-content .wp-block-media-text .wp-block-media-text__content a:hover {
-  color: inherit;
+@media only screen and (min-width: 600px) {
+  .entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
+    padding: 0 8%;
+  }
 }
 
 @media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
+  .entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
     border-right: 2px solid rgba(255, 255, 255, 0.15);
+    margin-right: 7.5%;
+    margin-left: 7.5%;
+    padding-right: 1rem;
+    padding-left: 1rem;
   }
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    margin-right: 0;
-  }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
     margin-top: -32px;
   }
 }
 
-@media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    padding-right: 8%;
-    padding-left: 8%;
-    margin-right: 0;
-  }
-}
-
 @media all and (-ms-high-contrast: none) {
   .entry .entry-content .wp-block-media-text:after {
     display: table;

+ 20 - 32
sophisticated-business/style.css

@@ -4206,63 +4206,51 @@ body.page .main-navigation {
   }
 }
 
-.entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
-  padding: 0 1rem;
+.entry .entry-content .wp-block-media-text .wp-block-media-text__content h1, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h2, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h3, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h4, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h5, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h6 {
+  text-align: left;
 }
 
-@media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
-    padding-left: 8%;
-    padding-right: 8%;
-    margin-left: 0;
-  }
+.entry .entry-content .wp-block-media-text .wp-block-media-text__content a,
+.entry .entry-content .wp-block-media-text .wp-block-media-text__content a:hover {
+  color: inherit;
 }
 
 @media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
+  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
+    border-left: 2px solid rgba(255, 255, 255, 0.15);
+    margin-left: 7.5%;
+    margin-right: 7.5%;
     padding-left: 1rem;
     padding-right: 1rem;
-    margin-left: 7.5%;
   }
 }
 
-.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.entry .entry-content .wp-block-media-text .wp-block-media-text__content h1, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h2, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h3, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h4, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h5, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h6 {
-  text-align: left;
+.entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
+  padding: 0 1rem;
 }
 
-.entry .entry-content .wp-block-media-text .wp-block-media-text__content a,
-.entry .entry-content .wp-block-media-text .wp-block-media-text__content a:hover {
-  color: inherit;
+@media only screen and (min-width: 600px) {
+  .entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
+    padding: 0 8%;
+  }
 }
 
 @media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
+  .entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
     border-left: 2px solid rgba(255, 255, 255, 0.15);
+    margin-left: 7.5%;
+    margin-right: 7.5%;
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 }
 
 @media only screen and (min-width: 768px) {
-  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    margin-left: 0;
-  }
   .entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
     margin-top: -32px;
   }
 }
 
-@media only screen and (min-width: 1168px) {
-  .entry .entry-content .wp-block-media-text .wp-block-media-text__content {
-    padding-left: 8%;
-    padding-right: 8%;
-    margin-left: 0;
-  }
-}
-
 @media all and (-ms-high-contrast: none) {
   .entry .entry-content .wp-block-media-text:after {
     display: table;