summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-12 09:53:20 +0100
committerVolpeon <git@volpeon.ink>2022-03-12 09:53:20 +0100
commit8c4acea85943a34e62299f419e93a8f3ce142bb9 (patch)
treef9df57f1116986f5e55382a21aa45b777d719dbd
parentAdded fixed sizes to badge (diff)
downloadiro-design-8c4acea85943a34e62299f419e93a8f3ce142bb9.tar.gz
iro-design-8c4acea85943a34e62299f419e93a8f3ce142bb9.tar.bz2
iro-design-8c4acea85943a34e62299f419e93a8f3ce142bb9.zip
Added list group
-rw-r--r--src/_config.scss10
-rw-r--r--src/_objects.scss1
-rw-r--r--src/_utils.scss4
-rw-r--r--src/objects/_list-group.scss45
-rw-r--r--tpl/index.pug23
-rw-r--r--tpl/objects/list-group.pug13
-rw-r--r--tpl/objects/text-field.pug3
7 files changed, 88 insertions, 11 deletions
diff --git a/src/_config.scss b/src/_config.scss
index cdbd02c..8520b9e 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -20,12 +20,12 @@ $wanted-grays: (
20 --2: -1.1, 20 --2: -1.1,
21 --3: 1, 21 --3: 1,
22 22
23 --4: 1.15, 23 --4: 1.1,
24 --5: 1.3, 24 --5: 1.25,
25 --6: 1.7, 25 --6: 1.5,
26 26
27 --7: 2.4, 27 --7: 2.2,
28 --8: 3.3, 28 --8: 3.1,
29 --9: 6, 29 --9: 6,
30 --10: 11, 30 --10: 11,
31 --11: 19, 31 --11: 19,
diff --git a/src/_objects.scss b/src/_objects.scss
index 4049101..ce91f5b 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -16,3 +16,4 @@
16@use 'objects/backdrop'; 16@use 'objects/backdrop';
17@use 'objects/dialog'; 17@use 'objects/dialog';
18@use 'objects/lightbox'; 18@use 'objects/lightbox';
19@use 'objects/list-group';
diff --git a/src/_utils.scss b/src/_utils.scss
index ce0220a..1969a82 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -63,7 +63,7 @@ $dirs: (
63 margin#{$suffix}: auto; 63 margin#{$suffix}: auto;
64 } 64 }
65 65
66 @each $size in (0 10 50 100 200) { 66 @each $size in (0 10 50 100 200 400) {
67 @include iro.bem-utility('m#{$dir}-#{$size}') { 67 @include iro.bem-utility('m#{$dir}-#{$size}') {
68 margin#{$suffix}: fn.global-dim(--size --#{$size}); 68 margin#{$suffix}: fn.global-dim(--size --#{$size});
69 } 69 }
@@ -75,7 +75,7 @@ $dirs: (
75 padding#{$suffix}: auto; 75 padding#{$suffix}: auto;
76 } 76 }
77 77
78 @each $size in (0 10 50 100 200) { 78 @each $size in (0 10 50 100 200 400) {
79 @include iro.bem-utility('p#{$dir}-#{$size}') { 79 @include iro.bem-utility('p#{$dir}-#{$size}') {
80 padding#{$suffix}: fn.global-dim(--size --#{$size}); 80 padding#{$suffix}: fn.global-dim(--size --#{$size});
81 } 81 }
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss
new file mode 100644
index 0000000..521bc19
--- /dev/null
+++ b/src/objects/_list-group.scss
@@ -0,0 +1,45 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('list-group') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --175),
8 --pad-y: fn.global-dim(--size --125),
9 --rounding: 3px,
10 ),
11 ), 'dims');
12
13 @include iro.props-store((
14 --colors: (
15 --bg: fn.global-color(--bg-hi2),
16 --border: fn.global-color(--obj),
17 --hover: fn.global-color(--bg),
18 --press: fn.global-color(--obj-hi),
19 )
20 ), 'colors');
21
22 @include iro.bem-object(iro.props-namespace()) {
23 border: 1px solid fn.color(--border);
24 border-radius: fn.dim(--rounding);
25 background-color: fn.color(--bg);
26
27 @include iro.bem-elem('item') {
28 padding: fn.dim(--pad-y) fn.dim(--pad-x);
29
30 @include iro.bem-next-twin-elem {
31 border-top: 1px solid fn.color(--border);
32 }
33
34 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'action') {
35 &:hover {
36 background-color: fn.color(--hover);
37 }
38
39 &:active {
40 background-color: fn.color(--press);
41 }
42 }
43 }
44 }
45}
diff --git a/tpl/index.pug b/tpl/index.pug
index f682c26..e1a6445 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -21,9 +21,10 @@ include objects/menu.pug
21include objects/backdrop.pug 21include objects/backdrop.pug
22include objects/dialog.pug 22include objects/dialog.pug
23include objects/lightbox.pug 23include objects/lightbox.pug
24include objects/list-group.pug
24 25
25mixin box 26mixin box
26 +container(padX=true padY=true inPage=true theme="raised") 27 +container(padX=true padY=true inPage=true)
27 block 28 block
28 29
29mixin user-card(name, hue) 30mixin user-card(name, hue)
@@ -558,7 +559,6 @@ html
558 +slot('body') 559 +slot('body')
559 p.u-mt-0= loremIpsum 560 p.u-mt-0= loremIpsum
560 561
561
562 //----------------------------------------- 562 //-----------------------------------------
563 563
564 +h1-heading('xl')= 'Lightbox' 564 +h1-heading('xl')= 'Lightbox'
@@ -577,4 +577,23 @@ html
577 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") 577 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
578 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" 578 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
579 579
580 //-----------------------------------------
581
582 +h1-heading('xl')= 'List group'
583 +rule('medium')
584
585 +box
586 +list-group
587 +list-group-item= 'First item'
588 +list-group-item= 'Second item'
589 +list-group-item= 'Third item'
590 +list-group-item= 'Fourth item'
591
592 +box
593 +list-group
594 +list-group-item(action=true)= 'First item'
595 +list-group-item(action=true)= 'Second item'
596 +list-group-item(action=true)= 'Third item'
597 +list-group-item(action=true)= 'Fourth item'
598
580 599
diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug
new file mode 100644
index 0000000..36be264
--- /dev/null
+++ b/tpl/objects/list-group.pug
@@ -0,0 +1,13 @@
1mixin list-group
2 .o-list-group
3 block
4
5mixin list-group-item
6 -
7 let classes = {
8 'o-list-group__item': true,
9 'o-list-group__item--action': attributes.action,
10 }
11
12 div(class=classes)
13 block
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 2e9827b..cbdb8c4 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -16,8 +16,7 @@ mixin text-field
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-card': !!block, 17 'l-card': !!block,
18 'l-card--flush': !!block, 18 'l-card--flush': !!block,
19 'l-card--gapless': !!block, 19 'l-card--gapless': !!block
20 'u-p-xs': !!block
21 } 20 }
22 21
23 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 22 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))