@inchurch/matcha-theme 20.277.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.
- package/base/_reset.scss +5 -1
- package/components/matcha-file-uploader.scss +21 -13
- package/package.json +1 -1
package/base/_reset.scss
CHANGED
|
@@ -36,7 +36,11 @@ How to use
|
|
|
36
36
|
}
|
|
37
37
|
code {
|
|
38
38
|
&:not(.highlight) {
|
|
39
|
-
|
|
39
|
+
// Token em runtime (não getter compile-time): resolve no escopo de tema
|
|
40
|
+
// MAIS PRÓXIMO, então temas aninhados (ex.: preview light dentro de body
|
|
41
|
+
// dark) não colidem mais — antes geravam tarja escura sobre card claro.
|
|
42
|
+
// Dark é value-preserving (#1c1f26); light adota o surface-card do DSV3.
|
|
43
|
+
background-color: var(--matcha-color-surface-card);
|
|
40
44
|
}
|
|
41
45
|
}
|
|
42
46
|
|
|
@@ -133,14 +133,6 @@
|
|
|
133
133
|
width: 100%;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
// Ação secundária (Gabarito, Tirar foto, etc.) — centrada abaixo do box
|
|
137
|
-
.matcha-file-uploader-secondary {
|
|
138
|
-
display: flex;
|
|
139
|
-
justify-content: center;
|
|
140
|
-
|
|
141
|
-
&:empty { display: none; } // sem slot projetado → não ocupa espaço
|
|
142
|
-
}
|
|
143
|
-
|
|
144
136
|
// ── Dropzone box (Estado=Dropzone — Figma 16152:209) — a zona INTEIRA é o alvo
|
|
145
137
|
.matcha-file-uploader-dropzone {
|
|
146
138
|
display: flex;
|
|
@@ -161,6 +153,15 @@
|
|
|
161
153
|
}
|
|
162
154
|
}
|
|
163
155
|
|
|
156
|
+
// layout="card": dropzone vazio compartilha a proporção do card preenchido
|
|
157
|
+
// (aspect-ratio aplicado inline via previewRatio) pra empty e filled terem a
|
|
158
|
+
// MESMA altura lado a lado. Sem isso, vazio é dimensionado por padding/conteúdo
|
|
159
|
+
// e preenchido por aspect-ratio → alturas divergentes.
|
|
160
|
+
.matcha-file-uploader-dropzone--card {
|
|
161
|
+
width: 100%;
|
|
162
|
+
overflow: hidden;
|
|
163
|
+
}
|
|
164
|
+
|
|
164
165
|
// Icon pill (bg interaction/disabled-bg + padding 40h/16v · icon 24×24)
|
|
165
166
|
.matcha-file-uploader-dropzone__icon-pill {
|
|
166
167
|
display: inline-flex;
|
|
@@ -370,7 +371,8 @@
|
|
|
370
371
|
.matcha-file-uploader-card {
|
|
371
372
|
position: relative;
|
|
372
373
|
width: 100%;
|
|
373
|
-
margin-top:
|
|
374
|
+
// SEM margin-top: o card preenchido tem que alinhar o topo com o dropzone
|
|
375
|
+
// vazio quando lado a lado (layout card). margin-top desalinhava em 8px.
|
|
374
376
|
border: var(--matcha-border-hairline, 1px) solid transparent;
|
|
375
377
|
border-radius: var(--matcha-radius-lg, 8px);
|
|
376
378
|
overflow: hidden;
|
|
@@ -390,13 +392,19 @@
|
|
|
390
392
|
right: var(--matcha-space-100, 8px);
|
|
391
393
|
display: flex;
|
|
392
394
|
gap: var(--matcha-space-100, 8px);
|
|
393
|
-
opacity:
|
|
395
|
+
opacity: 1; // persistente — descobrÃvel e operável em touch (canon 20252:2253)
|
|
394
396
|
transition: opacity var(--matcha-duration-instant, 80ms) linear;
|
|
395
397
|
}
|
|
396
398
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
399
|
+
// Em dispositivos com hover, atenua no resting e destaca no hover/foco — mantém
|
|
400
|
+
// a tela limpa sem esconder a affordance onde não há hover (touch/totem).
|
|
401
|
+
@media (hover: hover) {
|
|
402
|
+
.matcha-file-uploader-card__actions { opacity: 0.72; }
|
|
403
|
+
|
|
404
|
+
.matcha-file-uploader-card:hover .matcha-file-uploader-card__actions,
|
|
405
|
+
.matcha-file-uploader-card:focus-within .matcha-file-uploader-card__actions {
|
|
406
|
+
opacity: 1;
|
|
407
|
+
}
|
|
400
408
|
}
|
|
401
409
|
|
|
402
410
|
.matcha-file-uploader-card__action {
|