@kadoui/css/src/styles/popovers.css

Kadoui TailwindCSS styles

/*
  Popover
  The popover container should have `group/popover` class and be `absolute` or `relative`
*/
@utility popover-group {
  @apply relative;

  &:not(:hover) {
    .popover {
      @apply ignore scale-0;
    }
  }
}

@utility popover {
  @apply absolute w-max transition-all z-10;
}
/* --- */

/* Content */
@utility popover-content {
  --popover-content-size: calc(var(--spacing) * 3);
  --popover-content-text: var(--text-base);
  --popover-content-line: var(--tw-leading, var(--text-base--line-height));

  @apply p-[var(--popover-content-size)]
  bg-palette text-brush rounded-kado;

  font-size: var(--popover-content-text);
  line-height: var(--popover-content-line);
}
/* --- */

/* Sizes */
@utility popover-content-sm {
  --popover-content-size: calc(var(--spacing) * 1.5);
  --popover-content-text: var(--text-sm);
  --popover-content-line: var(--tw-leading, var(--text-sm--line-height));
}

@utility popover-content-lg {
  --popover-content-size: calc(var(--spacing) * 6);
  --popover-content-text: var(--text-lg);
  --popover-content-line: var(--tw-leading, var(--text-lg--line-height));
}
/* --- */

/* Positions */
@utility popover-t {
  @apply pb-1.5 top-out left-center origin-bottom;
}

@utility popover-tr {
  @apply top-out right-out origin-bottom-left;
}

@utility popover-r {
  @apply pl-1.5 top-center right-out origin-left;
}

@utility popover-br {
  @apply bottom-out right-out origin-top-left;
}

@utility popover-b {
  @apply pt-1.5 bottom-out left-center origin-top;
}

@utility popover-bl {
  @apply bottom-out left-out origin-top-right;
}

@utility popover-l {
  @apply pr-1.5 top-center left-out origin-right;
}

@utility popover-tl {
  @apply top-out left-out origin-bottom-right;
}
/* --- */