Skip to content

Commit 515dbf9

Browse files
EranNLEranNL
committed
Made overlay css generic
1 parent 08f6d12 commit 515dbf9

File tree

4 files changed

+120
-54
lines changed

4 files changed

+120
-54
lines changed

‎src/style/components/_overlay.scss

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
.overlay-container {
2+
> .overlay-animator {
3+
position: relative;
4+
}
5+
6+
> .overlay-animator, & {
7+
> .arrow {
8+
position: absolute;
9+
z-index: -1;
10+
11+
&:before {
12+
content: '';
13+
position: absolute;
14+
}
15+
}
16+
}
17+
18+
&[data-popper-placement^="top"] {
19+
&.has-arrow {
20+
> .overlay-animator, & {
21+
> .content {
22+
margin-bottom: 8px;
23+
}
24+
25+
> .arrow {
26+
bottom: -8px;
27+
height: 8px;
28+
width: 16px;
29+
30+
&:before {
31+
border-top: solid 8px rgba(0, 0, 0, .7);
32+
border-left: solid 8px transparent;
33+
border-right: solid 8px transparent;
34+
}
35+
}
36+
}
37+
}
38+
}
39+
40+
&[data-popper-placement^="bottom"] {
41+
&.has-arrow {
42+
> .overlay-animator, & {
43+
> .content {
44+
margin-top: 8px;
45+
}
46+
47+
> .arrow {
48+
top: -8px;
49+
height: 8px;
50+
width: 16px;
51+
52+
&:before {
53+
border-bottom: solid 8px rgba(0, 0, 0, .7);
54+
border-left: solid 8px transparent;
55+
border-right: solid 8px transparent;
56+
}
57+
}
58+
}
59+
}
60+
}
61+
62+
&[data-popper-placement^="right"] {
63+
&.has-arrow {
64+
> .overlay-animator, & {
65+
> .content {
66+
margin-left: 8px;
67+
}
68+
69+
> .arrow {
70+
left: 0;
71+
height: 16px;
72+
width: 8px;
73+
74+
&:before {
75+
border-right: solid 8px rgba(0, 0, 0, .7);
76+
border-top: solid 8px transparent;
77+
border-bottom: solid 8px transparent;
78+
}
79+
}
80+
}
81+
}
82+
}
83+
84+
&[data-popper-placement^="left"] {
85+
&.has-arrow {
86+
> .overlay-animator, & {
87+
> .content {
88+
margin-right: 8px;
89+
}
90+
91+
> .arrow {
92+
right: 0;
93+
height: 16px;
94+
width: 8px;
95+
96+
&:before {
97+
border-bottom: solid 8px transparent;
98+
border-left: solid 8px rgba(0, 0, 0, .7);
99+
border-top: solid 8px transparent;
100+
}
101+
}
102+
}
103+
}
104+
}
105+
}

‎src/style/components/_tooltips.scss

Lines changed: 13 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,20 @@
11
.tooltip {
2-
> .overlay-animator {
3-
position: relative;
4-
}
5-
62
> .overlay-animator, & {
73
> .content {
84
background: rgba(0, 0, 0, .7);
95
color: #fff;
106
padding: calc(var(--base-gutter) / 2);
117
border-radius: var(--base-border-radius);
128
}
13-
14-
> .arrow {
15-
position: absolute;
16-
z-index: -1;
17-
18-
&:before {
19-
content: '';
20-
position: absolute;
21-
}
22-
}
239
}
2410

2511
&[data-popper-placement^="top"] {
2612
&.has-arrow {
2713
> .overlay-animator, & {
28-
> .content {
29-
margin-bottom: 8px;
30-
}
31-
32-
> .arrow {
33-
bottom: -8px;
34-
height: 8px;
35-
width: 16px;
36-
37-
&:before {
38-
border-top: solid 8px rgba(0, 0, 0, .7);
39-
border-left: solid 8px transparent;
40-
border-right: solid 8px transparent;
41-
}
14+
> .arrow:before {
15+
border-top: solid 8px rgba(0, 0, 0, .7);
16+
border-left: solid 8px transparent;
17+
border-right: solid 8px transparent;
4218
}
4319
}
4420
}
@@ -47,20 +23,10 @@
4723
&[data-popper-placement^="bottom"] {
4824
&.has-arrow {
4925
> .overlay-animator, & {
50-
> .content {
51-
margin-top: 8px;
52-
}
53-
54-
> .arrow {
55-
top: -8px;
56-
height: 8px;
57-
width: 16px;
58-
59-
&:before {
60-
border-bottom: solid 8px rgba(0, 0, 0, .7);
61-
border-left: solid 8px transparent;
62-
border-right: solid 8px transparent;
63-
}
26+
> .arrow:before {
27+
border-bottom: solid 8px rgba(0, 0, 0, .7);
28+
border-left: solid 8px transparent;
29+
border-right: solid 8px transparent;
6430
}
6531
}
6632
}
@@ -72,17 +38,10 @@
7238
> .content {
7339
margin-left: 8px;
7440
}
75-
76-
> .arrow {
77-
left: 0;
78-
height: 16px;
79-
width: 8px;
80-
81-
&:before {
82-
border-right: solid 8px rgba(0, 0, 0, .7);
83-
border-top: solid 8px transparent;
84-
border-bottom: solid 8px transparent;
85-
}
41+
> .arrow:before {
42+
border-right: solid 8px rgba(0, 0, 0, .7);
43+
border-top: solid 8px transparent;
44+
border-bottom: solid 8px transparent;
8645
}
8746
}
8847
}
@@ -95,7 +54,7 @@
9554
margin-right: 8px;
9655
}
9756

98-
> .arrow {
57+
> .arrow:before {
9958
right: 0;
10059
border-bottom: solid 8px transparent;
10160
border-left: solid 8px rgba(0, 0, 0, .7);

‎src/style/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
@use "components/icons";
1616
@use "components/forms";
1717
@use "components/tags";
18+
@use "components/overlay";
1819
@use "components/tooltips";
1920

2021
/**

‎www/src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ ReactDom.render(
156156
<Tooltip
157157
content="Megalange tekst"
158158
placement="left"
159+
trigger="click"
159160
>
160161
<Button
161162
variant={Variant.ORANGE}

0 commit comments

Comments
 (0)