summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-28 09:00:40 +0200
committerVolpeon <git@volpeon.ink>2022-03-28 09:00:40 +0200
commit120ad0cdc11143fb6f184bcbca332dbf8a2114e8 (patch)
treeb25fbe77ac51d99d20e09be6308af718df5d174f /src
parentImproved bubbles (diff)
downloadiro-design-120ad0cdc11143fb6f184bcbca332dbf8a2114e8.tar.gz
iro-design-120ad0cdc11143fb6f184bcbca332dbf8a2114e8.tar.bz2
iro-design-120ad0cdc11143fb6f184bcbca332dbf8a2114e8.zip
Improved bubble
Diffstat (limited to 'src')
-rw-r--r--src/_utils.scss5
-rw-r--r--src/layouts/_bubble-group.scss13
-rw-r--r--src/layouts/_card.scss3
-rw-r--r--src/objects/_bubble.scss5
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: (
89 position: relative; 89 position: relative;
90} 90}
91 91
92@include iro.bem-utility('sticky-top') {
93 position: sticky;
94 top: 0;
95}
96
92@include iro.bem-utility('themed') { 97@include iro.bem-utility('themed') {
93 background-color: fn.global-color(--bg); 98 background-color: fn.global-color(--bg);
94 color: fn.global-color(--fg); 99 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 @@
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 --50), 8 --spacing-y: fn.global-dim(--size --150),
9
10 --compact: (
11 --spacing-x: fn.global-dim(--size --225),
12 --spacing-y: fn.global-dim(--size --50),
13 )
9 ) 14 )
10 ), 'dims'); 15 ), 'dims');
11 16
@@ -18,10 +23,7 @@
18 gap: fn.dim(--spacing-y) fn.dim(--spacing-x); 23 gap: fn.dim(--spacing-y) fn.dim(--spacing-x);
19 24
20 @include iro.bem-elem('avatar') { 25 @include iro.bem-elem('avatar') {
21 grid-area: avatar; 26 grid-area: avatar;
22 position: sticky;
23 top: 0;
24 justify-self: end;
25 } 27 }
26 28
27 @include iro.bem-elem('bubble') { 29 @include iro.bem-elem('bubble') {
@@ -30,6 +32,7 @@
30 32
31 @include iro.bem-modifier('compact') { 33 @include iro.bem-modifier('compact') {
32 justify-items: start; 34 justify-items: start;
35 gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
33 } 36 }
34 37
35 @include iro.bem-modifier('arrow') { 38 @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 @@
7 --dims: ( 7 --dims: (
8 --pad-x: fn.global-dim(--size --150), 8 --pad-x: fn.global-dim(--size --150),
9 --pad-y: fn.global-dim(--size --85), 9 --pad-y: fn.global-dim(--size --85),
10
10 --75: ( 11 --75: (
11 --pad-x: fn.global-dim(--size --100), 12 --pad-x: fn.global-dim(--size --100),
12 --pad-y: fn.global-dim(--size --50), 13 --pad-y: fn.global-dim(--size --50),
13 ), 14 ),
15
14 --200: ( 16 --200: (
15 --pad-x: fn.global-dim(--size --300), 17 --pad-x: fn.global-dim(--size --300),
16 --pad-y: fn.global-dim(--size --150), 18 --pad-y: fn.global-dim(--size --150),
17 ), 19 ),
20
18 --300: ( 21 --300: (
19 --pad-x: fn.global-dim(--size --450), 22 --pad-x: fn.global-dim(--size --450),
20 --pad-y: fn.global-dim(--size --225), 23 --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 @@
14 --pad-y: fn.global-dim(--size --150), 14 --pad-y: fn.global-dim(--size --150),
15 --rounding: 3px, 15 --rounding: 3px,
16 --arrow-size: fn.global-dim(--size --100), 16 --arrow-size: fn.global-dim(--size --100),
17 --spacing: fn.global-dim(--size --100),
18 17
19 --compact: ( 18 --compact: (
20 --pad-x: fn.global-dim(--size --150), 19 --pad-x: fn.global-dim(--size --150),
@@ -24,10 +23,7 @@
24 ), 'dims'); 23 ), 'dims');
25 24
26 @include iro.bem-object(iro.props-namespace()) { 25 @include iro.bem-object(iro.props-namespace()) {
27 display: flex;
28 position: relative; 26 position: relative;
29 flex-direction: column;
30 gap: fn.dim(--spacing);
31 padding: fn.dim(--pad-y) fn.dim(--pad-x); 27 padding: fn.dim(--pad-y) fn.dim(--pad-x);
32 border-radius: fn.dim(--rounding); 28 border-radius: fn.dim(--rounding);
33 background-color: fn.global-color(--bg); 29 background-color: fn.global-color(--bg);
@@ -51,7 +47,6 @@
51 } 47 }
52 48
53 @include iro.bem-modifier('compact') { 49 @include iro.bem-modifier('compact') {
54 gap: 0;
55 padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x); 50 padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x);
56 } 51 }
57 } 52 }