package.components.Table.table-scrollable.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
@use '../../sass-utilities' as *;

// * Table scrollable
@include pf-root($table) {
  --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
  --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
  --#{$table}__sticky-cell--InsetInlineEnd: auto;
  --#{$table}__sticky-cell--InsetInlineStart: auto;
  --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$table}__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
  --#{$table}__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
  --#{$table}__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
  --#{$table}__sticky-cell--m-border-left--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
  --#{$table}__sticky-cell--m-right--InsetInlineEnd: 0;
  --#{$table}__sticky-cell--m-left--InsetInlineStart: 0;
  --#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
}

// - Table sticky cell
.#{$table} .#{$table}__sticky-cell {
  position: sticky;
  inset-inline-start: var(--#{$table}__sticky-cell--InsetInlineStart);
  inset-inline-end: var(--#{$table}__sticky-cell--InsetInlineEnd);
  z-index: var(--#{$table}__sticky-cell--ZIndex);
  min-width: var(--#{$table}__sticky-cell--MinWidth);
}

.#{$table}__sticky-cell {
  --#{$table}--cell--Overflow: visible;
  --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);

  background-color: var(--#{$table}__sticky-cell--BackgroundColor);
  background-clip: padding-box;

  &.pf-m-border-right::before {
    --#{$table}--cell--m-border-right--before--BorderInlineEndWidth: var(--#{$table}__sticky-cell--m-border-right--before--BorderInlineEndWidth);
    --#{$table}--cell--m-border-right--before--BorderInlineEndColor: var(--#{$table}__sticky-cell--m-border-right--before--BorderInlineEndColor);
  }

  &.pf-m-border-left::before {
    --#{$table}--cell--m-border-left--before--BorderInlineStartWidth: var(--#{$table}__sticky-cell--m-border-left--before--BorderInlineStartWidth);
    --#{$table}--cell--m-border-left--before--BorderInlineStartColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderInlineStartColor);
  }

  &.pf-m-right,
  &.pf-m-inline-end {
    --#{$table}__sticky-cell--InsetInlineEnd: var(--#{$table}__sticky-cell--m-right--InsetInlineEnd);
  }

  &.pf-m-left,
  &.pf-m-inline-start {
    --#{$table}__sticky-cell--InsetInlineStart: var(--#{$table}__sticky-cell--m-left--InsetInlineStart);
  }
}

// - Scroll outer wrapper
.#{$scroll-outer-wrapper} {
  --#{$scroll-outer-wrapper}--MinHeight: #{pf-size-prem(400px)};
  --#{$scroll-outer-wrapper}--MaxHeight: 100%;

  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-height: var(--#{$scroll-outer-wrapper}--MinHeight);
  max-height: var(--#{$scroll-outer-wrapper}--MaxHeight);
  overflow: hidden;
}

// - Scroll inner wrapper
.#{$scroll-inner-wrapper} {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}