Varia: Add vertical margins to elements on cover block

This commit is contained in:
Takashi Irie 2019-08-09 00:48:52 +01:00
parent e0ca000ed5
commit 0d322955bf
3 changed files with 68 additions and 0 deletions

View file

@ -40,6 +40,26 @@
}
}
.wp-block-cover__inner-container {
& > * {
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;
}
&:last-child {
margin-bottom: 0;
}
}
}
/**
* Block Options
*/

View file

@ -1230,6 +1230,30 @@ 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 > * {
margin-top: 21.312px;
margin-bottom: 21.312px;
}
@media only screen and (min-width: 560px) {
.wp-block-cover .wp-block-cover__inner-container > *,
.wp-block-cover-image .wp-block-cover__inner-container > * {
margin-top: 32px;
margin-bottom: 32px;
}
}
.wp-block-cover .wp-block-cover__inner-container > *:first-child,
.wp-block-cover-image .wp-block-cover__inner-container > *:first-child {
margin-top: 0;
}
.wp-block-cover .wp-block-cover__inner-container > *:last-child,
.wp-block-cover-image .wp-block-cover__inner-container > *:last-child {
margin-bottom: 0;
}
.wp-block-cover.alignleft, .wp-block-cover.alignright,
.wp-block-cover-image.alignleft,
.wp-block-cover-image.alignright {

View file

@ -1230,6 +1230,30 @@ 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 > * {
margin-top: 21.312px;
margin-bottom: 21.312px;
}
@media only screen and (min-width: 560px) {
.wp-block-cover .wp-block-cover__inner-container > *,
.wp-block-cover-image .wp-block-cover__inner-container > * {
margin-top: 32px;
margin-bottom: 32px;
}
}
.wp-block-cover .wp-block-cover__inner-container > *:first-child,
.wp-block-cover-image .wp-block-cover__inner-container > *:first-child {
margin-top: 0;
}
.wp-block-cover .wp-block-cover__inner-container > *:last-child,
.wp-block-cover-image .wp-block-cover__inner-container > *:last-child {
margin-bottom: 0;
}
.wp-block-cover.alignleft, .wp-block-cover.alignright,
.wp-block-cover-image.alignleft,
.wp-block-cover-image.alignright {