diff options
author | Volpeon <git@volpeon.ink> | 2023-01-20 17:47:42 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2023-01-20 17:47:42 +0100 |
commit | 4a567c385f7d16e12da46718d2ee4ff970072711 (patch) | |
tree | adaeb338facfc99e2bc9602588b43f7ff735301f | |
parent | Fixed flaws (diff) | |
download | iro-design-4a567c385f7d16e12da46718d2ee4ff970072711.tar.gz iro-design-4a567c385f7d16e12da46718d2ee4ff970072711.tar.bz2 iro-design-4a567c385f7d16e12da46718d2ee4ff970072711.zip |
Add emoji object
-rw-r--r-- | src/_objects.scss | 1 | ||||
-rw-r--r-- | src/objects/_emoji.scss | 39 | ||||
-rw-r--r-- | src/objects/_icon.scss | 4 | ||||
-rwxr-xr-x | static/drgn.png | bin | 0 -> 22312 bytes | |||
-rw-r--r-- | tpl/index.pug | 3 | ||||
-rw-r--r-- | tpl/objects/emoji.pug | 13 | ||||
-rw-r--r-- | tpl/views/emoji.pug | 8 |
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 | |||
22 | include objects/action-menu.pug | 22 | include objects/action-menu.pug |
23 | include objects/menu.pug | 23 | include objects/menu.pug |
24 | include objects/icon-nav.pug | 24 | include objects/icon-nav.pug |
25 | include objects/emoji.pug | ||
25 | include objects/backdrop.pug | 26 | include objects/backdrop.pug |
26 | include objects/dialog.pug | 27 | include objects/dialog.pug |
27 | include objects/lightbox.pug | 28 | include objects/lightbox.pug |
@@ -77,6 +78,7 @@ include views/table.pug | |||
77 | include views/alert.pug | 78 | include views/alert.pug |
78 | include views/bubble.pug | 79 | include views/bubble.pug |
79 | include views/bubble-group.pug | 80 | include views/bubble-group.pug |
81 | include views/emoji.pug | ||
80 | 82 | ||
81 | 83 | ||
82 | doctype html | 84 | doctype 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 @@ | |||
1 | mixin 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 @@ | |||
1 | mixin view-emoji | ||
2 | +view('emoji', 'Emoji') | ||
3 | .c-box | ||
4 | =loremIpsum | ||
5 | +emoji('drgn') | ||
6 | =loremIpsum | ||
7 | +emoji('drgn')(zoomable=true) | ||
8 | =loremIpsum | ||