matcha-theme 20.276.0 → 20.278.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.
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
// =========================================================
|
|
2
|
+
// * Matcha Calendar Picker Styles
|
|
3
|
+
// =========================================================
|
|
4
|
+
@mixin matcha-calendar-picker-theme($theme) {
|
|
5
|
+
$foreground: map-get($theme, foreground);
|
|
6
|
+
|
|
7
|
+
matcha-calendar-picker {
|
|
8
|
+
display: block;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.matcha-calendar-picker {
|
|
12
|
+
width: 100%;
|
|
13
|
+
padding: 8px;
|
|
14
|
+
background: getSurface($theme);
|
|
15
|
+
color: map-get($foreground, text);
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
user-select: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// ----- Cabeçalho -----
|
|
21
|
+
.matcha-calendar-header {
|
|
22
|
+
margin-bottom: 8px;
|
|
23
|
+
gap: 4px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// .matcha-calendar-toggle {
|
|
27
|
+
// display: inline-flex;
|
|
28
|
+
// align-items: center;
|
|
29
|
+
// gap: 4px;
|
|
30
|
+
// padding: 4px 6px;
|
|
31
|
+
// border: none;
|
|
32
|
+
// background: transparent;
|
|
33
|
+
// font: inherit;
|
|
34
|
+
// font-size: clamp(12px, 3.4vw, 14px);
|
|
35
|
+
// font-weight: 500;
|
|
36
|
+
// color: map-get($foreground, text);
|
|
37
|
+
// cursor: pointer;
|
|
38
|
+
// border-radius: 6px;
|
|
39
|
+
// white-space: nowrap;
|
|
40
|
+
// transition: background 0.2s ease;
|
|
41
|
+
|
|
42
|
+
// &:hover {
|
|
43
|
+
// background: getBackgroundAlpha($theme);
|
|
44
|
+
// }
|
|
45
|
+
// }
|
|
46
|
+
|
|
47
|
+
.matcha-calendar-decade-label {
|
|
48
|
+
padding: 4px 6px;
|
|
49
|
+
font-size: clamp(12px, 3.4vw, 14px);
|
|
50
|
+
font-weight: 500;
|
|
51
|
+
color: map-get($foreground, text);
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// ----- View de dias -----
|
|
56
|
+
.matcha-calendar-weekdays,
|
|
57
|
+
.matcha-calendar-days {
|
|
58
|
+
display: grid;
|
|
59
|
+
grid-template-columns: repeat(7, 1fr);
|
|
60
|
+
gap: 2px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.matcha-calendar-weekday {
|
|
64
|
+
display: flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
height: 26px;
|
|
68
|
+
font-size: clamp(10px, 2.8vw, 12px);
|
|
69
|
+
color: getGrey($theme);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.matcha-calendar-day {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
width: 100%;
|
|
77
|
+
max-width: 38px;
|
|
78
|
+
aspect-ratio: 1;
|
|
79
|
+
min-width: 0;
|
|
80
|
+
margin: 0 auto;
|
|
81
|
+
padding: 0;
|
|
82
|
+
border: none;
|
|
83
|
+
background: transparent;
|
|
84
|
+
font: inherit;
|
|
85
|
+
font-size: clamp(11px, 3vw, 13px);
|
|
86
|
+
color: map-get($foreground, text);
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
border-radius: 50%;
|
|
89
|
+
transition: background 0.2s ease, color 0.2s ease;
|
|
90
|
+
|
|
91
|
+
&:hover:not(:disabled) {
|
|
92
|
+
background: getBackgroundAlpha($theme);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&.matcha-calendar-day-outside {
|
|
96
|
+
color: getGrey($theme);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&.matcha-calendar-day-today {
|
|
100
|
+
font-weight: 700;
|
|
101
|
+
color: getAccent($theme);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&.matcha-calendar-day-selected {
|
|
105
|
+
background: getAccent($theme);
|
|
106
|
+
color: getAccentContrast($theme);
|
|
107
|
+
font-weight: 500;
|
|
108
|
+
|
|
109
|
+
&:hover {
|
|
110
|
+
background: getAccent($theme);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&:disabled {
|
|
115
|
+
color: getDisabled($theme);
|
|
116
|
+
cursor: not-allowed;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// ----- Views de meses / anos -----
|
|
121
|
+
.matcha-calendar-month-view,
|
|
122
|
+
.matcha-calendar-year-view {
|
|
123
|
+
display: grid;
|
|
124
|
+
grid-template-columns: repeat(3, 1fr);
|
|
125
|
+
gap: 10px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.matcha-calendar-month,
|
|
129
|
+
.matcha-calendar-year {
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
height: 36px;
|
|
134
|
+
min-width: 0;
|
|
135
|
+
padding: 0 4px;
|
|
136
|
+
border: none;
|
|
137
|
+
background: transparent;
|
|
138
|
+
font: inherit;
|
|
139
|
+
font-size: clamp(11px, 3vw, 13px);
|
|
140
|
+
color: map-get($foreground, text);
|
|
141
|
+
cursor: pointer;
|
|
142
|
+
border-radius: 8px;
|
|
143
|
+
white-space: nowrap;
|
|
144
|
+
|
|
145
|
+
&:hover:not(:disabled) {
|
|
146
|
+
background: getBackgroundAlpha($theme);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&.matcha-calendar-month-selected,
|
|
150
|
+
&.matcha-calendar-year-selected {
|
|
151
|
+
background: getAccent($theme);
|
|
152
|
+
color: getAccentContrast($theme);
|
|
153
|
+
font-weight: 500;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
&:disabled {
|
|
157
|
+
color: getDisabled($theme);
|
|
158
|
+
cursor: not-allowed;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// ----- Telas estreitas: compacta ainda mais -----
|
|
163
|
+
@media (max-width: 360px) {
|
|
164
|
+
.matcha-calendar-header {
|
|
165
|
+
margin-bottom: 6px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.matcha-calendar-weekday {
|
|
169
|
+
height: 22px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.matcha-calendar-month,
|
|
173
|
+
.matcha-calendar-year {
|
|
174
|
+
height: 32px;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
@@ -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,68 @@
|
|
|
1
|
+
// =========================================================
|
|
2
|
+
// * Matcha Period Styles
|
|
3
|
+
// =========================================================
|
|
4
|
+
@mixin matcha-period-theme($theme) {
|
|
5
|
+
$foreground: map-get($theme, foreground);
|
|
6
|
+
|
|
7
|
+
matcha-period {
|
|
8
|
+
display: block;
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.matcha-period-trigger {
|
|
13
|
+
&:focus {
|
|
14
|
+
outline: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&.matcha-period-disabled {
|
|
18
|
+
cursor: not-allowed;
|
|
19
|
+
opacity: 0.6;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.matcha-period-value {
|
|
24
|
+
flex: 1;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
text-overflow: ellipsis;
|
|
27
|
+
white-space: nowrap;
|
|
28
|
+
color: map-get($foreground, text);
|
|
29
|
+
|
|
30
|
+
&.matcha-period-placeholder {
|
|
31
|
+
color: getGrey($theme);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.matcha-period-arrow {
|
|
36
|
+
margin-left: 8px;
|
|
37
|
+
font-size: 12px;
|
|
38
|
+
color: getBlueGrey($theme);
|
|
39
|
+
transition: transform 0.2s ease;
|
|
40
|
+
|
|
41
|
+
&.matcha-period-arrow-open {
|
|
42
|
+
transform: rotate(180deg);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// Opções espelham o visual do matcha-option (padding/tamanho/estados)
|
|
47
|
+
.matcha-period-option {
|
|
48
|
+
padding: 8px 12px;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
background: getSurface($theme);
|
|
51
|
+
color: map-get($foreground, text);
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
|
|
54
|
+
&:hover,
|
|
55
|
+
&.matcha-period-option-active {
|
|
56
|
+
background: getBackgroundAlpha($theme);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&:focus,
|
|
60
|
+
&:active {
|
|
61
|
+
background: getBackground($theme);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&.matcha-period-option-selected {
|
|
65
|
+
color: getGreen($theme);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -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)
|
|
@@ -62,6 +63,8 @@
|
|
|
62
63
|
@import "./components/matcha-chip.scss"; // matcha-chip($theme)
|
|
63
64
|
@import "./components/matcha-date.scss"; // matcha-date($theme)
|
|
64
65
|
@import "./components/matcha-date-range.scss"; // matcha-date-range($theme)
|
|
66
|
+
@import "./components/matcha-period.scss"; // matcha-period-theme($theme)
|
|
67
|
+
@import "./components/matcha-calendar-picker.scss"; // matcha-calendar-picker-theme($theme)
|
|
65
68
|
@import "./components/matcha-time.scss"; // matcha-time-theme($theme)
|
|
66
69
|
@import "./components/matcha-time-range.scss"; // matcha-time-range($theme)
|
|
67
70
|
@import "./components/matcha-progress-bar.scss"; // matcha-progress-bar($theme)
|
|
@@ -188,6 +191,7 @@
|
|
|
188
191
|
@include matcha-panel-theme($theme);
|
|
189
192
|
@include matcha-option-theme($theme);
|
|
190
193
|
@include matcha-select-theme($theme);
|
|
194
|
+
@include matcha-select-multiple-theme($theme);
|
|
191
195
|
@include matcha-paginator-theme($theme);
|
|
192
196
|
@include matcha-slider-theme($theme);
|
|
193
197
|
@include matcha-highlight-theme($theme);
|
|
@@ -198,6 +202,8 @@
|
|
|
198
202
|
@include matcha-snack-bar-theme($theme);
|
|
199
203
|
@include matcha-text-editor-theme($theme);
|
|
200
204
|
@include matcha-date-theme($theme);
|
|
205
|
+
@include matcha-period-theme($theme);
|
|
206
|
+
@include matcha-calendar-picker-theme($theme);
|
|
201
207
|
@include matcha-time-theme($theme);
|
|
202
208
|
@include matcha-time-range-theme($theme);
|
|
203
209
|
}
|