diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/_iro-design.scss | 1 | ||||
| -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 |
8 files changed, 54 insertions, 9 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss index 6088344..5ed32e9 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss | |||
| @@ -34,6 +34,7 @@ $breakpoints: ( | |||
| 34 | @forward 'layouts/split-view' as l-split-view--*; | 34 | @forward 'layouts/split-view' as l-split-view--*; |
| 35 | 35 | ||
| 36 | @forward 'scopes/implicit' as s-implicit--*; | 36 | @forward 'scopes/implicit' as s-implicit--*; |
| 37 | @forward 'scopes/body' as s-body--*; | ||
| 37 | @forward 'scopes/blockquotes' as s-blockquotes--*; | 38 | @forward 'scopes/blockquotes' as s-blockquotes--*; |
| 38 | @forward 'scopes/code' as s-code--*; | 39 | @forward 'scopes/code' as s-code--*; |
| 39 | @forward 'scopes/headings' as s-headings--*; | 40 | @forward 'scopes/headings' as s-headings--*; |
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; |
