Twenty Nineteen: Fix padding discrepancies in responsive styles for Column block.

Props kjellr, dianeco.
Fixes #46643, #46999.

git-svn-id: https://develop.svn.wordpress.org/trunk@45264 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov 2019-04-24 18:36:58 +00:00
parent 4128f62c05
commit 7b1d581339
3 changed files with 27 additions and 72 deletions

View File

@ -741,39 +741,22 @@
//! Columns
.wp-block-columns {
&.alignfull {
padding-left: $size__spacing-unit;
padding-right: $size__spacing-unit;
}
.wp-block-column > * {
@include media(mobile) {
flex-wrap: nowrap;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
@include media(tablet) {
.wp-block-column > * {
flex-wrap: nowrap;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&[class*='has-'] > * {
margin-right: $size__spacing-unit;
&:last-child {
margin-right: 0;
}
}
&.alignfull,
&.alignfull .wp-block-column {
padding-left: calc(2 * #{$size__spacing-unit});
padding-right: calc(2 * #{$size__spacing-unit});
.wp-block-column:not(:first-child) {
margin-left: 32px;
}
}
}

View File

@ -6029,34 +6029,20 @@ body.page .main-navigation {
word-break: break-word;
}
.entry .entry-content .wp-block-columns.alignfull {
padding-right: 1rem;
padding-left: 1rem;
.entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
margin-top: 0;
}
@media only screen and (min-width: 600px) {
.entry .entry-content .wp-block-columns {
flex-wrap: nowrap;
}
.entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
margin-top: 0;
.entry .entry-content .wp-block-columns {
flex-wrap: nowrap;
}
.entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
margin-bottom: 0;
}
.entry .entry-content .wp-block-columns[class*='has-'] > * {
margin-left: 1rem;
}
.entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
margin-left: 0;
}
.entry .entry-content .wp-block-columns.alignfull,
.entry .entry-content .wp-block-columns.alignfull .wp-block-column {
padding-right: calc(2 * 1rem);
padding-left: calc(2 * 1rem);
.entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
margin-right: 32px;
}
}

View File

@ -6041,34 +6041,20 @@ body.page .main-navigation {
word-break: break-word;
}
.entry .entry-content .wp-block-columns.alignfull {
padding-left: 1rem;
padding-right: 1rem;
.entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
margin-top: 0;
}
@media only screen and (min-width: 600px) {
.entry .entry-content .wp-block-columns {
flex-wrap: nowrap;
}
.entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
margin-top: 0;
.entry .entry-content .wp-block-columns {
flex-wrap: nowrap;
}
.entry .entry-content .wp-block-columns .wp-block-column > *:last-child {
margin-bottom: 0;
}
.entry .entry-content .wp-block-columns[class*='has-'] > * {
margin-right: 1rem;
}
.entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
margin-right: 0;
}
.entry .entry-content .wp-block-columns.alignfull,
.entry .entry-content .wp-block-columns.alignfull .wp-block-column {
padding-left: calc(2 * 1rem);
padding-right: calc(2 * 1rem);
.entry .entry-content .wp-block-columns .wp-block-column:not(:first-child) {
margin-left: 32px;
}
}