react-data-grid/lib/styles.css

Feature-rich and customizable data grid React component

@layer rdg {
  @layer Defaults, CheckboxInput, CheckboxIcon, CheckboxLabel, Cell, HeaderCell, SummaryCell, EditCell, Row, HeaderRow, SummaryRow, GroupedRow, Root;
}
.rdg-7-0-0-beta-60-fa71d63e {
  @layer rdg.MeasuringCell {
    contain: strict;
    visibility: hidden;
    grid-row: 1;
  }
}
.rdg-7-0-0-beta-60-85c48527 {
  @layer rdg.Cell {
    border-inline-end: var(--rdg-border-width) solid var(--rdg-border-color);
    border-block-end: var(--rdg-border-width) solid var(--rdg-border-color);
    background-color: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    outline: none;
    align-content: center;
    padding-block: 0;
    padding-inline: 8px;
    position: relative;
    overflow: clip;

    &[aria-selected="true"] {
      outline: var(--rdg-selection-width) solid var(--rdg-selection-color);
      outline-offset: calc(var(--rdg-selection-width) * -1);
    }
  }
}

.rdg-7-0-0-beta-60-203d9925 {
  @layer rdg.Cell {
    z-index: 1;
    position: sticky;
  }
}

.rdg-7-0-0-beta-60-bfba19bc {
  @layer rdg.DragHandle {
    --rdg-drag-handle-size: 8px;
    z-index: 0;
    cursor: move;
    inline-size: var(--rdg-drag-handle-size);
    block-size: var(--rdg-drag-handle-size);
    background-color: var(--rdg-selection-color);
    place-self: end;

    &:hover {
      --rdg-drag-handle-size: 16px;
      border: 2px solid var(--rdg-selection-color);
      background-color: var(--rdg-background-color);
    }
  }
}

.rdg-7-0-0-beta-60-7abddb3e {
  @layer rdg.DragHandle {
    z-index: 1;
    position: sticky;
  }
}
.rdg-7-0-0-beta-60-3b807ead {
  @layer rdg.CheckboxInput {
    block-size: 20px;
    inline-size: 20px;
    margin: auto;
    display: block;

    &:focus-visible {
      outline: 2px solid var(--rdg-checkbox-focus-color);
      outline-offset: -3px;
    }

    &:enabled {
      cursor: pointer;
    }
  }
}
.rdg-7-0-0-beta-60-07919382 {
  @layer rdg.GroupCellContent {
    outline: none;
  }
}

.rdg-7-0-0-beta-60-02a50147 {
  @layer rdg.GroupCellCaret {
    stroke: currentColor;
    stroke-width: 1.5px;
    fill: #0000;
    vertical-align: middle;
    margin-inline-start: 4px;

    & > path {
      transition: d .1s;
    }
  }
}
.rdg-7-0-0-beta-60-56a248e4 {
  @layer rdg.SortableHeaderCell {
    display: flex;
  }
}

.rdg-7-0-0-beta-60-7fad8c83 {
  @layer rdg.SortableHeaderCellName {
    text-overflow: ellipsis;
    flex-grow: 1;
    overflow: clip;
  }
}
.rdg-7-0-0-beta-60-35ccb4c8 {
  @layer rdg.Cell {
    background-color: #ccf;
  }
}
.rdg-7-0-0-beta-60-46f9ea88 {
  @layer rdg.EditCell {
    padding: 0;
  }
}
.rdg-7-0-0-beta-60-0dbd5994 {
  @layer rdg.HeaderRow {
    background-color: var(--rdg-header-background-color);
    font-weight: bold;
    display: contents;

    & > .rdg-7-0-0-beta-60-85c48527 {
      z-index: 2;
      position: sticky;
    }

    & > .rdg-7-0-0-beta-60-203d9925 {
      z-index: 3;
    }
  }
}
.rdg-7-0-0-beta-60-2a7e240d {
  @layer rdg.HeaderCell {
    cursor: pointer;
  }
}

.rdg-7-0-0-beta-60-1893dc0f {
  @layer rdg.HeaderCell {
    touch-action: none;
  }
}

.rdg-7-0-0-beta-60-4e60db91 {
  @layer rdg.HeaderCell {
    cursor: col-resize;
    inline-size: 10px;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
  }
}

.rdg-7-0-0-beta-60-f2d18717 {
  @layer rdg.HeaderCell {
    background-color: var(--rdg-header-draggable-background-color);
  }
}

