Varia: Add consistant margin to element in group block
This commit is contained in:
parent
0425bdeae8
commit
f68709410d
3 changed files with 32 additions and 13 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue