summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-11-09 11:04:06 +0100
committerVolpeon <git@volpeon.ink>2023-11-09 11:04:06 +0100
commit5b3cb27f73012404c4d8c7c41746de560e6246c7 (patch)
tree6bba29f41839b8be0017462a48f8f250f0f7e075 /src/layouts
parentChanged bubble group spacing implementation (diff)
downloadiro-design-5b3cb27f73012404c4d8c7c41746de560e6246c7.tar.gz
iro-design-5b3cb27f73012404c4d8c7c41746de560e6246c7.tar.bz2
iro-design-5b3cb27f73012404c4d8c7c41746de560e6246c7.zip
Simplified bubble arrows
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_bubble-group.scss49
1 files changed, 31 insertions, 18 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 }