matcha-theme 20.8.0 → 20.12.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/base/_reset.scss
CHANGED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
@mixin matcha-autocomplete-theme($theme) {
|
|
2
|
+
$accent: map-get($theme, accent);
|
|
3
|
+
$warn: map-get($theme, warn);
|
|
4
|
+
$primary: map-get($theme, primary);
|
|
5
|
+
$background: map-get($theme, background);
|
|
6
|
+
$foreground: map-get($theme, foreground);
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
.matcha-autocomplete-panel {
|
|
10
|
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
|
|
11
|
+
z-index: 1;
|
|
12
|
+
border-radius: 8px;
|
|
13
|
+
background: map-get($background, surface);
|
|
14
|
+
max-height: 280px;
|
|
15
|
+
overflow: auto;
|
|
16
|
+
min-width: 160px;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@mixin matcha-option-theme($theme) {
|
|
2
|
+
$accent: map-get($theme, accent);
|
|
3
|
+
$warn: map-get($theme, warn);
|
|
4
|
+
$primary: map-get($theme, primary);
|
|
5
|
+
$background: map-get($theme, background);
|
|
6
|
+
$foreground: map-get($theme, foreground);
|
|
7
|
+
|
|
8
|
+
.matcha-option {
|
|
9
|
+
padding: 8px 12px;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
background: getSurface($theme);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.matcha-option[aria-selected="true"] {
|
|
15
|
+
background: rgba(0, 0, 0, 0.08);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.matcha-option[disabled] {
|
|
19
|
+
opacity: 0.5;
|
|
20
|
+
cursor: default;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
@mixin matcha-panel-theme($theme) {
|
|
2
|
+
$accent: map-get($theme, accent);
|
|
3
|
+
$warn: map-get($theme, warn);
|
|
4
|
+
$primary: map-get($theme, primary);
|
|
5
|
+
$background: map-get($theme, background);
|
|
6
|
+
$foreground: map-get($theme, foreground);
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
// Painel base
|
|
10
|
+
.matcha-panel {
|
|
11
|
+
background: map-get($background, surface);
|
|
12
|
+
border-radius: 8px;
|
|
13
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
max-height: 280px;
|
|
18
|
+
min-width: 160px;
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
// Animações
|
|
22
|
+
opacity: 0;
|
|
23
|
+
transform: scale(0.95) translateY(-8px);
|
|
24
|
+
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
25
|
+
|
|
26
|
+
// Position sempre absolute agora
|
|
27
|
+
position: absolute;
|
|
28
|
+
z-index: 1003; // Z-index maior que o overlay (1002)
|
|
29
|
+
|
|
30
|
+
// Estados de abertura
|
|
31
|
+
&.matcha-panel-open {
|
|
32
|
+
opacity: 1;
|
|
33
|
+
transform: scale(1) translateY(0);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Quando o painel está visível (open = true)
|
|
37
|
+
&:not([aria-hidden="true"]) {
|
|
38
|
+
opacity: 1;
|
|
39
|
+
transform: scale(1) translateY(0);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Posicionamento vertical
|
|
43
|
+
&.matcha-panel-top {
|
|
44
|
+
transform-origin: bottom center;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&.matcha-panel-bottom {
|
|
48
|
+
transform-origin: top center;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Conteúdo do painel
|
|
53
|
+
.matcha-panel-content {
|
|
54
|
+
overflow-y: auto;
|
|
55
|
+
flex: 1;
|
|
56
|
+
|
|
57
|
+
// Scrollbar customizada
|
|
58
|
+
&::-webkit-scrollbar {
|
|
59
|
+
width: 6px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&::-webkit-scrollbar-track {
|
|
63
|
+
background: transparent;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&::-webkit-scrollbar-thumb {
|
|
67
|
+
background: rgba(0, 0, 0, 0.2);
|
|
68
|
+
border-radius: 3px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
72
|
+
background: rgba(0, 0, 0, 0.3);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Estados de foco e hover
|
|
77
|
+
.matcha-panel:focus-within {
|
|
78
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// Responsividade
|
|
82
|
+
@media (max-width: 768px) {
|
|
83
|
+
.matcha-panel {
|
|
84
|
+
max-height: 200px;
|
|
85
|
+
min-width: 120px;
|
|
86
|
+
border-radius: 6px;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Tema escuro
|
|
91
|
+
@media (prefers-color-scheme: dark) {
|
|
92
|
+
.matcha-panel {
|
|
93
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
94
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
package/main.scss
CHANGED
|
@@ -22,6 +22,9 @@
|
|
|
22
22
|
|
|
23
23
|
// COMPONENTS
|
|
24
24
|
@import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)
|
|
25
|
+
@import "./components/matcha-autocomplete.scss"; // matcha-autocomplete-theme($theme)
|
|
26
|
+
@import "./components/matcha-option.scss"; // matcha-option-theme($theme)
|
|
27
|
+
@import "./components/matcha-panel.scss"; // matcha-panel-theme($theme)
|
|
25
28
|
@import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
|
|
26
29
|
@import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
|
|
27
30
|
@import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
|
|
@@ -160,4 +163,7 @@
|
|
|
160
163
|
@include matcha-radio($theme);
|
|
161
164
|
@include matcha-avatar-theme($theme);
|
|
162
165
|
@include matcha-drawer-theme($theme);
|
|
166
|
+
@include matcha-autocomplete-theme($theme);
|
|
167
|
+
@include matcha-panel-theme($theme);
|
|
168
|
+
@include matcha-option-theme($theme);
|
|
163
169
|
}
|