Add support for custom emojis

2 files changed, 34 insertions, 0 deletions

diff --git a/assets/css/objects/emoji.scss b/assets/css/objects/emoji.scss
new file mode 100644
index 0000000..8387e1d
--- /dev/null
+++ b/assets/css/objects/emoji.scss
@@ -0,0 +1,33 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('emoji') {
+    @include iro.props-store((
+        --dims: (
+            --size:     1em,
+            --rounding: 3px,
+        )
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --bg: fn.global-color(--obj-hi),
+        )
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:       inline;
+        width:         fn.dim(--size);
+        height:        fn.dim(--size);
+        margin:        calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding));
+        padding:       fn.dim(--rounding);
+        transform:     scale(1.5);
+        transition:    transform .2s ease, background-color .2s ease;
+        border-radius: calc(fn.dim(--rounding) / 3);
+
+        &:hover {
+            transform:        scale(3);
+            background-color: fn.color(--bg);
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 982aae8..f7d3e6b 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -17,6 +17,7 @@
 @use 'iro-design/src/objects/icon' as iro-icon;
 @use 'iro-design/src/objects/alert' as iro-alert;
 @use 'iro-design/src/objects/lightbox' as iro-lightbox;
+@use 'objects/emoji';
 
 @use 'components/main';
 @use 'components/footer';