@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-data-grid/bh-data-grid.css

@@ -0,0 +1,602 @@
+/* ==========================================================================
+   Data Grid Component
+   Based on Figma design tokens
+   ========================================================================== */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Container
+   ========================================================================== */
+
+.data-grid {
+  position: relative;
+  width: 100%;
+  font-family: var(--font-inter, 'Inter', sans-serif);
+  background-color: var(--color-white);
+  overflow: auto;
+}
+
+.data-grid-table {
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+}
+
+/* ==========================================================================
+   Header Row
+   ========================================================================== */
+
+.data-grid-header-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 32px;
+  background-color: var(--color-neutral-50);
+  border-bottom: 1px solid var(--color-neutral-200);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.data-grid-header-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+  padding: 0 var(--spacing-sm, 8px);
+  height: 100%;
+  font-size: var(--text-xs-size, 12px);
+  font-weight: var(--weight-semibold, 600);
+  line-height: var(--text-xs-line, 18px);
+  color: var(--color-neutral-600);
+  user-select: none;
+  flex: 1;
+  min-width: 0;
+}
+
+.data-grid-header-cell-sortable {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.data-grid-header-cell-sortable:hover {
+  background-color: var(--color-neutral-100);
+}
+
+.data-grid-header-cell-sorted {
+  color: var(--color-neutral-700);
+}
+
+.data-grid-header-text {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.data-grid-sort-icon {
+  font-size: 12px;
+  color: var(--color-neutral-400);
+  flex-shrink: 0;
+  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
+}
+
+.data-grid-header-cell-sorted .data-grid-sort-icon {
+  color: var(--color-neutral-600);
+}
+
+/* ==========================================================================
+   Filter Row
+   ========================================================================== */
+
+.data-grid-filter-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 36px;
+  background-color: var(--color-white);
+  border-bottom: 1px solid var(--color-neutral-200);
+  position: sticky;
+  top: 32px;
+  z-index: 1;
+}
+
+.data-grid-filter-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--spacing-sm, 8px);
+  height: 100%;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Filter icon wrapper */
+.data-grid-filter-icon-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Filter search icon */
+.data-grid-filter-icon {
+  font-size: 18px;
+  color: var(--color-neutral-400);
+  cursor: pointer;
+  transition: color 0.15s ease;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.data-grid-filter-icon:hover {
+  color: var(--color-neutral-600);
+}
+
+.data-grid-filter-active .data-grid-filter-icon {
+  color: var(--color-brand-500);
+}
+
+/* Filter popover */
+.data-grid-filter-popover {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md, 8px);
+  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
+  padding: var(--spacing-sm, 8px);
+  min-width: 180px;
+}
+
+.data-grid-filter-popover-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 var(--spacing-sm, 8px);
+  font-size: var(--text-sm-size, 14px);
+  font-family: var(--font-inter, 'Inter', sans-serif);
+  color: var(--color-neutral-900);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm, 6px);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.data-grid-filter-popover-input::placeholder {
+  color: var(--color-neutral-400);
+}
+
+.data-grid-filter-popover-input:focus {
+  border-color: var(--color-brand-500);
+  box-shadow: 0 0 0 3px var(--color-brand-100);
+}
+
+/* Style date picker inside filter */
+.data-grid-filter-icon-wrapper bh-date-picker {
+  --bh-button-padding: 0;
+}
+
+.data-grid-filter-icon-wrapper bh-date-picker::part(trigger) {
+  padding: 0;
+}
+
+/* ==========================================================================
+   Body
+   ========================================================================== */
+
+.data-grid-body {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ==========================================================================
+   Data Rows
+   ========================================================================== */
+
+.data-grid-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  border-bottom: 1px solid var(--color-neutral-100);
+  background-color: var(--color-white);
+  transition: background-color 0.1s ease;
+}
+
+.data-grid-bordered .data-grid-row {
+  border-bottom-color: var(--color-neutral-200);
+}
+
+.data-grid-row-hover,
+.data-grid-row:hover {
+  background-color: var(--color-neutral-25);
+}
+
+.data-grid-row-selected {
+  background-color: var(--color-brand-50);
+}
+
+.data-grid-row-selected:hover {
+  background-color: var(--color-brand-100);
+}
+
+.data-grid-row-striped {
+  background-color: var(--color-neutral-25);
+}
+
+.data-grid-row-striped:hover {
+  background-color: var(--color-neutral-50);
+}
+
+/* Compact mode */
+.data-grid-compact .data-grid-row {
+  height: 32px;
+}
+
+.data-grid-compact .data-grid-header-row {
+  height: 28px;
+}
+
+/* ==========================================================================
+   Cells
+   ========================================================================== */
+
+.data-grid-cell {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-sm, 8px);
+  height: 100%;
+  font-size: var(--text-sm-size, 14px);
+  font-weight: var(--weight-regular, 400);
+  line-height: var(--text-sm-line, 20px);
+  color: var(--color-neutral-900);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.data-grid-cell > * {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Cell alignment */
+.data-grid-cell-align-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.data-grid-cell-align-center {
+  justify-content: center;
+  text-align: center;
+}
+
+.data-grid-cell-align-right {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+/* Cell types */
+.data-grid-cell-type-number {
+  font-variant-numeric: tabular-nums;
+}
+
+.data-grid-cell-type-date {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Checkbox cells */
+.data-grid-cell-checkbox {
+  flex: 0 0 40px;
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
+  justify-content: center;
+}
+
+/* ==========================================================================
+   Empty State
+   ========================================================================== */
+
+.data-grid-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3xl, 48px) var(--spacing-xl, 24px);
+  background-color: var(--color-white);
+}
+
+/* ==========================================================================
+   Loading State
+   ========================================================================== */
+
+.data-grid-loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.data-grid-loading .data-grid-body {
+  opacity: 0.5;
+}
+
+.data-grid-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 10;
+}
+
+/* ==========================================================================
+   Group Row
+   ========================================================================== */
+
+.data-grid-group-section {
+  display: contents;
+}
+
+.data-grid-group-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 36px;
+  padding: 0 var(--spacing-sm, 8px);
+  background-color: var(--color-neutral-50);
+  border-bottom: 1px solid var(--color-neutral-200);
+  font-size: var(--text-sm-size, 14px);
+  font-weight: var(--weight-medium, 500);
+  color: var(--color-neutral-700);
+  cursor: pointer;
+  user-select: none;
+}
+
+.data-grid-group-row:hover {
+  background-color: var(--color-neutral-100);
+}
+
+.data-grid-group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: var(--spacing-sm, 8px);
+  color: var(--color-neutral-500);
+}
+
+.data-grid-group-toggle .material-symbols-outlined {
+  font-size: 18px;
+  transition: transform 0.2s ease;
+}
+
+.data-grid-group-row-expanded .data-grid-group-toggle .material-symbols-outlined {
+  transform: rotate(90deg);
+}
+
+.data-grid-group-label {
+  flex: 1;
+}
+
+.data-grid-group-column-name {
+  color: var(--color-neutral-500);
+}
+
+.data-grid-group-value {
+  color: var(--color-neutral-900);
+  font-weight: var(--weight-semibold, 600);
+}
+
+.data-grid-group-count {
+  color: var(--color-neutral-500);
+  margin-left: var(--spacing-sm, 8px);
+  font-weight: var(--weight-regular, 400);
+  font-size: var(--text-xs-size, 12px);
+}
+
+/* Grouped row indent */
+.data-grid-row-grouped {
+  background-color: var(--color-white);
+}
+
+.data-grid-row-indent {
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   Scrollbar Styling
+   ========================================================================== */
+
+.data-grid::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.data-grid::-webkit-scrollbar-track {
+  background: var(--color-neutral-100);
+  border-radius: 4px;
+}
+
+.data-grid::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-300);
+  border-radius: 4px;
+}
+
+.data-grid::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neutral-400);
+}
+
+/* ==========================================================================
+   Editing
+   ========================================================================== */
+
+/* Row in edit mode */
+.data-grid-row-editing {
+  background-color: var(--color-brand-25, #fefcff);
+  box-shadow: inset 0 0 0 1px var(--color-brand-200);
+}
+
+.data-grid-row-editing:hover {
+  background-color: var(--color-brand-25, #fefcff);
+}
+
+/* Editable cell (can be double-clicked to edit) */
+.data-grid-cell-editable {
+  cursor: text;
+}
+
+.data-grid-cell-editable:hover {
+  background-color: var(--color-neutral-50);
+}
+
+/* Cell being edited */
+.data-grid-cell-editing {
+  padding: 0 var(--spacing-xs, 4px);
+}
+
+/* Edit input */
+.data-grid-edit-input {
+  width: 100%;
+  height: calc(100% - 4px);
+  padding: 0 var(--spacing-xs, 4px);
+  font-size: var(--text-sm-size, 14px);
+  font-family: var(--font-inter, 'Inter', sans-serif);
+  color: var(--color-neutral-900);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-brand-500);
+  border-radius: var(--radius-sm, 4px);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-brand-100);
+}
+
+.data-grid-edit-input:focus {
+  border-color: var(--color-brand-600);
+  box-shadow: 0 0 0 3px var(--color-brand-100);
+}
+
+.data-grid-edit-input::placeholder {
+  color: var(--color-neutral-400);
+}
+
+/* Remove number input spinners */
+.data-grid-edit-input[type='number']::-webkit-outer-spin-button,
+.data-grid-edit-input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.data-grid-edit-input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+/* Actions column */
+.data-grid-cell-actions {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 40px;
+  padding: 0 var(--spacing-xs, 4px);
+  justify-content: flex-end;
+  gap: var(--spacing-xs, 4px);
+}
+
+.data-grid-edit-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+}
+
+/* Action buttons */
+.data-grid-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  background-color: transparent;
+  color: var(--color-neutral-500);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.data-grid-action-btn:hover {
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+.data-grid-action-btn .material-symbols-outlined {
+  font-size: 18px;
+  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
+}
+
+/* Edit button */
+.data-grid-action-edit:hover {
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+/* Save button */
+.data-grid-action-save {
+  color: var(--color-success-600);
+}
+
+.data-grid-action-save:hover {
+  background-color: var(--color-success-50);
+  color: var(--color-success-700);
+}
+
+/* Cancel button */
+.data-grid-action-cancel {
+  color: var(--color-error-600);
+}
+
+.data-grid-action-cancel:hover {
+  background-color: var(--color-error-50);
+  color: var(--color-error-700);
+}
+
+/* Header actions column */
+.data-grid-header-cell-actions {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 40px;
+  padding: 0 var(--spacing-xs, 4px);
+}
+
+/* ==========================================================================
+   Responsive
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .data-grid-header-cell,
+  .data-grid-cell {
+    padding: 0 var(--spacing-xs, 4px);
+  }
+
+  .data-grid-filter-input {
+    height: 24px;
+    font-size: 11px;
+  }
+
+  .data-grid-action-btn {
+    width: 24px;
+    height: 24px;
+  }
+
+  .data-grid-action-btn .material-symbols-outlined {
+    font-size: 16px;
+  }
+}