tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-07-05 10:25:45 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use columns block for the parallelogram style (#16)

Browse source 
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.
This commit is contained in:
Kelly Dwan 2019-10-03 15:09:06 -04:00 • committed by GitHub
parent f8558fe9c2
commit e20a834cb0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 160 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

23
themes/wporg-5ftf/css/style-editor.scss
View file

@ -3,7 +3,6 @@
* appear on the front end.
*/
@import "settings/colors";
@import "../../pub/wporg/css/settings/structure";
@import "settings/structure";
@ -15,7 +14,29 @@
@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?