diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/layouts/_bubble-group.scss | 49 | ||||
-rw-r--r-- | src/objects/_bubble.scss | 27 |
2 files changed, 34 insertions, 42 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 | } |
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss index 477f475..d91b6d1 100644 --- a/src/objects/_bubble.scss +++ b/src/objects/_bubble.scss | |||
@@ -4,10 +4,9 @@ | |||
4 | @include iro.props-namespace('bubble') { | 4 | @include iro.props-namespace('bubble') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --pad-x: fn.global-dim(--size --200), | 7 | --pad-x: fn.global-dim(--size --200), |
8 | --pad-y: fn.global-dim(--size --150), | 8 | --pad-y: fn.global-dim(--size --150), |
9 | --rounding: 0, | 9 | --rounding: 0, |
10 | --arrow-size: fn.global-dim(--size --100), | ||
11 | 10 | ||
12 | --75: ( | 11 | --75: ( |
13 | --pad-x: fn.global-dim(--size --150), | 12 | --pad-x: fn.global-dim(--size --150), |
@@ -29,26 +28,6 @@ | |||
29 | background-color: fn.global-color(--bg); | 28 | background-color: fn.global-color(--bg); |
30 | color: fn.global-color(--fg); | 29 | color: fn.global-color(--fg); |
31 | 30 | ||
32 | &::before, | ||
33 | &::after { | ||
34 | content: ''; | ||
35 | display: none; | ||
36 | position: absolute; | ||
37 | top: 0; | ||
38 | border: fn.dim(--arrow-size) solid fn.global-color(--bg); | ||
39 | border-bottom-color: transparent; | ||
40 | } | ||
41 | |||
42 | &::before { | ||
43 | left: calc(-1 * fn.dim(--arrow-size)); | ||
44 | border-left-color: transparent; | ||
45 | } | ||
46 | |||
47 | &::after { | ||
48 | right: calc(-1 * fn.dim(--arrow-size)); | ||
49 | border-right-color: transparent; | ||
50 | } | ||
51 | |||
52 | @include iro.bem-modifier('highlight') { | 31 | @include iro.bem-modifier('highlight') { |
53 | box-shadow: -3px 0 0 0 fn.color(--highlight); | 32 | box-shadow: -3px 0 0 0 fn.color(--highlight); |
54 | } | 33 | } |