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-04-22 11:03:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remove the parallelogram styles from the editor display

Browse source 
The skew and positioning don't work well in the editor context, it looks like it's broken.
This commit is contained in:
Kelly Dwan 2019-10-02 16:38:29 -04:00
parent fe68610602
commit 02feed4d12
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
2 changed files with 79 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -446,52 +446,41 @@ input.download-button.button-hero:active[type="submit"],
background-color: #FFFFFF;
}
.parallelogram-container {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
@media screen and (min-width: 768px) {
.parallelogram-container > .wp-block-group__inner-container {
display: flex;
}
}
.parallelogram-container .wp-block-group__inner-container .is-style-wporg-parallelogram:last-child .wp-block-group__inner-container {
/*
* Adjust for the overlapping parralelograms, so that the text in this one appears to be more aligned to
* its container.
*/
position: relative;
left: 10px;
}
/*
* Not just doing `@extend .parallelogram` b/c want to split between breakpoints, which that doesn't do.
*/
.is-style-wporg-parallelogram {
.is-style-wporg-parallelogram .wp-block-column {
background: black;
color: #fff;
margin: 0 auto;
margin: 0;
opacity: 0.9;
padding: 4.7rem 0;
padding: 4.7rem 3rem;
text-align: center;
mix-blend-mode: multiply;
}
.is-style-wporg-parallelogram .wp-block-column:nth-of-type(2n+1) {
background: #1E8CBE;
}
.is-style-wporg-parallelogram .wp-block-column:nth-of-type(2n) {
background: #826EB4;
}
@media screen and (min-width: 768px) {
.is-style-wporg-parallelogram {
.is-style-wporg-parallelogram .wp-block-column {
transform: skew(-15deg);
}
.is-style-wporg-parallelogram:first-child {
.is-style-wporg-parallelogram .wp-block-column:first-child {
position: relative;
top: 40px;
left: 30px;
z-index: 2;
}
.is-style-wporg-parallelogram:last-child {
.is-style-wporg-parallelogram .wp-block-column:last-child {
position: relative;
z-index: 1;
padding-left: 40px;
right: 30px;
padding-left: 4rem;
}
.is-style-wporg-parallelogram:before {
.is-style-wporg-parallelogram .wp-block-column:before {
font-size: ms(12);
height: 64px;
position: relative;
@ -499,12 +488,27 @@ input.download-button.button-hero:active[type="submit"],
transform: skew(15deg);
width: 64px;
}
.is-style-wporg-parallelogram > * {
.is-style-wporg-parallelogram .wp-block-column > * {
transform: skew(15deg);
}
.is-style-wporg-parallelogram > .wp-block-group__inner-container {
width: 60%;
margin: 0 auto;
}
@media screen and (min-width: 600px) and (max-width: 767px) {
.is-style-wporg-parallelogram .wp-block-column {
padding: 3rem 2rem;
flex-basis: calc(50% + 0.5rem);
}
.is-style-wporg-parallelogram .wp-block-column:nth-of-type(n+2) {
margin-left: -1rem;
}
}
@media screen and (max-width: 599px) {
.is-style-wporg-parallelogram .wp-block-column {
padding: 2rem;
}
.is-style-wporg-parallelogram .wp-block-column:nth-of-type(n+2) {
margin-top: -1rem;
}
}
@ -539,4 +543,21 @@ p.is-style-wporg-tldr {
}
}
@media screen and (min-width: 768px) {
.block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column {
transform: skew(0);
}
.block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column:last-child {
position: static;
z-index: auto;
top: auto;
left: auto;
right: auto;
padding-left: 0;
}
.block-editor-block-list__block-edit .is-style-wporg-parallelogram .wp-block-column > * {
transform: skew(0);
}
}
/*# sourceMappingURL=style-editor.css.map */

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?