Merge pull request #21468 from overleaf/jel-cms-group-spacing

[web] Spacing options for `Style | Group`  and `Element | Content` on CMS

GitOrigin-RevId: 78d7d8e29be81a1526e4eeceb50fe66846ed8a05
This commit is contained in:
Jessica Lawshe 2024-11-05 09:24:41 -06:00 committed by Copybot
parent 40af0fa84f
commit f0e989be0c
2 changed files with 67 additions and 0 deletions

View file

@ -16,6 +16,9 @@ $spacing-13: 64px;
$spacing-14: 72px;
$spacing-15: 80px;
$spacing-16: 96px;
$all-spacings: spacing-00, spacing-01, spacing-02, spacing-03, spacing-04,
spacing-05, spacing-06, spacing-07, spacing-08, spacing-09, spacing-10,
spacing-11, spacing-12, spacing-13, spacing-14, spacing-15, spacing-16;
:root {
--spacing-00: #{$spacing-00};

View file

@ -66,6 +66,43 @@
}
}
// create .paragraphs-margin-spacing-00, .paragraphs-margin-spacing-01, .paragraphs-margin-spacing-02, .paragraphs-margin-spacing-03, .paragraphs-margin-spacing-04, .paragraphs-margin-spacing-05, .paragraphs-margin-spacing-06, .paragraphs-margin-spacing-07, .paragraphs-margin-spacing-08, .paragraphs-margin-spacing-09, .paragraphs-margin-spacing-10, .paragraphs-margin-spacing-11, .paragraphs-margin-spacing-12, .paragraphs-margin-spacing-13, .paragraphs-margin-spacing-14, .paragraphs-margin-spacing-15, .paragraphs-margin-spacing-16
@each $spacing-option in $all-spacings {
.paragraphs-margin-#{$spacing-option} {
p {
margin-bottom: var(--#{$spacing-option});
}
}
}
// create .headers-top-margin-spacing-00, .headers-top-margin-spacing-01, .headers-top-margin-spacing-02, .headers-top-margin-spacing-03, .headers-top-margin-spacing-04, .headers-top-margin-spacing-05, .headers-top-margin-spacing-06, .headers-top-margin-spacing-07, .headers-top-margin-spacing-08, .headers-top-margin-spacing-09, .headers-top-margin-spacing-10, .headers-top-margin-spacing-11, .headers-top-margin-spacing-12, .headers-top-margin-spacing-13, .headers-top-margin-spacing-14, .headers-top-margin-spacing-15, .headers-top-margin-spacing-16
@each $spacing-option in $all-spacings {
.headers-top-margin-#{$spacing-option} {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: var(--#{$spacing-option});
}
}
}
// create .headers-bottom-margin-spacing-00, .headers-bottom-margin-spacing-01, .headers-bottom-margin-spacing-02, .headers-bottom-margin-spacing-03, .headers-bottom-margin-spacing-04, .headers-bottom-margin-spacing-05, .headers-bottom-margin-spacing-06, .headers-bottom-margin-spacing-07, .headers-bottom-margin-spacing-08, .headers-bottom-margin-spacing-09, .headers-bottom-margin-spacing-10, .headers-bottom-margin-spacing-11, .headers-bottom-margin-spacing-12, .headers-bottom-margin-spacing-13, .headers-bottom-margin-spacing-14, .headers-bottom-margin-spacing-15, .headers-bottom-margin-spacing-16
@each $spacing-option in $all-spacings {
.headers-bottom-margin-#{$spacing-option} {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: var(--#{$spacing-option});
}
}
}
.card + .card {
margin-top: var(--spacing-09);
}
@ -406,6 +443,33 @@
&.top-margin-xxl {
margin-top: var(--spacing-11);
}
// create .top-margin-spacing-00, .top-margin-spacing-01, .top-margin-spacing-02, .top-margin-spacing-03, .top-margin-spacing-04, .top-margin-spacing-05, .top-margin-spacing-06, .top-margin-spacing-07, .top-margin-spacing-08, .top-margin-spacing-09, .top-margin-spacing-10, .top-margin-spacing-11, .top-margin-spacing-12, .top-margin-spacing-13, .top-margin-spacing-14, .top-margin-spacing-15, .top-margin-spacing-16
@each $spacing-option in $all-spacings {
&.top-margin-#{$spacing-option} {
margin-top: var(--#{$spacing-option});
}
}
}
.card {
@each $spacing-option in $all-spacings {
// create .padding-spacing-00, .padding-spacing-01, .padding-spacing-02, .padding-spacing-03, .padding-spacing-04, .padding-spacing-05, .padding-spacing-06, .padding-spacing-07, .padding-spacing-08, .padding-spacing-09, .padding-spacing-10, .padding-spacing-11, .padding-spacing-12, .padding-spacing-13, .padding-spacing-14, .padding-spacing-15, .padding-spacing-16
&.padding-#{$spacing-option} {
.card-body {
padding: var(--#{$spacing-option});
}
}
}
}
.no-card {
@each $spacing-option in $all-spacings {
// create .padding-spacing-00, .padding-spacing-01, .padding-spacing-02, .padding-spacing-03, .padding-spacing-04, .padding-spacing-05, .padding-spacing-06, .padding-spacing-07, .padding-spacing-08, .padding-spacing-09, .padding-spacing-10, .padding-spacing-11, .padding-spacing-12, .padding-spacing-13, .padding-spacing-14, .padding-spacing-15, .padding-spacing-16
&.padding-#{$spacing-option} {
padding: var(--#{$spacing-option});
}
}
}
}