@crispy-seed/data-table 0.1.3 → 0.2.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/dist/data-table-recipe.css +32 -0
- package/dist/data-table-recipe.layered.css +36 -0
- package/dist/index.cjs +6023 -423
- package/dist/index.d.ts +74 -21
- package/dist/index.js +6023 -423
- package/dist/styles.css +36 -0
- package/package.json +1 -1
|
@@ -260,9 +260,41 @@ tbody tr:last-child .seed-data-table__cell {
|
|
|
260
260
|
border-top: 1px solid var(--seed-color-stroke-neutral-muted);
|
|
261
261
|
}
|
|
262
262
|
.seed-data-table__search {
|
|
263
|
+
position: relative;
|
|
264
|
+
display: inline-flex;
|
|
265
|
+
align-items: center;
|
|
263
266
|
flex: 1 1 0%;
|
|
264
267
|
max-width: 280px;
|
|
265
268
|
}
|
|
269
|
+
.seed-data-table__search svg {
|
|
270
|
+
position: absolute;
|
|
271
|
+
inset-inline-start: var(--seed-dimension-x2);
|
|
272
|
+
width: 14px;
|
|
273
|
+
height: 14px;
|
|
274
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
275
|
+
pointer-events: none;
|
|
276
|
+
}
|
|
277
|
+
.seed-data-table__search input {
|
|
278
|
+
width: 100%;
|
|
279
|
+
height: var(--seed-dimension-x8);
|
|
280
|
+
padding-inline-start: var(--seed-dimension-x6);
|
|
281
|
+
padding-inline-end: var(--seed-dimension-x2);
|
|
282
|
+
border: none;
|
|
283
|
+
border-radius: var(--seed-radius-r2);
|
|
284
|
+
background-color: var(--seed-color-bg-layer-default);
|
|
285
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
|
|
286
|
+
font-family: inherit;
|
|
287
|
+
font-size: var(--seed-font-size-t4);
|
|
288
|
+
color: var(--seed-color-fg-neutral);
|
|
289
|
+
outline: none;
|
|
290
|
+
transition: box-shadow .15s;
|
|
291
|
+
}
|
|
292
|
+
.seed-data-table__search input::placeholder {
|
|
293
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
294
|
+
}
|
|
295
|
+
.seed-data-table__search input:focus {
|
|
296
|
+
box-shadow: inset 0 0 0 1px #0298d9;
|
|
297
|
+
}
|
|
266
298
|
.seed-data-table__count {
|
|
267
299
|
flex-shrink: 0;
|
|
268
300
|
margin-inline-start: auto;
|
|
@@ -299,7 +299,43 @@
|
|
|
299
299
|
|
|
300
300
|
.seed-data-table__search {
|
|
301
301
|
flex: 1;
|
|
302
|
+
align-items: center;
|
|
302
303
|
max-width: 280px;
|
|
304
|
+
display: inline-flex;
|
|
305
|
+
position: relative;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.seed-data-table__search svg {
|
|
309
|
+
width: 14px;
|
|
310
|
+
height: 14px;
|
|
311
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
312
|
+
pointer-events: none;
|
|
313
|
+
position: absolute;
|
|
314
|
+
inset-inline-start: var(--seed-dimension-x2);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.seed-data-table__search input {
|
|
318
|
+
width: 100%;
|
|
319
|
+
height: var(--seed-dimension-x8);
|
|
320
|
+
border-radius: var(--seed-radius-r2);
|
|
321
|
+
background-color: var(--seed-color-bg-layer-default);
|
|
322
|
+
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted), 0 0 2px #1c28402e, 0 1px 3px #0000000a;
|
|
323
|
+
font-family: inherit;
|
|
324
|
+
font-size: var(--seed-font-size-t4);
|
|
325
|
+
color: var(--seed-color-fg-neutral);
|
|
326
|
+
border: none;
|
|
327
|
+
outline: none;
|
|
328
|
+
padding-inline-start: var(--seed-dimension-x6);
|
|
329
|
+
padding-inline-end: var(--seed-dimension-x2);
|
|
330
|
+
transition: box-shadow .15s;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.seed-data-table__search input::placeholder {
|
|
334
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.seed-data-table__search input:focus {
|
|
338
|
+
box-shadow: inset 0 0 0 1px #0298d9;
|
|
303
339
|
}
|
|
304
340
|
|
|
305
341
|
.seed-data-table__count {
|