dev/scss/base/flextable.scss

@use 'sass:math';
@use "lengths";
@use "mixins";

/**
 * This defines flexible table cells
 * for views (including media queries).
 */

dl.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: auto;
  padding-bottom: 0;

  > div {
    display: flex;
    flex-direction: row;
    text-align: center;
    width: 100%;
    border-width: math.div(lengths.$border-size,2);
    border-style: solid;
    align-items: stretch;
    > * {
      @include mixins.cell-info;
    }
    > dt {
      text-align: left;
      width: 12.5em;
      padding: lengths.$item-padding;
      margin: 0;
    }
    > dd {
      text-align: left;
      padding: lengths.$item-padding;
      margin: 0;
      width: 100%;
      max-width: none;
      max-height: 6em;
      margin-left: lengths.$border-size;
      white-space: normal;
      overflow-y: auto;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
  }
}


@media (min-width:640px) {
  dl.flex > div {
    width: 50%; // 2*
  }
}

@media (min-width:800px) {
  dl.flex > div {
    width: 33.3333333333333%; // 3*
  }
}

@media (min-width:1200px) {
  dl.flex > div {
    width: 25%; // 4*
  }
}

@media (min-width:1680px) {
  dl.flex > div {
    width: 20%; // 5*
  }
}