summaryrefslogtreecommitdiffstats
path: root/src_demo/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-25 18:29:21 +0100
committerVolpeon <git@volpeon.ink>2022-03-25 18:29:21 +0100
commit5e2696d9ae35b37a9f7d0fe1c52b93fb84570464 (patch)
treee3b22a889bd4f8a6679d76dbe85c3152173947a6 /src_demo/components
parentFixed vertical rule (diff)
downloadiro-design-5e2696d9ae35b37a9f7d0fe1c52b93fb84570464.tar.gz
iro-design-5e2696d9ae35b37a9f7d0fe1c52b93fb84570464.tar.bz2
iro-design-5e2696d9ae35b37a9f7d0fe1c52b93fb84570464.zip
Split demo in :target views
Diffstat (limited to 'src_demo/components')
-rw-r--r--src_demo/components/_box.scss16
-rw-r--r--src_demo/components/_content.scss7
-rw-r--r--src_demo/components/_sidebar.scss29
-rw-r--r--src_demo/components/_view.scss12
4 files changed, 64 insertions, 0 deletions
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss
new file mode 100644
index 0000000..e983f2c
--- /dev/null
+++ b/src_demo/components/_box.scss
@@ -0,0 +1,16 @@
1@use 'iro-sass/src/index' as iro;
2@use '../../src/functions' as fn;
3
4@include iro.props-namespace('box') {
5 @include iro.props-store((
6 --colors: (
7 --border: fn.global-color(--obj),
8 ),
9 ), 'colors');
10
11 @include iro.bem-component(iro.props-namespace()) {
12 margin: 2em 0;
13 padding: 2em;
14 border: 1px solid fn.color(--border);
15 }
16}
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
new file mode 100644
index 0000000..6045e4b
--- /dev/null
+++ b/src_demo/components/_content.scss
@@ -0,0 +1,7 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('content') {
4 @include iro.bem-component(iro.props-namespace()) {
5 grid-area: content;
6 }
7}
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
new file mode 100644
index 0000000..9cff3c8
--- /dev/null
+++ b/src_demo/components/_sidebar.scss
@@ -0,0 +1,29 @@
1@use 'iro-sass/src/index' as iro;
2@use '../../src/functions' as fn;
3
4@include iro.props-namespace('sidebar') {
5 @include iro.props-store((
6 --colors: (
7 --bg: fn.global-color(--bg),
8 --border: fn.global-color(--obj),
9 --icon: fn.global-color(--fg-hi),
10 --group-header-fg: fn.global-color(--fg-hi),
11 ),
12 ), 'colors');
13
14 @include iro.props-store((
15 --colors: (
16 --bg: fn.global-color(--bg-hi),
17 --border: fn.global-color(--bg-hi),
18 ),
19 ), 'colors-dark');
20
21 @include iro.bem-component(iro.props-namespace()) {
22 grid-area: sidebar;
23 min-width: 10em;
24 padding: .6em;
25 overflow: auto;
26 border-right: 1px solid fn.color(--border);
27 background-color: fn.color(--bg);
28 }
29}
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss
new file mode 100644
index 0000000..8086280
--- /dev/null
+++ b/src_demo/components/_view.scss
@@ -0,0 +1,12 @@
1@use 'iro-sass/src/index' as iro;
2@use '../../src/functions' as fn;
3
4@include iro.props-namespace('view') {
5 @include iro.bem-component(iro.props-namespace()) {
6 display: none;
7
8 &:target {
9 display: block;
10 }
11 }
12}