diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_emoji.scss | 39 | ||||
-rw-r--r-- | src/objects/_icon.scss | 4 |
2 files changed, 41 insertions, 2 deletions
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss new file mode 100644 index 0000000..82c415e --- /dev/null +++ b/src/objects/_emoji.scss | |||
@@ -0,0 +1,39 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('emoji') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --size: 1.4em, | ||
8 | --pad: .2em, | ||
9 | --rounding: 3px, | ||
10 | --zoom: 2, | ||
11 | ) | ||
12 | ), 'dims'); | ||
13 | |||
14 | @include iro.props-store(( | ||
15 | --colors: ( | ||
16 | --bg: fn.global-color(--obj-hi), | ||
17 | ) | ||
18 | ), 'colors'); | ||
19 | |||
20 | @include iro.bem-object(iro.props-namespace()) { | ||
21 | display: inline; | ||
22 | position: relative; | ||
23 | top: calc(-.5em * fn.global-dim(--font --standard --line-height) + fn.dim(--rounding)); | ||
24 | width: fn.dim(--size); | ||
25 | height: fn.dim(--size); | ||
26 | margin: calc(-.5 * fn.dim(--size)) 0; | ||
27 | padding: fn.dim(--pad); | ||
28 | transition: transform .2s ease, background-color .2s ease; | ||
29 | border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom)); | ||
30 | vertical-align: bottom; | ||
31 | |||
32 | @include iro.bem-modifier('zoomable') { | ||
33 | &:hover { | ||
34 | transform: scale(fn.dim(--zoom)); | ||
35 | background-color: fn.color(--bg); | ||
36 | } | ||
37 | } | ||
38 | } | ||
39 | } | ||
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 12baeba..5a543ab 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss | |||
@@ -10,13 +10,13 @@ | |||
10 | ), 'dims'); | 10 | ), 'dims'); |
11 | 11 | ||
12 | @include iro.bem-object(iro.props-namespace()) { | 12 | @include iro.bem-object(iro.props-namespace()) { |
13 | display: inline-block; | 13 | display: inline; |
14 | width: fn.dim(--size); | 14 | width: fn.dim(--size); |
15 | height: fn.dim(--size); | 15 | height: fn.dim(--size); |
16 | stroke-width: fn.dim(--stroke); | 16 | stroke-width: fn.dim(--stroke); |
17 | stroke-linecap: round; | 17 | stroke-linecap: round; |
18 | stroke-linejoin: round; | 18 | stroke-linejoin: round; |
19 | vertical-align: -.12em; | 19 | vertical-align: -.18em; |
20 | 20 | ||
21 | @include iro.bem-modifier('block') { | 21 | @include iro.bem-modifier('block') { |
22 | display: block; | 22 | display: block; |