Emoji

2 files changed, 52 insertions, 19 deletions

diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 4fc9714..da5b60a 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,16 +1,24 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
+@use 'sass:math';
 
 @include iro.props-namespace('emoji') {
     @include iro.props-store((
         --dims: (
-            --size:     1.4em,
-            --pad:      .3em,
+            --size:     1.4,
+            --pad:      .3,
             --rounding: 3px,
-            --zoom:     2,
+            --zoom:     4,
+            --valign:   -.3em,
 
-            --125: (
-                --size: 1.8em,
+            --150: (
+                --size:   2.1,
+                --valign: -.65em,
+            ),
+
+            --200: (
+                --size:   2.8,
+                --valign: -1em,
             )
         )
     ), 'dims');
@@ -23,22 +31,28 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:        inline-block;
-        height:         fn.dim(--size);
-        margin:         calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad));
-        padding:        fn.dim(--pad);
-        vertical-align: .1em;
-
-        @include iro.bem-modifier('125') {
-            height:        fn.dim(--125 --size);
-            margin-top:    calc(-.5 * fn.dim(--125 --size));
-            margin-bottom: calc(-.5 * fn.dim(--125 --size));
+        position:       relative;
+        height:         calc(1em * fn.dim(--size));
+        margin:         calc(-1em * fn.dim(--pad));
+        padding:        calc(1em * fn.dim(--pad));
+        vertical-align: fn.dim(--valign);
+
+        @each $size in '150' '200' {
+            @include iro.bem-modifier($size) {
+                height:         calc(1em * fn.dim(--#{$size} --size));
+                margin:         calc(-1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
+                padding:        calc(1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
+                vertical-align: fn.dim(--#{$size} --valign);
+            }
         }
 
         @include iro.bem-modifier('svg') {
             width: fn.dim(--size);
 
-            @include iro.bem-modifier('125') {
-                width: fn.dim(--125 --size);
+            @each $size in '150' '200' {
+                @include iro.bem-modifier($size) {
+                    width: calc(1em * fn.dim(--#{$size} --size));
+                }
             }
         }
 
@@ -50,6 +64,14 @@
                 transform:        scale(fn.dim(--zoom));
                 background-color: fn.color(--bg);
             }
+
+            @each $size in '150' '200' {
+                @include iro.bem-modifier($size) {
+                    &:hover {
+                        transform: scale(calc(fn.dim(--zoom) * (fn.dim(--size) / fn.dim(--#{$size} --size))));
+                    }
+                }
+            }
         }
     }
 }
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
index 8410794..c0d9254 100644
--- a/tpl/views/emoji.pug
+++ b/tpl/views/emoji.pug
@@ -9,12 +9,23 @@ mixin view-emoji
             =loremIpsum
             =' '
             +emoji('drgn')(zoomable=true)
+
+        .c-box
+            =loremIpsum
+            =' '
+            +emoji('drgn')(size=150)
+            +emoji('drgn')(size=150)
             =' '
             =loremIpsum
             =' '
-            +emoji('drgn')(size=125)
-            +emoji('drgn')(size=125)
+            +emoji('drgn')(zoomable=true size=150)
+
+        .c-box
+            =loremIpsum
+            =' '
+            +emoji('drgn')(size=200)
+            +emoji('drgn')(size=200)
             =' '
             =loremIpsum
             =' '
-            +emoji('drgn')(zoomable=true size=125)
+            +emoji('drgn')(zoomable=true size=200)