You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
948 lines
18 KiB
948 lines
18 KiB
/*! |
|
Twenty Nineteen Editor Styles |
|
*/ |
|
|
|
/** === Includes === */ |
|
|
|
@import "sass/variables-site/variables-site"; |
|
@import "sass/mixins/mixins-master"; |
|
|
|
/** === Editor Frame === */ |
|
|
|
body { |
|
|
|
.wp-block[data-align="full"] { |
|
width: 100%; |
|
} |
|
|
|
@include media(mobile) { |
|
|
|
.wp-block[data-align="full"] { |
|
width: calc( 100% + 90px ); |
|
max-width: calc( 100% + 90px ); |
|
} |
|
} |
|
|
|
@include media(tablet) { |
|
|
|
.editor-writing-flow { |
|
max-width: 80%; |
|
margin: 0 10%; |
|
} |
|
|
|
.editor-post-title__block, |
|
.editor-default-block-appender, |
|
.editor-block-list__block { |
|
margin-left: 0; |
|
margin-right: 0; |
|
} |
|
|
|
.wp-block[data-align="wide"] { |
|
width: 100%; |
|
} |
|
|
|
.wp-block[data-align="full"] { |
|
position: relative; |
|
left: calc( -12.5% - 14px ); |
|
width: calc( 125% + 116px ); |
|
max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages. |
|
} |
|
|
|
.wp-block[data-align="right"] { |
|
max-width: 125%; |
|
} |
|
} |
|
} |
|
|
|
/** === Content Width === */ |
|
|
|
.wp-block { |
|
width: calc(100vw - (2 * #{$size__spacing-unit})); |
|
max-width: 100%; |
|
|
|
@include media(tablet) { |
|
width: calc(8 * (100vw / 12)); |
|
} |
|
|
|
@include media(desktop) { |
|
width: calc(6 * (100vw / 12 )); |
|
} |
|
|
|
// Only the top level blocks need specific widths, therefore override for every nested block. |
|
.wp-block { |
|
width: 100%; |
|
} |
|
} |
|
|
|
/** === Base Typography === */ |
|
|
|
body { |
|
font-size: $font__size_base; |
|
@include font-family( $font__body ); |
|
line-height: $font__line-height-body; |
|
color: $color__text-main; |
|
} |
|
|
|
p { |
|
font-size: $font__size_base; |
|
} |
|
|
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6 { |
|
@include font-family( $font__heading ); |
|
font-weight: 700; |
|
} |
|
|
|
h1 { |
|
font-size: $font__size-xl; |
|
@include post-section-dash; |
|
|
|
@include media(tablet) { |
|
font-size: $font__size-xxl; |
|
} |
|
} |
|
|
|
h2 { |
|
font-size: $font__size-lg; |
|
@include post-section-dash; |
|
|
|
@include media(tablet) { |
|
font-size: $font__size-xl; |
|
} |
|
} |
|
|
|
h3 { |
|
font-size: $font__size-lg; |
|
} |
|
|
|
h4 { |
|
font-size: $font__size-md; |
|
} |
|
|
|
h5 { |
|
font-size: $font__size-sm; |
|
} |
|
|
|
h6 { |
|
font-size: $font__size-xs; |
|
} |
|
|
|
a { |
|
@include link-transition; |
|
color: $color__link; |
|
|
|
*:visited { |
|
|
|
} |
|
|
|
&:hover, |
|
&:active { |
|
color: $color__link-hover; |
|
outline: 0; |
|
text-decoration: none; |
|
} |
|
|
|
&:focus { |
|
outline: 0; |
|
text-decoration: underline; |
|
} |
|
} |
|
|
|
// Use white text against these backgrounds by default. |
|
.has-primary-background-color, |
|
.has-secondary-background-color, |
|
.has-dark-gray-background-color, |
|
.has-light-gray-background-color { |
|
color: $color__background-body; |
|
|
|
p, |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6, |
|
a { |
|
color: $color__background-body; |
|
} |
|
} |
|
|
|
// Use dark gray text against this background by default. |
|
.has-white-background-color { |
|
color: $color__text-main; |
|
|
|
p, |
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6, |
|
a { |
|
color: $color__text-main; |
|
} |
|
} |
|
|
|
figcaption, |
|
.gallery-caption { |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-xs; |
|
line-height: 1.6; |
|
color: $color__text-light; |
|
} |
|
|
|
/** === Post Title === */ |
|
|
|
.editor-post-title__block { |
|
@include post-section-dash; |
|
|
|
&:before { |
|
width: $font__size-xxl; |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
margin-left: 1em; |
|
position: relative; |
|
top: 0.5em; |
|
} |
|
|
|
.editor-post-title__input { |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-xxl; |
|
font-weight: 700; |
|
} |
|
} |
|
|
|
/** === Default Appender === */ |
|
|
|
.editor-default-block-appender .editor-default-block-appender__content { |
|
@include font-family( $font__body ); |
|
font-size: $font__size_base; |
|
} |
|
|
|
/** === Heading === */ |
|
|
|
.wp-block-heading { |
|
strong { |
|
font-weight: bolder; |
|
} |
|
} |
|
/** === Paragraph === */ |
|
|
|
.wp-block-paragraph { |
|
|
|
&.has-drop-cap:not(:focus)::first-letter { |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-xxxl; |
|
line-height: 1; |
|
font-weight: bold; |
|
margin: 0 0.25em 0 0; |
|
} |
|
} |
|
|
|
/** === Table === */ |
|
|
|
.wp-block-table { |
|
@include font-family( $font__heading ); |
|
} |
|
|
|
/** === Cover === */ |
|
|
|
.wp-block-cover { |
|
|
|
h2, |
|
.wp-block-cover-text { |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-lg; |
|
font-weight: bold; |
|
line-height: 1.4; |
|
padding-left: $size__spacing-unit; |
|
padding-right: $size__spacing-unit; |
|
|
|
strong { |
|
font-weight: bolder; |
|
} |
|
|
|
@include media(tablet) { |
|
margin-left: auto; |
|
margin-right: auto; |
|
padding: 0; |
|
} |
|
} |
|
|
|
@include media(tablet) { |
|
padding-left: 10%; |
|
padding-right: 10%; |
|
|
|
h2, |
|
.wp-block-cover-text { |
|
font-size: $font__size-xl; |
|
} |
|
} |
|
} |
|
|
|
.wp-block[data-type="core/cover"][data-align="left"], |
|
.wp-block[data-type="core/cover"][data-align="right"] { |
|
|
|
.editor-block-list__block-edit { |
|
width: calc(4 * (100vw / 12)); |
|
} |
|
|
|
.wp-block-cover { |
|
width: 100%; |
|
max-width: 100%; |
|
padding: calc(1.375 * #{$size__spacing-unit}); |
|
|
|
p { |
|
padding-left: 0; |
|
padding-right: 0; |
|
} |
|
|
|
@include media(tablet) { |
|
padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); |
|
} |
|
} |
|
} |
|
|
|
.wp-block[data-type="core/cover"][data-align="wide"], |
|
.wp-block[data-type="core/cover"][data-align="full"] { |
|
|
|
@include media(tablet) { |
|
|
|
h2, |
|
.wp-block-cover-text { |
|
max-width: calc(8 * (100vw / 12)); |
|
} |
|
} |
|
|
|
@include media(desktop) { |
|
|
|
h2, |
|
.wp-block-cover-text { |
|
max-width: calc(6 * (100vw / 12)); |
|
} |
|
} |
|
} |
|
|
|
.wp-block[data-type="core/cover"][data-align="full"] { |
|
|
|
@include media(tablet) { |
|
|
|
.wp-block-cover { |
|
padding-left: calc(10% + 64px); |
|
padding-right: calc(10% + 64px); |
|
} |
|
} |
|
} |
|
|
|
/** === Gallery === */ |
|
|
|
.wp-block-gallery { |
|
|
|
.blocks-gallery-image figcaption, |
|
.blocks-gallery-item figcaption, |
|
.gallery-item .gallery-caption { |
|
font-size: $font__size-xs; |
|
line-height: 1.6; |
|
} |
|
} |
|
|
|
/** === Button === */ |
|
|
|
.wp-block-button { |
|
|
|
.wp-block-button__link { |
|
line-height: 1.8; |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-sm; |
|
font-weight: bold; |
|
} |
|
|
|
&:not(.is-style-outline) .wp-block-button__link { |
|
background: $color__background-button; |
|
} |
|
|
|
&:not(.is-style-squared) .wp-block-button__link { |
|
border-radius: 5px; |
|
} |
|
|
|
&.is-style-outline, |
|
&.is-style-outline:hover, |
|
&.is-style-outline:focus, |
|
&.is-style-outline:active { |
|
background: transparent; |
|
color: $color__background-button; |
|
|
|
.wp-block-button__link { |
|
background: transparent; |
|
|
|
&:not(.has-text-color) { |
|
color: $color__background-button; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/** === Blockquote === */ |
|
|
|
.wp-block-quote { |
|
|
|
&:not(.is-large):not(.is-style-large) { |
|
border-width: 2px; |
|
border-color: $color__link; |
|
} |
|
|
|
&.is-large, |
|
&.is-style-large { |
|
margin-top: $font__size-xxl; |
|
margin-bottom: $font__size-xxl; |
|
} |
|
|
|
&.is-large p, |
|
&.is-style-large p { |
|
font-size: $font__size-lg; |
|
line-height: 1.3; |
|
margin-bottom: 0.5em; |
|
margin-top: 0.5em; |
|
} |
|
|
|
cite, |
|
footer, |
|
.wp-block-quote__citation { |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-xs; |
|
line-height: 1.6; |
|
color: $color__text-light; |
|
} |
|
} |
|
|
|
/** === Pullquote === */ |
|
|
|
.wp-block-pullquote { |
|
border-color: transparent; |
|
border-width: 2px; |
|
color: #000; |
|
|
|
blockquote { |
|
margin-top: calc(3 * #{ $size__spacing-unit}); |
|
margin-bottom: calc(3.33 * #{ $size__spacing-unit}); |
|
hyphens: auto; |
|
word-break: break-word; |
|
} |
|
|
|
&:not(.is-style-solid-color) .wp-block-pullquote__citation { |
|
color: $color__text-light; |
|
} |
|
|
|
&.is-style-solid-color { |
|
|
|
blockquote { |
|
width: calc(100% - (2 * #{ $size__spacing-unit})); |
|
max-width: calc( 100% - (2 * #{ $size__spacing-unit})); |
|
|
|
a, |
|
&.has-text-color p, |
|
&.has-text-color a { |
|
color: inherit; |
|
} |
|
|
|
&:not(.has-text-color) { |
|
color: $color__background-body; |
|
} |
|
|
|
@include media(tablet) { |
|
max-width: 80%; |
|
} |
|
} |
|
|
|
&:not(.has-background-color) { |
|
background-color: $color__link; |
|
} |
|
} |
|
} |
|
|
|
.wp-block[data-type="core/pullquote"], |
|
.wp-block[data-type="core/pullquote"][data-align="left"], |
|
.wp-block[data-type="core/pullquote"][data-align="right"] { |
|
|
|
blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, |
|
blockquote > .editor-rich-text p, |
|
p { |
|
font-size: $font__size-lg; |
|
font-style: italic; |
|
line-height: 1.3; |
|
margin-bottom: 0.5em; |
|
margin-top: 0.5em; |
|
|
|
@include media(tablet) { |
|
font-size: $font__size-xl; |
|
} |
|
} |
|
|
|
.wp-block-pullquote__citation { |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-xs; |
|
line-height: 1.6; |
|
text-transform: none; |
|
} |
|
|
|
em { |
|
font-style: normal; |
|
} |
|
} |
|
|
|
.wp-block[data-type="core/pullquote"][data-align="left"], |
|
.wp-block[data-type="core/pullquote"][data-align="right"] { |
|
|
|
.editor-block-list__block-edit { |
|
width: calc(4 * (100vw / 12)); |
|
max-width: 50%; |
|
|
|
.wp-block-pullquote:not(.is-style-solid-color) { |
|
padding: 0; |
|
} |
|
|
|
.wp-block-pullquote.is-style-solid-color { |
|
padding: 1em; |
|
} |
|
} |
|
|
|
blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, |
|
blockquote > .editor-rich-text p, |
|
p, |
|
.wp-block-pullquote__citation { |
|
text-align: left; |
|
} |
|
} |
|
|
|
.wp-block[data-type="core/pullquote"][data-align="full"] { |
|
|
|
@include media(tablet) { |
|
|
|
.wp-block-pullquote blockquote { |
|
max-width: calc(80% - 128px); |
|
} |
|
} |
|
} |
|
|
|
|
|
/** === File === */ |
|
|
|
.wp-block-file { |
|
@include font-family( $font__heading ); |
|
|
|
.wp-block-file__textlink { |
|
text-decoration: underline; |
|
color: $color__link; |
|
|
|
&:hover { |
|
color: $color__link-hover; |
|
text-decoration: none; |
|
} |
|
} |
|
|
|
.wp-block-file__button { |
|
display: table; |
|
line-height: 1.8; |
|
font-size: $font__size-sm; |
|
font-weight: bold; |
|
background-color: $color__link; |
|
border-radius: 5px; |
|
} |
|
|
|
.wp-block-file__button-richtext-wrapper { |
|
display: block; |
|
margin-top: calc(0.75 * #{$size__spacing-unit}); |
|
margin-left: 0; |
|
} |
|
|
|
} |
|
|
|
/** === Verse === */ |
|
|
|
.wp-block-verse, |
|
.wp-block-verse pre { |
|
padding: 0; |
|
} |
|
|
|
/** === Code === */ |
|
|
|
.wp-block-code { |
|
border-radius: 0; |
|
} |
|
|
|
/** === Table === */ |
|
|
|
.wp-block-table { |
|
|
|
td, th { |
|
border-color: $color__text-light; |
|
} |
|
} |
|
|
|
/** === Separator === */ |
|
|
|
.wp-block-separator { |
|
|
|
&:not(.is-style-dots) { |
|
background-color: $color__text-light; |
|
height: 2px; |
|
} |
|
|
|
&:not(.is-style-wide):not(.is-style-dots) { |
|
width: $font__size-xl; |
|
margin-left: 0; |
|
} |
|
|
|
&.is-style-dots { |
|
color: $color__text-light; |
|
} |
|
|
|
&.is-style-dots:before { |
|
font-size: $font__size-lg; |
|
letter-spacing: calc(2 * #{$size__spacing-unit}); |
|
padding-left: calc(2 * #{$size__spacing-unit}); |
|
} |
|
} |
|
|
|
/* Remove duplicate rule-line when a separator |
|
* is followed by an H1, or H2 */ |
|
.wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before, |
|
.wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before { |
|
display: none; |
|
} |
|
|
|
/** === Latest Posts, Archives, Categories === */ |
|
|
|
ul.wp-block-archives, |
|
.wp-block-categories, |
|
.wp-block-latest-posts { |
|
padding: 0; |
|
list-style-type: none; |
|
|
|
ul { |
|
padding: 0; |
|
list-style-type: none; |
|
} |
|
|
|
li { |
|
|
|
> a { |
|
@include font-family( $font__heading ); |
|
font-size: calc(#{$font__size_base} * #{$font__size-ratio}); |
|
font-weight: bold; |
|
line-height: $font__line-height-heading; |
|
text-decoration: none; |
|
} |
|
|
|
ul { |
|
padding-left: $size__spacing-unit; |
|
} |
|
} |
|
} |
|
|
|
.wp-block-categories { |
|
|
|
ul { |
|
padding-top: ( .75 * $size__spacing-unit ); |
|
@include nestedSubMenuPadding(); |
|
} |
|
|
|
li ul { |
|
list-style: none; |
|
padding-left: 0; |
|
margin-bottom: ( -.75 * $size__spacing-unit ); |
|
} |
|
|
|
} |
|
|
|
/** === Latest Posts === */ |
|
.wp-block-latest-posts { |
|
|
|
.wp-block-latest-posts__post-date { |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-xs; |
|
color: $color__text-light; |
|
line-height: 1.2; |
|
} |
|
|
|
.wp-block-latest-posts__post-full-content, |
|
.wp-block-latest-posts__post-excerpt { |
|
margin-top: $font__size_base; |
|
margin-bottom: $font__size_base; |
|
|
|
> div > p:first-child { |
|
margin-top: $font__size_base; |
|
} |
|
} |
|
|
|
li { |
|
padding-bottom: ( .5 * $size__spacing-unit ); |
|
|
|
&.menu-item-has-children, |
|
&:last-child { |
|
padding-bottom: 0; |
|
} |
|
|
|
:not(:last-child) .wp-block-latest-posts__post-excerpt { |
|
padding-bottom: ( .5 * $size__spacing-unit ); |
|
} |
|
} |
|
|
|
&.is-grid { |
|
li { |
|
border-top: 2px solid $color__border; |
|
padding-top: (1 * $size__spacing-unit); |
|
margin-bottom: (2 * $size__spacing-unit); |
|
a { |
|
&:after { |
|
content: ''; |
|
} |
|
} |
|
&:last-child { |
|
margin-bottom: auto; |
|
a:after { |
|
content: ''; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
/** === Latest Comments === */ |
|
|
|
.wp-block-latest-comments { |
|
|
|
.wp-block-latest-comments__comment-meta { |
|
@include font-family( $font__heading ); |
|
font-weight: bold; |
|
|
|
.wp-block-latest-comments__comment-date { |
|
font-weight: normal; |
|
} |
|
} |
|
|
|
.wp-block-latest-comments__comment, |
|
.wp-block-latest-comments__comment-date, |
|
.wp-block-latest-comments__comment-excerpt p { |
|
font-size: inherit; |
|
} |
|
|
|
.wp-block-latest-comments__comment-date { |
|
font-size: $font__size-xs; |
|
} |
|
} |
|
|
|
/** === Classic Editor === */ |
|
|
|
/* Properly center-align captions in the classic-editor block */ |
|
.wp-caption { |
|
dd { |
|
color: $color__text-light; |
|
font-size: $font__size-xs; |
|
@include font-family( $font__heading ); |
|
line-height: $font__line-height-pre; |
|
margin: 0; |
|
padding: ( $size__spacing-unit * .5 ); |
|
text-align: left; |
|
text-align: center; |
|
-webkit-margin-start: 0px; |
|
margin-inline-start: 0px; |
|
} |
|
} |
|
|
|
.wp-block-freeform { |
|
|
|
/* Add style for galleries in classic-editor block */ |
|
blockquote { |
|
border-left: 2px solid $color__link; |
|
|
|
cite { |
|
@include font-family( $font__heading ); |
|
font-size: $font__size-xs; |
|
font-style: normal; |
|
line-height: 1.6; |
|
color: $color__text-light; |
|
} |
|
} |
|
} |
|
|
|
/** === Group Block === */ |
|
|
|
// This matches the 22px value for 1rem that used on the front end. |
|
// It must be specified in pixels for the editor, since the root font |
|
// size is different here. |
|
$group-block-background__padding: $font__size_base; |
|
|
|
.wp-block[data-type="core/group"] { |
|
|
|
// Group block base styles |
|
> .editor-block-list__block-edit > div > .wp-block-group { |
|
|
|
// Child: Full alignment |
|
> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { |
|
left: 0; |
|
} |
|
} |
|
|
|
// Group block with background color |
|
> .editor-block-list__block-edit > div > .wp-block-group.has-background { |
|
padding: $group-block-background__padding; |
|
|
|
// Child: Full alignment |
|
> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { |
|
margin-left: -$group-block-background__padding; |
|
width: calc(100% + #{$group-block-background__padding * 2}); |
|
max-width: calc(100% + #{$group-block-background__padding * 2}); |
|
} |
|
} |
|
|
|
// Wide and full alignments |
|
&[data-align="wide"] { |
|
|
|
// Group block base styles. |
|
> .editor-block-list__block-edit > div > .wp-block-group { |
|
|
|
// Child blocks: Default alignments |
|
> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { |
|
@include media(tablet) { |
|
width: calc(8 * (100vw / 12)); |
|
} |
|
|
|
@include media(desktop) { |
|
width: calc(6 * (100vw / 12 )); |
|
} |
|
} |
|
} |
|
|
|
// Group block with background color |
|
> .editor-block-list__block-edit > div > .wp-block-group.has-background { |
|
|
|
// Child blocks: Default alignments |
|
> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { |
|
@include media(tablet) { |
|
width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2}); |
|
} |
|
|
|
@include media(desktop) { |
|
width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2}); |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Full alignment |
|
&[data-align="full"] { |
|
|
|
// Max-width needs to be a pixel narrower than usual to prevent horizontal scrolling. |
|
@include media(mobile) { |
|
max-width: calc(100% + 89px); |
|
} |
|
@include media(tablet) { |
|
max-width: calc(125% + 114px); |
|
} |
|
|
|
// Group block base styles |
|
> .editor-block-list__block-edit > div > .wp-block-group { |
|
|
|
// Margins & padding are added to this container to mimic |
|
// the style + spacing of the .editor-writing-flow global |
|
// container. This way, child items sync up with the placement |
|
// and size of other top-level blocks. |
|
> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout { |
|
|
|
@include media(mobile) { |
|
padding-left: 46px; |
|
padding-right: 46px; |
|
} |
|
|
|
// 2px of extra padding are added to each side here |
|
// To better match up with the spacing of the whole |
|
// document. |
|
@include media(tablet) { |
|
width: 80%; |
|
margin-left: 10%; |
|
margin-right: 10%; |
|
padding-left: 48px; |
|
padding-right: 48px; |
|
} |
|
|
|
// Child blocks: All alignments except full |
|
> .wp-block:not([data-align="full"]) { |
|
max-width: calc(100vw - (2 * 1rem)); |
|
|
|
@include media(tablet) { |
|
max-width: calc(8 * (100vw / 12)); |
|
} |
|
|
|
@include media(desktop) { |
|
max-width: calc(6 * (100vw / 12)); |
|
} |
|
} |
|
|
|
// Child blocks: Right alignments |
|
> .wp-block[data-align="right"] { |
|
|
|
@include media(tablet) { |
|
max-width: 125%; |
|
} |
|
} |
|
|
|
// Child blocks: Wide alignments |
|
> .wp-block[data-align="wide"] { |
|
|
|
@include media(tablet) { |
|
width: calc(100% + 4px); |
|
max-width: calc(100% + 4px); |
|
} |
|
} |
|
|
|
// Child blocks: Full alignments |
|
> .wp-block[data-align=full] { |
|
max-width: calc(100vw + (2 * 1rem)); |
|
|
|
@include media(mobile) { |
|
width: calc(100% + 92px); |
|
left: -46px; |
|
} |
|
|
|
@include media(tablet) { |
|
left: calc(-12.5% - 58px); |
|
width: calc(125% + 120px); |
|
max-width: calc(125% + 119px); |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Group block with background color |
|
> .editor-block-list__block-edit > div > .wp-block-group.has-background { |
|
|
|
// When the Group block is full width, we can remove the left/right padding |
|
// and let this inherit the |
|
padding: $group-block-background__padding 0; |
|
|
|
@include media(mobile) { |
|
padding-left: 0; |
|
padding-right: 0; |
|
} |
|
|
|
// Child blocks: Full alignment |
|
> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { |
|
margin-left: 0; |
|
width: 100%; |
|
|
|
@include media(mobile) { |
|
width: calc(100% + 92px); |
|
} |
|
|
|
@include media(tablet) { |
|
width: calc(125% + 120px); |
|
} |
|
} |
|
} |
|
} |
|
}
|
|
|