summaryrefslogtreecommitdiffstats
path: root/src/objects/_emoji.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 13:00:59 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 13:00:59 +0200
commitaeed08dc46662a0d70e04bcea612a701633736e7 (patch)
treea4077017d3519185ccd9ea08955fccdd737ffe17 /src/objects/_emoji.scss
parentPaths (diff)
downloadiro-design-aeed08dc46662a0d70e04bcea612a701633736e7.tar.gz
iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.tar.bz2
iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.zip
Revert "Paths"
This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.
Diffstat (limited to 'src/objects/_emoji.scss')
-rw-r--r--src/objects/_emoji.scss56
1 files changed, 25 insertions, 31 deletions
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 0257b32..655e662 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,55 +1,49 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/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( 24 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
25 -1 * props.get(vars.$pad) - 0.5 * (props.get(vars.$size) - props.get(icon.$size))
26 );
27 vertical-align: props.get(icon.$valign); 25 vertical-align: props.get(icon.$valign);
28 } 26 }
29 27
30 @each $mod, $size, $valign in vars.$sizes { 28 @each $mod, $size, $valign in vars.$sizes {
31 @include bem.modifier($mod) { 29 @include bem.modifier($mod) {
32 inline-size: props.get($size); 30 inline-size: props.get($size);
33 block-size: props.get($size); 31 block-size: props.get($size);
34 vertical-align: props.get($valign); 32 vertical-align: props.get($valign);
35 33
36 @include bem.modifier("icon") { 34 @include bem.modifier('icon') {
37 margin: calc( 35 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
38 -1 * props.get(vars.$pad) - 0.5 * (props.get($size) - props.get(icon.$size))
39 );
40 } 36 }
41 } 37 }
42 } 38 }
43 39
44 @include bem.modifier("zoomable") { 40 @include bem.modifier('zoomable') {
45 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); 41 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
46 transition: 42 transition: transform .2s ease, background-color .2s ease;
47 transform 0.2s ease,
48 background-color 0.2s ease;
49 43
50 &:hover { 44 &:hover {
51 background-color: props.get(vars.$bg-color); 45 background-color: props.get(vars.$bg-color);
52 transform: scale(props.get(vars.$zoom)); 46 transform: scale(props.get(vars.$zoom));
53 } 47 }
54 } 48 }
55 } 49 }