summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/layouts/_bubble-group.scss49
-rw-r--r--src/objects/_bubble.scss27
2 files changed, 34 insertions, 42 deletions
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index fc861aa..e4bc666 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -4,8 +4,9 @@
4@include iro.props-namespace('bubble-group') { 4@include iro.props-namespace('bubble-group') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --spacing-x: fn.global-dim(--size --225), 7 --spacing-x: fn.global-dim(--size --225),
8 --spacing-y: fn.global-dim(--size --150), 8 --spacing-y: fn.global-dim(--size --150),
9 --arrow-size: fn.global-dim(--size --100),
9 10
10 --compact: ( 11 --compact: (
11 --spacing-x: fn.global-dim(--size --225), 12 --spacing-x: fn.global-dim(--size --225),
@@ -32,11 +33,33 @@
32 min-width: 0; 33 min-width: 0;
33 max-width: 100%; 34 max-width: 100%;
34 35
36 &::before {
37 content: '';
38 display: none;
39 position: absolute;
40 top: 0;
41 left: calc(-1 * fn.dim(--arrow-size));
42 border: fn.dim(--arrow-size) solid fn.global-color(--bg);
43 border-bottom-color: transparent;
44 border-left-color: transparent;
45 }
46
35 @include iro.bem-next-twin-elem { 47 @include iro.bem-next-twin-elem {
36 margin-top: fn.dim(--spacing-y); 48 margin-top: fn.dim(--spacing-y);
37 } 49 }
38 } 50 }
39 51
52 @include iro.bem-modifier('right') {
53 @include iro.bem-elem('bubble') {
54 &::before {
55 right: calc(-1 * fn.dim(--arrow-size));
56 left: auto;
57 border-right-color: transparent;
58 border-left-color: fn.global-color(--bg);
59 }
60 }
61 }
62
40 @include iro.bem-modifier('compact') { 63 @include iro.bem-modifier('compact') {
41 gap: 0 fn.dim(--compact --spacing-x); 64 gap: 0 fn.dim(--compact --spacing-x);
42 65
@@ -70,24 +93,14 @@
70 } 93 }
71 94
72 @include iro.bem-modifier('arrow') { 95 @include iro.bem-modifier('arrow') {
73 @include iro.bem-elem('avatar') { 96 @include iro.bem-elem('bubble') {
74 @include iro.bem-next-elem('bubble') { 97 &::before {
75 &::before { 98 display: block;
76 display: block;
77 }
78 } 99 }
79 }
80
81 @include iro.bem-modifier('right') {
82 @include iro.bem-elem('avatar') {
83 @include iro.bem-next-elem('bubble') {
84 &::before {
85 display: none;
86 }
87 100
88 &::after { 101 @include iro.bem-next-twin-elem {
89 display: block; 102 &::before {
90 } 103 display: none;
91 } 104 }
92 } 105 }
93 } 106 }
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index 477f475..d91b6d1 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -4,10 +4,9 @@
4@include iro.props-namespace('bubble') { 4@include iro.props-namespace('bubble') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --200), 7 --pad-x: fn.global-dim(--size --200),
8 --pad-y: fn.global-dim(--size --150), 8 --pad-y: fn.global-dim(--size --150),
9 --rounding: 0, 9 --rounding: 0,
10 --arrow-size: fn.global-dim(--size --100),
11 10
12 --75: ( 11 --75: (
13 --pad-x: fn.global-dim(--size --150), 12 --pad-x: fn.global-dim(--size --150),
@@ -29,26 +28,6 @@
29 background-color: fn.global-color(--bg); 28 background-color: fn.global-color(--bg);
30 color: fn.global-color(--fg); 29 color: fn.global-color(--fg);
31 30
32 &::before,
33 &::after {
34 content: '';
35 display: none;
36 position: absolute;
37 top: 0;
38 border: fn.dim(--arrow-size) solid fn.global-color(--bg);
39 border-bottom-color: transparent;
40 }
41
42 &::before {
43 left: calc(-1 * fn.dim(--arrow-size));
44 border-left-color: transparent;
45 }
46
47 &::after {
48 right: calc(-1 * fn.dim(--arrow-size));
49 border-right-color: transparent;
50 }
51
52 @include iro.bem-modifier('highlight') { 31 @include iro.bem-modifier('highlight') {
53 box-shadow: -3px 0 0 0 fn.color(--highlight); 32 box-shadow: -3px 0 0 0 fn.color(--highlight);
54 } 33 }