Skip to content

Commit 511aa7a

Browse files
mrholekmrholek
committed
feat: add tippyjs styles
1 parent 5ca7391 commit 511aa7a

24 files changed

+968
-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/_mixins.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@mixin backdrop-transform-enter($placement) {
2+
$scale: 1;
3+
@if ($placement == 'top') {
4+
transform: scale($scale) translate(-50%, -55%);
5+
} @else if ($placement == 'bottom') {
6+
transform: scale($scale) translate(-50%, -45%);
7+
} @else if ($placement == 'left') {
8+
transform: scale($scale) translate(-50%, -50%);
9+
} @else if ($placement == 'right') {
10+
transform: scale($scale) translate(-50%, -50%);
11+
}
12+
}
13+
14+
@mixin backdrop-transform-leave($placement) {
15+
$scale: 0.2;
16+
@if ($placement == 'top') {
17+
transform: scale($scale) translate(-50%, -45%);
18+
} @else if ($placement == 'bottom') {
19+
transform: scale($scale) translate(-50%, 0);
20+
} @else if ($placement == 'left') {
21+
transform: scale($scale) translate(-75%, -50%);
22+
} @else if ($placement == 'right') {
23+
transform: scale($scale) translate(-25%, -50%);
24+
}
25+
}

‎scss/vendors/tippyjs/_vars.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
$namespace-prefix: 'tippy' !default;
2+
$placements: 'top', 'bottom', 'left', 'right';
3+
$origins: bottom, top, right, left;
4+
$backdrop-origins: 0% 25%, 0% -50%, 50% 0%, -50% 0%;
5+
$backdrop-border-radii: 40% 40% 0 0, 0 0 30% 30%, 50% 0 0 50%, 0 50% 50% 0;
6+
$arrow-size: 16px;

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

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

‎scss/vendors/tippyjs/animations/perspective-extreme.scss

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@import '../_mixins.scss';
2+
@import '../_vars.scss';
3+
4+
@mixin visible-transform($placement) {
5+
@if ($placement == 'top') {
6+
transform: perspective(700px);
7+
} @else if ($placement == 'bottom') {
8+
transform: perspective(700px);
9+
} @else if ($placement == 'left') {
10+
transform: perspective(700px);
11+
} @else if ($placement == 'right') {
12+
transform: perspective(700px);
13+
}
14+
}
15+
16+
@mixin hidden-transform($placement) {
17+
@if ($placement == 'top') {
18+
transform: perspective(700px) translateY(10px) rotateX(90deg);
19+
} @else if ($placement == 'bottom') {
20+
transform: perspective(700px) translateY(-10px) rotateX(-90deg);
21+
} @else if ($placement == 'left') {
22+
transform: perspective(700px) translateX(10px) rotateY(-90deg);
23+
} @else if ($placement == 'right') {
24+
transform: perspective(700px) translateX(-10px) rotateY(90deg);
25+
}
26+
}
27+
28+
.#{$namespace-prefix}-box {
29+
&[data-animation='perspective-extreme'] {
30+
@each $placement in $placements {
31+
&[data-placement^='#{$placement}'] {
32+
transform-origin: nth($origins, index($placements, $placement));
33+
34+
&[data-state='visible'] {
35+
@include visible-transform($placement);
36+
}
37+
38+
&[data-state='hidden'] {
39+
@include hidden-transform($placement);
40+
}
41+
}
42+
}
43+
44+
&[data-state='hidden'] {
45+
opacity: 0.5;
46+
}
47+
}
48+
}

