matcha-theme 18.1.50 → 18.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/matcha-tooltip.scss +107 -0
- package/main.scss +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
.matcha-tooltip-content {
|
|
2
|
+
position: absolute;
|
|
3
|
+
z-index: 9999;
|
|
4
|
+
padding: 8px 16px;
|
|
5
|
+
border-radius: 8px;
|
|
6
|
+
font-size: 14px;
|
|
7
|
+
line-height: 20px;
|
|
8
|
+
width: auto;
|
|
9
|
+
max-width: 500px;
|
|
10
|
+
text-overflow: ellipsis;
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
gap:8px;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
|
|
16
|
+
&:not(.matcha-tooltip-content_below):not(.matcha-tooltip-content_left):not(.matcha-tooltip-content_right)::after {
|
|
17
|
+
content: "";
|
|
18
|
+
position: absolute;
|
|
19
|
+
width: 0;
|
|
20
|
+
height: 0;
|
|
21
|
+
border-style: solid;
|
|
22
|
+
border-width: 6px 8px 0 8px;
|
|
23
|
+
bottom: -4px;
|
|
24
|
+
left: 50%;
|
|
25
|
+
border-radius: 0px;
|
|
26
|
+
transform: translateX(-50%);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Estilo para o botão de fechar
|
|
31
|
+
.matcha-tooltip-close {
|
|
32
|
+
display: flex;
|
|
33
|
+
pointer-events: auto; // Permite que o botão receba cliques
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
|
|
36
|
+
&::before {
|
|
37
|
+
content: "\e92a";
|
|
38
|
+
font-family: 'MatchaIcons';
|
|
39
|
+
font-size: 16px;
|
|
40
|
+
line-height: 16px;
|
|
41
|
+
width: 16px;
|
|
42
|
+
height: 16px;
|
|
43
|
+
display: inline-flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.matcha-tooltip-content_below::before {
|
|
50
|
+
content: '';
|
|
51
|
+
position: absolute;
|
|
52
|
+
width: 0;
|
|
53
|
+
height: 0;
|
|
54
|
+
border-style: solid;
|
|
55
|
+
border-width: 0px 8px 6px 8px;
|
|
56
|
+
top: -4px;
|
|
57
|
+
left: 50%;
|
|
58
|
+
transform: translateX(-50%);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.matcha-tooltip-content_left::after {
|
|
62
|
+
content: '';
|
|
63
|
+
position: absolute;
|
|
64
|
+
width: 0;
|
|
65
|
+
height: 0;
|
|
66
|
+
border-style: solid;
|
|
67
|
+
border-width: 8px 0 8px 6px;
|
|
68
|
+
top: 50%;
|
|
69
|
+
right: -4px;
|
|
70
|
+
transform: translateY(-50%);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.matcha-tooltip-content_right::after {
|
|
74
|
+
content: '';
|
|
75
|
+
position: absolute;
|
|
76
|
+
width: 0;
|
|
77
|
+
height: 0;
|
|
78
|
+
border-style: solid;
|
|
79
|
+
border-width: 8px 6px 8px 0;
|
|
80
|
+
top: 50%;
|
|
81
|
+
left: -4px;
|
|
82
|
+
transform: translateY(-50%);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@mixin matcha-tooltip-theme($theme) {
|
|
86
|
+
$foreground: map-get($theme, foreground);
|
|
87
|
+
|
|
88
|
+
.matcha-tooltip-content {
|
|
89
|
+
background-color: map-get($foreground, text);
|
|
90
|
+
color: map-get($foreground, text-inverse);
|
|
91
|
+
&:not(.matcha-tooltip-content_below):not(.matcha-tooltip-content_left):not(.matcha-tooltip-content_right)::after {
|
|
92
|
+
border-color: map-get($foreground, text) transparent transparent transparent;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.matcha-tooltip-content_below::before {
|
|
97
|
+
border-color: transparent transparent map-get($foreground, text) transparent;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.matcha-tooltip-content_left::after {
|
|
101
|
+
border-color: transparent transparent transparent map-get($foreground, text);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.matcha-tooltip-content_right::after {
|
|
105
|
+
border-color: transparent map-get($foreground, text) transparent transparent;
|
|
106
|
+
}
|
|
107
|
+
}
|
package/main.scss
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
@import "./components/matcha-scrollbar.scss"; // matcha-scrollbar-theme($theme)
|
|
34
34
|
@import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
|
|
35
35
|
@import "./components/matcha-table.scss"; // matcha-table-theme($theme)
|
|
36
|
+
@import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
|
|
36
37
|
|
|
37
38
|
// VENDORS
|
|
38
39
|
@import "./vendors/angular-editor.scss";
|
|
@@ -125,6 +126,7 @@
|
|
|
125
126
|
@include matcha-table-theme($theme);
|
|
126
127
|
|
|
127
128
|
@include matcha-button-theme($theme);
|
|
129
|
+
@include matcha-tooltip-theme($theme);
|
|
128
130
|
@include matcha-header-theme($theme);
|
|
129
131
|
@include matcha-menu-theme($theme);
|
|
130
132
|
}
|