@radix-ui/themes/src/components/data-list.css

[](https://radix-ui.com/themes)

.rt-DataListRoot {
  font-family: var(--default-font-family);
  font-weight: var(--font-weight-normal);
  font-style: normal;
  text-align: start;
}

.rt-DataListLabel {
  display: flex;
  color: var(--gray-a11);

  &:where(.rt-high-contrast) {
    color: var(--gray-12);
  }

  &:where([data-accent-color]) {
    color: var(--accent-a11);

    &:where(.rt-high-contrast) {
      color: var(--accent-12);
    }
  }
}

.rt-DataListValue {
  display: flex;
  margin: 0;

  /* Ensure value can be truncated */
  min-width: 0px;
}

/***************************************************************************************************
 *                                                                                                 *
 * ORIENTATION                                                                                     *
 *                                                                                                 *
 ***************************************************************************************************/

.rt-DataListItem {
  /* The actual margins that value part gets. These are re-assigned to other vars depending on the orientation */
  --data-list-value-margin-top: 0px;
  --data-list-value-margin-bottom: 0px;
  --data-list-first-item-value-margin-top: 0px;
  --data-list-last-item-value-margin-bottom: 0px;

  /* How much the value part can poke outside of the row when in a horizontal data list */
  --data-list-value-trim-start: -0.25em;
  --data-list-value-trim-end: -0.25em;
  --data-list-first-item-value-trim-start: 0px;
  --data-list-last-item-value-trim-end: 0px;
}

.rt-DataListValue {
  margin-top: var(--data-list-value-margin-top);
  margin-bottom: var(--data-list-value-margin-bottom);

  /*
   * The first/last item should not poke out of the Root boundaries –
   * unless it has "align-items: center", but that’s handled later.
   */
  :where(.rt-DataListItem:first-child) & {
    margin-top: var(--data-list-first-item-value-margin-top);
  }
  :where(.rt-DataListItem:last-child) & {
    margin-bottom: var(--data-list-last-item-value-margin-bottom);
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*                Sizes                */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-DataListRoot {
    &:where(.rt-r-size-1) {
      gap: var(--space-3);
    }
    &:where(.rt-r-size-2) {
      gap: var(--space-4);
    }
    &:where(.rt-r-size-3) {
      gap: calc(var(--space-4) * 1.25);
    }
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*             Orientation             */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

@breakpoints {
  .rt-DataListRoot {
    &:where(.rt-r-orientation-vertical) {
      display: flex;
      flex-direction: column;

      & :where(.rt-DataListItem) {
        /* No poking out of the row when orientation is vertical */
        --data-list-value-margin-top: 0px;
        --data-list-value-margin-bottom: 0px;
        --data-list-first-item-value-margin-top: 0px;
        --data-list-last-item-value-margin-bottom: 0px;

        display: flex;
        flex-direction: column;
        gap: var(--space-1);
      }

      & :where(.rt-DataListLabel) {
        /* Ensure label can be truncated */
        min-width: 0px;
      }
    }

    &:where(.rt-r-orientation-horizontal) {
      display: grid;
      grid-template-columns: auto 1fr;

      & :where(.rt-DataListItem) {
        /* Allow the value to poke out of the row when orientation is horizontal */
        --data-list-value-margin-top: var(--data-list-value-trim-start);
        --data-list-value-margin-bottom: var(--data-list-value-trim-end);
        --data-list-first-item-value-margin-top: var(--data-list-first-item-value-trim-start);
        --data-list-last-item-value-margin-bottom: var(--data-list-last-item-value-trim-end);

        display: grid;
        /* Use subgrid so all the label columns remain aligned */
        grid-template-columns: inherit; /* Fallback */
        grid-template-columns: subgrid;
        gap: inherit;
        grid-column: span 2;
        align-items: baseline;
      }

      & :where(.rt-DataListLabel) {
        /* Set an implicit min. width when orientation is horizontal */
        min-width: 120px;
      }
    }
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*              Alignment              */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

.rt-DataListLabel,
.rt-DataListValue {
  &::before {
    /*
     * Zero-width joiner to establish a baseline.
     * Allows Flex children with text to align automatically.
     */
    content: '‍';
  }
}

@breakpoints {
  /*
   * Make sure that the margin adjustments cooperate with "align-items".
   * To do that, we need to remove the corresponding margin adjustment depending on the "align-items" value.
   * We can't set `--data-list-value-margin-top` directly because at breakpoints it would lose the orientation value.
   */
  .rt-DataListItem {
    /* Match the default: poke out at the top and bottom, but not when it’s the first or last item */
    &:where(.rt-r-ai-baseline) {
      --data-list-value-trim-start: -0.25em;
      --data-list-value-trim-end: -0.25em;
      --data-list-first-item-value-trim-start: 0px;
      --data-list-last-item-value-trim-end: 0px;
    }
    /* No poking out at the top; and not at the bottom when it’s the first or last item */
    &:where(.rt-r-ai-start) {
      --data-list-value-trim-start: 0px;
      --data-list-value-trim-end: -0.25em;
      --data-list-first-item-value-trim-start: 0px;
      --data-list-last-item-value-trim-end: 0px;
    }
    /* Allow to poke out from any side, as for centering to work the top and bottom margins have to be always equal */
    &:where(.rt-r-ai-center) {
      --data-list-value-trim-start: -0.25em;
      --data-list-value-trim-end: -0.25em;
      --data-list-first-item-value-trim-start: -0.25em;
      --data-list-last-item-value-trim-end: -0.25em;
    }
    /* No poking out at the bottom; and not at the top when it’s the first or last item */
    &:where(.rt-r-ai-end) {
      --data-list-value-trim-start: -0.25em;
      --data-list-value-trim-end: 0px;
      --data-list-first-item-value-trim-start: 0px;
      --data-list-last-item-value-trim-end: 0px;
    }
    /* No poking out when stretched */
    &:where(.rt-r-ai-stretch) {
      --data-list-value-trim-start: 0px;
      --data-list-value-trim-end: 0px;
      --data-list-first-item-value-trim-start: 0px;
      --data-list-last-item-value-trim-end: 0px;
    }
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*                Trim                 */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

.rt-DataListRoot {
  --data-list-leading-trim-start: calc(var(--default-leading-trim-start) - var(--line-height) / 2);
  --data-list-leading-trim-end: calc(var(--default-leading-trim-end) - var(--line-height) / 2);
}

.rt-DataListItem {
  &:where(:first-child) {
    margin-top: var(--leading-trim-start);
  }
  &:where(:last-child) {
    margin-bottom: var(--leading-trim-end);
  }
}

@breakpoints {
  .rt-DataListRoot {
    &:where(.rt-r-trim-normal) {
      --leading-trim-start: initial;
      --leading-trim-end: initial;
    }
    &:where(.rt-r-trim-start) {
      --leading-trim-start: var(--data-list-leading-trim-start);
      --leading-trim-end: initial;
    }
    &:where(.rt-r-trim-end) {
      --leading-trim-start: initial;
      --leading-trim-end: var(--data-list-leading-trim-end);
    }
    &:where(.rt-r-trim-both) {
      --leading-trim-start: var(--data-list-leading-trim-start);
      --leading-trim-end: var(--data-list-leading-trim-end);
    }
  }
}