summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_emoji.scss47
1 files changed, 19 insertions, 28 deletions
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 @@
5@include iro.props-namespace('emoji') { 5@include iro.props-namespace('emoji') {
6 @include iro.props-store(( 6 @include iro.props-store((
7 --dims: ( 7 --dims: (
8 --size: 1.4, 8 --size: calc(1 / 14 * 18em),
9 --pad: .3, 9 --pad: .3em,
10 --rounding: 3px, 10 --rounding: 3px,
11 --zoom: 4, 11 --zoom: 3,
12 --valign: -.3em, 12 --valign: -.25em,
13 13
14 --150: ( 14 --150: (
15 --size: 2.1, 15 --size: calc(1 / 14 * 28em),
16 --valign: -.65em, 16 --valign: -.65em,
17 ), 17 ),
18 18
19 --200: ( 19 --200: (
20 --size: 2.8, 20 --size: calc(1 / 14 * 38em),
21 --valign: -1em, 21 --valign: -1em,
22 ) 22 )
23 ) 23 )
@@ -32,26 +32,25 @@
32 @include iro.bem-object(iro.props-namespace()) { 32 @include iro.bem-object(iro.props-namespace()) {
33 display: inline-block; 33 display: inline-block;
34 position: relative; 34 position: relative;
35 height: calc(1em * fn.dim(--size)); 35 width: calc(fn.dim(--size));
36 margin: calc(-1em * fn.dim(--pad)); 36 height: calc(fn.dim(--size));
37 padding: calc(1em * fn.dim(--pad)); 37 margin: calc(-1 * fn.dim(--pad));
38 padding: calc(fn.dim(--pad));
38 vertical-align: fn.dim(--valign); 39 vertical-align: fn.dim(--valign);
40 object-fit: contain;
41
42 @include iro.bem-modifier('icon') {
43 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
44 }
39 45
40 @each $size in '150' '200' { 46 @each $size in '150' '200' {
41 @include iro.bem-modifier($size) { 47 @include iro.bem-modifier($size) {
42 height: calc(1em * fn.dim(--#{$size} --size)); 48 width: fn.dim(--#{$size} --size);
43 margin: calc(-1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size))); 49 height: fn.dim(--#{$size} --size);
44 padding: calc(1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
45 vertical-align: fn.dim(--#{$size} --valign); 50 vertical-align: fn.dim(--#{$size} --valign);
46 }
47 }
48 51
49 @include iro.bem-modifier('svg') { 52 @include iro.bem-modifier('icon') {
50 width: calc(1em * fn.dim(--size)); 53 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
51
52 @each $size in '150' '200' {
53 @include iro.bem-modifier($size) {
54 width: calc(1em * fn.dim(--#{$size} --size));
55 } 54 }
56 } 55 }
57 } 56 }
@@ -64,14 +63,6 @@
64 transform: scale(fn.dim(--zoom)); 63 transform: scale(fn.dim(--zoom));
65 background-color: fn.color(--bg); 64 background-color: fn.color(--bg);
66 } 65 }
67
68 @each $size in '150' '200' {
69 @include iro.bem-modifier($size) {
70 &:hover {
71 transform: scale(calc(fn.dim(--zoom) * (fn.dim(--size) / fn.dim(--#{$size} --size))));
72 }
73 }
74 }
75 } 66 }
76 } 67 }
77} 68}