summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_emoji.scss19
-rw-r--r--tpl/objects/emoji.pug3
-rw-r--r--tpl/views/emoji.pug7
3 files changed, 25 insertions, 4 deletions
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 37e1ccc..7d03b13 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -5,9 +5,13 @@
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: 1.4em, 7 --size: 1.4em,
8 --pad: .2em, 8 --pad: .3em,
9 --rounding: 3px, 9 --rounding: 3px,
10 --zoom: 2, 10 --zoom: 2,
11
12 --125: (
13 --size: 1.8em,
14 )
11 ) 15 )
12 ), 'dims'); 16 ), 'dims');
13 17
@@ -19,11 +23,18 @@
19 23
20 @include iro.bem-object(iro.props-namespace()) { 24 @include iro.bem-object(iro.props-namespace()) {
21 display: inline; 25 display: inline;
22 width: fn.dim(--size); 26 width: 1em;
23 height: fn.dim(--size); 27 height: 1em;
24 margin: calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad)); 28 margin: calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad));
25 padding: fn.dim(--pad); 29 padding: fn.dim(--pad);
26 vertical-align: .1em; 30 font-size: fn.dim(--size);
31 vertical-align: .15em;
32
33 @include iro.bem-modifier('125') {
34 margin-top: calc(-.5 * fn.dim(--125 --size));
35 margin-bottom: calc(-.5 * fn.dim(--125 --size));
36 font-size: fn.dim(--125 --size);
37 }
27 38
28 @include iro.bem-modifier('zoomable') { 39 @include iro.bem-modifier('zoomable') {
29 transition: transform .2s ease, background-color .2s ease; 40 transition: transform .2s ease, background-color .2s ease;
diff --git a/tpl/objects/emoji.pug b/tpl/objects/emoji.pug
index 5bf3a3b..3509112 100644
--- a/tpl/objects/emoji.pug
+++ b/tpl/objects/emoji.pug
@@ -7,6 +7,9 @@ mixin emoji(id)
7 if (attributes.class) { 7 if (attributes.class) {
8 classes[attributes.class] = true; 8 classes[attributes.class] = true;
9 } 9 }
10 if (attributes.size) {
11 classes['o-emoji--' + attributes.size] = true;
12 }
10 13
11 src = id + '.png' 14 src = id + '.png'
12 15
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
index 0cfb3f7..8410794 100644
--- a/tpl/views/emoji.pug
+++ b/tpl/views/emoji.pug
@@ -11,3 +11,10 @@ mixin view-emoji
11 +emoji('drgn')(zoomable=true) 11 +emoji('drgn')(zoomable=true)
12 =' ' 12 =' '
13 =loremIpsum 13 =loremIpsum
14 =' '
15 +emoji('drgn')(size=125)
16 +emoji('drgn')(size=125)
17 =' '
18 =loremIpsum
19 =' '
20 +emoji('drgn')(zoomable=true size=125)