Improved bubble

4 files changed, 16 insertions, 10 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 860fe3e..c0bc087 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -89,6 +89,11 @@ $dirs: (
     position: relative;
 }
 
+@include iro.bem-utility('sticky-top') {
+    position: sticky;
+    top:      0;
+}
+
 @include iro.bem-utility('themed') {
     background-color: fn.global-color(--bg);
     color:            fn.global-color(--fg);
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index 7593881..3e280b5 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -5,7 +5,12 @@
     @include iro.props-store((
         --dims: (
             --spacing-x: fn.global-dim(--size --225),
-            --spacing-y: fn.global-dim(--size --50),
+            --spacing-y: fn.global-dim(--size --150),
+
+            --compact: (
+                --spacing-x: fn.global-dim(--size --225),
+                --spacing-y: fn.global-dim(--size --50),
+            )
         )
     ), 'dims');
 
@@ -18,10 +23,7 @@
         gap:                   fn.dim(--spacing-y) fn.dim(--spacing-x);
         
         @include iro.bem-elem('avatar') {
-            grid-area:    avatar;
-            position:     sticky;
-            top:          0;
-            justify-self: end;
+            grid-area: avatar;
         }
         
         @include iro.bem-elem('bubble') {
@@ -30,6 +32,7 @@
         
         @include iro.bem-modifier('compact') {
             justify-items: start;
+            gap:           fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
         }
         
         @include iro.bem-modifier('arrow') {
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index e6c379d..9e54d50 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -7,14 +7,17 @@
         --dims: (
             --pad-x: fn.global-dim(--size --150),
             --pad-y: fn.global-dim(--size --85),
+
             --75: (
                 --pad-x: fn.global-dim(--size --100),
                 --pad-y: fn.global-dim(--size --50),
             ),
+
             --200: (
                 --pad-x: fn.global-dim(--size --300),
                 --pad-y: fn.global-dim(--size --150),
             ),
+            
             --300: (
                 --pad-x: fn.global-dim(--size --450),
                 --pad-y: fn.global-dim(--size --225),
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index 41b26ff..1259b4a 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -14,7 +14,6 @@
             --pad-y:      fn.global-dim(--size --150),
             --rounding:   3px,
             --arrow-size: fn.global-dim(--size --100),
-            --spacing:    fn.global-dim(--size --100),
 
             --compact: (
                 --pad-x: fn.global-dim(--size --150),
@@ -24,10 +23,7 @@
     ), 'dims');
 
     @include iro.bem-object(iro.props-namespace()) {
-        display:          flex;
         position:         relative;
-        flex-direction:   column;
-        gap:              fn.dim(--spacing);
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
         border-radius:    fn.dim(--rounding);
         background-color: fn.global-color(--bg);
@@ -51,7 +47,6 @@
         }
         
         @include iro.bem-modifier('compact') {
-            gap:     0;
             padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x);
         }
     }