summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/layouts/_media.scss4
-rw-r--r--src/objects/_list-group.scss17
-rw-r--r--tpl/objects/list-group.pug8
-rw-r--r--tpl/views/list-group.pug7
4 files changed, 34 insertions, 2 deletions
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 61f3cda..d276d33 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -54,6 +54,10 @@
54 gap: 0; 54 gap: 0;
55 } 55 }
56 56
57 @include iro.bem-modifier('wrap') {
58 flex-wrap: wrap;
59 }
60
57 @include iro.bem-elem('block') { 61 @include iro.bem-elem('block') {
58 flex: 0 0 auto; 62 flex: 0 0 auto;
59 63
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss
index 1093ad8..d46722e 100644
--- a/src/objects/_list-group.scss
+++ b/src/objects/_list-group.scss
@@ -28,7 +28,9 @@
28 padding: fn.dim(--pad-y) fn.dim(--pad-x); 28 padding: fn.dim(--pad-y) fn.dim(--pad-x);
29 29
30 @include iro.bem-next-twin-elem { 30 @include iro.bem-next-twin-elem {
31 border-top: 1px solid fn.color(--border); 31 border-width: 1px 0 0;
32 border-style: solid;
33 border-color: fn.color(--border);
32 } 34 }
33 35
34 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 36 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
@@ -41,5 +43,18 @@
41 } 43 }
42 } 44 }
43 } 45 }
46
47 @include iro.bem-modifier('horizontal') {
48 display: flex;
49
50 @include iro.bem-elem('item') {
51 flex: 1 0 auto;
52
53 @include iro.bem-next-twin-elem {
54 border-top-width: 0;
55 border-left-width: 1px;
56 }
57 }
58 }
44 } 59 }
45} 60}
diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug
index ad3c212..e9db236 100644
--- a/tpl/objects/list-group.pug
+++ b/tpl/objects/list-group.pug
@@ -1,5 +1,11 @@
1mixin list-group 1mixin list-group
2 .o-list-group 2 -
3 let classes = {
4 'o-list-group': true,
5 'o-list-group--horizontal': attributes.horizontal,
6 }
7
8 div(class=classes)
3 block 9 block
4 10
5mixin list-group-item 11mixin list-group-item
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug
index 9acef31..9c6b132 100644
--- a/tpl/views/list-group.pug
+++ b/tpl/views/list-group.pug
@@ -13,3 +13,10 @@ mixin view-list-group
13 +list-group-item(interactive=true)= 'Second item' 13 +list-group-item(interactive=true)= 'Second item'
14 +list-group-item(interactive=true)= 'Third item' 14 +list-group-item(interactive=true)= 'Third item'
15 +list-group-item(interactive=true)= 'Fourth item' 15 +list-group-item(interactive=true)= 'Fourth item'
16
17 .c-box
18 +list-group(horizontal=true)
19 +list-group-item(interactive=true)= 'First item'
20 +list-group-item(interactive=true)= 'Second item'
21 +list-group-item(interactive=true)= 'Third item'
22 +list-group-item(interactive=true)= 'Fourth item'