diff options
-rw-r--r-- | src/objects/_emoji.scss | 54 | ||||
-rw-r--r-- | tpl/views/emoji.pug | 17 |
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) |