summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_blockquote.scss25
-rw-r--r--src/scopes/_code.scss59
2 files changed, 84 insertions, 0 deletions
diff --git a/src/scopes/_blockquote.scss b/src/scopes/_blockquote.scss
new file mode 100644
index 0000000..e997b9b
--- /dev/null
+++ b/src/scopes/_blockquote.scss
@@ -0,0 +1,25 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('blockquote') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --250),
8 --margin-top: fn.global-dim(--paragraph --margin-top),
9 )
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: (
14 --border: fn.global-color(--obj-hi),
15 )
16 ), 'colors');
17
18 @include iro.bem-scope(iro.props-namespace()) {
19 blockquote {
20 margin: fn.dim(--margin-top) 0 0 1px;
21 padding-left: calc(fn.dim(--pad-x) - 3px);
22 border-left: 3px solid fn.color(--border);
23 }
24 }
25}
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
new file mode 100644
index 0000000..d4b70ee
--- /dev/null
+++ b/src/scopes/_code.scss
@@ -0,0 +1,59 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('body') {
5 @include iro.props-store((
6 --dims: (
7 --inline: (
8 --pad-x: fn.global-dim(--size --50),
9 --pad-y: fn.global-dim(--size --10),
10 --rounding: 3px,
11 ),
12 --block: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 --margin-top: fn.global-dim(--paragraph --margin-top),
16 --rounding: 3px,
17 )
18 )
19 ), 'dims');
20
21 @include iro.props-store((
22 --colors: (
23 --inline: (
24 --fg: fn.global-color(--accent --primary --obj-lo),
25 --bg: fn.global-color(--accent --primary --faint),
26 ),
27 --block: (
28 --fg: fn.global-color(--fg),
29 --bg: fn.global-color(--bg-hi),
30 )
31 )
32 ), 'colors');
33
34 @include iro.bem-scope(iro.props-namespace()) {
35 code {
36 padding: fn.dim(--inline --pad-y) fn.dim(--inline --pad-x);
37 border-radius: fn.dim(--inline --rounding);
38 background-color: fn.color(--inline --bg);
39 color: fn.color(--inline --fg);
40 }
41
42 pre {
43 margin: fn.dim(--block --margin-top) 0 0 0;
44 padding: fn.dim(--block --pad-y) fn.dim(--block --pad-x);
45 border-radius: fn.dim(--block --rounding);
46 background-color: fn.color(--block --bg);
47 color: fn.color(--block --fg);
48
49 code {
50 display: inline-block;
51 margin-right: fn.dim(--block --pad-x);
52 padding: 0;
53 border-radius: 0;
54 background-color: transparent;
55 color: currentColor;
56 }
57 }
58 }
59}