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

Sophisticated Business: Fix excess text side padding for the full width stacked Media & Text

Browse source
This commit is contained in:
Takashi Irie 2019-06-20 03:15:30 +01:00
parent 970154ac2e
commit 0cce5ff4d6
5 changed files with 88 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
sophisticated-business/sass/blocks/_blocks.scss
View file

@ -839,26 +839,7 @@
}
}
&.alignfull .wp-block-media-text__content {
padding: 0 1rem;
@include media(tablet) {
padding-left: 8%;
padding-right: 8%;
margin-left: 0;
}
@include media(desktop) {
padding-left: 1rem;
padding-right: 1rem;
margin-left: 7.5%;
}
}
.wp-block-media-text__content {
padding-left: 1rem;
padding-right: 1rem;
h1, h2, h3, h4, h5, h6 {
text-align: left;
}
@ -870,29 +851,35 @@
@include media(desktop) {
border-left: 2px solid rgba(255,255,255,0.15);
margin-left: 7.5%;
margin-right: 7.5%;
padding-left: 1rem;
padding-right: 1rem;
}
}
&.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 1rem;
@include media(mobile) {
padding: 0 8%;
}
@include media(desktop) {
border-left: 2px solid rgba(255,255,255,0.15);
margin-left: 7.5%;
margin-right: 7.5%;
padding-left: 1rem;
padding-right: 1rem;
}
}
@include media(tablet) {
.wp-block-media-text__content {
margin-left: 0;
}
&.alignfull + .wp-block-media-text {
margin-top: -$size__vertical-spacing-unit;
}
}
@include media(desktop) {
.wp-block-media-text__content {
padding-left: 8%;
padding-right: 8%;
margin-left: 0;
}
}
// Temporary fix for IE 11 for this issue: https://github.com/WordPress/gutenberg/issues/11577
@media all and (-ms-high-contrast:none) {

13
sophisticated-business/style-editor.css
View file

@ -697,7 +697,18 @@ figcaption,
border-left: 2px solid rgba(255, 255, 255, 0.15);
margin-left: 0;
margin-right: 0;
padding-left: 0.25em;
padding-left: 8px;
padding-right: 8px;
}
}
[data-type="core/media-text"][data-align="full"] .is-stacked-on-mobile .block-editor-inner-blocks {
padding: 0 1rem;
}
@media only screen and (min-width: 600px) {
[data-type="core/media-text"][data-align="full"] .is-stacked-on-mobile .block-editor-inner-blocks {
padding: 0 8%;
}
}

11
sophisticated-business/style-editor.scss
View file

@ -694,7 +694,16 @@ figcaption,
border-left: 2px solid rgba(255,255,255,0.15);
margin-left: 0;
margin-right: 0;
padding-left: 0.25em;
padding-left: 8px;
padding-right: 8px;
}
}
&[data-align="full"] .is-stacked-on-mobile .block-editor-inner-blocks {
padding: 0 1rem;
@include media(mobile) {
padding: 0 8%;
}
}
}

58
sophisticated-business/style-rtl.css
View file

@ -4194,31 +4194,6 @@ body.page .main-navigation {
}
}
.entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
padding: 0 1rem;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
padding-right: 8%;
padding-left: 8%;
margin-right: 0;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
padding-right: 1rem;
padding-left: 1rem;
margin-right: 7.5%;
}
}
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
padding-right: 1rem;
padding-left: 1rem;
}
.entry .entry-content .wp-block-media-text .wp-block-media-text__content h1, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h2, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h3, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h4, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h5, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h6 {
text-align: right;
}
@ -4231,23 +4206,36 @@ body.page .main-navigation {
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
border-right: 2px solid rgba(255, 255, 255, 0.15);
margin-right: 7.5%;
margin-left: 7.5%;
padding-right: 1rem;
padding-left: 1rem;
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
margin-right: 0;
}
.entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
margin-top: -32px;
.entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 1rem;
}
@media only screen and (min-width: 600px) {
.entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 8%;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
padding-right: 8%;
padding-left: 8%;
margin-right: 0;
.entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
border-right: 2px solid rgba(255, 255, 255, 0.15);
margin-right: 7.5%;
margin-left: 7.5%;
padding-right: 1rem;
padding-left: 1rem;
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
margin-top: -32px;
}
}

58
sophisticated-business/style.css
View file

@ -4206,31 +4206,6 @@ body.page .main-navigation {
}
}
.entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
padding: 0 1rem;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
padding-left: 8%;
padding-right: 8%;
margin-left: 0;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-media-text.alignfull .wp-block-media-text__content {
padding-left: 1rem;
padding-right: 1rem;
margin-left: 7.5%;
}
}
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
padding-left: 1rem;
padding-right: 1rem;
}
.entry .entry-content .wp-block-media-text .wp-block-media-text__content h1, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h2, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h3, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h4, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h5, .entry .entry-content .wp-block-media-text .wp-block-media-text__content h6 {
text-align: left;
}
@ -4243,23 +4218,36 @@ body.page .main-navigation {
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
border-left: 2px solid rgba(255, 255, 255, 0.15);
margin-left: 7.5%;
margin-right: 7.5%;
padding-left: 1rem;
padding-right: 1rem;
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
margin-left: 0;
}
.entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
margin-top: -32px;
.entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 1rem;
}
@media only screen and (min-width: 600px) {
.entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
padding: 0 8%;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
padding-left: 8%;
padding-right: 8%;
margin-left: 0;
.entry .entry-content .wp-block-media-text.alignfull.is-stacked-on-mobile .wp-block-media-text__content {
border-left: 2px solid rgba(255, 255, 255, 0.15);
margin-left: 7.5%;
margin-right: 7.5%;
padding-left: 1rem;
padding-right: 1rem;
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-media-text.alignfull + .wp-block-media-text {
margin-top: -32px;
}
}