Varia: Add consistant margin to element in group block

This commit is contained in:
Takashi Irie 2019-08-10 00:33:29 +01:00
parent 0425bdeae8
commit f68709410d
3 changed files with 32 additions and 13 deletions

View file

@ -4,9 +4,14 @@
margin-left: auto;
margin-right: auto;
h1, h2, h3, h4, h5, h6, p, hr {
margin-top: #{map-deep-get($config-global, "spacing", "unit")};
margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
> * {
margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
@include media(mobile) {
margin-top: map-deep-get($config-global, "spacing", "vertical");
margin-bottom: map-deep-get($config-global, "spacing", "vertical");
}
&:first-child {
margin-top: 0;

View file

@ -1321,16 +1321,23 @@ input.has-focus[type="submit"],
margin-left: auto;
}
.wp-block-group .wp-block-group__inner-container h1, .wp-block-group .wp-block-group__inner-container h2, .wp-block-group .wp-block-group__inner-container h3, .wp-block-group .wp-block-group__inner-container h4, .wp-block-group .wp-block-group__inner-container h5, .wp-block-group .wp-block-group__inner-container h6, .wp-block-group .wp-block-group__inner-container p, .wp-block-group .wp-block-group__inner-container hr {
margin-top: 16px;
margin-bottom: 16px;
.wp-block-group .wp-block-group__inner-container > * {
margin-top: 21.312px;
margin-bottom: 21.312px;
}
.wp-block-group .wp-block-group__inner-container h1:first-child, .wp-block-group .wp-block-group__inner-container h2:first-child, .wp-block-group .wp-block-group__inner-container h3:first-child, .wp-block-group .wp-block-group__inner-container h4:first-child, .wp-block-group .wp-block-group__inner-container h5:first-child, .wp-block-group .wp-block-group__inner-container h6:first-child, .wp-block-group .wp-block-group__inner-container p:first-child, .wp-block-group .wp-block-group__inner-container hr:first-child {
@media only screen and (min-width: 560px) {
.wp-block-group .wp-block-group__inner-container > * {
margin-top: 32px;
margin-bottom: 32px;
}
}
.wp-block-group .wp-block-group__inner-container > *:first-child {
margin-top: 0;
}
.wp-block-group .wp-block-group__inner-container h1:last-child, .wp-block-group .wp-block-group__inner-container h2:last-child, .wp-block-group .wp-block-group__inner-container h3:last-child, .wp-block-group .wp-block-group__inner-container h4:last-child, .wp-block-group .wp-block-group__inner-container h5:last-child, .wp-block-group .wp-block-group__inner-container h6:last-child, .wp-block-group .wp-block-group__inner-container p:last-child, .wp-block-group .wp-block-group__inner-container hr:last-child {
.wp-block-group .wp-block-group__inner-container > *:last-child {
margin-bottom: 0;
}

View file

@ -1321,16 +1321,23 @@ input.has-focus[type="submit"],
margin-right: auto;
}
.wp-block-group .wp-block-group__inner-container h1, .wp-block-group .wp-block-group__inner-container h2, .wp-block-group .wp-block-group__inner-container h3, .wp-block-group .wp-block-group__inner-container h4, .wp-block-group .wp-block-group__inner-container h5, .wp-block-group .wp-block-group__inner-container h6, .wp-block-group .wp-block-group__inner-container p, .wp-block-group .wp-block-group__inner-container hr {
margin-top: 16px;
margin-bottom: 16px;
.wp-block-group .wp-block-group__inner-container > * {
margin-top: 21.312px;
margin-bottom: 21.312px;
}
.wp-block-group .wp-block-group__inner-container h1:first-child, .wp-block-group .wp-block-group__inner-container h2:first-child, .wp-block-group .wp-block-group__inner-container h3:first-child, .wp-block-group .wp-block-group__inner-container h4:first-child, .wp-block-group .wp-block-group__inner-container h5:first-child, .wp-block-group .wp-block-group__inner-container h6:first-child, .wp-block-group .wp-block-group__inner-container p:first-child, .wp-block-group .wp-block-group__inner-container hr:first-child {
@media only screen and (min-width: 560px) {
.wp-block-group .wp-block-group__inner-container > * {
margin-top: 32px;
margin-bottom: 32px;
}
}
.wp-block-group .wp-block-group__inner-container > *:first-child {
margin-top: 0;
}
.wp-block-group .wp-block-group__inner-container h1:last-child, .wp-block-group .wp-block-group__inner-container h2:last-child, .wp-block-group .wp-block-group__inner-container h3:last-child, .wp-block-group .wp-block-group__inner-container h4:last-child, .wp-block-group .wp-block-group__inner-container h5:last-child, .wp-block-group .wp-block-group__inner-container h6:last-child, .wp-block-group .wp-block-group__inner-container p:last-child, .wp-block-group .wp-block-group__inner-container hr:last-child {
.wp-block-group .wp-block-group__inner-container > *:last-child {
margin-bottom: 0;
}