diff options
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | src/_apply-vars.scss | 28 | ||||
-rw-r--r-- | src/_declare-vars.scss | 22 | ||||
-rw-r--r-- | src/_layouts.scss | 1 | ||||
-rw-r--r-- | src/_objects.scss | 1 | ||||
-rw-r--r-- | src/_utils.scss | 8 | ||||
-rw-r--r-- | src/layouts/_bubble-group.scss | 38 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 1 | ||||
-rw-r--r-- | src/objects/_bubble.scss | 48 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 8 | ||||
-rw-r--r-- | tpl/index.pug | 8 | ||||
-rw-r--r-- | tpl/objects/avatar.pug | 2 | ||||
-rw-r--r-- | tpl/objects/bubble-group.pug | 22 | ||||
-rw-r--r-- | tpl/objects/bubble.pug | 21 | ||||
-rw-r--r-- | tpl/objects/header.pug | 2 | ||||
-rw-r--r-- | tpl/objects/text-field.pug | 6 | ||||
-rw-r--r-- | tpl/views/bubble-group.pug | 9 | ||||
-rw-r--r-- | tpl/views/bubble.pug | 7 |
18 files changed, 206 insertions, 28 deletions
diff --git a/package.json b/package.json index 122839c..5f463b1 100644 --- a/package.json +++ b/package.json | |||
@@ -11,7 +11,7 @@ | |||
11 | "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", | 11 | "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", |
12 | "build:assets": "cp -r static/* public/", | 12 | "build:assets": "cp -r static/* public/", |
13 | "build:app": "pug tpl/index.pug -p tpl --out public/", | 13 | "build:app": "pug tpl/index.pug -p tpl --out public/", |
14 | "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-left chevron-right hash x send smile public/icons.svg", | 14 | "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags lock user chevron-left chevron-right hash x send smile public/icons.svg", |
15 | "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", | 15 | "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", |
16 | "lint:style": "stylelint \"src/**/*.scss\"", | 16 | "lint:style": "stylelint \"src/**/*.scss\"", |
17 | "fix:style": "stylelint \"src/**/*.scss\" --fix", | 17 | "fix:style": "stylelint \"src/**/*.scss\" --fix", |
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 9639a97..0bdc3a8 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss | |||
@@ -25,22 +25,42 @@ | |||
25 | @include iro.props-assign('palette-dark'); | 25 | @include iro.props-assign('palette-dark'); |
26 | } | 26 | } |
27 | 27 | ||
28 | @include iro.bem-theme('hi') { | ||
29 | @include iro.props-assign('colors'); | ||
30 | @include iro.props-assign('palette-light-hi'); | ||
31 | |||
32 | @media (prefers-color-scheme: dark) { | ||
33 | @include iro.props-assign('colors-dark'); | ||
34 | @include iro.props-assign('palette-dark-hi'); | ||
35 | } | ||
36 | } | ||
37 | |||
38 | @include iro.bem-theme('lo') { | ||
39 | @include iro.props-assign('colors'); | ||
40 | @include iro.props-assign('palette-light-lo'); | ||
41 | |||
42 | @media (prefers-color-scheme: dark) { | ||
43 | @include iro.props-assign('colors-dark'); | ||
44 | @include iro.props-assign('palette-dark-lo'); | ||
45 | } | ||
46 | } | ||
47 | |||
28 | @include iro.bem-theme('raised') { | 48 | @include iro.bem-theme('raised') { |
29 | @include iro.props-assign('colors'); | 49 | @include iro.props-assign('colors'); |
30 | @include iro.props-assign('palette-light-raised'); | 50 | @include iro.props-assign('palette-light-hi'); |
31 | 51 | ||
32 | @media (prefers-color-scheme: dark) { | 52 | @media (prefers-color-scheme: dark) { |
33 | @include iro.props-assign('colors-dark'); | 53 | @include iro.props-assign('colors-dark'); |
34 | @include iro.props-assign('palette-dark-raised'); | 54 | @include iro.props-assign('palette-dark-lo'); |
35 | } | 55 | } |
36 | } | 56 | } |
37 | 57 | ||
38 | @include iro.bem-theme('lowered') { | 58 | @include iro.bem-theme('lowered') { |
39 | @include iro.props-assign('colors'); | 59 | @include iro.props-assign('colors'); |
40 | @include iro.props-assign('palette-light-lowered'); | 60 | @include iro.props-assign('palette-light-lo'); |
41 | 61 | ||
42 | @media (prefers-color-scheme: dark) { | 62 | @media (prefers-color-scheme: dark) { |
43 | @include iro.props-assign('colors-dark'); | 63 | @include iro.props-assign('colors-dark'); |
44 | @include iro.props-assign('palette-dark-lowered'); | 64 | @include iro.props-assign('palette-dark-hi'); |
45 | } | 65 | } |
46 | } | 66 | } |
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 0bcf101..883b753 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss | |||
@@ -148,21 +148,21 @@ | |||
148 | 148 | ||
149 | @include iro.props-store(( | 149 | @include iro.props-store(( |
150 | --colors: ( | 150 | --colors: ( |
151 | --gray: fn.gray-palette(96%), | 151 | --gray: fn.gray-palette(100%), |
152 | ), | 152 | ), |
153 | ), 'palette-light'); | 153 | ), 'palette-light-hi'); |
154 | 154 | ||
155 | @include iro.props-store(( | 155 | @include iro.props-store(( |
156 | --colors: ( | 156 | --colors: ( |
157 | --gray: fn.gray-palette(100%), | 157 | --gray: fn.gray-palette(96%), |
158 | ), | 158 | ), |
159 | ), 'palette-light-raised'); | 159 | ), 'palette-light'); |
160 | 160 | ||
161 | @include iro.props-store(( | 161 | @include iro.props-store(( |
162 | --colors: ( | 162 | --colors: ( |
163 | --gray: fn.gray-palette(91%), | 163 | --gray: fn.gray-palette(91%), |
164 | ), | 164 | ), |
165 | ), 'palette-light-lowered'); | 165 | ), 'palette-light-lo'); |
166 | 166 | ||
167 | // | 167 | // |
168 | 168 | ||
@@ -187,21 +187,21 @@ | |||
187 | 187 | ||
188 | @include iro.props-store(( | 188 | @include iro.props-store(( |
189 | --colors: ( | 189 | --colors: ( |
190 | --gray: fn.gray-palette(9%), | 190 | --gray: fn.gray-palette(6%), |
191 | ), | 191 | ), |
192 | ), 'palette-dark'); | 192 | ), 'palette-dark-hi'); |
193 | 193 | ||
194 | @include iro.props-store(( | 194 | @include iro.props-store(( |
195 | --colors: ( | 195 | --colors: ( |
196 | --gray: fn.gray-palette(13%), | 196 | --gray: fn.gray-palette(9%), |
197 | ), | 197 | ), |
198 | ), 'palette-dark-raised'); | 198 | ), 'palette-dark'); |
199 | 199 | ||
200 | @include iro.props-store(( | 200 | @include iro.props-store(( |
201 | --colors: ( | 201 | --colors: ( |
202 | --gray: fn.gray-palette(5%), | 202 | --gray: fn.gray-palette(13%), |
203 | ), | 203 | ), |
204 | ), 'palette-dark-lowered'); | 204 | ), 'palette-dark-lo'); |
205 | 205 | ||
206 | // | 206 | // |
207 | 207 | ||
diff --git a/src/_layouts.scss b/src/_layouts.scss index 3a4c32b..331eb7e 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss | |||
@@ -4,3 +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'; | ||
diff --git a/src/_objects.scss b/src/_objects.scss index d01ed54..9a516ee 100644 --- a/src/_objects.scss +++ b/src/_objects.scss | |||
@@ -11,6 +11,7 @@ | |||
11 | @use 'objects/action-button'; | 11 | @use 'objects/action-button'; |
12 | @use 'objects/status-indicator'; | 12 | @use 'objects/status-indicator'; |
13 | @use 'objects/avatar'; | 13 | @use 'objects/avatar'; |
14 | @use 'objects/bubble'; | ||
14 | @use 'objects/header'; | 15 | @use 'objects/header'; |
15 | @use 'objects/sidebar'; | 16 | @use 'objects/sidebar'; |
16 | @use 'objects/action-menu'; | 17 | @use 'objects/action-menu'; |
diff --git a/src/_utils.scss b/src/_utils.scss index aeb0812..860fe3e 100644 --- a/src/_utils.scss +++ b/src/_utils.scss | |||
@@ -104,9 +104,7 @@ $dirs: ( | |||
104 | margin#{$suffix}: fn.global-dim(--size --#{$size}); | 104 | margin#{$suffix}: fn.global-dim(--size --#{$size}); |
105 | } | 105 | } |
106 | } | 106 | } |
107 | } | 107 | |
108 | |||
109 | @each $dir, $suffix in $dirs { | ||
110 | @include iro.bem-utility('p#{$dir}-auto') { | 108 | @include iro.bem-utility('p#{$dir}-auto') { |
111 | padding#{$suffix}: auto; | 109 | padding#{$suffix}: auto; |
112 | } | 110 | } |
@@ -116,4 +114,8 @@ $dirs: ( | |||
116 | padding#{$suffix}: fn.global-dim(--size --#{$size}); | 114 | padding#{$suffix}: fn.global-dim(--size --#{$size}); |
117 | } | 115 | } |
118 | } | 116 | } |
117 | |||
118 | @include iro.bem-utility('b#{$dir}-0') { | ||
119 | border#{$suffix}: 0; | ||
120 | } | ||
119 | } | 121 | } |
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss new file mode 100644 index 0000000..4db70d0 --- /dev/null +++ b/src/layouts/_bubble-group.scss | |||
@@ -0,0 +1,38 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('bubble-group') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --spacing-x: fn.global-dim(--size --225), | ||
8 | --spacing-y: fn.global-dim(--size --50), | ||
9 | ) | ||
10 | ), 'dims'); | ||
11 | |||
12 | @include iro.bem-layout(iro.props-namespace()) { | ||
13 | display: grid; | ||
14 | grid-template-columns: auto 1fr; | ||
15 | grid-auto-rows: auto; | ||
16 | grid-template-areas: 'avatar bubble'; | ||
17 | justify-items: start; | ||
18 | align-items: flex-start; | ||
19 | gap: fn.dim(--spacing-y) fn.dim(--spacing-x); | ||
20 | |||
21 | @include iro.bem-elem('avatar') { | ||
22 | grid-area: avatar; | ||
23 | position: sticky; | ||
24 | top: 0; | ||
25 | justify-self: end; | ||
26 | |||
27 | @include iro.bem-next-elem('bubble') { | ||
28 | &::before { | ||
29 | display: block; | ||
30 | } | ||
31 | } | ||
32 | } | ||
33 | |||
34 | @include iro.bem-elem('bubble') { | ||
35 | grid-column: bubble; | ||
36 | } | ||
37 | } | ||
38 | } | ||
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 88e84d6..a3e1ca1 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss | |||
@@ -56,6 +56,7 @@ | |||
56 | transform: translate(var(--x), var(--y)); | 56 | transform: translate(var(--x), var(--y)); |
57 | border: fn.dim(--border) solid fn.color(--border); | 57 | border: fn.dim(--border) solid fn.color(--border); |
58 | border-radius: fn.dim(--rounding); | 58 | border-radius: fn.dim(--rounding); |
59 | background-clip: padding-box; | ||
59 | background-color: fn.global-color(--bg); | 60 | background-color: fn.global-color(--bg); |
60 | box-shadow: fn.color(--shadow); | 61 | box-shadow: fn.color(--shadow); |
61 | color: fn.global-color(--fg); | 62 | color: fn.global-color(--fg); |
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss new file mode 100644 index 0000000..26746fe --- /dev/null +++ b/src/objects/_bubble.scss | |||
@@ -0,0 +1,48 @@ | |||
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 | --colors: ( | ||
7 | --image-bg: fn.global-color(--obj), | ||
8 | ), | ||
9 | ), 'colors'); | ||
10 | |||
11 | @include iro.props-store(( | ||
12 | --dims: ( | ||
13 | --pad-x: fn.global-dim(--size --150), | ||
14 | --pad-y: fn.global-dim(--size --85), | ||
15 | --rounding: 3px, | ||
16 | --arrow-size: fn.global-dim(--size --100), | ||
17 | ) | ||
18 | ), 'dims'); | ||
19 | |||
20 | @include iro.bem-object(iro.props-namespace()) { | ||
21 | position: relative; | ||
22 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
23 | border-radius: fn.dim(--rounding); | ||
24 | background-color: fn.global-color(--bg); | ||
25 | color: fn.global-color(--fg); | ||
26 | |||
27 | &::before { | ||
28 | content: ''; | ||
29 | display: none; | ||
30 | position: absolute; | ||
31 | top: 0; | ||
32 | left: calc(-1 * fn.dim(--arrow-size)); | ||
33 | border: fn.dim(--arrow-size) solid fn.global-color(--bg); | ||
34 | border-bottom-color: transparent; | ||
35 | border-left-color: transparent; | ||
36 | } | ||
37 | |||
38 | @include iro.bem-elem('user') { | ||
39 | display: block; | ||
40 | } | ||
41 | |||
42 | @include iro.bem-elem('time') { | ||
43 | margin-left: 1em; | ||
44 | float: right; | ||
45 | transform: translate(.2em, .2em); | ||
46 | } | ||
47 | } | ||
48 | } | ||
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index f6e8e63..094e09b 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | --width-sm: iro.fn-px-to-rem(500px), | 9 | --width-sm: iro.fn-px-to-rem(500px), |
10 | --width-md: iro.fn-px-to-rem(800px), | 10 | --width-md: iro.fn-px-to-rem(800px), |
11 | --width-lg: iro.fn-px-to-rem(1100px), | 11 | --width-lg: iro.fn-px-to-rem(1100px), |
12 | --rounding: 3px, | 12 | --rounding: 8px, |
13 | --border: 1px, | 13 | --border: 1px, |
14 | 14 | ||
15 | --body: ( | 15 | --body: ( |
@@ -28,7 +28,7 @@ | |||
28 | 28 | ||
29 | @include iro.props-store(( | 29 | @include iro.props-store(( |
30 | --colors: ( | 30 | --colors: ( |
31 | --border: rgba(#000, .05), | 31 | --border: rgba(#000, .2), |
32 | --shadow: 0 .2em .5em rgba(#000, .2), | 32 | --shadow: 0 .2em .5em rgba(#000, .2), |
33 | 33 | ||
34 | --sidebar: ( | 34 | --sidebar: ( |
@@ -57,9 +57,11 @@ | |||
57 | max-width: fn.dim(--width-md); | 57 | max-width: fn.dim(--width-md); |
58 | margin: 0 auto; | 58 | margin: 0 auto; |
59 | overflow: hidden; | 59 | overflow: hidden; |
60 | border: fn.dim(--border) solid fn.color(--border); | ||
60 | border-radius: fn.dim(--rounding); | 61 | border-radius: fn.dim(--rounding); |
62 | background-clip: padding-box; | ||
61 | background-color: fn.global-color(--bg); | 63 | background-color: fn.global-color(--bg); |
62 | box-shadow: 0 0 0 1px fn.color(--border), fn.color(--shadow); | 64 | box-shadow: fn.color(--shadow); |
63 | color: fn.global-color(--fg); | 65 | color: fn.global-color(--fg); |
64 | 66 | ||
65 | @include iro.bem-modifier('sm') { | 67 | @include iro.bem-modifier('sm') { |
diff --git a/tpl/index.pug b/tpl/index.pug index 14bfa10..6ff502c 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
@@ -29,6 +29,8 @@ include objects/table.pug | |||
29 | include objects/alert.pug | 29 | include objects/alert.pug |
30 | include objects/header.pug | 30 | include objects/header.pug |
31 | include objects/sidebar.pug | 31 | include objects/sidebar.pug |
32 | include objects/bubble.pug | ||
33 | include objects/bubble-group.pug | ||
32 | 34 | ||
33 | mixin view(id, title) | 35 | mixin view(id, title) |
34 | - | 36 | - |
@@ -70,6 +72,8 @@ include views/lightbox.pug | |||
70 | include views/list-group.pug | 72 | include views/list-group.pug |
71 | include views/table.pug | 73 | include views/table.pug |
72 | include views/alert.pug | 74 | include views/alert.pug |
75 | include views/bubble.pug | ||
76 | include views/bubble-group.pug | ||
73 | 77 | ||
74 | 78 | ||
75 | doctype html | 79 | doctype html |
@@ -104,7 +108,9 @@ html | |||
104 | +view-lightbox | 108 | +view-lightbox |
105 | +view-list-group | 109 | +view-list-group |
106 | +view-table | 110 | +view-table |
107 | +view-alert | 111 | +view-alert |
112 | +view-bubble | ||
113 | +view-bubble-group | ||
108 | 114 | ||
109 | +sidebar(class='c-sidebar') | 115 | +sidebar(class='c-sidebar') |
110 | +menu | 116 | +menu |
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug index 9e08a16..a2ff941 100644 --- a/tpl/objects/avatar.pug +++ b/tpl/objects/avatar.pug | |||
@@ -5,7 +5,7 @@ mixin avatar | |||
5 | let classes = { | 5 | let classes = { |
6 | 'o-avatar': true, | 6 | 'o-avatar': true, |
7 | 'o-avatar--circle': attributes.circle, | 7 | 'o-avatar--circle': attributes.circle, |
8 | 'u-d-block': attributes.block | 8 | 'u-d-block': attributes.block |
9 | } | 9 | } |
10 | if (attributes.class) { | 10 | if (attributes.class) { |
11 | classes[attributes.class] = true; | 11 | classes[attributes.class] = true; |
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug new file mode 100644 index 0000000..c2e502a --- /dev/null +++ b/tpl/objects/bubble-group.pug | |||
@@ -0,0 +1,22 @@ | |||
1 | mixin bubble-group(user) | ||
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 = { | ||
13 | 'l-bubble-group': true | ||
14 | } | ||
15 | if (attributes.class) { | ||
16 | classes[attributes.class] = true | ||
17 | } | ||
18 | |||
19 | section(class=classes) | ||
20 | .l-bubble-group__avatar | ||
21 | +avatar= user.slice(0, 2) | ||
22 | block | ||
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug new file mode 100644 index 0000000..a79f119 --- /dev/null +++ b/tpl/objects/bubble.pug | |||
@@ -0,0 +1,21 @@ | |||
1 | mixin bubble(time, user) | ||
2 | - | ||
3 | let classes = { | ||
4 | 'o-bubble': true, | ||
5 | 't-raised': true | ||
6 | } | ||
7 | if (attributes.class) { | ||
8 | classes[attributes.class] = true | ||
9 | } | ||
10 | |||
11 | article(class=classes) | ||
12 | if user | ||
13 | header.o-bubble__user | ||
14 | strong= user | ||
15 | span.s-colored-links | ||
16 | block | ||
17 | small.o-bubble__time | ||
18 | = time | ||
19 | if attributes.scope | ||
20 | = ' ' | ||
21 | +icon(attributes.scope) | ||
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug index 4518afc..0d9d7ee 100644 --- a/tpl/objects/header.pug +++ b/tpl/objects/header.pug | |||
@@ -8,5 +8,5 @@ mixin header | |||
8 | } | 8 | } |
9 | 9 | ||
10 | header(class=classes) | 10 | header(class=classes) |
11 | .o-header__content.t-lowered | 11 | .o-header__content.t-lo |
12 | block | 12 | block |
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index 673aa27..53d1362 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug | |||
@@ -16,7 +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 | } | 20 | } |
21 | if (attributes.class) { | 21 | if (attributes.class) { |
22 | classes[attributes.class] = true; | 22 | classes[attributes.class] = true; |
@@ -30,11 +30,11 @@ mixin text-field | |||
30 | div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) | 30 | div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) |
31 | if !!block | 31 | if !!block |
32 | if slots.pre | 32 | if slots.pre |
33 | .u-d-contents.t-raised | 33 | .u-d-contents.t-hi |
34 | - slots.pre() | 34 | - slots.pre() |
35 | input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) | 35 | input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) |
36 | if slots.post | 36 | if slots.post |
37 | .u-d-contents.t-raised | 37 | .u-d-contents.t-hi |
38 | - slots.post() | 38 | - slots.post() |
39 | .o-text-field__bg | 39 | .o-text-field__bg |
40 | else | 40 | else |
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug new file mode 100644 index 0000000..6f057c0 --- /dev/null +++ b/tpl/views/bubble-group.pug | |||
@@ -0,0 +1,9 @@ | |||
1 | mixin view-bubble-group | ||
2 | +view('bubble-group', 'Bubble group') | ||
3 | .c-box.l-overflow(style='max-height: 13em') | ||
4 | +bubble-group('Volpeon') | ||
5 | +bubble-group-bubble('12:34')= loremIpsum | ||
6 | +bubble-group-bubble('12:35')= loremIpsum | ||
7 | +bubble-group-bubble('12:36')= loremIpsum | ||
8 | +bubble-group-bubble('12:38')= loremIpsum | ||
9 | +bubble-group-bubble('12:39')= loremIpsum | ||
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug new file mode 100644 index 0000000..037398f --- /dev/null +++ b/tpl/views/bubble.pug | |||
@@ -0,0 +1,7 @@ | |||
1 | mixin view-bubble | ||
2 | +view('bubble', 'Bubble') | ||
3 | .c-box | ||
4 | +bubble('12:34', 'Volpeon')= loremIpsum | ||
5 | |||
6 | .c-box | ||
7 | +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum | ||