mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-04-22 19:13:44 +03:00
e20a834cb0
This avoids the complex mutliply-nested blocks and makes the block style less reliant on a custom class. On mid-sized screens, we switch to plain horizontally-overlapping rectangles, and on small screens we stack the columns, and vertically-overlap. Also, remove the parallelogram styles from the editor display. The skew and positioning don't work well in the editor context.
42 lines
1 KiB
SCSS
42 lines
1 KiB
SCSS
/*
|
||
* Add content area styles to the editor (in addition to the front end), so that users see content the way it will
|
||
* appear on the front end.
|
||
*/
|
||
|
||
@import "settings/colors";
|
||
@import "../../pub/wporg/css/settings/structure";
|
||
@import "settings/structure";
|
||
@import "../../pub/wporg/css/tools/breakpoint";
|
||
@import "../../pub/wporg/css/settings/_modular-scale.scss";
|
||
@import "../../pub/wporg/css/objects/buttons";
|
||
@import "objects/buttons";
|
||
@import "objects/image";
|
||
@import "objects/pullquote";
|
||
@import "utilities/utilities";
|
||
|
||
// Un-parallelogram the columns in the editor– `skew` doesn't play well with the nesting of editor components.
|
||
.block-editor-block-list__block-edit {
|
||
.is-style-wporg-parallelogram {
|
||
.wp-block-column {
|
||
@include breakpoint( $breakpoint-tablet ) {
|
||
transform: skew(0);
|
||
|
||
&:last-child {
|
||
position: static;
|
||
z-index: auto;
|
||
top: auto;
|
||
left: auto;
|
||
right: auto;
|
||
padding-left: 0;
|
||
}
|
||
|
||
> * {
|
||
transform: skew(0);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// font-family and face, etc? |