summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_bubble.scss45
-rw-r--r--src/objects/_message.scss51
2 files changed, 51 insertions, 45 deletions
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
deleted file mode 100644
index d91b6d1..0000000
--- a/src/objects/_bubble.scss
+++ /dev/null
@@ -1,45 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('bubble') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --200),
8 --pad-y: fn.global-dim(--size --150),
9 --rounding: 0,
10
11 --75: (
12 --pad-x: fn.global-dim(--size --150),
13 --pad-y: fn.global-dim(--size --85),
14 ),
15 )
16 ), 'dims');
17
18 @include iro.props-store((
19 --colors: (
20 --highlight: fn.global-color(--fg-lo),
21 ),
22 ), 'colors');
23
24 @include iro.bem-object(iro.props-namespace()) {
25 position: relative;
26 padding: fn.dim(--pad-y) fn.dim(--pad-x);
27 border-radius: fn.dim(--rounding);
28 background-color: fn.global-color(--bg);
29 color: fn.global-color(--fg);
30
31 @include iro.bem-modifier('highlight') {
32 box-shadow: -3px 0 0 0 fn.color(--highlight);
33 }
34
35 @include iro.bem-elem('suffix') {
36 margin-left: 1em;
37 float: right;
38 transform: translate(.2em, .2em);
39 }
40
41 @include iro.bem-modifier('75') {
42 padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x);
43 }
44 }
45}
diff --git a/src/objects/_message.scss b/src/objects/_message.scss
new file mode 100644
index 0000000..283ce26
--- /dev/null
+++ b/src/objects/_message.scss
@@ -0,0 +1,51 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('message') {
5 @include iro.props-store((
6 --dims: (
7 --bubble: (
8 --pad-x: fn.global-dim(--size --200),
9 --pad-y: fn.global-dim(--size --150),
10 --rounding: 0,
11
12 --75: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 ),
16 ),
17 )
18 ), 'dims');
19
20 @include iro.props-store((
21 --colors: (
22 --highlight: fn.global-color(--fg-lo),
23 ),
24 ), 'colors');
25
26 @include iro.bem-object(iro.props-namespace()) {
27 @include iro.bem-elem('suffix') {
28 margin-left: 1em;
29 float: right;
30 }
31
32 @include iro.bem-modifier('bubble') {
33 padding: fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x);
34 border-radius: fn.dim(--bubble --rounding);
35 background-color: fn.global-color(--bg);
36 color: fn.global-color(--fg);
37
38 @include iro.bem-elem('suffix') {
39 transform: translate(.2em, .2em);
40 }
41
42 @include iro.bem-modifier('highlight') {
43 box-shadow: -3px 0 0 0 fn.color(--highlight);
44 }
45
46 @include iro.bem-modifier('75') {
47 padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x);
48 }
49 }
50 }
51}