mirror of
https://github.com/StanGirard/quivr.git
synced 2024-12-19 00:22:14 +03:00
d1b0c26da8
## 🔗 Relates to - Epic: #1232 - Issue: #1394 ## 🍿 Demo https://github.com/StanGirard/quivr/assets/67386567/ff3f9e4f-48df-42ab-9ed4-4dd59aca7ba9
37 lines
877 B
CSS
37 lines
877 B
CSS
/* Fixes padding and margins due to slanted sibling sections */
|
|
.slant-before-is-up {
|
|
z-index: 2;
|
|
}
|
|
.slant-before-is-down {
|
|
z-index: 2;
|
|
margin-top: calc(-100vw * tan(6deg));
|
|
}
|
|
.slant-after-is-down {
|
|
padding-bottom: calc(50vw * tan(6deg));
|
|
}
|
|
|
|
.section-slanted-downwards {
|
|
transform: skew(0, 6deg) translateY(calc(50vw / -12));
|
|
padding-bottom: calc(100vw * tan(6deg));
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.section-slanted-downwards > * {
|
|
transform: skew(0, -6deg) translateY(calc(50vw / 12));
|
|
margin-top: calc(-50vw * tan(6deg));
|
|
}
|
|
|
|
.section-slanted-upwards {
|
|
transform: skew(0, -6deg) translateY(calc(50vw * tan(6deg)));
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.section-slanted-upwards > * {
|
|
transform: skew(0, 6deg) translateY(calc(-50vw * tan(6deg)));
|
|
margin-top: calc(50vw * tan(6deg));
|
|
}
|