summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-11-09 11:04:06 +0100
committerVolpeon <git@volpeon.ink>2023-11-09 11:04:06 +0100
commit5b3cb27f73012404c4d8c7c41746de560e6246c7 (patch)
tree6bba29f41839b8be0017462a48f8f250f0f7e075 /src/objects
parentChanged bubble group spacing implementation (diff)
downloadiro-design-5b3cb27f73012404c4d8c7c41746de560e6246c7.tar.gz
iro-design-5b3cb27f73012404c4d8c7c41746de560e6246c7.tar.bz2
iro-design-5b3cb27f73012404c4d8c7c41746de560e6246c7.zip
Simplified bubble arrows
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_bubble.scss27
1 files changed, 3 insertions, 24 deletions
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 }