@edmicro/olkit 1.1.0 → 1.1.2
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/fesm2022/edmicro-olkit.mjs +2945 -1561
- package/fesm2022/edmicro-olkit.mjs.map +1 -1
- package/olkit.css +1 -1
- package/package.json +1 -1
- package/styles/isolation.css +50 -0
- package/styles/tokens.css +57 -650
- package/types/edmicro-olkit.d.ts +841 -139
- package/types/edmicro-olkit.d.ts.map +1 -1
- package/version.txt +2 -2
package/package.json
CHANGED
package/styles/isolation.css
CHANGED
|
@@ -216,3 +216,53 @@ ol-icon-shape .rounded-md,
|
|
|
216
216
|
ol-alert .rounded-md {
|
|
217
217
|
border-radius: var(--radius-md, 12px) !important;
|
|
218
218
|
}
|
|
219
|
+
|
|
220
|
+
/* ---------------------------------------------------------------------------
|
|
221
|
+
THANH CUỘN — theo token, đổi cùng chế độ sáng/tối
|
|
222
|
+
|
|
223
|
+
`color-scheme` trong `tokens.css` đã làm thanh cuộn MẶC ĐỊNH của trình duyệt
|
|
224
|
+
chuyển màu đúng. Phần dưới đây đi thêm một bước: cho nó khớp thang màu của
|
|
225
|
+
design system thay vì màu hệ điều hành.
|
|
226
|
+
|
|
227
|
+
Dùng CẢ HAI cú pháp vì không trình duyệt nào hiểu đủ:
|
|
228
|
+
· `scrollbar-color` + `scrollbar-width` — chuẩn CSS, Firefox và Chrome 121+
|
|
229
|
+
· `::-webkit-scrollbar-*` — Safari và Chrome cũ
|
|
230
|
+
|
|
231
|
+
Không đặt `!important`: đây là kiểu dáng nền, nơi dùng ghi đè được. Khác các
|
|
232
|
+
luật trên trong file này — chúng chống CSS reset của consumer nên cần
|
|
233
|
+
`!important`.
|
|
234
|
+
|
|
235
|
+
KHÔNG đụng tới thanh cuộn của `<select>` gốc và vùng có `scrollbar-width:
|
|
236
|
+
none` (thanh ẩn có chủ ý, như dải tab cuộn ngang).
|
|
237
|
+
--------------------------------------------------------------------------- */
|
|
238
|
+
* {
|
|
239
|
+
scrollbar-width: thin;
|
|
240
|
+
scrollbar-color: var(--border-default-strong, #d1d5db) transparent;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
*::-webkit-scrollbar {
|
|
244
|
+
width: 10px;
|
|
245
|
+
height: 10px;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
*::-webkit-scrollbar-track {
|
|
249
|
+
background: transparent;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
*::-webkit-scrollbar-thumb {
|
|
253
|
+
background-color: var(--border-default-strong, #d1d5db);
|
|
254
|
+
border-radius: var(--radius-full, 9999px);
|
|
255
|
+
/* Viền trong suốt + `background-clip` để tay cuộn mảnh hơn rãnh, không dính
|
|
256
|
+
sát mép. `padding` không có tác dụng trên phần tử giả này. */
|
|
257
|
+
border: 2px solid transparent;
|
|
258
|
+
background-clip: content-box;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
262
|
+
background-color: var(--text-body-subtle, #6b7280);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/* Góc giao giữa thanh dọc và thanh ngang — để trống thì Safari vẽ ô trắng. */
|
|
266
|
+
*::-webkit-scrollbar-corner {
|
|
267
|
+
background: transparent;
|
|
268
|
+
}
|