summaryrefslogtreecommitdiffstats
path: root/src/.old/objects/_emoji.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/.old/objects/_emoji.scss')
-rw-r--r--src/.old/objects/_emoji.scss74
1 files changed, 0 insertions, 74 deletions
diff --git a/src/.old/objects/_emoji.scss b/src/.old/objects/_emoji.scss
deleted file mode 100644
index 8d17212..0000000
--- a/src/.old/objects/_emoji.scss
+++ /dev/null
@@ -1,74 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'sass:math';
4
5@include iro.props-namespace('emoji') {
6 @include iro.props-store((
7 --dims: (
8 --size: calc(1 / 14 * 18em),
9 --pad: .3em,
10 --rounding: 3px,
11 --zoom: 3,
12 --valign: -.25em,
13
14 --125: (
15 --size: calc(1 / 14 * 23em),
16 --valign: -.45em,
17 ),
18
19 --150: (
20 --size: calc(1 / 14 * 28em),
21 --valign: -.65em,
22 ),
23
24 --200: (
25 --size: calc(1 / 14 * 38em),
26 --valign: -1em,
27 )
28 )
29 ), 'dims');
30
31 @include iro.props-store((
32 --colors: (
33 --bg: fn.global-color(--obj-hi),
34 )
35 ), 'colors');
36
37 @include iro.bem-object(iro.props-namespace()) {
38 display: inline-block;
39 position: relative;
40 width: calc(fn.dim(--size));
41 height: calc(fn.dim(--size));
42 margin: calc(-1 * fn.dim(--pad));
43 padding: calc(fn.dim(--pad));
44 vertical-align: fn.dim(--valign);
45 object-fit: contain;
46
47 @include iro.bem-modifier('icon') {
48 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
49 vertical-align: fn.foreign-dim(--icon, --valign);
50 }
51
52 @each $size in '125' '150' '200' {
53 @include iro.bem-modifier($size) {
54 width: fn.dim(--#{$size} --size);
55 height: fn.dim(--#{$size} --size);
56 vertical-align: fn.dim(--#{$size} --valign);
57
58 @include iro.bem-modifier('icon') {
59 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
60 }
61 }
62 }
63
64 @include iro.bem-modifier('zoomable') {
65 transition: transform .2s ease, background-color .2s ease;
66 border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
67
68 &:hover {
69 transform: scale(fn.dim(--zoom));
70 background-color: fn.color(--bg);
71 }
72 }
73 }
74}