summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_apply-vars.scss10
-rw-r--r--src/_declare-vars.scss2
-rw-r--r--src/layouts/_bubble-group.scss21
-rw-r--r--src/objects/_bubble.scss22
-rw-r--r--tpl/objects/bubble-group.pug13
-rw-r--r--tpl/objects/bubble.pug39
-rw-r--r--tpl/views/bubble-group.pug43
-rw-r--r--tpl/views/bubble.pug21
8 files changed, 127 insertions, 44 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 0bdc3a8..052eeb0 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -25,6 +25,16 @@
25 @include iro.props-assign('palette-dark'); 25 @include iro.props-assign('palette-dark');
26} 26}
27 27
28@include iro.bem-theme('def') {
29 @include iro.props-assign('colors');
30 @include iro.props-assign('palette-light');
31
32 @media (prefers-color-scheme: dark) {
33 @include iro.props-assign('colors-dark');
34 @include iro.props-assign('palette-dark');
35 }
36}
37
28@include iro.bem-theme('hi') { 38@include iro.bem-theme('hi') {
29 @include iro.props-assign('colors'); 39 @include iro.props-assign('colors');
30 @include iro.props-assign('palette-light-hi'); 40 @include iro.props-assign('palette-light-hi');
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 883b753..c28cbb2 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -187,7 +187,7 @@
187 187
188@include iro.props-store(( 188@include iro.props-store((
189 --colors: ( 189 --colors: (
190 --gray: fn.gray-palette(6%), 190 --gray: fn.gray-palette(5%),
191 ), 191 ),
192), 'palette-dark-hi'); 192), 'palette-dark-hi');
193 193
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index 4db70d0..7593881 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -14,7 +14,6 @@
14 grid-template-columns: auto 1fr; 14 grid-template-columns: auto 1fr;
15 grid-auto-rows: auto; 15 grid-auto-rows: auto;
16 grid-template-areas: 'avatar bubble'; 16 grid-template-areas: 'avatar bubble';
17 justify-items: start;
18 align-items: flex-start; 17 align-items: flex-start;
19 gap: fn.dim(--spacing-y) fn.dim(--spacing-x); 18 gap: fn.dim(--spacing-y) fn.dim(--spacing-x);
20 19
@@ -23,16 +22,24 @@
23 position: sticky; 22 position: sticky;
24 top: 0; 23 top: 0;
25 justify-self: end; 24 justify-self: end;
26
27 @include iro.bem-next-elem('bubble') {
28 &::before {
29 display: block;
30 }
31 }
32 } 25 }
33 26
34 @include iro.bem-elem('bubble') { 27 @include iro.bem-elem('bubble') {
35 grid-column: bubble; 28 grid-column: bubble;
36 } 29 }
30
31 @include iro.bem-modifier('compact') {
32 justify-items: start;
33 }
34
35 @include iro.bem-modifier('arrow') {
36 @include iro.bem-elem('avatar') {
37 @include iro.bem-next-elem('bubble') {
38 &::before {
39 display: block;
40 }
41 }
42 }
43 }
37 } 44 }
38} 45}
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index 26746fe..41b26ff 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -10,15 +10,24 @@
10 10
11 @include iro.props-store(( 11 @include iro.props-store((
12 --dims: ( 12 --dims: (
13 --pad-x: fn.global-dim(--size --150), 13 --pad-x: fn.global-dim(--size --200),
14 --pad-y: fn.global-dim(--size --85), 14 --pad-y: fn.global-dim(--size --150),
15 --rounding: 3px, 15 --rounding: 3px,
16 --arrow-size: fn.global-dim(--size --100), 16 --arrow-size: fn.global-dim(--size --100),
17 --spacing: fn.global-dim(--size --100),
18
19 --compact: (
20 --pad-x: fn.global-dim(--size --150),
21 --pad-y: fn.global-dim(--size --85),
22 ),
17 ) 23 )
18 ), 'dims'); 24 ), 'dims');
19 25
20 @include iro.bem-object(iro.props-namespace()) { 26 @include iro.bem-object(iro.props-namespace()) {
27 display: flex;
21 position: relative; 28 position: relative;
29 flex-direction: column;
30 gap: fn.dim(--spacing);
22 padding: fn.dim(--pad-y) fn.dim(--pad-x); 31 padding: fn.dim(--pad-y) fn.dim(--pad-x);
23 border-radius: fn.dim(--rounding); 32 border-radius: fn.dim(--rounding);
24 background-color: fn.global-color(--bg); 33 background-color: fn.global-color(--bg);
@@ -34,15 +43,16 @@
34 border-bottom-color: transparent; 43 border-bottom-color: transparent;
35 border-left-color: transparent; 44 border-left-color: transparent;
36 } 45 }
37
38 @include iro.bem-elem('user') {
39 display: block;
40 }
41 46
42 @include iro.bem-elem('time') { 47 @include iro.bem-elem('time') {
43 margin-left: 1em; 48 margin-left: 1em;
44 float: right; 49 float: right;
45 transform: translate(.2em, .2em); 50 transform: translate(.2em, .2em);
46 } 51 }
52
53 @include iro.bem-modifier('compact') {
54 gap: 0;
55 padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x);
56 }
47 } 57 }
48} 58}
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index c2e502a..2b960f0 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -1,16 +1,9 @@
1mixin bubble-group(user) 1mixin bubble-group(user)
2 - 2 -
3 let first = true
4
5 mixin bubble-group-bubble(time)
6 +bubble(time, first ? user : undefined)(class='l-bubble-group__bubble')
7 block
8 -
9 first = false
10
11 -
12 let classes = { 3 let classes = {
13 'l-bubble-group': true 4 'l-bubble-group': true,
5 'l-bubble-group--compact': attributes.compact,
6 'l-bubble-group--arrow': attributes.arrow
14 } 7 }
15 if (attributes.class) { 8 if (attributes.class) {
16 classes[attributes.class] = true 9 classes[attributes.class] = true
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index a79f119..681661c 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -1,21 +1,36 @@
1mixin bubble(time, user) 1mixin bubble(user)
2 - const slots = {}
3
4 mixin slot(key)
5 - slots[key] = block
6
2 - 7 -
8 block ? block() : undefined
9
3 let classes = { 10 let classes = {
4 'o-bubble': true, 11 'o-bubble': true,
5 't-raised': true 12 'o-bubble--compact': attributes.compact,
13 't-raised': !attributes.theme
6 } 14 }
7 if (attributes.class) { 15 if (attributes.class) {
8 classes[attributes.class] = true 16 classes[attributes.class] = true
9 } 17 }
18 if (attributes.theme) {
19 classes[attributes.theme] = true
20 }
10 21
11 article(class=classes) 22 article(class=classes)
12 if user 23 if slots.header
13 header.o-bubble__user 24 header.o-bubble__header
25 - slots.header()
26 else if user
27 header.o-bubble__header
14 strong= user 28 strong= user
15 span.s-colored-links 29 div.o-bubble__body.s-colored-links
16 block 30 - slots.body()
17 small.o-bubble__time 31 if slots.time
18 = time 32 small.o-bubble__time
19 if attributes.scope 33 - slots.time()
20 = ' ' 34 if slots.footer
21 +icon(attributes.scope) 35 footer.o-bubble__footer
36 - slots.footer()
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
index 6f057c0..ec7d025 100644
--- a/tpl/views/bubble-group.pug
+++ b/tpl/views/bubble-group.pug
@@ -1,9 +1,40 @@
1mixin view-bubble-group 1mixin view-bubble-group
2 +view('bubble-group', 'Bubble group') 2 +view('bubble-group', 'Bubble group')
3 .c-box.l-overflow(style='max-height: 13em') 3 .c-box.l-overflow(style='max-height: 15em')
4 +bubble-group('Volpeon')(compact=true arrow=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='max-height: 15em')
4 +bubble-group('Volpeon') 22 +bubble-group('Volpeon')
5 +bubble-group-bubble('12:34')= loremIpsum 23 +bubble()(class='l-bubble-group__bubble')
6 +bubble-group-bubble('12:35')= loremIpsum 24 +slot('header')
7 +bubble-group-bubble('12:36')= loremIpsum 25 .l-card.l-card--flush
8 +bubble-group-bubble('12:38')= loremIpsum 26 .l-card__block.l-card__block--main
9 +bubble-group-bubble('12:39')= loremIpsum 27 strong= 'Volpeon'
28 small.u-ml-100= '@volpeon@mk.vulpes.one'
29 small.l-card__block
30 = '5 minutes ago'
31 +icon('lock')(class='u-ml-100')
32 +slot('body')= 'Full width bubbles test'
33 +bubble()(class='l-bubble-group__bubble')
34 +slot('body')= loremIpsum
35 +bubble()(class='l-bubble-group__bubble')
36 +slot('body')= 'qwertzuiop'
37 +bubble()(class='l-bubble-group__bubble')
38 +slot('body')= '🐈️🦊️'
39 +bubble()(class='l-bubble-group__bubble')
40 +slot('body')= loremIpsum
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug
index 037398f..5e53f5b 100644
--- a/tpl/views/bubble.pug
+++ b/tpl/views/bubble.pug
@@ -1,7 +1,24 @@
1mixin view-bubble 1mixin view-bubble
2 +view('bubble', 'Bubble') 2 +view('bubble', 'Bubble')
3 .c-box 3 .c-box
4 +bubble('12:34', 'Volpeon')= loremIpsum 4 +bubble('Volpeon')(compact=true)
5 +slot('body')= loremIpsum
6 +slot('time')
7 = '12:34'
8 +icon('lock')(class='u-ml-100')
9
10 .c-box.u-themed.t-hi
11 +bubble()(compact=true theme='t-def')
12 +slot('body')= loremIpsum
5 13
6 .c-box 14 .c-box
7 +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum 15 +bubble()
16 +slot('header')
17 .l-card.l-card--flush
18 .l-card__block.l-card__block--main
19 strong= 'Volpeon'
20 small.u-ml-100= '@volpeon@mk.vulpes.one'
21 small.l-card__block
22 = '5 minutes ago'
23 +icon('lock')(class='u-ml-100')
24 +slot('body')= loremIpsum