Skip to content

Commit 653801e

Browse files
mrholekmrholek
committed
fix: tippy arrow position
1 parent 1aa4b80 commit 653801e

File tree

1 file changed

+120
-39
lines changed

1 file changed

+120
-39
lines changed

‎scss/vendors/tippyjs/popover.scss

Lines changed: 120 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,9 @@
2727
>.#{$namespace-prefix}-arrow {
2828
position: absolute;
2929
display: block;
30-
width: $popover-arrow-width;
31-
height: $popover-arrow-height;
32-
// margin: 0 $popover-border-radius;
30+
color: transparent;
3331

32+
&::before,
3433
&::after {
3534
position: absolute;
3635
display: block;
@@ -39,55 +38,137 @@
3938
border-style: solid;
4039
}
4140
}
42-
.#{$namespace-prefix}-arrow {
43-
@include themes($popover-theme-map) {
44-
border-color: themes-get-value("popover-arrow-outer-color");
45-
color: themes-get-value("popover-arrow-color");
41+
42+
// .#{$namespace-prefix}-arrow {
43+
// @include themes($popover-theme-map) {
44+
// border-color: themes-get-value("popover-arrow-outer-color");
45+
// color: themes-get-value("popover-arrow-color");
46+
// }
47+
48+
// &::after {
49+
// content: '';
50+
// z-index: -1;
51+
// position: absolute;
52+
// border-color: transparent;
53+
// border-style: solid;
54+
// border-width: 8px;
55+
// }
56+
// }
57+
58+
&[data-placement^='top'],
59+
&[data-placement^='bottom'] {
60+
> .#{$namespace-prefix}-arrow {
61+
width: add($popover-arrow-width, (2 * $popover-border-radius));
62+
height: $popover-arrow-height;
63+
padding: 0 $popover-border-radius; // make sure the arrow does not touch the popover's rounded corners
64+
65+
&::before {
66+
left: auto;
67+
}
4668
}
69+
}
4770

48-
&::after {
49-
content: '';
50-
z-index: -1;
51-
position: absolute;
52-
border-color: transparent;
53-
border-style: solid;
54-
border-width: 8px;
71+
&[data-placement^='right'],
72+
&[data-placement^='left'] {
73+
> .#{$namespace-prefix}-arrow {
74+
width: $popover-arrow-height;
75+
height: add($popover-arrow-width, (2 * $popover-border-radius));
76+
padding: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
77+
margin: 0;
5578
}
5679
}
5780

58-
&[data-placement^='top']>.#{$namespace-prefix}-arrow {
59-
&::after {
60-
border-top-color: inherit;
61-
border-width: 8px 8px 0;
62-
bottom: -8px;
63-
left: -1.5px;
81+
82+
&[data-placement^='top'] {
83+
84+
> .#{$namespace-prefix}-arrow {
85+
bottom: subtract(-$popover-arrow-height, $popover-border-width);
86+
87+
&::before {
88+
bottom: 0;
89+
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
90+
@include themes($popover-theme-map) {
91+
border-top-color: themes-get-value("popover-arrow-outer-color");
92+
}
93+
}
94+
95+
&::after {
96+
bottom: $popover-border-width;
97+
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
98+
@include themes($popover-theme-map) {
99+
border-top-color: themes-get-value("popover-arrow-color");
100+
}
101+
}
64102
}
65103
}
66104

67-
&[data-placement^='bottom']>.#{$namespace-prefix}-arrow {
68-
&::after {
69-
border-bottom-color: inherit;
70-
border-width: 0 8px 8px;
71-
top: -8px;
72-
left: -1.5px;
105+
&[data-placement^='bottom'] {
106+
107+
> .#{$namespace-prefix}-arrow {
108+
top: subtract(-$popover-arrow-height, $popover-border-width);
109+
110+
&::before {
111+
top: 0;
112+
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
113+
@include themes($popover-theme-map) {
114+
border-bottom-color: themes-get-value("popover-arrow-outer-color");
115+
}
116+
}
117+
118+
&::after {
119+
top: $popover-border-width;
120+
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
121+
@include themes($popover-theme-map) {
122+
border-bottom-color: themes-get-value("popover-arrow-color");
123+
}
124+
}
73125
}
74126
}
75127

76-
&[data-placement^='left']>.#{$namespace-prefix}-arrow {
77-
&::after {
78-
border-left-color: inherit;
79-
border-width: 8px 0 8px 8px;
80-
right: -8px;
81-
top: -1.5px;
128+
&[data-placement^='left'] {
129+
130+
> .#{$namespace-prefix}-arrow {
131+
right: subtract(-$popover-arrow-height, $popover-border-width);
132+
133+
&::before {
134+
right: 0;
135+
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
136+
@include themes($popover-theme-map) {
137+
border-left-color: themes-get-value("popover-arrow-outer-color");
138+
}
139+
}
140+
141+
&::after {
142+
right: $popover-border-width;
143+
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
144+
@include themes($popover-theme-map) {
145+
border-left-color: themes-get-value("popover-arrow-color");
146+
}
147+
}
82148
}
83149
}
84150

85-
&[data-placement^='right']>.#{$namespace-prefix}-arrow {
86-
&::after {
87-
border-width: 8px 8px 8px 0;
88-
left: -8px;
89-
top: -1.5px;
90-
border-right-color: inherit;
151+
152+
&[data-placement^='right'] {
153+
154+
> .#{$namespace-prefix}-arrow {
155+
left: subtract(-$popover-arrow-height, $popover-border-width);
156+
157+
&::before {
158+
left: 0;
159+
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
160+
@include themes($popover-theme-map) {
161+
border-right-color: themes-get-value("popover-arrow-outer-color");
162+
}
163+
}
164+
165+
&::after {
166+
left: $popover-border-width;
167+
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
168+
@include themes($popover-theme-map) {
169+
border-right-color: themes-get-value("popover-arrow-color");
170+
}
171+
}
91172
}
92173
}
93-
}
174+
}

0 commit comments

Comments
 (0)