package.components.DataList.data-list-grid.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 *;

@mixin pf-v6-c-data-list-responsive-block() {
  // base responsive styles
  @at-root .#{$data-list}:not([class*="pf-m-grid"]) {
    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
      @content;
    }
  }

  @at-root .#{$data-list}.pf-m-grid-none {
    @media screen and (min-width: $pf-v6-global--breakpoint--xs) {
      @content;
    }
  }

  // grid modifiers
  @each $size, $bp in $pf-v6-global--breakpoint-name-map {
    @at-root .#{$data-list}.pf-m-grid-#{$size} {
      @media screen and (min-width: #{$bp}) {
        @content;
      }
    }
  }
}

@include pf-v6-c-data-list-responsive-block {
  --#{$data-list}__cell--cell--PaddingBlockStart: var(--#{$data-list}__cell--cell--md--PaddingBlockStart);
  --#{$data-list}__cell--PaddingBlockEnd: var(--#{$data-list}__cell--md--PaddingBlockEnd);
  --#{$data-list}__item-control--MarginInlineEnd: var(--#{$data-list}__item-control--md--MarginInlineEnd);
  --#{$data-list}__item-action--MarginInlineStart: var(--#{$data-list}__item-action--md--MarginInlineStart);
  --#{$data-list}__expandable-content-body--PaddingBlockStart: var(--#{$data-list}__expandable-content-body--md--PaddingBlockStart);
  --#{$data-list}__expandable-content-body--PaddingBlockEnd: var(--#{$data-list}__expandable-content-body--md--PaddingBlockEnd);
  --#{$data-list}--m-compact__cell--PaddingBlockEnd: var(--#{$data-list}--m-compact__cell--md--PaddingBlockEnd);
  --#{$data-list}--m-compact__cell-cell--PaddingBlockStart: var(--#{$data-list}--m-compact__cell-cell--md--PaddingBlockStart);

  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$data-list}__item-row--PaddingInlineEnd: var(--#{$data-list}__item-row--xl--PaddingInlineEnd);
    --#{$data-list}__item-row--PaddingInlineStart: var(--#{$data-list}__item-row--xl--PaddingInlineStart);
    --#{$data-list}__expandable-content-body--PaddingInlineEnd: var(--#{$data-list}__expandable-content-body--xl--PaddingInlineEnd);
    --#{$data-list}__expandable-content-body--PaddingInlineStart: var(--#{$data-list}__expandable-content-body--xl--PaddingInlineStart);
  }

  .#{$data-list}__item-content {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    padding-block-end: var(--#{$data-list}__item-content--md--PaddingBlockEnd);
  }

  .#{$data-list}__cell {
    // stylelint-disable selector-not-notation
    // update to single :not() in breaking change
    &:not(:last-child):not(.pf-m-icon) {
      margin-inline-end: var(--#{$data-list}__cell--MarginInlineEnd);
    }

    // for all subsequent .#{$data-list}__cell's, set to full width
    & + .#{$data-list}__cell {
      flex: 1;
      order: initial;
    }

    &.pf-m-align-right {
      margin-inline-start: auto;
    }

    &.pf-m-no-fill {
      flex: none;
    }

    &.pf-m-flex-2 { flex-grow: 2; }
    &.pf-m-flex-3 { flex-grow: 3; }
    &.pf-m-flex-4 { flex-grow: 4; }
    &.pf-m-flex-5 { flex-grow: 5; }
  }

  .#{$data-list}__expandable-content {
    max-height: initial;
    overflow-y: visible;
  }
}