oranguru/src/Griddy/styles/griddy.module.css

/* ─── Root ──────────────────────────────────────────────────────────────── */

.griddy {
  --griddy-font-family: inherit;
  --griddy-font-size: 14px;
  --griddy-border-color: #e0e0e0;
  --griddy-header-bg: #f8f9fa;
  --griddy-header-color: #212529;
  --griddy-row-bg: #ffffff;
  --griddy-row-hover-bg: #f1f3f5;
  --griddy-row-even-bg: #f8f9fa;
  --griddy-focus-color: #228be6;
  --griddy-selection-bg: rgba(34, 139, 230, 0.1);
  --griddy-cell-padding: 0 8px;
  --griddy-search-bg: #ffffff;
  --griddy-search-border: #dee2e6;

  font-family: var(--griddy-font-family);
  font-size: var(--griddy-font-size);
  position: relative;
  width: 100%;
  border: 1px solid var(--griddy-border-color);
  border-radius: 4px;
  overflow: hidden;
}

/* ─── Container (scroll area) ──────────────────────────────────────────── */

.griddy-container {
  outline: none;
}

.griddy-container:focus-visible {
  box-shadow: inset 0 0 0 2px var(--griddy-focus-color);
}

/* ─── Header ───────────────────────────────────────────────────────────── */

.griddy-thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--griddy-header-bg);
  border-bottom: 2px solid var(--griddy-border-color);
}

.griddy-header-row {
  display: flex;
  width: 100%;
}

.griddy-header-cell {
  display: flex;
  align-items: center;
  padding: var(--griddy-cell-padding);
  height: 36px;
  font-weight: 600;
  color: var(--griddy-header-color);
  border-right: 1px solid var(--griddy-border-color);
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}

.griddy-header-cell:last-child {
  border-right: none;
  flex: 1;
}

.griddy-header-cell--sortable {
  cursor: pointer;
}

.griddy-header-cell--sortable:hover {
  background: rgba(0, 0, 0, 0.04);
}

.griddy-header-cell--sorted {
  color: var(--griddy-focus-color);
}

/* ─── Sort Indicator ───────────────────────────────────────────────────── */

.griddy-sort-indicator {
  margin-left: 4px;
  font-size: 12px;
}

/* ─── Header Cell Content ──────────────────────────────────────────────── */

.griddy-header-cell-content {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Filter Button ────────────────────────────────────────────────────── */

.griddy-filter-button {
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.griddy-filter-button:hover {
  opacity: 0.85;
}

.griddy-filter-button--active {
  opacity: 1;
}

/* ─── Resize Handle ────────────────────────────────────────────────────── */

.griddy-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
}

.griddy-resize-handle:hover {
  background: var(--griddy-focus-color);
}

/* ─── Body ─────────────────────────────────────────────────────────────── */

.griddy-tbody {
  width: 100%;
}

/* ─── Row ──────────────────────────────────────────────────────────────── */

.griddy-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--griddy-border-color);
  background: var(--griddy-row-bg);
  cursor: default;
  box-sizing: border-box;
}

.griddy-row:hover {
  background: var(--griddy-row-hover-bg);
}

.griddy-row--even {
  background: var(--griddy-row-even-bg);
}

.griddy-row--even:hover {
  background: var(--griddy-row-hover-bg);
}

.griddy-row--focused {
  outline: 2px solid var(--griddy-focus-color);
  outline-offset: -2px;
  z-index: 1;
}

.griddy-row--selected {
  background-color: var(--griddy-selection-bg);
}

.griddy-row--selected:hover {
  background-color: rgba(34, 139, 230, 0.15);
}

.griddy-row--focused.griddy-row--selected {
  outline: 2px solid var(--griddy-focus-color);
  background-color: var(--griddy-selection-bg);
}

/* ─── Cell ─────────────────────────────────────────────────────────────── */

.griddy-cell {
  display: flex;
  align-items: center;
  padding: var(--griddy-cell-padding);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--griddy-border-color);
  flex-shrink: 0;
}

.griddy-cell:last-child {
  border-right: none;
  flex: 1;
}

.griddy-cell--editing {
  padding: 0;
}

/* ─── Checkbox ─────────────────────────────────────────────────────────── */

.griddy-checkbox {
  cursor: pointer;
  margin: 0 auto;
  display: block;
}

/* ─── Search Overlay ───────────────────────────────────────────────────── */

.griddy-search-overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 8px;
  background: var(--griddy-search-bg);
  border: 1px solid var(--griddy-search-border);
  border-radius: 0 0 0 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.griddy-search-input {
  font-size: var(--griddy-font-size);
  padding: 4px 8px;
  border: 1px solid var(--griddy-search-border);
  border-radius: 4px;
  outline: none;
  width: 240px;
}

.griddy-search-input:focus {
  border-color: var(--griddy-focus-color);
  box-shadow: 0 0 0 2px rgba(34, 139, 230, 0.2);
}