@semcore/data-table 16.0.0-prerelease.7 → 16.0.0

package/lib/cjs/components/Body/style.shadow.css

@@ -0,0 +1,257 @@
+SBody, SRow, SRowGroup {
+  display: contents;
+}
+
+SBody[compact] {
+  SCell {
+    padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+  }
+
+  SCell[data-aria-level] {
+    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px) * (var(--data-aria-level) - 1)));
+  }
+}
+
+SRow[gridArea], SCell[gridArea], SCollapseRow[gridArea] {
+  grid-area: var(--gridArea);
+}
+
+SCollapseRow SCell {
+  display: block;
+}
+
+/* DEFAULT THEME */
+SRow[active] > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SRow[expanded][accordionType='row'] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SRow[expanded][accordionType='cell'] > SCell:not([theme])[withAccordion] {
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SCollapseRow > SCell:not([theme]), SRow[expanded] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-accordion, #f4f5f9);
+}
+
+/* we need a media query here because of the postcssHoverMediaFeature plugin. it doesn't handle this type of selectors correctly */
+@media (hover: hover) {
+  SRow:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+  }
+
+  /* MUTED THEME */
+  SRow:hover > SCell[theme='muted'],
+  SRow[theme='muted']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='muted'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='muted'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='muted'],
+  SRowGroup:has(SCell:hover) > SRow[theme='muted'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    /* The color is hardcoded because need hex(in figma rgba) */
+    /* disable-tokens-validator */
+    background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+  }
+
+  /* INFO THEME */
+  SRow:hover > SCell[theme='info'],
+  SRow[theme='info']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='info'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='info'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='info'],
+  SRowGroup:has(SCell:hover) > SRow[theme='info'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
+  }
+
+  /* SUCCESS THEME */
+  SRow:hover > SCell[theme='success'],
+  SRow[theme='success']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='success'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='success'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='success'],
+  SRowGroup:has(SCell:hover) > SRow[theme='success'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
+  }
+
+  /* WARNING THEME */
+  SRow:hover > SCell[theme='warning'],
+  SRow[theme='warning']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='warning'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='warning'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='warning'],
+  SRowGroup:has(SCell:hover) > SRow[theme='warning'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
+  }
+
+  /* DANGER THEME */
+  SRow:hover > SCell[theme='danger'],
+  SRow[theme='danger']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='danger'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='danger'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='danger'],
+  SRowGroup:has(SCell:hover) > SRow[theme='danger'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
+  }
+}
+
+/* MUTED THEME */
+SRow[theme='muted'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+}
+
+SRow[theme='muted'][active] > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+/* INFO THEME */
+SRow[theme='info'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+}
+
+SRow[theme='info'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
+}
+
+/* SUCCESS THEME */
+SRow[theme='success'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+}
+
+SRow[theme='success'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
+}
+
+/* WARNING THEME */
+SRow[theme='warning'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+}
+
+SRow[theme='warning'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
+}
+
+/* DANGER THEME */
+SRow[theme='danger'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+}
+
+SRow[theme='danger'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
+}
+
+SCell {
+  display: flex;
+  height: 100%;
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+  color: var(--intergalactic-text-primary, #191b23);
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  overflow: hidden;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-variant-numeric: tabular-nums;
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+  outline: none;
+
+  SAccordionToggle {
+    margin-right: var(--intergalactic-spacing-3x, 12px);
+
+    svg {
+      transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
+    }
+
+    &[expanded] svg {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+SCell[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+  min-height: 45px;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+
+  &[data-aria-level] {
+    padding-left: calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-2x, 8px)) * (var(--data-aria-level) - 1)));
+  }
+}
+
+SCell[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+  min-height: 37px;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+
+  &[data-aria-level] {
+    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-2x, 8px)) * (var(--data-aria-level) - 1)));
+  }
+}
+
+SCell[borders='both'], SCell[borders='left'] {
+  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SCell[borders='both'], SCell[borders='right'] {
+  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SCell[fixed] {
+  position: sticky;
+  z-index: 2;
+}
+
+SCell[theme='muted'] {
+  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+}
+
+SCell[theme='info'] {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+}
+
+SCell[theme='success'] {
+  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+}
+
+SCell[theme='warning'] {
+  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+}
+
+SCell[theme='danger'] {
+  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+}
+
+SSpinContainer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85));
+}
+SSpinContainer[headerHeight] {
+  top: var(--headerHeight);
+}
+
+SEmptyData {
+  grid-column: 1 / -1;
+}
+
+SRow[sideIndents='l'] {
+  SCell:first-child {
+    padding-left: var(--intergalactic-spacing-5x, 20px);
+  }
+  SCell:last-child {
+    padding-right: var(--intergalactic-spacing-5x, 20px);
+  }
+}