@inchurch/matcha-theme 22.8.0 → 22.10.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.
|
@@ -27,8 +27,13 @@ matcha-icon[library="symbols"] {
|
|
|
27
27
|
height: var(--matcha-icon-size-md);
|
|
28
28
|
line-height: var(--matcha-icon-size-md);
|
|
29
29
|
|
|
30
|
+
// Canonico e por extenso (tiny/small/medium/large/huge) — regra DS-wide, os
|
|
31
|
+
// infixes xs/sm/md/lg/xl sao reservados pra breakpoint. Abreviado aceito aqui
|
|
32
|
+
// so como alias @deprecated (mesmo valor renderizado, 1:1 com size-alias.ts).
|
|
30
33
|
&.i-size-xs,
|
|
31
|
-
|
|
34
|
+
&.i-size-tiny,
|
|
35
|
+
&[size="xs"],
|
|
36
|
+
&[size="tiny"] {
|
|
32
37
|
font-size: var(--matcha-icon-size-xs, #{$icon-size-xs});
|
|
33
38
|
width: var(--matcha-icon-size-xs, #{$icon-size-xs});
|
|
34
39
|
height: var(--matcha-icon-size-xs, #{$icon-size-xs});
|
|
@@ -36,7 +41,9 @@ matcha-icon[library="symbols"] {
|
|
|
36
41
|
}
|
|
37
42
|
|
|
38
43
|
&.i-size-sm,
|
|
39
|
-
|
|
44
|
+
&.i-size-small,
|
|
45
|
+
&[size="sm"],
|
|
46
|
+
&[size="small"] {
|
|
40
47
|
font-size: var(--matcha-icon-size-sm);
|
|
41
48
|
width: var(--matcha-icon-size-sm);
|
|
42
49
|
height: var(--matcha-icon-size-sm);
|
|
@@ -44,7 +51,9 @@ matcha-icon[library="symbols"] {
|
|
|
44
51
|
}
|
|
45
52
|
|
|
46
53
|
&.i-size-md,
|
|
47
|
-
|
|
54
|
+
&.i-size-medium,
|
|
55
|
+
&[size="md"],
|
|
56
|
+
&[size="medium"] {
|
|
48
57
|
font-size: var(--matcha-icon-size-md);
|
|
49
58
|
width: var(--matcha-icon-size-md);
|
|
50
59
|
height: var(--matcha-icon-size-md);
|
|
@@ -52,7 +61,9 @@ matcha-icon[library="symbols"] {
|
|
|
52
61
|
}
|
|
53
62
|
|
|
54
63
|
&.i-size-lg,
|
|
55
|
-
|
|
64
|
+
&.i-size-large,
|
|
65
|
+
&[size="lg"],
|
|
66
|
+
&[size="large"] {
|
|
56
67
|
font-size: var(--matcha-icon-size-lg);
|
|
57
68
|
width: var(--matcha-icon-size-lg);
|
|
58
69
|
height: var(--matcha-icon-size-lg);
|
|
@@ -60,7 +71,9 @@ matcha-icon[library="symbols"] {
|
|
|
60
71
|
}
|
|
61
72
|
|
|
62
73
|
&.i-size-xl,
|
|
63
|
-
|
|
74
|
+
&.i-size-huge,
|
|
75
|
+
&[size="xl"],
|
|
76
|
+
&[size="huge"] {
|
|
64
77
|
font-size: var(--matcha-icon-size-xl);
|
|
65
78
|
width: var(--matcha-icon-size-xl);
|
|
66
79
|
height: var(--matcha-icon-size-xl);
|
|
@@ -100,15 +100,22 @@
|
|
|
100
100
|
// ── Bottom-sheet em mobile (≤ 600px) ────────────────────────
|
|
101
101
|
// O panel com calendar vira um painel full-width grudado no rodapé da tela,
|
|
102
102
|
// com backdrop translúcido e slide-up. Sobrescreve o transform inline do JS.
|
|
103
|
+
//
|
|
104
|
+
// IMPORTANTE: escopar ao overlay ABERTO (`:not([hidden])`). O overlay fica sempre
|
|
105
|
+
// no DOM (o `display: block` da base anula o atributo [hidden] de propósito — o
|
|
106
|
+
// posicionamento mede o conteúdo fechado), e o <matcha-calendar> do matcha-date é
|
|
107
|
+
// renderizado mesmo com o picker fechado. Sem o escopo, qualquer página com um
|
|
108
|
+
// matcha-date pintava o scrim blurred permanente em mobile e o `pointer-events:
|
|
109
|
+
// auto` bloqueava TODOS os cliques da tela.
|
|
103
110
|
@media (max-width: 639px) {
|
|
104
|
-
.matcha-panel-overlay:has(.matcha-calendar) {
|
|
111
|
+
.matcha-panel-overlay:not([hidden]):has(.matcha-calendar) {
|
|
105
112
|
pointer-events: auto !important; // precisa capturar o backdrop
|
|
106
113
|
background: var(--matcha-scrim-drawer, rgba(0, 0, 0, 0.3));
|
|
107
114
|
backdrop-filter: blur(var(--matcha-scrim-drawer-blur, 4px));
|
|
108
115
|
animation: matcha-panel-backdrop-fade var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
|
|
109
116
|
}
|
|
110
117
|
|
|
111
|
-
.matcha-panel-pane:has(.matcha-calendar) {
|
|
118
|
+
.matcha-panel-overlay:not([hidden]) .matcha-panel-pane:has(.matcha-calendar) {
|
|
112
119
|
position: fixed !important;
|
|
113
120
|
inset: auto 0 0 0 !important;
|
|
114
121
|
top: auto !important;
|