diff options
author | Volpeon <git@volpeon.ink> | 2024-11-19 10:19:18 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-11-19 10:19:18 +0100 |
commit | 0577b8d19c08e4a0d99b6da615747cf801c9cb97 (patch) | |
tree | de9749e737d6a3877c9c6e1b723b868227b5fb91 /src/scopes | |
parent | Navbar: Better icon integration (diff) | |
download | iro-design-0577b8d19c08e4a0d99b6da615747cf801c9cb97.tar.gz iro-design-0577b8d19c08e4a0d99b6da615747cf801c9cb97.tar.bz2 iro-design-0577b8d19c08e4a0d99b6da615747cf801c9cb97.zip |
Add body scope
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_blockquotes.vars.scss | 4 | ||||
-rw-r--r-- | src/scopes/_body.scss | 35 | ||||
-rw-r--r-- | src/scopes/_body.vars.scss | 9 | ||||
-rw-r--r-- | src/scopes/_code.vars.scss | 4 | ||||
-rw-r--r-- | src/scopes/_implicit.vars.scss | 2 | ||||
-rw-r--r-- | src/scopes/_lists.vars.scss | 4 | ||||
-rw-r--r-- | src/scopes/_tables.vars.scss | 4 |
7 files changed, 53 insertions, 9 deletions
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss index 9db1271..5a34957 100644 --- a/src/scopes/_blockquotes.vars.scss +++ b/src/scopes/_blockquotes.vars.scss | |||
@@ -1,9 +1,9 @@ | |||
1 | @use 'iro-sass/src/props'; | 1 | @use 'iro-sass/src/props'; |
2 | @use '../core.vars' as core; | 2 | @use '../core.vars' as core; |
3 | @use './implicit' as implicit; | 3 | @use './body' as body; |
4 | 4 | ||
5 | $indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; | 5 | $indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; |
6 | $margin-bs: props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; | 6 | $margin-bs: props.def(--s-blockquotes--margin-bs, props.get(body.$paragraph--margin-bs)) !default; |
7 | $border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default; | 7 | $border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default; |
8 | 8 | ||
9 | $compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; | 9 | $compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; |
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss new file mode 100644 index 0000000..eb39e8c --- /dev/null +++ b/src/scopes/_body.scss | |||
@@ -0,0 +1,35 @@ | |||
1 | @use '@/styles/common' as iro; | ||
2 | @use 'iro-sass/src/bem'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | |||
5 | @forward 'body.vars'; | ||
6 | @use 'body.vars' as vars; | ||
7 | |||
8 | @mixin styles { | ||
9 | @include materialize-at-root(meta.module-variables('vars')); | ||
10 | |||
11 | @include bem.scope('body') { | ||
12 | font-size: props.get(vars.$font-size); | ||
13 | |||
14 | p { | ||
15 | margin-block-start: props.get(vars.$paragraph--margin-bs); | ||
16 | } | ||
17 | |||
18 | img { | ||
19 | display: block; | ||
20 | inline-size: auto; | ||
21 | max-inline-size: 100%; | ||
22 | block-size: auto; | ||
23 | max-block-size: props.get(vars.$img--max-block-size); | ||
24 | margin-block: props.get(vars.$block--margin-b); | ||
25 | } | ||
26 | |||
27 | figure { | ||
28 | margin-block: props.get(vars.$block--margin-b); | ||
29 | |||
30 | img { | ||
31 | margin-block: 0; | ||
32 | } | ||
33 | } | ||
34 | } | ||
35 | } | ||
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss new file mode 100644 index 0000000..98f23bd --- /dev/null +++ b/src/scopes/_body.vars.scss | |||
@@ -0,0 +1,9 @@ | |||
1 | @use 'iro-sass/src/props'; | ||
2 | @use '../core.vars' as core; | ||
3 | |||
4 | $font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; | ||
5 | |||
6 | $paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default; | ||
7 | $block--margin-b: props.def(--s-body--block--margin-b, calc(2 * props.get($paragraph--margin-bs))) !default; | ||
8 | |||
9 | $img--max-block-size: props.def(--s-body--img--max-block-size, calc(100vh - props.get(core.$size--2400))) !default; | ||
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss index c1bf27c..a80cc51 100644 --- a/src/scopes/_code.vars.scss +++ b/src/scopes/_code.vars.scss | |||
@@ -1,6 +1,6 @@ | |||
1 | @use 'iro-sass/src/props'; | 1 | @use 'iro-sass/src/props'; |
2 | @use '../core.vars' as core; | 2 | @use '../core.vars' as core; |
3 | @use './implicit' as implicit; | 3 | @use './body' as body; |
4 | 4 | ||
5 | $inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; | 5 | $inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; |
6 | $inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; | 6 | $inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; |
@@ -8,7 +8,7 @@ $inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$roundin | |||
8 | 8 | ||
9 | $block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; | 9 | $block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; |
10 | $block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; | 10 | $block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; |
11 | $block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; | 11 | $block--margin-bs: props.def(--s-code--block--margin-bs, props.get(body.$paragraph--margin-bs)) !default; |
12 | $block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default; | 12 | $block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default; |
13 | 13 | ||
14 | $inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200), 'color') !default; | 14 | $inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200), 'color') !default; |
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index 0002591..fd47858 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @use 'iro-sass/src/props'; | 1 | @use 'iro-sass/src/props'; |
2 | @use '../core.vars' as core; | 2 | @use '../core.vars' as core; |
3 | 3 | ||
4 | $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default; | 4 | $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default; |
5 | 5 | ||
6 | $small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default; | 6 | $small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default; |
7 | 7 | ||
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss index c4a0f22..f2511d8 100644 --- a/src/scopes/_lists.vars.scss +++ b/src/scopes/_lists.vars.scss | |||
@@ -1,8 +1,8 @@ | |||
1 | @use 'iro-sass/src/props'; | 1 | @use 'iro-sass/src/props'; |
2 | @use '../core.vars' as core; | 2 | @use '../core.vars' as core; |
3 | @use './implicit' as implicit; | 3 | @use './body' as body; |
4 | 4 | ||
5 | $indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; | 5 | $indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; |
6 | $margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; | 6 | $margin-bs: props.def(--s-lists--margin-bs, props.get(body.$paragraph--margin-bs)) !default; |
7 | 7 | ||
8 | $compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; | 8 | $compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; |
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss index 362b70f..ded6b80 100644 --- a/src/scopes/_tables.vars.scss +++ b/src/scopes/_tables.vars.scss | |||
@@ -1,4 +1,4 @@ | |||
1 | @use 'iro-sass/src/props'; | 1 | @use 'iro-sass/src/props'; |
2 | @use 'implicit.vars' as implicit; | 2 | @use 'body.vars' as body; |
3 | 3 | ||
4 | $margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; | 4 | $margin-bs: props.def(--s-tables--margin-bs, props.get(body.$paragraph--margin-bs)) !default; |