From f74ba57a5794cd615f8f52bf755824ab69ebfffb Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 12 Feb 2023 17:13:29 +0100 Subject: Simplified emojis --- src/objects/_emoji.scss | 47 +++++++++++++++++++---------------------------- 1 file changed, 19 insertions(+), 28 deletions(-) (limited to 'src') 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)))); - } - } - } } } } -- cgit v1.2.3-54-g00ecf