@idds/styles 1.2.11 → 1.2.13

package/src/components/table.css

@@ -1,538 +0,0 @@
-/**
- * Table Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- */
-
-.ina-table {
-  width: 100%;
-  /* 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;
-}
-
-/* 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.125rem;
-}
-
-.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;
-  /* 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: middle;
-  /* 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 {
-  padding: 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;
-  }
-  .ina-table__pagination {
-    padding: var(--ina-spacing-3);
-  }
-}
-
-/* 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;
-  }
-}