Skip to content

Commit bf6a3e4

Browse files
mrholekmrholek
committed
Merge branch 'feat-add-tippyjs-support' into dev
2 parents b99d2e7 + 7840642 commit bf6a3e4

File tree

5 files changed

+208
-0
lines changed

5 files changed

+208
-0
lines changed

‎scss/_vendors.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
@import "vendors/perfect-scrollbar";
2+
@import "vendors/tippyjs/index.scss";

‎scss/vendors/tippyjs/_vars.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
$namespace-prefix: 'tippy' !default;
2+
$placements: 'top', 'bottom', 'left', 'right';
3+
$origins: bottom, top, right, left;
4+
$arrow-size: 16px;

‎scss/vendors/tippyjs/animations/fade.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import '../_vars.scss';
2+
3+
.#{$namespace-prefix}-box {
4+
&[data-animation='fade'][data-state='hidden'] {
5+
opacity: 0;
6+
}
7+
}

‎scss/vendors/tippyjs/index.scss

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@import './_vars.scss';
2+
@import './animations/fade.scss';
3+
@import './../../variables';
4+
@import './popover.scss';
5+
6+
.#{$namespace-prefix}-iOS {
7+
cursor: pointer !important;
8+
-webkit-tap-highlight-color: transparent;
9+
}
10+
11+
[data-#{$namespace-prefix}-root] {
12+
max-width: calc(100vw - 10px);
13+
}
14+
15+
.#{$namespace-prefix}-box {
16+
position: relative;
17+
z-index: $zindex-tooltip;
18+
display: block;
19+
margin: $tooltip-margin;
20+
// background-color: $color;
21+
// color: white;
22+
// border-radius: 4px;
23+
@include reset-text();
24+
@include font-size($tooltip-font-size);
25+
word-wrap: break-word;
26+
outline: 0;
27+
transition-property: transform, visibility, opacity;
28+
29+
&[data-placement^='top'] > .#{$namespace-prefix}-arrow {
30+
bottom: 0;
31+
32+
&::before {
33+
bottom: - $tooltip-arrow-height;
34+
left: 0;
35+
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
36+
border-top-color: initial;
37+
}
38+
}
39+
40+
&[data-placement^='bottom'] > .#{$namespace-prefix}-arrow {
41+
top: 0;
42+
43+
&::before {
44+
top: - $tooltip-arrow-height;
45+
left: 0;
46+
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
47+
border-bottom-color: initial;
48+
}
49+
}
50+
51+
&[data-placement^='left'] > .#{$namespace-prefix}-arrow {
52+
right: 0;
53+
width: $tooltip-arrow-height;
54+
height: $tooltip-arrow-width;
55+
56+
&::before {
57+
right: - $tooltip-arrow-height;
58+
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
59+
border-left-color: initial;
60+
}
61+
}
62+
63+
&[data-placement^='right'] > .#{$namespace-prefix}-arrow {
64+
left: 0;
65+
width: $tooltip-arrow-height;
66+
height: $tooltip-arrow-width;
67+
68+
&::before {
69+
left: - $tooltip-arrow-height;
70+
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
71+
border-right-color: initial;
72+
}
73+
}
74+
75+
&[data-inertia][data-state='visible'] {
76+
transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
77+
}
78+
}
79+
80+
.#{$namespace-prefix}-arrow {
81+
position: absolute;
82+
display: block;
83+
width: $tooltip-arrow-width;
84+
height: $tooltip-arrow-height;
85+
color: $tooltip-arrow-color;
86+
87+
&::before {
88+
position: absolute;
89+
display: block;
90+
content: "";
91+
border-color: transparent;
92+
border-style: solid;
93+
}
94+
}
95+
96+
.#{$namespace-prefix}-content {
97+
max-width: $tooltip-max-width;
98+
padding: $tooltip-padding-y $tooltip-padding-x;
99+
color: $tooltip-color;
100+
text-align: center;
101+
background-color: $tooltip-bg;
102+
@include border-radius($tooltip-border-radius);
103+
}

‎scss/vendors/tippyjs/popover.scss

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
.#{$namespace-prefix}-box[data-theme~='cpopover'] {
2+
z-index: $zindex-popover;
3+
display: block;
4+
max-width: $popover-max-width;
5+
@include reset-text();
6+
@include font-size($popover-font-size);
7+
word-wrap: break-word;
8+
background-clip: padding-box;
9+
border: $popover-border-width solid;
10+
@include border-radius($popover-border-radius);
11+
@include box-shadow($popover-box-shadow);
12+
13+
@include themes($popover-theme-map) {
14+
background-color: themes-get-value("popover-bg");
15+
border-color: themes-get-value("popover-border-color");
16+
}
17+
18+
>.#{$namespace-prefix}-content {
19+
max-width: auto;
20+
padding: 0;
21+
color: initial;
22+
text-align: initial;
23+
background-color: initial;
24+
border-radius: initial;
25+
}
26+
27+
>.#{$namespace-prefix}-arrow {
28+
position: absolute;
29+
display: block;
30+
width: $popover-arrow-width;
31+
height: $popover-arrow-height;
32+
// margin: 0 $popover-border-radius;
33+
34+
&::after {
35+
position: absolute;
36+
display: block;
37+
content: "";
38+
border-color: transparent;
39+
border-style: solid;
40+
}
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']>.#{$namespace-prefix}-arrow {
59+
&::after {
60+
border-top-color: inherit;
61+
border-width: 8px 8px 0;
62+
bottom: -8px;
63+
left: -1.5px;
64+
}
65+
}
66+
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;
73+
}
74+
}
75+
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;
82+
}
83+
}
84+
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;
91+
}
92+
}
93+
}

0 commit comments

Comments
 (0)