Browse Source

Varia: Use spacing variable for inner_container on Cover Block

Allan Cole 5 years ago
parent
commit
6482c9973a

+ 3 - 0
varia/sass/blocks/cover/_style.scss

@@ -40,6 +40,9 @@
 	}
 
 	.wp-block-cover__inner-container {
+
+		width: calc(100% - #{ 2 * map-deep-get($config-global, "spacing", "vertical") };
+
 		& > * {
 			margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 			margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

+ 2 - 3
varia/sass/blocks/utilities/_style.scss

@@ -33,9 +33,8 @@
 	@extend %responsive-aligndefault;
 }
 
-.entry-content [class^="wp-block"] [class*="inner-container"] {
-	@extend %responsive-aligndefault;
-	width: 100%;
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
 }
 
 /**

+ 13 - 8
varia/style-rtl.css

@@ -1225,6 +1225,11 @@ input.has-focus[type="submit"],
 	text-align: left;
 }
 
+.wp-block-cover .wp-block-cover__inner-container,
+.wp-block-cover-image .wp-block-cover__inner-container {
+	width: calc(100% - 64px);
+}
+
 .wp-block-cover .wp-block-cover__inner-container > *,
 .wp-block-cover-image .wp-block-cover__inner-container > * {
 	margin-top: 21.312px;
@@ -1918,8 +1923,8 @@ table th,
 /**
  * .aligndefault
  */
-.entry-content [class^="wp-block"] [class*="inner-container"] {
-	width: 100%;
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
 }
 
 /**
@@ -3078,7 +3083,7 @@ img#wpstats {
 .wp-block-pullquote.alignfull > p,
 .wp-block-pullquote.alignwide blockquote,
 .wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
 	margin-right: auto;
 	margin-left: auto;
@@ -3089,7 +3094,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
@@ -3099,7 +3104,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
@@ -3109,7 +3114,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3119,7 +3124,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3129,7 +3134,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }

+ 13 - 8
varia/style.css

@@ -1225,6 +1225,11 @@ input.has-focus[type="submit"],
 	text-align: right;
 }
 
+.wp-block-cover .wp-block-cover__inner-container,
+.wp-block-cover-image .wp-block-cover__inner-container {
+	width: calc(100% - 64px);
+}
+
 .wp-block-cover .wp-block-cover__inner-container > *,
 .wp-block-cover-image .wp-block-cover__inner-container > * {
 	margin-top: 21.312px;
@@ -1922,8 +1927,8 @@ table th,
 /**
  * .aligndefault
  */
-.entry-content [class^="wp-block"] [class*="inner-container"] {
-	width: 100%;
+.entry-content [class*="inner-container"] {
+	max-width: inherit;
 }
 
 /**
@@ -3082,7 +3087,7 @@ img#wpstats {
 .wp-block-pullquote.alignfull > p,
 .wp-block-pullquote.alignwide blockquote,
 .wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 	max-width: 100%;
 	margin-left: auto;
 	margin-right: auto;
@@ -3093,7 +3098,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 560px - 32px);
 	}
 }
@@ -3103,7 +3108,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 640px - 32px);
 	}
 }
@@ -3113,7 +3118,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3123,7 +3128,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }
@@ -3133,7 +3138,7 @@ img#wpstats {
 	.wp-block-pullquote.alignfull > p,
 	.wp-block-pullquote.alignwide blockquote,
 	.wp-block-pullquote.alignfull blockquote, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
-	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content [class^="wp-block"] [class*="inner-container"], .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
 		max-width: calc( 782px - 32px);
 	}
 }