summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-27 18:52:27 +0200
committerVolpeon <git@volpeon.ink>2022-03-27 18:52:27 +0200
commita08dee14bcc07ee31175265cb586e857d44fb12e (patch)
tree4d1d4cfdb09d76d395d37b06983bd212eb44aeb6 /src
parentUpdate (diff)
downloadiro-design-a08dee14bcc07ee31175265cb586e857d44fb12e.tar.gz
iro-design-a08dee14bcc07ee31175265cb586e857d44fb12e.tar.bz2
iro-design-a08dee14bcc07ee31175265cb586e857d44fb12e.zip
Improved bubbles
Diffstat (limited to 'src')
-rw-r--r--src/_apply-vars.scss10
-rw-r--r--src/_declare-vars.scss2
-rw-r--r--src/layouts/_bubble-group.scss21
-rw-r--r--src/objects/_bubble.scss22
4 files changed, 41 insertions, 14 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 0bdc3a8..052eeb0 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -25,6 +25,16 @@
25 @include iro.props-assign('palette-dark'); 25 @include iro.props-assign('palette-dark');
26} 26}
27 27
28@include iro.bem-theme('def') {
29 @include iro.props-assign('colors');
30 @include iro.props-assign('palette-light');
31
32 @media (prefers-color-scheme: dark) {
33 @include iro.props-assign('colors-dark');
34 @include iro.props-assign('palette-dark');
35 }
36}
37
28@include iro.bem-theme('hi') { 38@include iro.bem-theme('hi') {
29 @include iro.props-assign('colors'); 39 @include iro.props-assign('colors');
30 @include iro.props-assign('palette-light-hi'); 40 @include iro.props-assign('palette-light-hi');
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 883b753..c28cbb2 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -187,7 +187,7 @@
187 187
188@include iro.props-store(( 188@include iro.props-store((
189 --colors: ( 189 --colors: (
190 --gray: fn.gray-palette(6%), 190 --gray: fn.gray-palette(5%),
191 ), 191 ),
192), 'palette-dark-hi'); 192), 'palette-dark-hi');
193 193
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index 4db70d0..7593881 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -14,7 +14,6 @@
14 grid-template-columns: auto 1fr; 14 grid-template-columns: auto 1fr;
15 grid-auto-rows: auto; 15 grid-auto-rows: auto;
16 grid-template-areas: 'avatar bubble'; 16 grid-template-areas: 'avatar bubble';
17 justify-items: start;
18 align-items: flex-start; 17 align-items: flex-start;
19 gap: fn.dim(--spacing-y) fn.dim(--spacing-x); 18 gap: fn.dim(--spacing-y) fn.dim(--spacing-x);
20 19
@@ -23,16 +22,24 @@
23 position: sticky; 22 position: sticky;
24 top: 0; 23 top: 0;
25 justify-self: end; 24 justify-self: end;
26
27 @include iro.bem-next-elem('bubble') {
28 &::before {
29 display: block;
30 }
31 }
32 } 25 }
33 26
34 @include iro.bem-elem('bubble') { 27 @include iro.bem-elem('bubble') {
35 grid-column: bubble; 28 grid-column: bubble;
36 } 29 }
30
31 @include iro.bem-modifier('compact') {
32 justify-items: start;
33 }
34
35 @include iro.bem-modifier('arrow') {
36 @include iro.bem-elem('avatar') {
37 @include iro.bem-next-elem('bubble') {
38 &::before {
39 display: block;
40 }
41 }
42 }
43 }
37 } 44 }
38} 45}
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index 26746fe..41b26ff 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -10,15 +10,24 @@
10 10
11 @include iro.props-store(( 11 @include iro.props-store((
12 --dims: ( 12 --dims: (
13 --pad-x: fn.global-dim(--size --150), 13 --pad-x: fn.global-dim(--size --200),
14 --pad-y: fn.global-dim(--size --85), 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
19 --compact: (
20 --pad-x: fn.global-dim(--size --150),
21 --pad-y: fn.global-dim(--size --85),
22 ),
17 ) 23 )
18 ), 'dims'); 24 ), 'dims');
19 25
20 @include iro.bem-object(iro.props-namespace()) { 26 @include iro.bem-object(iro.props-namespace()) {
27 display: flex;
21 position: relative; 28 position: relative;
29 flex-direction: column;
30 gap: fn.dim(--spacing);
22 padding: fn.dim(--pad-y) fn.dim(--pad-x); 31 padding: fn.dim(--pad-y) fn.dim(--pad-x);
23 border-radius: fn.dim(--rounding); 32 border-radius: fn.dim(--rounding);
24 background-color: fn.global-color(--bg); 33 background-color: fn.global-color(--bg);
@@ -34,15 +43,16 @@
34 border-bottom-color: transparent; 43 border-bottom-color: transparent;
35 border-left-color: transparent; 44 border-left-color: transparent;
36 } 45 }
37
38 @include iro.bem-elem('user') {
39 display: block;
40 }
41 46
42 @include iro.bem-elem('time') { 47 @include iro.bem-elem('time') {
43 margin-left: 1em; 48 margin-left: 1em;
44 float: right; 49 float: right;
45 transform: translate(.2em, .2em); 50 transform: translate(.2em, .2em);
46 } 51 }
52
53 @include iro.bem-modifier('compact') {
54 gap: 0;
55 padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x);
56 }
47 } 57 }
48} 58}