@opencorestack/opengridx 2.0.4 → 3.0.0

package/lib/components/DataGrid/DataGrid.css

@@ -47,20 +47,28 @@
   position: relative;
   z-index: 3;
 }
-.ogx__pinned-rows--top {
+/* Header + top-pinned rows, and bottom-pinned rows + aggregation footer, each stick as one block,
+   so they stack instead of overlapping whatever their heights (column group rows, detail panels). */
+.ogx__sticky-top {
   position: sticky;
-  top: var(--ogx-header-height);
-  z-index: 10; 
-  background: var(--ogx-grid-background);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+  top: 0;
+  z-index: 10;
+  flex-shrink: 0;
 }
-.ogx__pinned-rows--bottom {
+.ogx__sticky-bottom {
   position: sticky;
   bottom: 0;
   z-index: 10;
+  flex-shrink: 0;
+  margin-top: auto;
+}
+.ogx__pinned-rows--top {
+  background: var(--ogx-grid-background);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+.ogx__pinned-rows--bottom {
   background: var(--ogx-grid-background);
   box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
-  margin-top: auto;
 }
 .ogx--loading {
   opacity: 0.6;
@@ -87,14 +95,14 @@
   overflow-y: visible;
 }
 .ogx__viewport::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: var(--ogx-scrollbar-size, 8px);
+  height: var(--ogx-scrollbar-size, 8px);
 }
 .ogx__viewport::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--ogx-scrollbar-track, transparent);
 }
 .ogx__viewport::-webkit-scrollbar-thumb {
-  background: var(--ogx-color-gray-300);
+  background: var(--ogx-scrollbar-thumb, var(--ogx-color-gray-300));
   border-radius: 4px;
   border: 2px solid transparent;
   background-clip: content-box;
@@ -104,7 +112,7 @@
 }
 .ogx__viewport {
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+  scrollbar-color: var(--ogx-scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--ogx-scrollbar-track, transparent);
 }
 .ogx__empty {
   display: flex;
@@ -122,6 +130,58 @@
   color: var(--ogx-color-gray-300);
 }
 
+.ogx__loading-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+/* Loading while rows are already shown: the rows stay usable underneath. */
+.ogx__loading-overlay--over-rows {
+  position: absolute;
+  inset: 0;
+  min-height: 0;
+  pointer-events: none;
+  z-index: var(--ogx-z-index-modal);
+  border-radius: var(--ogx-border-radius-lg);
+  overflow: hidden;
+}
+.ogx__loading-overlay--custom {
+  background: color-mix(in srgb, var(--ogx-grid-background) 50%, transparent);
+}
+.ogx__loading-overlay--custom > * {
+  pointer-events: auto;
+}
+.ogx__loading-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: color-mix(in srgb, var(--ogx-color-primary) 25%, transparent);
+  overflow: hidden;
+}
+.ogx__loading-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 40%;
+  background: var(--ogx-color-primary);
+  animation: ogx-loading-bar 1.2s ease-in-out infinite;
+}
+@keyframes ogx-loading-bar {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ogx__loading-bar::after {
+    animation: none;
+    width: 100%;
+  }
+}
+
 .ogx-error-overlay {
   position: absolute;
   top: 0;
@@ -185,6 +245,18 @@
   z-index: 3;
   background: var(--ogx-grid-header-background);
 }
+/* Aligns with the row's drag-handle / expand / checkbox column. */
+.ogx__aggregation-spacer {
+  width: 48px;
+  min-width: 48px;
+  flex-shrink: 0;
+  align-self: stretch;
+}
+.ogx__aggregation-spacer--pinned {
+  position: sticky;
+  z-index: 3;
+  background: var(--ogx-grid-header-background);
+}
 .ogx__aggregation-cell--pinned-right {
   border-left: 1px solid var(--ogx-grid-border-color);
 }