mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-04-24 20:03:44 +03:00
69 lines
1.5 KiB
SCSS
69 lines
1.5 KiB
SCSS
.parallelogram-container {
|
|
width: 80%;
|
|
margin-left: 10%;
|
|
margin-right: 10%;
|
|
|
|
> .wp-block-group__inner-container {
|
|
@include breakpoint($breakpoint-tablet) {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
color: #fff;
|
|
margin: 0 auto;
|
|
opacity: 0.9;
|
|
padding: 4.7rem 0;
|
|
text-align: center;
|
|
|
|
// probably need to remove that negative margin from the has-background block? it's shouldn't apply here really, so need to rethink why have it and best way to address that
|
|
// or maybe just refine how it's implemented, like making sure that have padding to replace margin, and no position:relative crap
|
|
|
|
@include breakpoint( $breakpoint-tablet ) {
|
|
transform: skew(-15deg);
|
|
|
|
&:first-child {
|
|
position: relative;
|
|
top: 40px;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:last-child {
|
|
z-index: 1;
|
|
padding-left: 40px;
|
|
// todo the first and second child aren't overlapping as much as they used to, what changed?
|
|
}
|
|
|
|
&:before {
|
|
font-size: ms(12);
|
|
height: 64px;
|
|
position: relative;
|
|
right: 1rem;
|
|
transform: skew(15deg);
|
|
width: 64px;
|
|
}
|
|
|
|
> * {
|
|
transform: skew(15deg);
|
|
}
|
|
|
|
> .wp-block-group__inner-container {
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|