Emoji

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 @@
     @include iro.props-store((
         --dims: (
             --size:     1.4em,
-            --pad:      .2em,
+            --pad:      .3em,
             --rounding: 3px,
             --zoom:     2,
+
+            --125: (
+                --size: 1.8em,
+            )
         )
     ), 'dims');
 
@@ -19,11 +23,18 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:        inline;
-        width:          fn.dim(--size);
-        height:         fn.dim(--size);
+        width:          1em;
+        height:         1em;
         margin:         calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad));
         padding:        fn.dim(--pad);
-        vertical-align: .1em;
+        font-size:      fn.dim(--size);
+        vertical-align: .15em;
+
+        @include iro.bem-modifier('125') {
+            margin-top:    calc(-.5 * fn.dim(--125 --size));
+            margin-bottom: calc(-.5 * fn.dim(--125 --size));
+            font-size:     fn.dim(--125 --size);
+        }
 
         @include iro.bem-modifier('zoomable') {
             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)
         if (attributes.class) {
             classes[attributes.class] = true;
         }
+        if (attributes.size) {
+            classes['o-emoji--' + attributes.size] = true;
+        }
 
         src = id + '.png'
 
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
             +emoji('drgn')(zoomable=true)
             =' '
             =loremIpsum
+            =' '
+            +emoji('drgn')(size=125)
+            +emoji('drgn')(size=125)
+            =' '
+            =loremIpsum
+            =' '
+            +emoji('drgn')(zoomable=true size=125)