From 44d19cf5faf41b2cd576fc353ee16cb643584fb2 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 28 Jan 2023 16:05:37 +0100 Subject: Emoji --- src/objects/_emoji.scss | 19 +++++++++++++++---- tpl/objects/emoji.pug | 3 +++ tpl/views/emoji.pug | 7 +++++++ 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) -- cgit v1.2.3-54-g00ecf