@happeouikit/content-renderer 3.2.10 → 3.2.11

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/index.cjs.js CHANGED
@@ -251,13 +251,10 @@
251
251
  width: 100%;
252
252
  margin: var(--space-md) 0;
253
253
  text-align: left;
254
- border-collapse: collapse; // doubles internal borders, but needed to allow more customization
255
- thead th {
256
- background: rgba(0, 0, 0, 0.1);
257
- }
258
- th,
259
- td {
260
- padding: 0.5em;
254
+ border-spacing: 0;
255
+ border-collapse: separate; // doubles internal borders, but needed to allow more customization
256
+ > tbody > tr > td {
257
+ padding: 0.25em 0.5em;
261
258
  border: 0.5px solid rgba(0, 0, 0, 0.12);
262
259
  &.fr-selected-cell {
263
260
  border: 0.5px solid var(--color-active-primary);
@@ -287,20 +284,19 @@
287
284
  }
288
285
  // to "cancel" the separate borders style, we halve all borders to 0.5px
289
286
  // but override with 1px for external borders
290
- & {
287
+ & > tbody > {
291
288
  tr:first-child > td { border-top-width: 1px; }
292
289
  tr:last-child > td { border-bottom-width: 1px; }
293
290
  tr > td:first-child { border-left-width: 1px; }
294
291
  tr > td:last-child { border-right-width: 1px; }
295
292
  }
296
- &.invisible-borders {
297
- th:not(.fr-selected-cell),
293
+ &.invisible-borders > tbody > tr > {
298
294
  td:not(.fr-selected-cell) {
299
295
  // keeping a transparent border so that selection doesn't push things by 1 pixel
300
296
  border: 1px dashed transparent;
301
297
  }
302
298
  }
303
- &.alternating-rows {
299
+ &.alternating-rows > tbody > {
304
300
  tr:nth-child(odd) {
305
301
  background: rgba(255, 255, 255, 0.05);
306
302
  }
@@ -308,7 +304,7 @@
308
304
  background: rgba(0, 0, 0, 0.05);
309
305
  }
310
306
  }
311
- &.round-corners {
307
+ &.round-corners > tbody > {
312
308
  tr:first-child { border-radius: 6px 6px 0 0; }
313
309
  tr:first-child > td:first-child { border-top-left-radius: 6px; }
314
310
  tr:first-child > td:last-child { border-top-right-radius: 6px; }
@@ -316,12 +312,12 @@
316
312
  tr:last-child > td:first-child { border-bottom-left-radius: 6px; }
317
313
  tr:last-child > td:last-child { border-bottom-right-radius: 6px; }
318
314
  }
319
- &.highlight-first-row {
315
+ &.highlight-first-row > tbody > {
320
316
  tr:first-child > td {
321
317
  font-weight: bold;
322
318
  }
323
319
  }
324
- &.highlight-first-column {
320
+ &.highlight-first-column > tbody > {
325
321
  tr > td:first-child {
326
322
  font-weight: bold;
327
323
  }