@idds/styles 1.0.26

package/src/components/table.css

@@ -0,0 +1,538 @@
+/**
+ * Table Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ */
+
+.ina-table {
+  width: 100%;
+  overflow-x: auto;
+  /* Ensure horizontal scrollbar is always visible when needed */
+  scrollbar-width: thin;
+  scrollbar-color: var(--ina-neutral-300) transparent;
+}
+
+.ina-table::-webkit-scrollbar {
+  height: 8px;
+}
+
+.ina-table::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ina-table::-webkit-scrollbar-thumb {
+  background-color: var(--ina-neutral-300);
+  border-radius: 4px;
+}
+
+.ina-table::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ina-neutral-400);
+}
+
+/* Table container */
+.ina-table__container {
+  border-collapse: collapse;
+  border-radius: var(--ina-radius-lg);
+  box-shadow: var(--ina-shadow-sm);
+  width: 100%;
+  /* Remove overflow: hidden to allow proper horizontal scrolling */
+  min-width: max-content;
+  /* Allow tooltips to extend beyond table bounds */
+  overflow: visible;
+  margin-bottom: var(--ina-spacing-4);
+}
+
+/* Table header */
+.ina-table__header {
+  border-top: 1px solid var(--ina-stroke-primary);
+  border-bottom: 1px solid var(--ina-stroke-primary);
+  background-color: var(--ina-background-primary);
+  position: relative;
+  z-index: 1;
+}
+
+/* Table header cell */
+.ina-table__header-cell {
+  padding: var(--ina-spacing-3) var(--ina-spacing-4);
+  text-align: left;
+  font-size: var(--ina-font-xs);
+  font-weight: var(--ina-font-normal);
+  color: var(--ina-content-secondary);
+  white-space: nowrap;
+  user-select: none;
+  position: relative;
+  min-width: fit-content;
+}
+
+/* Sticky last column - only when enabled */
+.ina-table--sticky-last-column .ina-table__header-cell:last-child {
+  position: sticky;
+  right: 0;
+  background-color: var(--ina-background-primary);
+  z-index: 11;
+  min-width: 120px;
+  text-align: right;
+  /* Allow tooltips to extend beyond sticky column bounds */
+  overflow: visible;
+}
+
+.ina-table--sticky-last-column .ina-table__cell:last-child {
+  position: sticky;
+  right: 0;
+  background-color: var(--ina-background-primary);
+  z-index: 10;
+  min-width: 120px;
+  text-align: right;
+  /* Allow tooltips to extend beyond sticky column bounds */
+  overflow: visible;
+}
+
+.ina-table__header-cell--sortable {
+  transition: background-color var(--ina-transition-base);
+}
+
+.ina-table__header-cell--sortable:hover {
+  /* background-color: var(--ina-neutral-50); */
+}
+
+/* Sorting controls */
+.ina-table__sort-controls {
+  display: inline-flex;
+  gap: var(--ina-spacing-0-5);
+  margin-left: var(--ina-spacing-1);
+}
+
+.ina-table__sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--ina-content-secondary);
+  transition: color var(--ina-transition-base);
+}
+.ina-table__sort-button-right {
+  margin-left: -0.5rem;
+}
+
+.ina-table__sort-button:hover {
+  color: var(--ina-content-primary);
+}
+
+.ina-table__sort-button--active {
+  color: var(--ina-semantic-info);
+}
+.ina-table__sort-button--active,
+.ina-table__sort-button--active:hover {
+  color: var(--ina-primary-600);
+}
+
+.ina-table__sort-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Table body */
+.ina-table__body {
+  background-color: var(--ina-background-primary);
+  position: relative;
+  z-index: 0;
+  /* Allow tooltips to extend beyond body bounds */
+  overflow: visible;
+}
+
+/* Table row */
+.ina-table__row {
+  transition: opacity var(--ina-transition-duration-200),
+    background-color var(--ina-transition-base);
+  /* Allow tooltips to extend beyond row bounds */
+  overflow: visible;
+}
+
+.ina-table__row:hover:not(.ina-table__row--disabled) {
+  background-color: var(--ina-background-secondary);
+}
+
+.ina-table__row--disabled {
+  opacity: 0.6;
+}
+
+.ina-table__row--loading {
+  opacity: 0.6;
+}
+
+/* Clickable row */
+.ina-table__row--clickable {
+  cursor: pointer;
+  transition: background-color var(--ina-transition-base);
+}
+
+.ina-table__row--clickable:hover {
+  background-color: var(--ina-neutral-50);
+}
+
+.ina-table__row--clickable:active {
+  background-color: var(--ina-neutral-100);
+}
+
+/* Table cell */
+.ina-table__cell {
+  padding: var(--ina-spacing-3) var(--ina-spacing-4);
+  border-bottom: 1px solid var(--ina-stroke-primary);
+  font-size: var(--ina-font-xs);
+  font-weight: var(--ina-font-medium);
+  color: var(--ina-content-primary);
+  vertical-align: top;
+  /* Prevent cell content from being cut off */
+  white-space: nowrap;
+  min-width: fit-content;
+  /* Allow tooltips to extend beyond cell bounds */
+  overflow: visible;
+  position: relative;
+}
+
+.ina-table__cell--editable {
+  cursor: pointer;
+  position: relative;
+}
+
+.ina-table__cell--editing {
+  background-color: var(--ina-primary-50);
+  padding: 0;
+}
+
+/* Selection checkbox cell */
+.ina-table__selection-cell {
+  padding: var(--ina-spacing-3) var(--ina-spacing-4);
+  border-bottom: 1px solid var(--ina-stroke-primary);
+  text-align: center;
+  vertical-align: middle;
+}
+
+/* Search bar */
+.ina-table__search {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--ina-spacing-4);
+}
+
+.ina-table__search-input {
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-radius-md);
+  padding: var(--ina-spacing-2) var(--ina-spacing-3);
+  color: var(--ina-content-primary);
+  outline: none;
+  font-size: var(--ina-font-sm);
+  transition: border-color var(--ina-transition-base),
+    box-shadow var(--ina-transition-base);
+}
+
+.ina-table__search-input:focus {
+  border-color: var(--ina-primary-500);
+  box-shadow: 0 0 0 1px var(--ina-primary-500);
+}
+
+.ina-table__search-input:disabled {
+  background-color: var(--ina-neutral-100);
+  cursor: not-allowed;
+}
+
+.ina-table__search-button {
+  background-color: var(--ina-primary-blue-500);
+  color: var(--ina-background-primary);
+  padding: var(--ina-spacing-2) var(--ina-spacing-4);
+  border-radius: var(--ina-radius-md);
+  border: none;
+  cursor: pointer;
+  font-size: var(--ina-font-sm);
+  transition: background-color var(--ina-transition-base);
+  margin-left: var(--ina-spacing-2);
+}
+
+.ina-table__search-button:hover:not(:disabled) {
+  background-color: var(--ina-primary-blue-600);
+}
+
+.ina-table__search-button:focus-visible {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+.ina-table__search-button:disabled {
+  background-color: var(--ina-neutral-300);
+  color: var(--ina-neutral-500);
+  cursor: not-allowed;
+}
+
+/* Progress bar */
+.ina-table__progress-bar {
+  margin-bottom: 0;
+}
+
+/* Empty state */
+.ina-table__empty-cell {
+  padding: var(--ina-spacing-4);
+  text-align: center;
+  font-size: var(--ina-font-sm);
+  color: var(--ina-content-secondary);
+}
+
+/* Pagination */
+.ina-table__pagination {
+  margin-top: var(--ina-spacing-4);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-table__header-cell,
+  .ina-table__cell {
+    padding: var(--ina-spacing-2);
+    font-size: var(--ina-font-xs);
+  }
+
+  .ina-table__search {
+    flex-direction: column;
+    gap: var(--ina-spacing-2);
+    align-items: stretch;
+  }
+
+  .ina-table__search-button {
+    margin-left: 0;
+  }
+}
+
+/* Table variants */
+.ina-table--variant-bordered .ina-table__container {
+  border: 1px solid var(--ina-stroke-primary);
+}
+
+.ina-table--variant-bordered .ina-table__cell,
+.ina-table--variant-bordered .ina-table__selection-cell {
+  border-right: 1px solid var(--ina-stroke-primary);
+}
+
+.ina-table--variant-striped .ina-table__row:nth-child(even) {
+  background-color: var(--ina-neutral-50);
+}
+
+.ina-table--variant-hover .ina-table__row:hover {
+  background-color: var(--ina-primary-50);
+}
+
+.ina-table--variant-compact .ina-table__cell,
+.ina-table--variant-compact .ina-table__header-cell,
+.ina-table--variant-compact .ina-table__selection-cell {
+  padding: var(--ina-spacing-1-5) var(--ina-spacing-2);
+}
+
+.ina-table--variant-loose .ina-table__cell,
+.ina-table--variant-loose .ina-table__header-cell,
+.ina-table--variant-loose .ina-table__selection-cell {
+  padding: var(--ina-spacing-4) var(--ina-spacing-6);
+}
+
+/* Size variants */
+.ina-table--size-sm .ina-table__cell,
+.ina-table--size-sm .ina-table__header-cell {
+  font-size: var(--ina-font-xs);
+  padding: var(--ina-spacing-2);
+}
+
+.ina-table--size-md .ina-table__cell,
+.ina-table--size-md .ina-table__header-cell {
+  font-size: var(--ina-font-sm);
+  padding: var(--ina-spacing-3) var(--ina-spacing-4);
+}
+
+.ina-table--size-lg .ina-table__cell,
+.ina-table--size-lg .ina-table__header-cell {
+  font-size: var(--ina-font-base);
+  padding: var(--ina-spacing-4) var(--ina-spacing-5);
+}
+
+/* Loading state */
+.ina-table--loading .ina-table__container {
+  position: relative;
+}
+
+.ina-table--loading .ina-table__container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+/* Dark mode support */
+/* @media (prefers-color-scheme: dark) {
+  .ina-table__header {
+    background-color: var(--ina-background-dark-primary);
+    border-color: var(--ina-stroke-primary-dark);
+  }
+
+  .ina-table__header-cell {
+    color: var(--ina-content-dark-secondary);
+  }
+
+  .ina-table__header-cell--sortable:hover {
+    background-color: var(--ina-neutral-800);
+  }
+
+  .ina-table__body {
+    background-color: var(--ina-background-dark-primary);
+  }
+
+  .ina-table__row:hover:not(.ina-table__row--disabled) {
+    background-color: var(--ina-neutral-800);
+  }
+
+  .ina-table__cell {
+    color: var(--ina-content-dark-primary);
+    border-color: var(--ina-stroke-primary-dark);
+  }
+
+  .ina-table__cell--editing {
+    background-color: var(--ina-primary-900);
+  }
+
+  .ina-table__row--disabled {
+    opacity: 0.6;
+  }
+
+  .ina-table__search-input {
+    background-color: var(--ina-background-dark-primary);
+    border-color: var(--ina-stroke-primary-dark);
+    color: var(--ina-content-dark-primary);
+  }
+
+  .ina-table__search-input:focus {
+    border-color: var(--ina-primary-400);
+    box-shadow: 0 0 0 1px var(--ina-primary-400);
+  }
+
+  .ina-table__search-input:disabled {
+    background-color: var(--ina-neutral-800);
+  }
+
+  .ina-table__empty-cell {
+    color: var(--ina-content-dark-secondary);
+  }
+
+  .ina-table--variant-striped .ina-table__row:nth-child(even) {
+    background-color: var(--ina-neutral-900);
+  }
+
+  .ina-table--variant-hover .ina-table__row:hover {
+    background-color: var(--ina-primary-900);
+  }
+
+  .ina-table--variant-bordered .ina-table__container {
+    border-color: var(--ina-stroke-primary-dark);
+  }
+
+  .ina-table--variant-bordered .ina-table__cell,
+  .ina-table--variant-bordered .ina-table__selection-cell {
+    border-color: var(--ina-stroke-primary-dark);
+  }
+
+  .ina-table--loading .ina-table__container::after {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+} */
+
+/* Accessibility improvements */
+.ina-table__header-cell:focus-visible {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+.ina-table__sort-button:focus-visible {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+.ina-table__cell--editable:focus-visible {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+/* Skip link for keyboard navigation */
+.ina-table__skip-link {
+  position: absolute;
+  top: -40px;
+  left: var(--ina-spacing-4);
+  background-color: var(--ina-primary-500);
+  color: var(--ina-background-primary);
+  padding: var(--ina-spacing-1) var(--ina-spacing-2);
+  border-radius: var(--ina-radius-base);
+  text-decoration: none;
+  font-size: var(--ina-font-sm);
+  z-index: 1000;
+}
+
+.ina-table__skip-link:focus {
+  top: var(--ina-spacing-4);
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .ina-table__header {
+    border-width: 2px;
+  }
+
+  .ina-table__cell {
+    border-width: 1px;
+  }
+
+  .ina-table--variant-bordered .ina-table__container {
+    border-width: 2px;
+  }
+
+  .ina-table__header-cell--sortable:hover,
+  .ina-table__sort-button--active {
+    background-color: var(--ina-primary-500);
+    color: var(--ina-background-primary);
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ina-table__row,
+  .ina-table__header-cell--sortable,
+  .ina-table__search-input,
+  .ina-table__search-button,
+  .ina-table__sort-button {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* Print styles */
+@media print {
+  .ina-table__search,
+  .ina-table__pagination,
+  .ina-table__progress-bar {
+    display: none;
+  }
+
+  .ina-table__container {
+    box-shadow: none;
+  }
+
+  .ina-table__header,
+  .ina-table__body {
+    background: none;
+  }
+
+  .ina-table__cell,
+  .ina-table__header-cell {
+    border-color: #000;
+  }
+}