Simplified emojis

1 files changed, 19 insertions, 28 deletions

diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 122e117..3da8b7b 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -5,19 +5,19 @@
 @include iro.props-namespace('emoji') {
     @include iro.props-store((
         --dims: (
-            --size:     1.4,
-            --pad:      .3,
+            --size:     calc(1 / 14 * 18em),
+            --pad:      .3em,
             --rounding: 3px,
-            --zoom:     4,
-            --valign:   -.3em,
+            --zoom:     3,
+            --valign:   -.25em,
 
             --150: (
-                --size:   2.1,
+                --size:   calc(1 / 14 * 28em),
                 --valign: -.65em,
             ),
 
             --200: (
-                --size:   2.8,
+                --size:   calc(1 / 14 * 38em),
                 --valign: -1em,
             )
         )
@@ -32,26 +32,25 @@
     @include iro.bem-object(iro.props-namespace()) {
         display:        inline-block;
         position:       relative;
-        height:         calc(1em * fn.dim(--size));
-        margin:         calc(-1em * fn.dim(--pad));
-        padding:        calc(1em * fn.dim(--pad));
+        width:          calc(fn.dim(--size));
+        height:         calc(fn.dim(--size));
+        margin:         calc(-1 * fn.dim(--pad));
+        padding:        calc(fn.dim(--pad));
         vertical-align: fn.dim(--valign);
+        object-fit:     contain;
+
+        @include iro.bem-modifier('icon') {
+            margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
+        }
 
         @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)));
+                width:          fn.dim(--#{$size} --size);
+                height:         fn.dim(--#{$size} --size);
                 vertical-align: fn.dim(--#{$size} --valign);
-            }
-        }
 
-        @include iro.bem-modifier('svg') {
-            width: calc(1em * fn.dim(--size));
-
-            @each $size in '150' '200' {
-                @include iro.bem-modifier($size) {
-                    width: calc(1em * fn.dim(--#{$size} --size));
+                @include iro.bem-modifier('icon') {
+                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
                 }
             }
         }
@@ -64,14 +63,6 @@
                 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))));
-                    }
-                }
-            }
         }
     }
 }