summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-01-20 17:47:42 +0100
committerVolpeon <git@volpeon.ink>2023-01-20 17:47:42 +0100
commit4a567c385f7d16e12da46718d2ee4ff970072711 (patch)
treeadaeb338facfc99e2bc9602588b43f7ff735301f
parentFixed flaws (diff)
downloadiro-design-4a567c385f7d16e12da46718d2ee4ff970072711.tar.gz
iro-design-4a567c385f7d16e12da46718d2ee4ff970072711.tar.bz2
iro-design-4a567c385f7d16e12da46718d2ee4ff970072711.zip
Add emoji object
-rw-r--r--src/_objects.scss1
-rw-r--r--src/objects/_emoji.scss39
-rw-r--r--src/objects/_icon.scss4
-rwxr-xr-xstatic/drgn.pngbin0 -> 22312 bytes
-rw-r--r--tpl/index.pug3
-rw-r--r--tpl/objects/emoji.pug13
-rw-r--r--tpl/views/emoji.pug8
7 files changed, 66 insertions, 2 deletions
diff --git a/src/_objects.scss b/src/_objects.scss
index 3e09104..f054c53 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,4 +1,5 @@
1@use 'objects/icon'; 1@use 'objects/icon';
2@use 'objects/emoji';
2@use 'objects/heading'; 3@use 'objects/heading';
3@use 'objects/divider'; 4@use 'objects/divider';
4@use 'objects/badge'; 5@use 'objects/badge';
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
new file mode 100644
index 0000000..82c415e
--- /dev/null
+++ b/src/objects/_emoji.scss
@@ -0,0 +1,39 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('emoji') {
5 @include iro.props-store((
6 --dims: (
7 --size: 1.4em,
8 --pad: .2em,
9 --rounding: 3px,
10 --zoom: 2,
11 )
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: (
16 --bg: fn.global-color(--obj-hi),
17 )
18 ), 'colors');
19
20 @include iro.bem-object(iro.props-namespace()) {
21 display: inline;
22 position: relative;
23 top: calc(-.5em * fn.global-dim(--font --standard --line-height) + fn.dim(--rounding));
24 width: fn.dim(--size);
25 height: fn.dim(--size);
26 margin: calc(-.5 * fn.dim(--size)) 0;
27 padding: fn.dim(--pad);
28 transition: transform .2s ease, background-color .2s ease;
29 border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
30 vertical-align: bottom;
31
32 @include iro.bem-modifier('zoomable') {
33 &:hover {
34 transform: scale(fn.dim(--zoom));
35 background-color: fn.color(--bg);
36 }
37 }
38 }
39}
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 12baeba..5a543ab 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -10,13 +10,13 @@
10 ), 'dims'); 10 ), 'dims');
11 11
12 @include iro.bem-object(iro.props-namespace()) { 12 @include iro.bem-object(iro.props-namespace()) {
13 display: inline-block; 13 display: inline;
14 width: fn.dim(--size); 14 width: fn.dim(--size);
15 height: fn.dim(--size); 15 height: fn.dim(--size);
16 stroke-width: fn.dim(--stroke); 16 stroke-width: fn.dim(--stroke);
17 stroke-linecap: round; 17 stroke-linecap: round;
18 stroke-linejoin: round; 18 stroke-linejoin: round;
19 vertical-align: -.12em; 19 vertical-align: -.18em;
20 20
21 @include iro.bem-modifier('block') { 21 @include iro.bem-modifier('block') {
22 display: block; 22 display: block;
diff --git a/static/drgn.png b/static/drgn.png
new file mode 100755
index 0000000..b8cde00
--- /dev/null
+++ b/static/drgn.png
Binary files differ
diff --git a/tpl/index.pug b/tpl/index.pug
index 854cb4b..1f4f522 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -22,6 +22,7 @@ include objects/avatar.pug
22include objects/action-menu.pug 22include objects/action-menu.pug
23include objects/menu.pug 23include objects/menu.pug
24include objects/icon-nav.pug 24include objects/icon-nav.pug
25include objects/emoji.pug
25include objects/backdrop.pug 26include objects/backdrop.pug
26include objects/dialog.pug 27include objects/dialog.pug
27include objects/lightbox.pug 28include objects/lightbox.pug
@@ -77,6 +78,7 @@ include views/table.pug
77include views/alert.pug 78include views/alert.pug
78include views/bubble.pug 79include views/bubble.pug
79include views/bubble-group.pug 80include views/bubble-group.pug
81include views/emoji.pug
80 82
81 83
82doctype html 84doctype html
@@ -96,6 +98,7 @@ html
96 +view-code 98 +view-code
97 +view-blockquote 99 +view-blockquote
98 +view-list 100 +view-list
101 +view-emoji
99 +view-badge 102 +view-badge
100 +view-button 103 +view-button
101 +view-text-field 104 +view-text-field
diff --git a/tpl/objects/emoji.pug b/tpl/objects/emoji.pug
new file mode 100644
index 0000000..5bf3a3b
--- /dev/null
+++ b/tpl/objects/emoji.pug
@@ -0,0 +1,13 @@
1mixin emoji(id)
2 -
3 let classes = {
4 'o-emoji': true,
5 'o-emoji--zoomable': attributes.zoomable,
6 }
7 if (attributes.class) {
8 classes[attributes.class] = true;
9 }
10
11 src = id + '.png'
12
13 img(src=src, class=classes)
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
new file mode 100644
index 0000000..70c13a4
--- /dev/null
+++ b/tpl/views/emoji.pug
@@ -0,0 +1,8 @@
1mixin view-emoji
2 +view('emoji', 'Emoji')
3 .c-box
4 =loremIpsum
5 +emoji('drgn')
6 =loremIpsum
7 +emoji('drgn')(zoomable=true)
8 =loremIpsum