summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-27 11:23:45 +0200
committerVolpeon <git@volpeon.ink>2022-03-27 11:23:45 +0200
commitcac07ec50d360f3916e84bc3af6164ef07ac2f83 (patch)
tree8bd37d0c30ba176f5a2079dde171c0a80d6f86b6
parentLots of updates, especially dialog (diff)
downloadiro-design-cac07ec50d360f3916e84bc3af6164ef07ac2f83.tar.gz
iro-design-cac07ec50d360f3916e84bc3af6164ef07ac2f83.tar.bz2
iro-design-cac07ec50d360f3916e84bc3af6164ef07ac2f83.zip
Update
Diffstat
-rw-r--r--package.json2
-rw-r--r--src/_apply-vars.scss28
-rw-r--r--src/_declare-vars.scss22
-rw-r--r--src/_layouts.scss1
-rw-r--r--src/_objects.scss1
-rw-r--r--src/_utils.scss8
-rw-r--r--src/layouts/_bubble-group.scss38
-rw-r--r--src/objects/_action-menu.scss1
-rw-r--r--src/objects/_bubble.scss48
-rw-r--r--src/objects/_dialog.scss8
-rw-r--r--tpl/index.pug8
-rw-r--r--tpl/objects/avatar.pug2
-rw-r--r--tpl/objects/bubble-group.pug22
-rw-r--r--tpl/objects/bubble.pug21
-rw-r--r--tpl/objects/header.pug2
-rw-r--r--tpl/objects/text-field.pug6
-rw-r--r--tpl/views/bubble-group.pug9
-rw-r--r--tpl/views/bubble.pug7
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
29include objects/alert.pug 29include objects/alert.pug
30include objects/header.pug 30include objects/header.pug
31include objects/sidebar.pug 31include objects/sidebar.pug
32include objects/bubble.pug
33include objects/bubble-group.pug
32 34
33mixin view(id, title) 35mixin view(id, title)
34 - 36 -
@@ -70,6 +72,8 @@ include views/lightbox.pug
70include views/list-group.pug 72include views/list-group.pug
71include views/table.pug 73include views/table.pug
72include views/alert.pug 74include views/alert.pug
75include views/bubble.pug
76include views/bubble-group.pug
73 77
74 78
75doctype html 79doctype 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-31 09:27:38 +0000