mirror of
https://github.com/WordPress/WordPress.git
synced 2024-08-20 12:54:00 +02:00
cfd6d327ad
This changes removes an hardcoded CSS color value for the Quote block in Twenty Nineteen's editor stylesheet. This ensures custom text color is fully reflected in the Editor for Quote block. Props nithi22, evildon, SergeyBiryukov, audrasjb. Fixes #55992. Built from https://develop.svn.wordpress.org/trunk@53515 git-svn-id: http://core.svn.wordpress.org/trunk@53104 1a063a9b-81f0-0310-95a4-ce76da25c4cd
996 lines
18 KiB
SCSS
996 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,
|
|
.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: inherit;
|
|
}
|
|
}
|
|
|
|
/** === 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%;
|
|
}
|
|
}
|