@inchurch/matcha-theme 22.23.1 → 22.24.1
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/components/matcha-skeleton.scss +47 -20
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
display: flex;
|
|
12
12
|
flex-direction: column;
|
|
13
13
|
padding: 0;
|
|
14
|
-
border-radius: var(--matcha-radius-
|
|
14
|
+
border-radius: var(--matcha-radius-xl, 16px);
|
|
15
15
|
user-select: none;
|
|
16
16
|
overflow: hidden;
|
|
17
17
|
}
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
display: flex;
|
|
52
52
|
flex-direction: column;
|
|
53
53
|
width: 100%;
|
|
54
|
-
border-radius: var(--matcha-radius-
|
|
54
|
+
border-radius: var(--matcha-radius-xl, 16px);
|
|
55
55
|
user-select: none;
|
|
56
56
|
overflow: hidden;
|
|
57
57
|
}
|
|
@@ -100,47 +100,74 @@
|
|
|
100
100
|
|
|
101
101
|
@mixin matcha-skeleton-theme($theme) {
|
|
102
102
|
|
|
103
|
+
// O container do skeleton representa o CARD que vai carregar: superfície de card,
|
|
104
|
+
// canto de 16px e elevation 1. `overflow: hidden` é obrigatório — sem ele o header
|
|
105
|
+
// e as linhas zebradas vazam por cima do canto arredondado e o bloco parece quadrado.
|
|
106
|
+
.skeleton-animated-background {
|
|
107
|
+
position: relative;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
background: var(--matcha-color-surface-card);
|
|
110
|
+
border-radius: var(--matcha-radius-xl, 16px);
|
|
111
|
+
box-shadow: var(--matcha-shadow-1);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// O shimmer é um overlay, não o fundo do container — o fundo agora é sólido.
|
|
115
|
+
.skeleton-animated-background::after {
|
|
116
|
+
content: "";
|
|
117
|
+
position: absolute;
|
|
118
|
+
inset: 0;
|
|
119
|
+
background: linear-gradient(
|
|
120
|
+
90deg,
|
|
121
|
+
transparent,
|
|
122
|
+
var(--matcha-skeleton-shimmer),
|
|
123
|
+
transparent
|
|
124
|
+
);
|
|
125
|
+
transform: translateX(-100%);
|
|
126
|
+
animation: matcha-skeleton-shimmer 1.4s linear infinite;
|
|
127
|
+
pointer-events: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// Placeholders (barras, avatar, header) e a linha zebrada da tabela.
|
|
131
|
+
.skeleton-block,
|
|
103
132
|
.matcha-skeleton-line,
|
|
104
133
|
.matcha-skeleton-card__avatar,
|
|
105
134
|
.matcha-skeleton-card__image,
|
|
106
135
|
.matcha-skeleton-table__header,
|
|
107
136
|
.matcha-skeleton-table__cell-avatar {
|
|
108
|
-
background: var(--matcha-color-surface-
|
|
137
|
+
background: var(--matcha-color-surface-border);
|
|
109
138
|
}
|
|
110
139
|
|
|
140
|
+
.skeleton-row--alt,
|
|
111
141
|
.matcha-skeleton-table__row--alt {
|
|
112
|
-
background: var(--matcha-color-surface-bg
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.skeleton-animated-background {
|
|
116
|
-
background: linear-gradient(
|
|
117
|
-
to right,
|
|
118
|
-
var(--matcha-color-disabled-bg),
|
|
119
|
-
var(--matcha-skeleton-shimmer),
|
|
120
|
-
var(--matcha-color-disabled-bg)
|
|
121
|
-
);
|
|
122
|
-
background-size: 200% 100%;
|
|
123
|
-
animation: matcha-skeleton-shimmer 1s linear infinite;
|
|
142
|
+
background: var(--matcha-color-surface-bg);
|
|
124
143
|
}
|
|
125
144
|
|
|
126
145
|
@keyframes matcha-skeleton-shimmer {
|
|
127
|
-
|
|
128
|
-
100% { background-position: -100% 0; }
|
|
146
|
+
to { transform: translateX(100%); }
|
|
129
147
|
}
|
|
130
148
|
|
|
131
149
|
@media (prefers-reduced-motion: reduce) {
|
|
132
|
-
.skeleton-animated-background {
|
|
150
|
+
.skeleton-animated-background::after {
|
|
133
151
|
animation: none;
|
|
134
|
-
|
|
152
|
+
opacity: 0;
|
|
135
153
|
}
|
|
136
154
|
}
|
|
137
155
|
}
|
|
138
156
|
|
|
139
157
|
// ── Forced colors ──
|
|
158
|
+
// Marca os PLACEHOLDERS, não o container: no modelo atual o container é o card
|
|
159
|
+
// (superfície), então pintá-lo de GrayText apagaria a distinção card × conteúdo.
|
|
140
160
|
@media (forced-colors: active) {
|
|
141
161
|
.skeleton,
|
|
142
|
-
.skeleton-
|
|
162
|
+
.skeleton-block,
|
|
163
|
+
.matcha-skeleton-line,
|
|
164
|
+
.matcha-skeleton-card__avatar,
|
|
165
|
+
.matcha-skeleton-table__header,
|
|
166
|
+
.matcha-skeleton-table__cell-avatar {
|
|
143
167
|
background: GrayText !important;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.skeleton-animated-background {
|
|
144
171
|
border: 1px solid CanvasText;
|
|
145
172
|
}
|
|
146
173
|
}
|