@ozen-ui/kit/__inner__/esm/components/List/List.css

React component library

.List {
  --list-item-bg-color: transparent;
  --list-item-color: var(--color-content-primary);
  --list-pipka-bg-color: var(--color-content-action);
  --list-item-bg-color-disabled: var(--color-content-tertiary);
  --list-item-bg-color-hover: var(--color-background-main-hover);
  --list-item-bg-color-active: var(--color-background-main-pressed);
  --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
    0;
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
  padding: var(--list-gutter) 0;
  margin: 0;
  position: relative;
  outline: none;
}

  .List_size_2xs,
    .List_size_xs,
    .List_size_s {
      --list-gap: 2px;
    }

  .List_size_m,
    .List_size_l {
      --list-gap: 4px;
    }

  .List_size_2xs {
      --list-gutter: var(--spacing-3xs);
      --list-item-min-height: var(--control-height-2xs);
      --list-item-icon-min-width: 16px;
      --list-item-avatar-min-width: 16px;
      --list-item-padding: 0 8px;
      --list-item-children-margin-right: 8px;
      --list-pipka-height: 32px;
      --list-pipka-width: 4px;
      --list-item-border-radius: var(--border-radius-m);
    }

  .List_size_xs {
      --list-gutter: var(--spacing-3xs);
      --list-item-min-height: var(--control-height-xs);
      --list-item-icon-min-width: 16px;
      --list-item-avatar-min-width: 24px;
      --list-item-padding: 4px 8px;
      --list-item-children-margin-right: 8px;
      --list-pipka-height: 40px;
      --list-pipka-width: 4px;
      --list-item-border-radius: var(--border-radius-m);
    }

  .List_size_s {
      --list-gutter: var(--spacing-3xs);
      --list-item-min-height: var(--control-height-s);
      --list-item-icon-min-width: 16px;
      --list-item-avatar-min-width: 32px;
      --list-item-padding: 6px 12px;
      --list-item-children-margin-right: 12px;
      --list-pipka-height: 40px;
      --list-pipka-width: 4px;
      --list-item-border-radius: var(--border-radius-l);
    }

  .List_size_m {
      --list-gutter: var(--spacing-2xs);
      --list-item-min-height: var(--control-height-m);
      --list-item-icon-min-width: 24px;
      --list-item-avatar-min-width: 40px;
      --list-item-padding: 8px 12px;
      --list-item-children-margin-right: 12px;
      --list-pipka-height: 48px;
      --list-pipka-width: 4px;
      --list-item-border-radius: var(--border-radius-l);
    }

  .List_size_l {
      --list-gutter: var(--spacing-2xs);
      --list-item-min-height: var(--control-height-l);
      --list-item-icon-min-width: 24px;
      --list-item-avatar-min-width: 48px;
      --list-item-padding: 8px 16px;
      --list-item-children-margin-right: 16px;
      --list-pipka-height: 48px;
      --list-pipka-width: 4px;
      --list-item-border-radius: var(--border-radius-l);
    }

  .List_disablePadding,
  .List:empty {
    --list-gutter: 0;
  }