Varia: Use spacing variable for inner_container on Cover Block

This commit is contained in:
Allan Cole 2019-08-13 12:42:25 -04:00
parent a42d99b45e
commit 6482c9973a
4 changed files with 31 additions and 19 deletions

View file

@ -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") };

View file

@ -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;
}
/**

View file

@ -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);
}
}

View file

@ -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);
}
}