summaryrefslogtreecommitdiffstats
path: root/src/objects/_emoji.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_emoji.scss')
-rw-r--r--src/objects/_emoji.scss56
1 files changed, 31 insertions, 25 deletions
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 655e662..0257b32 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,49 +1,55 @@
1@use 'sass:meta'; 1@use "sass:meta";
2@use 'pkg:iro-sass/src/bem'; 2@use "pkg:iro-sass/bem";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/props";
4@use '../props' as *; 4@use "../props" as *;
5@use 'icon.vars' as icon; 5@use "icon.vars" as icon;
6 6
7@forward 'emoji.vars'; 7@forward "emoji.vars";
8@use 'emoji.vars' as vars; 8@use "emoji.vars" as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables("vars"));
12 12
13 @include bem.object('emoji') { 13 @include bem.object("emoji") {
14 position: relative; 14 position: relative;
15 display: inline-block; 15 display: inline-block;
16 inline-size: calc(props.get(vars.$size)); 16 inline-size: calc(props.get(vars.$size));
17 block-size: calc(props.get(vars.$size)); 17 block-size: calc(props.get(vars.$size));
18 padding: calc(props.get(vars.$pad)); 18 padding: calc(props.get(vars.$pad));
19 margin: calc(-1 * props.get(vars.$pad)); 19 margin: calc(-1 * props.get(vars.$pad));
20 vertical-align: props.get(vars.$valign); 20 vertical-align: props.get(vars.$valign);
21 object-fit: contain; 21 object-fit: contain;
22 22
23 @include bem.modifier('icon') { 23 @include bem.modifier("icon") {
24 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); 24 margin: calc(
25 -1 * props.get(vars.$pad) - 0.5 * (props.get(vars.$size) - props.get(icon.$size))
26 );
25 vertical-align: props.get(icon.$valign); 27 vertical-align: props.get(icon.$valign);
26 } 28 }
27 29
28 @each $mod, $size, $valign in vars.$sizes { 30 @each $mod, $size, $valign in vars.$sizes {
29 @include bem.modifier($mod) { 31 @include bem.modifier($mod) {
30 inline-size: props.get($size); 32 inline-size: props.get($size);
31 block-size: props.get($size); 33 block-size: props.get($size);
32 vertical-align: props.get($valign); 34 vertical-align: props.get($valign);
33 35
34 @include bem.modifier('icon') { 36 @include bem.modifier("icon") {
35 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); 37 margin: calc(
38 -1 * props.get(vars.$pad) - 0.5 * (props.get($size) - props.get(icon.$size))
39 );
36 } 40 }
37 } 41 }
38 } 42 }
39 43
40 @include bem.modifier('zoomable') { 44 @include bem.modifier("zoomable") {
41 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); 45 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
42 transition: transform .2s ease, background-color .2s ease; 46 transition:
47 transform 0.2s ease,
48 background-color 0.2s ease;
43 49
44 &:hover { 50 &:hover {
45 background-color: props.get(vars.$bg-color); 51 background-color: props.get(vars.$bg-color);
46 transform: scale(props.get(vars.$zoom)); 52 transform: scale(props.get(vars.$zoom));
47 } 53 }
48 } 54 }
49 } 55 }