@c8y/style/styles/components/data-display-and-visualization/tables/_resizable-grid.less

Styles for Cumulocity IoT applications

/**
 * resizaule grid - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
c8y-resizable-grid {
  display: flex;
  height: 100%;
  position: relative;

  // This CSS variable is set by the component and used here
  --col-a-width: var(--c8y-resizable-grid-default-width, 560px);
}

.resizable-grid-container {
  display: flex;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;

  /* Prevent content overflow during resize */
  .collapsed {
    width: 0 !important; // Hide the column
    min-width: 0 !important;
    opacity: 0;
    transition: all 0.3s ease;
    flex-shrink: 1;
  }

  .expanded {
    transition: all 0.3s ease;
    flex-grow: 1;
    width: 100% !important;
  }

  &:has(.collapsed) {
    .resizer > i{
      display: block;
    }
  }
}

.col-a {
  width: var(--col-a-width);
  min-width: 0;
  flex-shrink: 0; // Prevent it from shrinking
  overflow: hidden;
  display: flex;
  flex-direction: column;

  >* {
    flex: 1;
    min-height: 0;
  }
}

.col-b {
  flex-grow: 1; // Col B takes up remaining space
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;

  >* {
    flex: 1;
    min-height: 0;
  }
}

.resizer {
  width: @size-8;
  flex: 0 0 8px;
  cursor: col-resize;
  z-index: 1;
  position: relative;
  overflow: visible;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    bottom: 0;
    background: @component-border-color;
  }

  >i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: @component-background-default;
    border-radius: 50%;
    color: @component-color-text-muted;
    &::before{
      transition: all 0.3s ease;
      display: block;
    }
  }

  .is-resizing &,
  &:hover, &:focus {
    &::before {
      background: @component-color-focus;
    }

    >i {
      color: @component-color-focus;
      display: block;
      &::before{
        scale: 2;
      }
    }
  }
}

.inner-scroll {
  overflow-y: auto;
}



// Global styles applied when resizing to prevent text selection
body.no-select {
  user-select: none;
}