matcha-theme 20.276.0 → 20.277.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.
|
@@ -24,13 +24,35 @@
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.matcha-option:hover
|
|
27
|
+
.matcha-option:hover,
|
|
28
|
+
.matcha-option.matcha-option-active {
|
|
28
29
|
background: getBackgroundAlpha($theme);
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
.matcha-option[aria-selected="true"],
|
|
32
32
|
.matcha-option:focus,
|
|
33
33
|
.matcha-option:active {
|
|
34
34
|
background: getBackground($theme);
|
|
35
35
|
}
|
|
36
|
+
|
|
37
|
+
// Modo múltiplo: opção com checkbox à esquerda do conteúdo
|
|
38
|
+
.matcha-option.matcha-option-multiple {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 4px;
|
|
42
|
+
|
|
43
|
+
// Em modo múltiplo, o aria-selected representa o estado "marcado".
|
|
44
|
+
// Não usamos o fundo de selecionado do single-select aqui — o
|
|
45
|
+
// realce visual é o próprio checkbox marcado.
|
|
46
|
+
&[aria-selected="true"]:not(:hover):not(.matcha-option-active) {
|
|
47
|
+
background: getSurface($theme);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.matcha-option-checkbox {
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
// O checkbox é puramente visual: o clique deve cair no host
|
|
54
|
+
// matcha-option (que faz o toggle), tanto na opção quanto no checkbox.
|
|
55
|
+
pointer-events: none;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
36
58
|
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
@mixin matcha-select-multiple-theme($theme) {
|
|
2
|
+
$foreground: map-get($theme, foreground);
|
|
3
|
+
|
|
4
|
+
// O matcha-select-multiple reusa as classes .matcha-select-* do matcha-select
|
|
5
|
+
// (.matcha-select-container, .matcha-select-trigger, .matcha-select-value, etc.),
|
|
6
|
+
// então herda toda a aparência do trigger. Aqui replicamos apenas as regras
|
|
7
|
+
// ligadas ao seletor de elemento, que são específicas por tag.
|
|
8
|
+
matcha-select-multiple {
|
|
9
|
+
width: 100%;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: space-between;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Campo de busca dentro do painel (fixo no topo enquanto rola as opções)
|
|
16
|
+
.matcha-select-multiple-search {
|
|
17
|
+
position: sticky;
|
|
18
|
+
top: 0;
|
|
19
|
+
z-index: 1;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
gap: 8px;
|
|
23
|
+
padding: 8px 12px;
|
|
24
|
+
background: getSurface($theme);
|
|
25
|
+
border-bottom: 1px solid getBackground($theme);
|
|
26
|
+
|
|
27
|
+
.matcha-select-multiple-search-input {
|
|
28
|
+
flex: 1;
|
|
29
|
+
border: 0;
|
|
30
|
+
outline: none;
|
|
31
|
+
background: transparent;
|
|
32
|
+
color: map-get($foreground, text);
|
|
33
|
+
font-size: 14px;
|
|
34
|
+
line-height: 20px;
|
|
35
|
+
|
|
36
|
+
&::placeholder {
|
|
37
|
+
color: getGrey($theme);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Seção fixa das opções selecionadas (topo do painel, independente da busca)
|
|
43
|
+
.matcha-select-multiple-selected {
|
|
44
|
+
background: getSurface($theme);
|
|
45
|
+
border-bottom: 1px solid getBackground($theme);
|
|
46
|
+
|
|
47
|
+
.matcha-select-multiple-selected-header {
|
|
48
|
+
padding: 8px 12px 4px;
|
|
49
|
+
font-size: 11px;
|
|
50
|
+
font-weight: 600;
|
|
51
|
+
text-transform: uppercase;
|
|
52
|
+
letter-spacing: 0.04em;
|
|
53
|
+
color: getGrey($theme);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
package/main.scss
CHANGED
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
@import "./components/matcha-option.scss"; // matcha-option-theme($theme)
|
|
27
27
|
@import "./components/matcha-panel.scss"; // matcha-panel-theme($theme)
|
|
28
28
|
@import "./components/matcha-select.scss"; // matcha-select-theme($theme)
|
|
29
|
+
@import "./components/matcha-select-multiple.scss"; // matcha-select-multiple-theme($theme)
|
|
29
30
|
@import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
|
|
30
31
|
@import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
|
|
31
32
|
@import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
|
|
@@ -188,6 +189,7 @@
|
|
|
188
189
|
@include matcha-panel-theme($theme);
|
|
189
190
|
@include matcha-option-theme($theme);
|
|
190
191
|
@include matcha-select-theme($theme);
|
|
192
|
+
@include matcha-select-multiple-theme($theme);
|
|
191
193
|
@include matcha-paginator-theme($theme);
|
|
192
194
|
@include matcha-slider-theme($theme);
|
|
193
195
|
@include matcha-highlight-theme($theme);
|