@hummingbirdui/hummingbird/src/components/list-group.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility list-group {
  @layer base {
    --list-group-bg: var(--background-color-subtle);
    --list-group-color: var(--text-color-default);
    --list-group-padding-y: --spacing(2);
    --list-group-corder-color: var(--border-color-base);
    --list-group-border-radius: var(--radius-lg);
    --list-group-item-padding-x: --spacing(4);
    --list-group-item-padding-y: --spacing(2.5);
    --list-group-item-font-size: var(--text-base);
    --list-group-action-color: var(--text-color-muted);
    --list-group-hover-bg: var(--color-hover);
    --list-group-hover-color: var(--text-color-muted);
    --list-group-active-bg: var(--color-primary-lighter);
    --list-group-active-color: var(--color-primary);
    --list-group-disabled-bg: inherit;
    --list-group-disabled-color: var(--color-disabled-color);

    @apply relative flex flex-col
    pl-0 mb-0 list-none
    py-[var(--list-group-padding-y)]
    bg-[var(--list-group-bg)]
    rounded-[var(--list-group-border-radius)];

    hr {
      @apply border-[var(--list-group-corder-color)];
    }
    ul {
      @apply list-none p-0 m-0;
    }
  }
}

@utility list-group-item {
  @layer base {
    @apply px-[var(--list-group-item-padding-x)]
    py-[var(--list-group-item-padding-y)]
    text-[var(--list-group-color)]
    text-[length:var(--list-group-item-font-size)]
    no-underline
    leading-[1.5];

    &:is(:disabled, [disabled], .disabled) {
      @apply pointer-events-none
    text-[var(--list-group-disabled-color)]
    bg-[var(--list-group-disabled-bg)];
    }
    &.active {
      @apply text-[var(--list-group-active-color)]
    bg-[var(--list-group-active-bg)];
    }
  }
}

@utility list-group-item-action {
  @layer base {
    @apply w-full text-left
    text-[var(--list-group-action-color)];

    &:not(.active) {
      &:hover,
      &:focus {
        @apply no-underline
        text-[var(--list-group-hover-color)]
        bg-[var(--list-group-hover-bg)];
      }
      &:active {
        @apply text-[var(--list-group-active-color)]
      bg-[var(--list-group-active-bg)];
      }
    }
  }
}

@utility list-group-numbered {
  @layer base {
    counter-reset: section;
    > .list-group-item::before {
      content: counters(section, '.') '. ';
      counter-increment: section;
    }
  }
}
@utility list-group-item-pinned {
  @layer base {
    @apply sticky top-0 font-semibold bg-muted;
  }
}
@utility list-text-primary {
  @layer base {
    @apply text-base font-semibold text-default mb-0;
  }
}
@utility list-text-secondary {
  @layer base {
    @apply text-sm font-normal text-muted mb-0;
  }
}