You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.0 KiB
SCSS
106 lines
2.0 KiB
SCSS
8 months ago
|
.wp-block-columns {
|
||
|
|
|
||
|
|
&:not(.alignwide):not(.alignfull) {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wp-block-column {
|
||
|
|
|
||
|
|
> * {
|
||
|
|
margin-top: calc(0.66 * var(--global--spacing-vertical));
|
||
|
|
margin-bottom: calc(0.66 * var(--global--spacing-vertical));
|
||
|
|
|
||
|
|
@include media(mobile) {
|
||
|
|
margin-top: var(--global--spacing-vertical);
|
||
|
|
margin-bottom: var(--global--spacing-vertical);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wp-block-column:not(:last-child) {
|
||
|
|
margin-bottom: calc(0.66 * var(--global--spacing-vertical));
|
||
|
|
|
||
|
|
@include media(mobile) {
|
||
|
|
margin-bottom: var(--global--spacing-vertical);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include media(desktop) {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-style-twentytwentyone-columns-overlap {
|
||
|
|
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
@include media(laptop) {
|
||
|
|
|
||
|
|
.wp-block-column {
|
||
|
|
|
||
|
|
&:nth-child(2n) {
|
||
|
|
margin-left: calc(-2 * var(--global--spacing-horizontal));
|
||
|
|
margin-top: calc(2.5 * var(--global--spacing-horizontal));
|
||
|
|
z-index: 2;
|
||
|
|
|
||
|
|
// Provide text-based child blocks with a default background color to ensure they're readable.
|
||
|
|
> p,
|
||
|
|
> h1,
|
||
|
|
> h2,
|
||
|
|
> h3,
|
||
|
|
> h4,
|
||
|
|
> h5,
|
||
|
|
> h6,
|
||
|
|
> ul,
|
||
|
|
> ol,
|
||
|
|
> pre {
|
||
|
|
|
||
|
|
&:not(.has-background) {
|
||
|
|
background-color: var(--global--color-background);
|
||
|
|
padding: var(--global--spacing-unit);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Lists should still have their usual left padding.
|
||
|
|
> ul:not(.has-background),
|
||
|
|
> ol:not(.has-background) {
|
||
|
|
padding-left: calc(2 * var(--global--spacing-horizontal));
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-vertically-aligned-center {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.alignfull {
|
||
|
|
|
||
|
|
.wp-block-column {
|
||
|
|
|
||
|
|
p:not(.has-background),
|
||
|
|
h1:not(.has-background),
|
||
|
|
h2:not(.has-background),
|
||
|
|
h3:not(.has-background),
|
||
|
|
h4:not(.has-background),
|
||
|
|
h5:not(.has-background),
|
||
|
|
h6:not(.has-background) {
|
||
|
|
padding-left: var(--global--spacing-unit);
|
||
|
|
padding-right: var(--global--spacing-unit);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|