mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
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:
parent
40af0fa84f
commit
f0e989be0c
2 changed files with 67 additions and 0 deletions
|
@ -16,6 +16,9 @@ $spacing-13: 64px;
|
||||||
$spacing-14: 72px;
|
$spacing-14: 72px;
|
||||||
$spacing-15: 80px;
|
$spacing-15: 80px;
|
||||||
$spacing-16: 96px;
|
$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 {
|
:root {
|
||||||
--spacing-00: #{$spacing-00};
|
--spacing-00: #{$spacing-00};
|
||||||
|
|
|
@ -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 {
|
.card + .card {
|
||||||
margin-top: var(--spacing-09);
|
margin-top: var(--spacing-09);
|
||||||
}
|
}
|
||||||
|
@ -406,6 +443,33 @@
|
||||||
&.top-margin-xxl {
|
&.top-margin-xxl {
|
||||||
margin-top: var(--spacing-11);
|
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});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue