0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Add consisten vertical margins to elements in Media & Text block

Browse source
This commit is contained in:
Takashi Irie 2019-08-09 03:19:23 +01:00
parent 4562a4c035
commit 1b7f339ef5
5 changed files with 81 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
varia/sass/blocks/media-text/_editor.scss
View file

@ -1,7 +1,14 @@
.wp-block-media-text {
.block-editor-inner-blocks {
padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
&[style*="background-color"]:not(.has-background-background-color) {
.block-editor-inner-blocks {
@include media(tablet) {
padding-right: #{map-deep-get($config-global, "spacing", "vertical")};
padding-left: #{map-deep-get($config-global, "spacing", "vertical")};
}
&[style*="background-color"]:not(.has-background-background-color) {
a {
color: currentColor;
}

28
varia/sass/blocks/media-text/_style.scss
View file

@ -1,13 +1,20 @@
.wp-block-media-text {
.wp-block-media-text__content {
padding: #{map-deep-get($config-global, "spacing", "horizontal")};
padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
@include media(tablet) {
padding: #{map-deep-get($config-global, "spacing", "vertical")};
}
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;
@ -33,14 +40,9 @@
*/
&.is-stacked-on-mobile .wp-block-media-text__content {
padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
}
@include media(tablet) {
&.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 #{map-deep-get($config-global, "spacing", "horizontal")};
@include media(mobile) {
padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
}
}
}

14
varia/style-editor.css
View file

@ -394,7 +394,19 @@ object {
padding-left: 0;
}
.wp-block-media-text[style*="background-color"]:not(.has-background-background-color) .block-editor-inner-blocks a {
.wp-block-media-text .block-editor-inner-blocks {
padding-right: 16px;
padding-left: 16px;
}
@media only screen and (min-width: 640px) {
.wp-block-media-text .block-editor-inner-blocks {
padding-right: 32px;
padding-left: 32px;
}
}
.wp-block-media-text .block-editor-inner-blocks[style*="background-color"]:not(.has-background-background-color) a {
color: currentColor;
}

36
varia/style-rtl.css
View file

@ -1578,20 +1578,32 @@ dd {
}
.wp-block-media-text .wp-block-media-text__content {
padding-right: 16px;
padding-left: 16px;
padding: 16px;
}
.wp-block-media-text .wp-block-media-text__content h1, .wp-block-media-text .wp-block-media-text__content h2, .wp-block-media-text .wp-block-media-text__content h3, .wp-block-media-text .wp-block-media-text__content h4, .wp-block-media-text .wp-block-media-text__content h5, .wp-block-media-text .wp-block-media-text__content h6, .wp-block-media-text .wp-block-media-text__content p, .wp-block-media-text .wp-block-media-text__content hr {
margin-top: 16px;
margin-bottom: 16px;
@media only screen and (min-width: 640px) {
.wp-block-media-text .wp-block-media-text__content {
padding: 32px;
}
}
.wp-block-media-text .wp-block-media-text__content h1:first-child, .wp-block-media-text .wp-block-media-text__content h2:first-child, .wp-block-media-text .wp-block-media-text__content h3:first-child, .wp-block-media-text .wp-block-media-text__content h4:first-child, .wp-block-media-text .wp-block-media-text__content h5:first-child, .wp-block-media-text .wp-block-media-text__content h6:first-child, .wp-block-media-text .wp-block-media-text__content p:first-child, .wp-block-media-text .wp-block-media-text__content hr:first-child {
.wp-block-media-text .wp-block-media-text__content > * {
margin-top: 21.312px;
margin-bottom: 21.312px;
}
@media only screen and (min-width: 560px) {
.wp-block-media-text .wp-block-media-text__content > * {
margin-top: 32px;
margin-bottom: 32px;
}
}
.wp-block-media-text .wp-block-media-text__content > *:first-child {
margin-top: 0;
}
.wp-block-media-text .wp-block-media-text__content h1:last-child, .wp-block-media-text .wp-block-media-text__content h2:last-child, .wp-block-media-text .wp-block-media-text__content h3:last-child, .wp-block-media-text .wp-block-media-text__content h4:last-child, .wp-block-media-text .wp-block-media-text__content h5:last-child, .wp-block-media-text .wp-block-media-text__content h6:last-child, .wp-block-media-text .wp-block-media-text__content p:last-child, .wp-block-media-text .wp-block-media-text__content hr:last-child {
.wp-block-media-text .wp-block-media-text__content > *:last-child {
margin-bottom: 0;
}
@ -1599,14 +1611,10 @@ dd {
color: currentColor;
}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
padding-top: 32px;
padding-bottom: 32px;
}
@media only screen and (min-width: 640px) {
@media only screen and (min-width: 560px) {
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 16px;
padding-top: 32px;
padding-bottom: 32px;
}
}

36
varia/style.css
View file

@ -1578,20 +1578,32 @@ dd {
}
.wp-block-media-text .wp-block-media-text__content {
padding-left: 16px;
padding-right: 16px;
padding: 16px;
}
.wp-block-media-text .wp-block-media-text__content h1, .wp-block-media-text .wp-block-media-text__content h2, .wp-block-media-text .wp-block-media-text__content h3, .wp-block-media-text .wp-block-media-text__content h4, .wp-block-media-text .wp-block-media-text__content h5, .wp-block-media-text .wp-block-media-text__content h6, .wp-block-media-text .wp-block-media-text__content p, .wp-block-media-text .wp-block-media-text__content hr {
margin-top: 16px;
margin-bottom: 16px;
@media only screen and (min-width: 640px) {
.wp-block-media-text .wp-block-media-text__content {
padding: 32px;
}
}
.wp-block-media-text .wp-block-media-text__content h1:first-child, .wp-block-media-text .wp-block-media-text__content h2:first-child, .wp-block-media-text .wp-block-media-text__content h3:first-child, .wp-block-media-text .wp-block-media-text__content h4:first-child, .wp-block-media-text .wp-block-media-text__content h5:first-child, .wp-block-media-text .wp-block-media-text__content h6:first-child, .wp-block-media-text .wp-block-media-text__content p:first-child, .wp-block-media-text .wp-block-media-text__content hr:first-child {
.wp-block-media-text .wp-block-media-text__content > * {
margin-top: 21.312px;
margin-bottom: 21.312px;
}
@media only screen and (min-width: 560px) {
.wp-block-media-text .wp-block-media-text__content > * {
margin-top: 32px;
margin-bottom: 32px;
}
}
.wp-block-media-text .wp-block-media-text__content > *:first-child {
margin-top: 0;
}
.wp-block-media-text .wp-block-media-text__content h1:last-child, .wp-block-media-text .wp-block-media-text__content h2:last-child, .wp-block-media-text .wp-block-media-text__content h3:last-child, .wp-block-media-text .wp-block-media-text__content h4:last-child, .wp-block-media-text .wp-block-media-text__content h5:last-child, .wp-block-media-text .wp-block-media-text__content h6:last-child, .wp-block-media-text .wp-block-media-text__content p:last-child, .wp-block-media-text .wp-block-media-text__content hr:last-child {
.wp-block-media-text .wp-block-media-text__content > *:last-child {
margin-bottom: 0;
}
@ -1599,14 +1611,10 @@ dd {
color: currentColor;
}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
padding-top: 32px;
padding-bottom: 32px;
}
@media only screen and (min-width: 640px) {
@media only screen and (min-width: 560px) {
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 16px;
padding-top: 32px;
padding-bottom: 32px;
}
}