summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-02-11 21:31:55 +0100
committerVolpeon <git@volpeon.ink>2023-02-11 21:31:55 +0100
commit2ff909090258794c5a856c36f0600a4e85e9276f (patch)
treeba808c5dc8b5677198f8ae6c21d3693c0b4380db
parentFix for SVG emojis (diff)
downloadiro-design-2ff909090258794c5a856c36f0600a4e85e9276f.tar.gz
iro-design-2ff909090258794c5a856c36f0600a4e85e9276f.tar.bz2
iro-design-2ff909090258794c5a856c36f0600a4e85e9276f.zip
Emoji
-rw-r--r--src/objects/_emoji.scss54
-rw-r--r--tpl/views/emoji.pug17
2 files changed, 52 insertions, 19 deletions
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 4fc9714..da5b60a 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,16 +1,24 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use 'sass:math';
3 4
4@include iro.props-namespace('emoji') { 5@include iro.props-namespace('emoji') {
5 @include iro.props-store(( 6 @include iro.props-store((
6 --dims: ( 7 --dims: (
7 --size: 1.4em, 8 --size: 1.4,
8 --pad: .3em, 9 --pad: .3,
9 --rounding: 3px, 10 --rounding: 3px,
10 --zoom: 2, 11 --zoom: 4,
12 --valign: -.3em,
11 13
12 --125: ( 14 --150: (
13 --size: 1.8em, 15 --size: 2.1,
16 --valign: -.65em,
17 ),
18
19 --200: (
20 --size: 2.8,
21 --valign: -1em,
14 ) 22 )
15 ) 23 )
16 ), 'dims'); 24 ), 'dims');
@@ -23,22 +31,28 @@
23 31
24 @include iro.bem-object(iro.props-namespace()) { 32 @include iro.bem-object(iro.props-namespace()) {
25 display: inline-block; 33 display: inline-block;
26 height: fn.dim(--size); 34 position: relative;
27 margin: calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad)); 35 height: calc(1em * fn.dim(--size));
28 padding: fn.dim(--pad); 36 margin: calc(-1em * fn.dim(--pad));
29 vertical-align: .1em; 37 padding: calc(1em * fn.dim(--pad));
30 38 vertical-align: fn.dim(--valign);
31 @include iro.bem-modifier('125') { 39
32 height: fn.dim(--125 --size); 40 @each $size in '150' '200' {
33 margin-top: calc(-.5 * fn.dim(--125 --size)); 41 @include iro.bem-modifier($size) {
34 margin-bottom: calc(-.5 * fn.dim(--125 --size)); 42 height: calc(1em * fn.dim(--#{$size} --size));
43 margin: calc(-1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
44 padding: calc(1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
45 vertical-align: fn.dim(--#{$size} --valign);
46 }
35 } 47 }
36 48
37 @include iro.bem-modifier('svg') { 49 @include iro.bem-modifier('svg') {
38 width: fn.dim(--size); 50 width: fn.dim(--size);
39 51
40 @include iro.bem-modifier('125') { 52 @each $size in '150' '200' {
41 width: fn.dim(--125 --size); 53 @include iro.bem-modifier($size) {
54 width: calc(1em * fn.dim(--#{$size} --size));
55 }
42 } 56 }
43 } 57 }
44 58
@@ -50,6 +64,14 @@
50 transform: scale(fn.dim(--zoom)); 64 transform: scale(fn.dim(--zoom));
51 background-color: fn.color(--bg); 65 background-color: fn.color(--bg);
52 } 66 }
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 }
53 } 75 }
54 } 76 }
55} 77}
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
index 8410794..c0d9254 100644
--- a/tpl/views/emoji.pug
+++ b/tpl/views/emoji.pug
@@ -9,12 +9,23 @@ mixin view-emoji
9 =loremIpsum 9 =loremIpsum
10 =' ' 10 =' '
11 +emoji('drgn')(zoomable=true) 11 +emoji('drgn')(zoomable=true)
12
13 .c-box
14 =loremIpsum
15 =' '
16 +emoji('drgn')(size=150)
17 +emoji('drgn')(size=150)
12 =' ' 18 =' '
13 =loremIpsum 19 =loremIpsum
14 =' ' 20 =' '
15 +emoji('drgn')(size=125) 21 +emoji('drgn')(zoomable=true size=150)
16 +emoji('drgn')(size=125) 22
23 .c-box
24 =loremIpsum
25 =' '
26 +emoji('drgn')(size=200)
27 +emoji('drgn')(size=200)
17 =' ' 28 =' '
18 =loremIpsum 29 =loremIpsum
19 =' ' 30 =' '
20 +emoji('drgn')(zoomable=true size=125) 31 +emoji('drgn')(zoomable=true size=200)