summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-11-09 15:44:54 +0100
committerVolpeon <git@volpeon.ink>2023-11-09 15:44:54 +0100
commit679b9b108101b67ad56b4fdf35ec2bd0568d8d84 (patch)
tree1b097e9f90627ca401174c738a8d754e8f2cce6b
parentSimplified bubble arrows (diff)
downloadiro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.tar.gz
iro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.tar.bz2
iro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.zip
Renamed "bubble" to "message", added message group merging
Diffstat
-rw-r--r--src/_layouts.scss2
-rw-r--r--src/_objects.scss2
-rw-r--r--src/layouts/_message-group.scss (renamed from src/layouts/_bubble-group.scss)47
-rw-r--r--src/objects/_bubble.scss45
-rw-r--r--src/objects/_message.scss51
-rw-r--r--tpl/index.pug12
-rw-r--r--tpl/objects/bubble-group.pug17
-rw-r--r--tpl/objects/message-group.pug19
-rw-r--r--tpl/objects/message.pug (renamed from tpl/objects/bubble.pug)20
-rw-r--r--tpl/views/bubble-group.pug59
-rw-r--r--tpl/views/message-group.pug110
-rw-r--r--tpl/views/message.pug (renamed from tpl/views/bubble.pug)12
12 files changed, 243 insertions, 153 deletions
diff --git a/src/_layouts.scss b/src/_layouts.scss
index cc8b1c5..26cfe3f 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -4,4 +4,4 @@
4@use 'layouts/form'; 4@use 'layouts/form';
5@use 'layouts/flex'; 5@use 'layouts/flex';
6@use 'layouts/overflow'; 6@use 'layouts/overflow';
7@use 'layouts/bubble-group'; 7@use 'layouts/message-group';
diff --git a/src/_objects.scss b/src/_objects.scss
index faa45bd..578de0c 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -13,7 +13,7 @@
13@use 'objects/overflow-button'; 13@use 'objects/overflow-button';
14@use 'objects/status-indicator'; 14@use 'objects/status-indicator';
15@use 'objects/avatar'; 15@use 'objects/avatar';
16@use 'objects/bubble'; 16@use 'objects/message';
17@use 'objects/action-menu'; 17@use 'objects/action-menu';
18@use 'objects/menu'; 18@use 'objects/menu';
19@use 'objects/icon-nav'; 19@use 'objects/icon-nav';
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_message-group.scss
index e4bc666..d95c9e8 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_message-group.scss
@@ -1,7 +1,9 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4@include iro.props-namespace('bubble-group') { 4@use '../objects/message';
5
6@include iro.props-namespace('message-group') {
5 @include iro.props-store(( 7 @include iro.props-store((
6 --dims: ( 8 --dims: (
7 --spacing-x: fn.global-dim(--size --225), 9 --spacing-x: fn.global-dim(--size --225),
@@ -19,16 +21,17 @@
19 display: grid; 21 display: grid;
20 grid-template-columns: auto 1fr; 22 grid-template-columns: auto 1fr;
21 grid-auto-rows: auto; 23 grid-auto-rows: auto;
22 grid-template-areas: 'avatar bubble' 'avatar .'; 24 grid-template-areas: 'avatar message' 'avatar .';
23 align-items: flex-start; 25 align-items: flex-start;
24 gap: 0 fn.dim(--spacing-x); 26 gap: 0 fn.dim(--spacing-x);
25 27
26 @include iro.bem-elem('avatar') { 28 @include iro.bem-elem('avatar') {
27 grid-area: avatar; 29 grid-area: avatar;
30 height: 0;
28 } 31 }
29 32
30 @include iro.bem-elem('bubble') { 33 @include iro.bem-elem('message') {
31 grid-column: bubble; 34 grid-column: message;
32 box-sizing: border-box; 35 box-sizing: border-box;
33 min-width: 0; 36 min-width: 0;
34 max-width: 100%; 37 max-width: 100%;
@@ -50,7 +53,7 @@
50 } 53 }
51 54
52 @include iro.bem-modifier('right') { 55 @include iro.bem-modifier('right') {
53 @include iro.bem-elem('bubble') { 56 @include iro.bem-elem('message') {
54 &::before { 57 &::before {
55 right: calc(-1 * fn.dim(--arrow-size)); 58 right: calc(-1 * fn.dim(--arrow-size));
56 left: auto; 59 left: auto;
@@ -71,7 +74,7 @@
71 justify-items: end; 74 justify-items: end;
72 } 75 }
73 76
74 @include iro.bem-elem('bubble') { 77 @include iro.bem-elem('message') {
75 @include iro.bem-next-twin-elem { 78 @include iro.bem-next-twin-elem {
76 margin-top: fn.dim(--compact --spacing-y); 79 margin-top: fn.dim(--compact --spacing-y);
77 } 80 }
@@ -80,12 +83,12 @@
80 83
81 @include iro.bem-modifier('right') { 84 @include iro.bem-modifier('right') {
82 grid-template-columns: 1fr auto; 85 grid-template-columns: 1fr auto;
83 grid-template-areas: 'bubble avatar' '. avatar'; 86 grid-template-areas: 'message avatar' '. avatar';
84 } 87 }
85 88
86 @include iro.bem-modifier('no-avatar') { 89 @include iro.bem-modifier('no-avatar') {
87 grid-template-columns: 1fr; 90 grid-template-columns: 1fr;
88 grid-template-areas: 'bubble'; 91 grid-template-areas: 'message';
89 92
90 @include iro.bem-elem('avatar') { 93 @include iro.bem-elem('avatar') {
91 display: none; 94 display: none;
@@ -93,7 +96,7 @@
93 } 96 }
94 97
95 @include iro.bem-modifier('arrow') { 98 @include iro.bem-modifier('arrow') {
96 @include iro.bem-elem('bubble') { 99 @include iro.bem-elem('message') {
97 &::before { 100 &::before {
98 display: block; 101 display: block;
99 } 102 }
@@ -105,5 +108,31 @@
105 } 108 }
106 } 109 }
107 } 110 }
111
112 & + & {
113 @include iro.bem-modifier('merge') {
114 margin-top: fn.dim(--spacing-y);
115
116 @include iro.bem-elem('avatar') {
117 visibility: hidden;
118 }
119
120 @include iro.bem-modifier('compact') {
121 margin-top: fn.dim(--compact --spacing-y);
122 }
123
124 @include iro.bem-elem('merge-hide') {
125 display: none;
126 }
127
128 @include iro.bem-modifier('arrow') {
129 @include iro.bem-elem('message') {
130 &::before {
131 display: none;
132 }
133 }
134 }
135 }
136 }
108 } 137 }
109} 138}
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
deleted file mode 100644
index d91b6d1..0000000
--- a/src/objects/_bubble.scss
+++ /dev/null
@@ -1,45 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('bubble') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --200),
8 --pad-y: fn.global-dim(--size --150),
9 --rounding: 0,
10
11 --75: (
12 --pad-x: fn.global-dim(--size --150),
13 --pad-y: fn.global-dim(--size --85),
14 ),
15 )
16 ), 'dims');
17
18 @include iro.props-store((
19 --colors: (
20 --highlight: fn.global-color(--fg-lo),
21 ),
22 ), 'colors');
23
24 @include iro.bem-object(iro.props-namespace()) {
25 position: relative;
26 padding: fn.dim(--pad-y) fn.dim(--pad-x);
27 border-radius: fn.dim(--rounding);
28 background-color: fn.global-color(--bg);
29 color: fn.global-color(--fg);
30
31 @include iro.bem-modifier('highlight') {
32 box-shadow: -3px 0 0 0 fn.color(--highlight);
33 }
34
35 @include iro.bem-elem('suffix') {
36 margin-left: 1em;
37 float: right;
38 transform: translate(.2em, .2em);
39 }
40
41 @include iro.bem-modifier('75') {
42 padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x);
43 }
44 }
45}
diff --git a/src/objects/_message.scss b/src/objects/_message.scss
new file mode 100644
index 0000000..283ce26
--- /dev/null
+++ b/src/objects/_message.scss
@@ -0,0 +1,51 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('message') {
5 @include iro.props-store((
6 --dims: (
7 --bubble: (
8 --pad-x: fn.global-dim(--size --200),
9 --pad-y: fn.global-dim(--size --150),
10 --rounding: 0,
11
12 --75: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 ),
16 ),
17 )
18 ), 'dims');
19
20 @include iro.props-store((
21 --colors: (
22 --highlight: fn.global-color(--fg-lo),
23 ),
24 ), 'colors');
25
26 @include iro.bem-object(iro.props-namespace()) {
27 @include iro.bem-elem('suffix') {
28 margin-left: 1em;
29 float: right;
30 }
31
32 @include iro.bem-modifier('bubble') {
33 padding: fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x);
34 border-radius: fn.dim(--bubble --rounding);
35 background-color: fn.global-color(--bg);
36 color: fn.global-color(--fg);
37
38 @include iro.bem-elem('suffix') {
39 transform: translate(.2em, .2em);
40 }
41
42 @include iro.bem-modifier('highlight') {
43 box-shadow: -3px 0 0 0 fn.color(--highlight);
44 }
45
46 @include iro.bem-modifier('75') {
47 padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x);
48 }
49 }
50 }
51}
diff --git a/tpl/index.pug b/tpl/index.pug
index d87fec8..de481f2 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -30,8 +30,8 @@ include objects/lightbox.pug
30include objects/list-group.pug 30include objects/list-group.pug
31include objects/table.pug 31include objects/table.pug
32include objects/alert.pug 32include objects/alert.pug
33include objects/bubble.pug 33include objects/message.pug
34include objects/bubble-group.pug 34include objects/message-group.pug
35 35
36mixin view(id, title) 36mixin view(id, title)
37 - 37 -
@@ -78,8 +78,8 @@ include views/lightbox.pug
78include views/list-group.pug 78include views/list-group.pug
79include views/table.pug 79include views/table.pug
80include views/alert.pug 80include views/alert.pug
81include views/bubble.pug 81include views/message.pug
82include views/bubble-group.pug 82include views/message-group.pug
83include views/emoji.pug 83include views/emoji.pug
84 84
85 85
@@ -122,8 +122,8 @@ html
122 +view-list-group 122 +view-list-group
123 +view-table 123 +view-table
124 +view-alert 124 +view-alert
125 +view-bubble 125 +view-message
126 +view-bubble-group 126 +view-message-group
127 127
128 .c-sidebar.l-overflow.u-themed.t-up.u-p-75 128 .c-sidebar.l-overflow.u-themed.t-up.u-p-75
129 +menu 129 +menu
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
deleted file mode 100644
index 4fcb1a4..0000000
--- a/tpl/objects/bubble-group.pug
+++ /dev/null
@@ -1,17 +0,0 @@
1mixin bubble-group(user)
2 -
3 let classes = {
4 'l-bubble-group': true,
5 'l-bubble-group--compact': attributes.compact,
6 'l-bubble-group--left': attributes.left,
7 'l-bubble-group--right': attributes.right,
8 'l-bubble-group--arrow': attributes.arrow
9 }
10 if (attributes.class) {
11 classes[attributes.class] = true
12 }
13
14 section(class=classes)
15 .l-bubble-group__avatar.u-p-sticky-top
16 +avatar= user.slice(0, 2)
17 block
diff --git a/tpl/objects/message-group.pug b/tpl/objects/message-group.pug
new file mode 100644
index 0000000..e5e055c
--- /dev/null
+++ b/tpl/objects/message-group.pug
@@ -0,0 +1,19 @@
1mixin message-group(user)
2 -
3 let classes = {
4 'l-message-group': true,
5 'l-message-group--compact': attributes.compact,
6 'l-message-group--left': attributes.left,
7 'l-message-group--right': attributes.right,
8 'l-message-group--arrow': attributes.arrow,
9 'l-message-group--group': attributes.group,
10 'l-message-group--merge': attributes.merge
11 }
12 if (attributes.class) {
13 classes[attributes.class] = true
14 }
15
16 section(class=classes)
17 .l-message-group__avatar.u-p-sticky-top
18 +avatar= user.slice(0, 2)
19 block
diff --git a/tpl/objects/bubble.pug b/tpl/objects/message.pug
index 6a3ea8b..d644347 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/message.pug
@@ -1,4 +1,4 @@
1mixin bubble(user) 1mixin message(user)
2 - const slots = {} 2 - const slots = {}
3 3
4 mixin slot(key) 4 mixin slot(key)
@@ -8,10 +8,11 @@ mixin bubble(user)
8 block ? block() : undefined 8 block ? block() : undefined
9 9
10 let classes = { 10 let classes = {
11 'o-bubble': true, 11 'o-message': true,
12 'o-bubble--75': attributes.compact, 12 'o-message--bubble': attributes.bubble || !!attributes.theme,
13 'o-bubble--highlight': attributes.highlight, 13 'o-message--75': attributes.compact,
14 't-up': !attributes.theme 14 'o-message--highlight': attributes.highlight,
15 'l-message-group__message': attributes.group
15 } 16 }
16 if (attributes.class) { 17 if (attributes.class) {
17 classes[attributes.class] = true 18 classes[attributes.class] = true
@@ -21,8 +22,9 @@ mixin bubble(user)
21 } 22 }
22 23
23 let headerClasses = { 24 let headerClasses = {
24 'o-bubble__header': true, 25 'o-message__header': true,
25 'u-mb-50': !attributes.compact, 26 'l-message-group__merge-hide': true,
27 'u-mb-50': !attributes.compact,
26 } 28 }
27 29
28 mixin content 30 mixin content
@@ -35,10 +37,10 @@ mixin bubble(user)
35 span.s-links.s-links--colored 37 span.s-links.s-links--colored
36 - slots.body() 38 - slots.body()
37 if slots.time 39 if slots.time
38 small.o-bubble__suffix 40 small.o-message__suffix
39 - slots.time() 41 - slots.time()
40 if slots.footer 42 if slots.footer
41 footer.o-bubble__footer 43 footer.o-message__footer
42 - slots.footer() 44 - slots.footer()
43 45
44 article(class=classes) 46 article(class=classes)
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
deleted file mode 100644
index dcdbe73..0000000
--- a/tpl/views/bubble-group.pug
+++ /dev/null
@@ -1,59 +0,0 @@
1mixin view-bubble-group
2 +view('bubble-group', 'Bubble group')
3 .c-box.l-overflow(style='resize: vertical')
4 +bubble-group('Volpeon')(compact=true arrow=true left=true)
5 +bubble('Volpeon')(compact=true class='l-bubble-group__bubble')
6 +slot('body')= 'Compact bubbles test'
7 +slot('time')= '12:34'
8 +bubble()(compact=true class='l-bubble-group__bubble')
9 +slot('body')= loremIpsum
10 +slot('time')= '12:35'
11 +bubble()(compact=true class='l-bubble-group__bubble')
12 +slot('body')= 'qwertzuiop'
13 +slot('time')= '12:36'
14 +bubble()(compact=true class='l-bubble-group__bubble')
15 +slot('body')= '🐈️🦊️'
16 +slot('time')= '12:38'
17 +bubble()(compact=true class='l-bubble-group__bubble')
18 +slot('body')= loremIpsum
19 +slot('time')= '12:39'
20
21 .c-box.l-overflow(style='resize: vertical')
22 +bubble-group('Volpeon')(compact=true right=true)
23 strong= 'Volpeon'
24 +bubble()(compact=true class='l-bubble-group__bubble')
25 +slot('body')= 'Compact bubbles test'
26 +slot('time')= '12:34'
27 +bubble()(compact=true class='l-bubble-group__bubble')
28 +slot('body')= loremIpsum
29 +slot('time')= '12:35'
30 +bubble()(compact=true class='l-bubble-group__bubble')
31 +slot('body')= 'qwertzuiop'
32 +slot('time')= '12:36'
33 +bubble()(compact=true class='l-bubble-group__bubble')
34 +slot('body')= '🐈️🦊️'
35 +slot('time')= '12:38'
36 +bubble()(compact=true class='l-bubble-group__bubble')
37 +slot('body')= loremIpsum
38 +slot('time')= '12:39'
39
40 .c-box.l-overflow(style='resize: vertical')
41 +bubble-group('Volpeon')
42 +bubble()(class='l-bubble-group__bubble')
43 +slot('header')
44 .l-media.l-media--flush
45 .l-media__block.l-media__block--main
46 strong= 'Volpeon'
47 small.u-ml-100= '@volpeon@mk.vulpes.one'
48 small.l-media__block
49 = '5 minutes ago'
50 +icon('lock')(class='u-ml-100')
51 +slot('body')= 'Full width bubbles test'
52 +bubble()(class='l-bubble-group__bubble')
53 +slot('body')= loremIpsum
54 +bubble()(class='l-bubble-group__bubble')
55 +slot('body')= 'qwertzuiop'
56 +bubble()(class='l-bubble-group__bubble')
57 +slot('body')= '🐈️🦊️'
58 +bubble()(class='l-bubble-group__bubble')
59 +slot('body')= loremIpsum
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
new file mode 100644
index 0000000..3d1166f
--- /dev/null
+++ b/tpl/views/message-group.pug
@@ -0,0 +1,110 @@
1mixin sample-message-group
2 +message-group('Volpeon')&attributes(attributes)
3 +message()(theme=attributes.theme group=true compact=attributes.compact)
4 +slot('header')
5 strong= 'Volpeon'
6 +slot('body')
7 block
8 +slot('time')= '12:34'
9
10mixin view-message-group
11 +view('message-group', 'Message group')
12 .c-box.l-overflow(style='resize: vertical')
13 +message-group('Volpeon')
14 +message('Volpeon')(group=true)
15 +slot('body')= 'Inline messages test'
16 +slot('time')= '12:35'
17 +message()(group=true)
18 +slot('body')= loremIpsum
19 +slot('time')= '12:35'
20 +message()(group=true)
21 +slot('body')= 'qwertzuiop'
22 +slot('time')= '12:35'
23 +message()(group=true)
24 +slot('body')= '🐈️🦊️'
25 +slot('time')= '12:35'
26 +message()(group=true)
27 +slot('body')= loremIpsum
28 +slot('time')= '12:35'
29
30 .c-box.l-overflow(style='resize: vertical')
31 +message-group('Volpeon')(compact=true arrow=true left=true)
32 +message('Volpeon')(theme='t-up' compact=true group=true)
33 +slot('body')= 'Compact bubble messages test'
34 +slot('time')= '12:34'
35 +message()(theme='t-up' compact=true group=true)
36 +slot('body')= loremIpsum
37 +slot('time')= '12:35'
38 +message()(theme='t-up' compact=true group=true)
39 +slot('body')= 'qwertzuiop'
40 +slot('time')= '12:36'
41 +message()(theme='t-up' compact=true group=true)
42 +slot('body')= '🐈️🦊️'
43 +slot('time')= '12:38'
44 +message()(theme='t-up' compact=true group=true)
45 +slot('body')= loremIpsum
46 +slot('time')= '12:39'
47
48 .c-box.l-overflow(style='resize: vertical')
49 +message-group('Volpeon')(compact=true right=true)
50 strong.l-message-group__message= 'Volpeon'
51 +message()(theme='t-up' compact=true group=true)
52 +slot('body')= 'Compact bubble messages test'
53 +slot('time')= '12:34'
54 +message()(theme='t-up' compact=true group=true)
55 +slot('body')= loremIpsum
56 +slot('time')= '12:35'
57 +message()(theme='t-up' compact=true group=true)
58 +slot('body')= 'qwertzuiop'
59 +slot('time')= '12:36'
60 +message()(theme='t-up' compact=true group=true)
61 +slot('body')= '🐈️🦊️'
62 +slot('time')= '12:38'
63 +message()(theme='t-up' compact=true group=true)
64 +slot('body')= loremIpsum
65 +slot('time')= '12:39'
66
67 .c-box.l-overflow(style='resize: vertical')
68 +message-group('Volpeon')
69 +message()(theme='t-up' group=true)
70 +slot('header')
71 .l-media.l-media--flush
72 .l-media__block.l-media__block--main
73 strong= 'Volpeon'
74 small.u-ml-100= '@volpeon@mk.vulpes.one'
75 small.l-media__block
76 = '5 minutes ago'
77 +icon('lock')(class='u-ml-100')
78 +slot('body')= 'Full width bubble messages test'
79 +message()(theme='t-up' group=true)
80 +slot('body')= loremIpsum
81 +message()(theme='t-up' group=true)
82 +slot('body')= 'qwertzuiop'
83 +message()(theme='t-up' group=true)
84 +slot('body')= '🐈️🦊️'
85 +message()(theme='t-up' group=true)
86 +slot('body')= loremIpsum
87
88 .c-box.l-overflow(style='resize: vertical')
89 +sample-message-group()(merge=false)= 'Inline message group merging'
90 +sample-message-group()(merge=true)= 'qwertzuiop'
91 +sample-message-group()(merge=true)= '🐈️🦊️'
92 +sample-message-group()(merge=true)= loremIpsum
93
94 .c-box.l-overflow(style='resize: vertical')
95 +sample-message-group()(theme='t-up' merge=false)= 'Bubble message group merging'
96 +sample-message-group()(theme='t-up' merge=true)= 'qwertzuiop'
97 +sample-message-group()(theme='t-up' merge=true)= '🐈️🦊️'
98 +sample-message-group()(theme='t-up' merge=true)= loremIpsum
99
100 .c-box.l-overflow(style='resize: vertical')
101 +sample-message-group()(theme='t-up' merge=false compact=true arrow=true left=true)= 'Bubble message group merging'
102 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= 'qwertzuiop'
103 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= '🐈️🦊️'
104 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= loremIpsum
105
106 .c-box.l-overflow(style='resize: vertical')
107 +sample-message-group()(theme='t-up' merge=false compact=true arrow=true right=true)= 'Bubble message group merging'
108 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= 'qwertzuiop'
109 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= '🐈️🦊️'
110 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= loremIpsum
diff --git a/tpl/views/bubble.pug b/tpl/views/message.pug
index 84d0912..f256e41 100644
--- a/tpl/views/bubble.pug
+++ b/tpl/views/message.pug
@@ -1,22 +1,22 @@
1mixin view-bubble 1mixin view-message
2 +view('bubble', 'Bubble') 2 +view('message', 'Message')
3 .c-box 3 .c-box
4 +bubble('Volpeon')(compact=true) 4 +message('Volpeon')(compact=true theme='t-up')
5 +slot('body')= loremIpsum 5 +slot('body')= loremIpsum
6 +slot('time') 6 +slot('time')
7 = '12:34' 7 = '12:34'
8 +icon('lock')(class='u-ml-100') 8 +icon('lock')(class='u-ml-100')
9 9
10 .c-box 10 .c-box
11 +bubble('Volpeon')(compact=true, highlight=true) 11 +message('Volpeon')(compact=true highlight=true theme='t-up')
12 +slot('body')= loremIpsum 12 +slot('body')= loremIpsum
13 13
14 .c-box.u-themed.t-hi 14 .c-box.u-themed.t-hi
15 +bubble()(compact=true theme='t-def') 15 +message()(compact=true bubble=true theme='t-def')
16 +slot('body')= loremIpsum 16 +slot('body')= loremIpsum
17 17
18 .c-box.l-overflow(style='resize: vertical') 18 .c-box.l-overflow(style='resize: vertical')
19 +bubble('Volpeon')(avatar=true) 19 +message('Volpeon')(avatar=true theme='t-up')
20 +slot('header') 20 +slot('header')
21 .l-media.l-media--flush 21 .l-media.l-media--flush
22 .l-media__block.l-media__block--main 22 .l-media__block.l-media__block--main
generated by cgit v1.2.3-54-g00ecf (git 2.44.0) at 2024-05-19 15:32:09 +0000