diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_apply-vars.scss | 10 | ||||
-rw-r--r-- | src/_declare-vars.scss | 2 | ||||
-rw-r--r-- | src/layouts/_bubble-group.scss | 21 | ||||
-rw-r--r-- | src/objects/_bubble.scss | 22 |
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 | } |