summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_objects.scss1
-rw-r--r--src/objects/_emoji.scss39
-rw-r--r--src/objects/_icon.scss4
3 files changed, 42 insertions, 2 deletions
diff --git a/src/_objects.scss b/src/_objects.scss
index 3e09104..f054c53 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,4 +1,5 @@
1@use 'objects/icon'; 1@use 'objects/icon';
2@use 'objects/emoji';
2@use 'objects/heading'; 3@use 'objects/heading';
3@use 'objects/divider'; 4@use 'objects/divider';
4@use 'objects/badge'; 5@use 'objects/badge';
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;