‎scss/vendors/tippyjs/animations/perspective-subtle.scss

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@import '../_mixins.scss';
2+
@import '../_vars.scss';
3+
4+
@mixin visible-transform($placement) {
5+
@if ($placement == 'top') {
6+
transform: perspective(700px);
7+
} @else if ($placement == 'bottom') {
8+
transform: perspective(700px);
9+
} @else if ($placement == 'left') {
10+
transform: perspective(700px);
11+
} @else if ($placement == 'right') {
12+
transform: perspective(700px);
13+
}
14+
}
15+
16+
@mixin hidden-transform($placement) {
17+
@if ($placement == 'top') {
18+
transform: perspective(700px) translateY(5px) rotateX(30deg);
19+
} @else if ($placement == 'bottom') {
20+
transform: perspective(700px) translateY(-5px) rotateX(-30deg);
21+
} @else if ($placement == 'left') {
22+
transform: perspective(700px) translateX(5px) rotateY(-30deg);
23+
} @else if ($placement == 'right') {
24+
transform: perspective(700px) translateX(-5px) rotateY(30deg);
25+
}
26+
}
27+
28+
.#{$namespace-prefix}-box {
29+
&[data-animation='perspective-subtle'] {
30+
@each $placement in $placements {
31+
&[data-placement^='#{$placement}'] {
32+
transform-origin: nth($origins, index($placements, $placement));
33+
34+
&[data-state='visible'] {
35+
@include visible-transform($placement);
36+
}
37+
38+
&[data-state='hidden'] {
39+
@include hidden-transform($placement);
40+
}
41+
}
42+
}
43+
44+
&[data-state='hidden'] {
45+
opacity: 0;
46+
}
47+
}
48+
}

‎scss/vendors/tippyjs/animations/perspective.scss

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@import '../_mixins.scss';
2+
@import '../_vars.scss';
3+
4+
@mixin visible-transform($placement) {
5+
@if ($placement == 'top') {
6+
transform: perspective(700px);
7+
} @else if ($placement == 'bottom') {
8+
transform: perspective(700px);
9+
} @else if ($placement == 'left') {
10+
transform: perspective(700px);
11+
} @else if ($placement == 'right') {
12+
transform: perspective(700px);
13+
}
14+
}
15+
16+
@mixin hidden-transform($placement) {
17+
@if ($placement == 'top') {
18+
transform: perspective(700px) translateY(8px) rotateX(60deg);
19+
} @else if ($placement == 'bottom') {
20+
transform: perspective(700px) translateY(-8px) rotateX(-60deg);
21+
} @else if ($placement == 'left') {
22+
transform: perspective(700px) translateX(8px) rotateY(-60deg);
23+
} @else if ($placement == 'right') {
24+
transform: perspective(700px) translateX(-8px) rotateY(60deg);
25+
}
26+
}
27+
28+
.#{$namespace-prefix}-box {
29+
&[data-animation='perspective'] {
30+
@each $placement in $placements {
31+
&[data-placement^='#{$placement}'] {
32+
transform-origin: nth($origins, index($placements, $placement));
33+
34+
&[data-state='visible'] {
35+
@include visible-transform($placement);
36+
}
37+
38+
&[data-state='hidden'] {
39+
@include hidden-transform($placement);
40+
}
41+
}
42+
}
43+
44+
&[data-state='hidden'] {
45+
opacity: 0;
46+
}
47+
}
48+
}

‎scss/vendors/tippyjs/animations/scale-extreme.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import '../_mixins.scss';
2+
@import '../_vars.scss';
3+
4+
.#{$namespace-prefix}-box {
5+
&[data-animation='scale-extreme'] {
6+
@each $placement in $placements {
7+
&[data-placement^='#{$placement}'] {
8+
transform-origin: nth($origins, index($placements, $placement));
9+
}
10+
}
11+
12+
&[data-state='hidden'] {
13+
transform: scale(0);
14+
opacity: 0.25;
15+
}
16+
}
17+
}

‎scss/vendors/tippyjs/animations/scale-subtle.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import '../_mixins.scss';
2+
@import '../_vars.scss';
3+
4+
.#{$namespace-prefix}-box {
5+
&[data-animation='scale-subtle'] {
6+
@each $placement in $placements {
7+
&[data-placement^='#{$placement}'] {
8+
transform-origin: nth($origins, index($placements, $placement));
9+
}
10+
}
11+
12+
&[data-state='hidden'] {
13+
transform: scale(0.8);
14+
opacity: 0;
15+
}
16+
}
17+
}

‎scss/vendors/tippyjs/animations/scale.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import '../_mixins.scss';
2+
@import '../_vars.scss';
3+
4+
.#{$namespace-prefix}-box {
5+
&[data-animation='scale'] {
6+
@each $placement in $placements {
7+
&[data-placement^='#{$placement}'] {
8+
transform-origin: nth($origins, index($placements, $placement));
9+
}
10+
}
11+
12+
&[data-state='hidden'] {
13+
transform: scale(0.5);
14+
opacity: 0;
15+
}
16+
}
17+
}

0 commit comments

Comments
 (0)