From bce5fdfa3ab60ae443fd5ae32424826e9296f59a Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 10 Jul 2022 11:23:10 +0200 Subject: Add support for custom emojis --- assets/css/objects/emoji.scss | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 assets/css/objects/emoji.scss (limited to 'assets/css/objects/emoji.scss') 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); + } + } +} -- cgit v1.2.3-54-g00ecf