.rdg-7-0-0-beta-60-3d12c7ae {
  @layer rdg.HeaderCell {
    outline-offset: -2px;
    border-radius: 4px;
    outline: 2px solid #008cff;
    width: fit-content;
  }
}
.rdg-7-0-0-beta-60-3c083f1b {
  @layer rdg.Row {
    grid-column: 1 / -1;
    grid-template: subgrid / subgrid;
    background-color: var(--rdg-background-color);
    display: grid;

    &:hover {
      background-color: var(--rdg-row-hover-background-color);
    }

    &:focus {
      outline: none;
    }

    &[tabindex="0"] {
      &:after {
        content: "";
        z-index: 1;
        pointer-events: none;
        border: var(--rdg-selection-width) solid var(--rdg-selection-color);
        grid-column: 1 / -1;
      }

      & > .rdg-cell-frozen-start:first-child:before, & > .rdg-cell-frozen-end:last-child:after {
        content: "";
        display: inline-block;
        position: absolute;
        inset-block: 0;
      }

      & > .rdg-cell-frozen-start:first-child:before {
        border-inline-start: var(--rdg-selection-width) solid var(--rdg-selection-color);
        inset-inline-start: 0;
      }

      & > .rdg-cell-frozen-end:last-child:after {
        border-inline-end: var(--rdg-selection-width) solid var(--rdg-selection-color);
        inset-inline-end: 0;
      }
    }

    &[aria-selected="true"] {
      background-color: var(--rdg-row-selected-background-color);

      &:hover {
        background-color: var(--rdg-row-selected-hover-background-color);
      }
    }
  }
}
.rdg-7-0-0-beta-60-3d5115f3 {
  @layer rdg.SortIcon {
    fill: currentColor;

    & > path {
      transition: d .1s;
    }
  }
}
.rdg-7-0-0-beta-60-ccd2e5d9 {
  @layer rdg.Defaults {
    & *, & :before, & :after {
      box-sizing: inherit;
    }
  }

  @layer rdg.Root {
    --rdg-selection-width: 2px;
    --rdg-selection-color: #67afe9;
    --rdg-font-size: 14px;
    --rdg-border-width: 1px;
    --rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
    --rdg-color: light-dark(#000, #ddd);
    --rdg-border-color: light-dark(#ddd, #444);
    --rdg-summary-border-color: light-dark(#aaa, #555);
    --rdg-background-color: light-dark(#fff, #212121);
    --rdg-header-background-color: light-dark(#f9f9f9, #1b1b1b);
    --rdg-header-draggable-background-color: light-dark(#e7e7e7, #2d2d2d);
    --rdg-row-hover-background-color: light-dark(#f5f5f5, #171717);
    --rdg-row-selected-background-color: light-dark(#dbecfa, #1a73bc);
    --rdg-row-selected-hover-background-color: light-dark(#c9e3f8, #1768ab);
    --rdg-checkbox-focus-color: #61b8ff;

    &.rdg-dark {
      color-scheme: dark;
    }

    &.rdg-light {
      color-scheme: light;
    }

    accent-color: light-dark(#005194, #94cfff);
    contain: content;
    content-visibility: auto;
    border: 1px solid var(--rdg-border-color);
    box-sizing: border-box;
    background-color: var(--rdg-background-color);
    block-size: 350px;
    color: var(--rdg-color);
    font-size: var(--rdg-font-size);
    font-variant-numeric: tabular-nums;
    display: grid;
    overflow: auto;
    container: rdg-root / scroll-state;

    &:before {
      content: "";
      grid-area: -2 / -2 / -1 / -1;
    }

    & > :nth-last-child(1 of .rdg-top-summary-row) {
      & > .rdg-7-0-0-beta-60-85c48527 {
        border-block-end: var(--rdg-summary-border-width) solid var(--rdg-summary-border-color);
      }
    }

    & > :nth-child(1 of .rdg-bottom-summary-row) {
      & > .rdg-7-0-0-beta-60-85c48527 {
        border-block-start: var(--rdg-summary-border-width) solid var(--rdg-summary-border-color);
      }
    }
  }
}

.rdg-7-0-0-beta-60-e9b0e1c9 {
  @layer rdg.Root {
    -webkit-user-select: none;
    user-select: none;

    & .rdg-7-0-0-beta-60-3c083f1b {
      cursor: move;
    }
  }
}

.rdg-7-0-0-beta-60-2e639f12 {
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  width: 10px;
  transition: opacity .1s;
  position: sticky;

  &:dir(rtl) {
    transform: scaleX(-1);
  }
}

.rdg-7-0-0-beta-60-86aef152 {
  background-image: linear-gradient(to right, light-dark(#00000026, #0006), #0000);

  @container rdg-root not scroll-state(scrollable: inline-start) {
    opacity: 0;
  }
}

.rdg-7-0-0-beta-60-7689f238 {
  background-image: linear-gradient(to left, light-dark(#00000026, #0006), #0000);

  @container rdg-root not scroll-state(scrollable: inline-end) {
    opacity: 0;
  }
}

.rdg-7-0-0-beta-60-487ac462 {
  z-index: 2;
}
.rdg-7-0-0-beta-60-0b90c82c {
  @layer rdg.SummaryRow {
    z-index: 2;
    position: sticky;
  }
}
.rdg-7-0-0-beta-60-e74a2be3 {
  @layer rdg.GroupedRow {
    &:not([aria-selected="true"]) {
      background-color: var(--rdg-header-background-color);
    }

    & > .rdg-7-0-0-beta-60-85c48527:not(:last-child, .rdg-7-0-0-beta-60-203d9925), & > :nth-last-child(n+2 of .rdg-cell-frozen-start), & > :nth-last-child(n+2 of .rdg-cell-frozen-end) {
      border-inline-end: none;
    }
  }
}
.rdg-7-0-0-beta-60-2f8db206 {
  @layer rdg.TextEditor {
    appearance: none;
    box-sizing: border-box;
    vertical-align: top;
    block-size: 100%;
    inline-size: 100%;
    color: var(--rdg-color);
    background-color: var(--rdg-background-color);
    font-family: inherit;
    font-size: var(--rdg-font-size);
    border: 2px solid #ccc;
    padding-block: 0;
    padding-inline: 6px;

    &:focus {
      border-color: var(--rdg-selection-color);
      outline: none;
    }

    &::placeholder {
      color: #999;
      opacity: 1;
    }
  }
}