mirror of
https://github.com/WordPress/WordPress.git
synced 2024-07-07 12:25:16 +02:00
0638de4c60
Previously, full width blocks would cause a horizontal scrollbar, and nesting full width blocks would cause the content to be pulled off the screen. Now wide and full width blocks can be nested without any visual issues. Props aleperez92, Boniu91, onemaggie, hellofromTonya. Fixes #53428. Built from https://develop.svn.wordpress.org/trunk@51209 git-svn-id: http://core.svn.wordpress.org/trunk@50818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
995 lines
18 KiB
SCSS
995 lines
18 KiB
SCSS
/*!
|
|
Twenty Nineteen Editor Styles
|
|
*/
|
|
|
|
/** === Includes === */
|
|
|
|
@import "sass/variables-site/variables-site";
|
|
@import "sass/mixins/mixins-master";
|
|
|
|
/** === Editor Frame === */
|
|
|
|
body {
|
|
|
|
.wp-block[data-align="full"],
|
|
.wp-block.alignfull {
|
|
max-width: calc(100% + 16px);
|
|
width: calc(100% + 16px);
|
|
}
|
|
|
|
.wp-block[data-align="left"],
|
|
.wp-block.alignleft {
|
|
margin-right: $size__spacing-unit;
|
|
width: inherit;
|
|
}
|
|
|
|
.wp-block[data-align="right"],
|
|
.wp-block.alignright {
|
|
margin-left: $size__spacing-unit;
|
|
width: inherit;
|
|
}
|
|
|
|
.wp-block[data-align="center"],
|
|
.wp-block.aligncenter {
|
|
margin-left: 0;
|
|
}
|
|
|
|
@include media(tablet) {
|
|
|
|
.block-editor-writing-flow {
|
|
max-width: 80%;
|
|
margin: 0 10%;
|
|
}
|
|
|
|
.block-editor-default-block-appender,
|
|
.block-editor-block-list__block {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.wp-block[data-align="wide"],
|
|
.wp-block.alignwide {
|
|
width: 100%;
|
|
}
|
|
|
|
.wp-block[data-align="full"],
|
|
.wp-block.alignfull {
|
|
width: calc(125% + 16px);
|
|
max-width: calc(125% + 16px);
|
|
position: relative;
|
|
left: -12.5%;
|
|
}
|
|
|
|
.wp-block[data-align="wide"] .wp-block[data-align="full"],
|
|
.wp-block[data-align="full"] .wp-block[data-align="full"],
|
|
.wp-block.alignwide .wp-block.alignfull,
|
|
.wp-block.alignfull .wp-block.alignfull {
|
|
left: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** === Content Width === */
|
|
|
|
.wp-block {
|
|
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: initial;
|
|
}
|
|
}
|
|
|
|
/** === 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;
|
|
|
|
&: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 {
|
|
width: 100%;
|
|
@include post-section-dash;
|
|
|
|
&:before {
|
|
width: $font__size-xxl;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
margin-left: 1rem;
|
|
position: relative;
|
|
top: 0.5em;
|
|
|
|
@include media(mobile) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.editor-post-title__input {
|
|
@include font-family( $font__heading );
|
|
font-size: $font__size-xxl;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
/** === Default Appender === */
|
|
|
|
.block-editor-default-block-appender textarea.block-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;
|
|
|
|
@-moz-document url-prefix() {
|
|
& {
|
|
margin-top: 0.2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** === 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(.has-text-color) {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&: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-pullquote[data-type="core/pullquote"],
|
|
.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-align="left"] > .wp-block-pullquote,
|
|
.wp-block[data-align="right"] > .wp-block-pullquote {
|
|
max-width: 50%;
|
|
text-align: inherit;
|
|
|
|
&:not(.is-style-solid-color) {
|
|
padding: 0;
|
|
}
|
|
|
|
&.is-style-solid-color {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
.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-group {
|
|
|
|
// Child: Full alignment
|
|
> .wp-block-group__inner-container > .wp-block[data-align="full"],
|
|
> .wp-block-group__inner-container > .wp-block.alignfull {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
// Group block with background color
|
|
&.has-background {
|
|
padding: $group-block-background__padding;
|
|
|
|
// Child: Full alignment
|
|
> .wp-block-group__inner-container > .wp-block[data-align="full"],
|
|
> .wp-block-group__inner-container > .wp-block.alignfull {
|
|
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
|
|
.wp-block[data-align="wide"] > .wp-block-group {
|
|
|
|
> .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
|
|
@include media(tablet) {
|
|
width: calc(8 * (100vw / 12));
|
|
}
|
|
|
|
@include media(desktop) {
|
|
width: calc(6 * (100vw / 12 ));
|
|
}
|
|
}
|
|
|
|
// Child blocks: Full alignment
|
|
> .wp-block-group__inner-container > .wp-block[data-align="full"],
|
|
> .wp-block-group__inner-container > .wp-block.alignfull {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
|
|
// Group block with background color
|
|
&.has-background {
|
|
|
|
// Child blocks: Default alignments
|
|
> .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
|
|
@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
|
|
.wp-block[data-align="full"] > .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 {
|
|
|
|
// 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: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
// Child blocks: Normal Alignments
|
|
> .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
|
|
|
|
@include media(tablet) {
|
|
max-width: calc(8 * (100vw / 12));
|
|
}
|
|
|
|
@include media(desktop) {
|
|
max-width: calc(6 * (100vw / 12));
|
|
}
|
|
}
|
|
|
|
// Child blocks: Not Full Alignments
|
|
> .wp-block:not([data-align="full"]):not(.alignfull) {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
@include media(tablet) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
// Child blocks: Right alignments
|
|
> .wp-block[data-align="right"] {
|
|
|
|
@include media(tablet) {
|
|
max-width: 125%;
|
|
}
|
|
}
|
|
|
|
// Child blocks: Wide alignments
|
|
> .wp-block[data-align="wide"],
|
|
> .wp-block.alignwide {
|
|
|
|
@include media(tablet) {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
// Child blocks: Full alignments
|
|
> .wp-block[data-align=full],
|
|
> .wp-block.alignfull {
|
|
|
|
@include media(tablet) {
|
|
left: calc( -12.5% - 13px );
|
|
width: calc( 125% + 26px );
|
|
max-width: calc( 125% + 25px );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Group block with background color
|
|
&.has-background {
|
|
|
|
// When the Group block is full width, we can remove the left/right padding.
|
|
padding: $group-block-background__padding 0;
|
|
|
|
@include media(mobile) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
// Child blocks: Full alignment
|
|
> .wp-block-group__inner-container > .wp-block[data-align="full"],
|
|
> .wp-block-group__inner-container > .wp-block.alignfull {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
|
|
@include media(mobile) {
|
|
width: calc(100% + 92px);
|
|
}
|
|
|
|
@include media(tablet) {
|
|
width: calc(125% + 120px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wp-block-post-template {
|
|
|
|
.wp-block[data-align="full"],
|
|
.wp-block.alignfull {
|
|
left: 0;
|
|
max-width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|