mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-14 20:40:17 -05:00
Merge pull request #20759 from overleaf/jel-cms-col-gap
[web] Replace margin on `Style | Group` with gap on `Layout | Grid` GitOrigin-RevId: 297a5c9f6953a22818de31062f8ad5258db4691b
This commit is contained in:
parent
ecfc8a1f9a
commit
fd5e1df2e1
1 changed files with 55 additions and 43 deletions
|
@ -2,6 +2,29 @@
|
|||
CMS Generated Pages:
|
||||
/about/*, /contact, /legal, /blog/*, /for/*, /events/*
|
||||
*/
|
||||
|
||||
@mixin section-row-custom-gap($spacing) {
|
||||
// only update the padding between columns
|
||||
// not the padding before the first column
|
||||
// or the padding after the last column
|
||||
// rows can be nested, so only select direct col in row
|
||||
|
||||
> div[class*='col-'] {
|
||||
&:not(:first-child, :last-child) {
|
||||
padding-left: $spacing;
|
||||
padding-right: $spacing;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-right: $spacing;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: $spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cms-page {
|
||||
.sales-contact-form-left-column {
|
||||
.sales-contact-form-heading-title {
|
||||
|
@ -481,6 +504,38 @@
|
|||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.section-row-gap-spacing-16 {
|
||||
@include section-row-custom-gap(calc(var(--spacing-16) / 2));
|
||||
}
|
||||
|
||||
.section-row-gap-spacing-15 {
|
||||
@include section-row-custom-gap(calc(var(--spacing-15) / 2));
|
||||
}
|
||||
|
||||
.section-row-gap-spacing-14 {
|
||||
@include section-row-custom-gap(calc(var(--spacing-14) / 2));
|
||||
}
|
||||
|
||||
.section-row-gap-spacing-13 {
|
||||
@include section-row-custom-gap(calc(var(--spacing-13) / 2));
|
||||
}
|
||||
|
||||
.section-row-gap-spacing-12 {
|
||||
@include section-row-custom-gap(calc(var(--spacing-12) / 2));
|
||||
}
|
||||
|
||||
.section-row-gap-spacing-11 {
|
||||
@include section-row-custom-gap(calc(var(--spacing-11) / 2));
|
||||
}
|
||||
|
||||
.section-row-gap-spacing-10 {
|
||||
@include section-row-custom-gap(calc(var(--spacing-10) / 2));
|
||||
}
|
||||
|
||||
.section-row-gap-spacing-09 {
|
||||
@include section-row-custom-gap(calc(var(--spacing-09) / 2));
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile layout options depdendent on mobile breakpoint
|
||||
|
@ -509,49 +564,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// TODO: will be deprecated and gap option used instead
|
||||
@include media-breakpoint-up(lg) {
|
||||
.desktop-left-margin-sm {
|
||||
margin-left: var(--spacing-05);
|
||||
}
|
||||
|
||||
.desktop-left-margin-md {
|
||||
margin-left: var(--spacing-07);
|
||||
}
|
||||
|
||||
.desktop-left-margin-lg {
|
||||
margin-left: var(--spacing-09);
|
||||
}
|
||||
|
||||
.desktop-left-margin-xl {
|
||||
margin-left: var(--spacing-10);
|
||||
}
|
||||
|
||||
.desktop-left-margin-xxl {
|
||||
margin-left: var(--spacing-11);
|
||||
}
|
||||
|
||||
.desktop-right-margin-sm {
|
||||
margin-right: var(--spacing-05);
|
||||
}
|
||||
|
||||
.desktop-right-margin-md {
|
||||
margin-right: var(--spacing-07);
|
||||
}
|
||||
|
||||
.desktop-right-margin-lg {
|
||||
margin-right: var(--spacing-09);
|
||||
}
|
||||
|
||||
.desktop-right-margin-xl {
|
||||
margin-right: var(--spacing-10);
|
||||
}
|
||||
|
||||
.desktop-right-margin-xxl {
|
||||
margin-right: var(--spacing-11);
|
||||
}
|
||||
}
|
||||
|
||||
.top-margin-sm {
|
||||
margin-top: var(--spacing-05);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue