summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 16:11:25 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 16:11:25 +0200
commit1cd5b777ee61f6713f532db30a25c53a250ceeff (patch)
treeddd607c27a8f7ed2c8058b8b47d3b74dc5fdd8be
parentUndo (diff)
downloadiro-design-1cd5b777ee61f6713f532db30a25c53a250ceeff.tar.gz
iro-design-1cd5b777ee61f6713f532db30a25c53a250ceeff.tar.bz2
iro-design-1cd5b777ee61f6713f532db30a25c53a250ceeff.zip
Added list styles
-rw-r--r--src/_base.scss12
-rw-r--r--src/_declare-vars.scss2
-rw-r--r--src/_scopes.scss1
-rw-r--r--src/scopes/_blockquotes.scss4
-rw-r--r--src/scopes/_lists.scss52
-rw-r--r--tpl/index.pug2
-rw-r--r--tpl/views/list.pug25
7 files changed, 92 insertions, 6 deletions
diff --git a/src/_base.scss b/src/_base.scss
index cf7ff05..76589d3 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -26,7 +26,7 @@ code {
26 26
27pre, 27pre,
28code { 28code {
29 @include mx.set-font(--mono, (--size: calc(fn.dim(--font-size --100) - 1px))); 29 @include mx.set-font(--mono, (--size: .93em));
30} 30}
31 31
32pre { 32pre {
@@ -78,8 +78,14 @@ small {
78 78
79ul, 79ul,
80ol { 80ol {
81 margin: fn.dim(--paragraph --margin-top) 0 0; 81 margin: 0;
82 padding-left: fn.dim(--list --indent); 82 padding: 0;
83 list-style: none;
84}
85
86li {
87 margin: 0;
88 padding: 0;
83} 89}
84 90
85:focus { 91:focus {
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index b60374d..ae423c1 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -104,7 +104,7 @@
104 ), 104 ),
105 105
106 --list: ( 106 --list: (
107 --indent: 3rem, 107 --indent: fn.dim(--size --400, null),
108 ), 108 ),
109 ), 109 ),
110), 'dims'); 110), 'dims');
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 28c5399..9a9d8ca 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -2,4 +2,5 @@
2@use 'scopes/invisible-links'; 2@use 'scopes/invisible-links';
3@use 'scopes/code'; 3@use 'scopes/code';
4@use 'scopes/blockquotes'; 4@use 'scopes/blockquotes';
5@use 'scopes/lists';
5@use 'scopes/headings'; 6@use 'scopes/headings';
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index 0942542..37dc565 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -4,7 +4,7 @@
4@include iro.props-namespace('blockquotes') { 4@include iro.props-namespace('blockquotes') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --400), 7 --indent: fn.global-dim(--list --indent),
8 --margin-top: fn.global-dim(--paragraph --margin-top), 8 --margin-top: fn.global-dim(--paragraph --margin-top),
9 ) 9 )
10 ), 'dims'); 10 ), 'dims');
@@ -18,7 +18,7 @@
18 @include iro.bem-scope(iro.props-namespace()) { 18 @include iro.bem-scope(iro.props-namespace()) {
19 blockquote { 19 blockquote {
20 margin: fn.dim(--margin-top) 0 0 1px; 20 margin: fn.dim(--margin-top) 0 0 1px;
21 padding-left: calc(fn.dim(--pad-x) - 3px); 21 padding-left: calc(fn.dim(--indent) - 3px);
22 border-left: 3px solid fn.color(--border); 22 border-left: 3px solid fn.color(--border);
23 } 23 }
24 } 24 }
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
new file mode 100644
index 0000000..2ea342f
--- /dev/null
+++ b/src/scopes/_lists.scss
@@ -0,0 +1,52 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('lists') {
5 @include iro.props-store((
6 --dims: (
7 --indent: fn.global-dim(--list --indent),
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 ul,
20 ol {
21 margin-top: fn.dim(--margin-top);
22 padding-left: fn.dim(--indent);
23
24 ul,
25 ol {
26 margin-top: 0;
27 }
28 }
29
30 ul {
31 list-style: disc;
32 }
33
34 ol {
35 list-style: decimal;
36 }
37
38 dl {
39 margin: fn.dim(--margin-top) 0 0;
40 padding: 0;
41 }
42
43 dt {
44 color: fn.global-color(--fg-lo);
45 font-weight: bold;
46 }
47
48 dd {
49 margin: 0 0 0 fn.dim(--indent);
50 }
51 }
52}
diff --git a/tpl/index.pug b/tpl/index.pug
index f5d2f25..854cb4b 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -54,6 +54,7 @@ include views/divider.pug
54include views/colored-links.pug 54include views/colored-links.pug
55include views/code.pug 55include views/code.pug
56include views/blockquote.pug 56include views/blockquote.pug
57include views/list.pug
57include views/badge.pug 58include views/badge.pug
58include views/button.pug 59include views/button.pug
59include views/text-field.pug 60include views/text-field.pug
@@ -94,6 +95,7 @@ html
94 +view-colored-links 95 +view-colored-links
95 +view-code 96 +view-code
96 +view-blockquote 97 +view-blockquote
98 +view-list
97 +view-badge 99 +view-badge
98 +view-button 100 +view-button
99 +view-text-field 101 +view-text-field
diff --git a/tpl/views/list.pug b/tpl/views/list.pug
new file mode 100644
index 0000000..e3e82bb
--- /dev/null
+++ b/tpl/views/list.pug
@@ -0,0 +1,25 @@
1mixin view-list
2 +view('list', 'List')
3 .c-box.s-lists
4 p.u-mt-0= loremIpsum
5 ul
6 li= 'First item'
7 li= 'Number 2'
8 ul
9 li= 'Nested :O'
10 li= 'Another'
11 p= loremIpsum
12 ol
13 li= 'First item'
14 li= 'Number 2'
15 ol
16 li= 'Nested :O'
17 li= 'Another'
18 p= loremIpsum
19 dl
20 dt= 'PHP'
21 dd= 'A server side scripting language.'
22 dt= 'JavaScript'
23 dd= 'A client side scripting language.'
24 p= loremIpsum
25</dl>