diff options
-rw-r--r-- | src/objects/_emoji.scss | 19 | ||||
-rw-r--r-- | tpl/objects/emoji.pug | 3 | ||||
-rw-r--r-- | tpl/views/emoji.pug | 7 |
3 files changed, 25 insertions, 4 deletions
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index 37e1ccc..7d03b13 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss | |||
@@ -5,9 +5,13 @@ | |||
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --size: 1.4em, | 7 | --size: 1.4em, |
8 | --pad: .2em, | 8 | --pad: .3em, |
9 | --rounding: 3px, | 9 | --rounding: 3px, |
10 | --zoom: 2, | 10 | --zoom: 2, |
11 | |||
12 | --125: ( | ||
13 | --size: 1.8em, | ||
14 | ) | ||
11 | ) | 15 | ) |
12 | ), 'dims'); | 16 | ), 'dims'); |
13 | 17 | ||
@@ -19,11 +23,18 @@ | |||
19 | 23 | ||
20 | @include iro.bem-object(iro.props-namespace()) { | 24 | @include iro.bem-object(iro.props-namespace()) { |
21 | display: inline; | 25 | display: inline; |
22 | width: fn.dim(--size); | 26 | width: 1em; |
23 | height: fn.dim(--size); | 27 | height: 1em; |
24 | margin: calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad)); | 28 | margin: calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad)); |
25 | padding: fn.dim(--pad); | 29 | padding: fn.dim(--pad); |
26 | vertical-align: .1em; | 30 | font-size: fn.dim(--size); |
31 | vertical-align: .15em; | ||
32 | |||
33 | @include iro.bem-modifier('125') { | ||
34 | margin-top: calc(-.5 * fn.dim(--125 --size)); | ||
35 | margin-bottom: calc(-.5 * fn.dim(--125 --size)); | ||
36 | font-size: fn.dim(--125 --size); | ||
37 | } | ||
27 | 38 | ||
28 | @include iro.bem-modifier('zoomable') { | 39 | @include iro.bem-modifier('zoomable') { |
29 | transition: transform .2s ease, background-color .2s ease; | 40 | transition: transform .2s ease, background-color .2s ease; |
diff --git a/tpl/objects/emoji.pug b/tpl/objects/emoji.pug index 5bf3a3b..3509112 100644 --- a/tpl/objects/emoji.pug +++ b/tpl/objects/emoji.pug | |||
@@ -7,6 +7,9 @@ mixin emoji(id) | |||
7 | if (attributes.class) { | 7 | if (attributes.class) { |
8 | classes[attributes.class] = true; | 8 | classes[attributes.class] = true; |
9 | } | 9 | } |
10 | if (attributes.size) { | ||
11 | classes['o-emoji--' + attributes.size] = true; | ||
12 | } | ||
10 | 13 | ||
11 | src = id + '.png' | 14 | src = id + '.png' |
12 | 15 | ||
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug index 0cfb3f7..8410794 100644 --- a/tpl/views/emoji.pug +++ b/tpl/views/emoji.pug | |||
@@ -11,3 +11,10 @@ mixin view-emoji | |||
11 | +emoji('drgn')(zoomable=true) | 11 | +emoji('drgn')(zoomable=true) |
12 | =' ' | 12 | =' ' |
13 | =loremIpsum | 13 | =loremIpsum |
14 | =' ' | ||
15 | +emoji('drgn')(size=125) | ||
16 | +emoji('drgn')(size=125) | ||
17 | =' ' | ||
18 | =loremIpsum | ||
19 | =' ' | ||
20 | +emoji('drgn')(zoomable=true size=125) | ||