summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/objects/emoji.scss33
-rw-r--r--assets/css/style.scss1
2 files changed, 34 insertions, 0 deletions
diff --git a/assets/css/objects/emoji.scss b/assets/css/objects/emoji.scss
new file mode 100644
index 0000000..8387e1d
--- /dev/null
+++ b/assets/css/objects/emoji.scss
@@ -0,0 +1,33 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('emoji') {
5 @include iro.props-store((
6 --dims: (
7 --size: 1em,
8 --rounding: 3px,
9 )
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: (
14 --bg: fn.global-color(--obj-hi),
15 )
16 ), 'colors');
17
18 @include iro.bem-object(iro.props-namespace()) {
19 display: inline;
20 width: fn.dim(--size);
21 height: fn.dim(--size);
22 margin: calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding));
23 padding: fn.dim(--rounding);
24 transform: scale(1.5);
25 transition: transform .2s ease, background-color .2s ease;
26 border-radius: calc(fn.dim(--rounding) / 3);
27
28 &:hover {
29 transform: scale(3);
30 background-color: fn.color(--bg);
31 }
32 }
33}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 982aae8..f7d3e6b 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -17,6 +17,7 @@
17@use 'iro-design/src/objects/icon' as iro-icon; 17@use 'iro-design/src/objects/icon' as iro-icon;
18@use 'iro-design/src/objects/alert' as iro-alert; 18@use 'iro-design/src/objects/alert' as iro-alert;
19@use 'iro-design/src/objects/lightbox' as iro-lightbox; 19@use 'iro-design/src/objects/lightbox' as iro-lightbox;
20@use 'objects/emoji';
20 21
21@use 'components/main'; 22@use 'components/main';
22@use 'components/footer'; 23@use 'components/footer';