diff options
-rw-r--r-- | src/_apply-vars.scss | 10 | ||||
-rw-r--r-- | src/_declare-vars.scss | 2 | ||||
-rw-r--r-- | src/layouts/_bubble-group.scss | 21 | ||||
-rw-r--r-- | src/objects/_bubble.scss | 22 | ||||
-rw-r--r-- | tpl/objects/bubble-group.pug | 13 | ||||
-rw-r--r-- | tpl/objects/bubble.pug | 39 | ||||
-rw-r--r-- | tpl/views/bubble-group.pug | 43 | ||||
-rw-r--r-- | tpl/views/bubble.pug | 21 |
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 @@ | |||
1 | mixin bubble-group(user) | 1 | mixin 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 @@ | |||
1 | mixin bubble(time, user) | 1 | mixin 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 @@ | |||
1 | mixin view-bubble-group | 1 | mixin 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 @@ | |||
1 | mixin view-bubble | 1 | mixin 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 | ||