fadgram-ui/css/toast.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@utility toast-container {
  @apply fixed z-50;
  @apply top-4 end-4;

  &.top-start {
    @apply end-auto top-4 start-4;
  }

  &.top-center {
    @apply end-auto top-4 start-1/2 -translate-x-1/2;
  }

  &.bottom-start {
    @apply top-auto end-auto bottom-4 start-4;
  }

  &.bottom-center {
    @apply top-auto end-auto bottom-4 start-1/2 -translate-x-1/2;
  }

  &.bottom-end {
    @apply top-auto bottom-4 end-4;
  }

  &.center-center {
    @apply top-1/2 start-1/2 -translate-y-1/2 -translate-x-1/2;
  }
}
@utility toast {
  @apply flex-space-2 p-2.5 mb-3 text-sm rounded-lg;
  @apply text-cyan-900 bg-cyan-200;
  @apply shadow-sm;

  &.xxs {
    @apply flex-space-1;
    @apply p-1 text-xxs;
  }

  &.xs {
    @apply flex-space-1;
    @apply p-1.5 text-xxs;
  }

  &.sm {
    @apply flex-space-1;
    @apply p-2 text-xs;
  }

  &.lg {
    @apply p-3.5 text-lg;
  }

  &.xl {
    @apply p-4 text-xl;
  }

  &.xxl {
    @apply p-5 text-2xl;
  }
  .btn-close {
    @apply text-inherit;
  }
}
@utility toast-* {
  color: --value(--color-bg- *);
  background-color: --value(--color- *);
}
@utility toast-info {
  color: --value(--color-bg-cyan);
  background-color: --value(--color-cyan);
}
@utility toast-success {
  color: --value(--color-bg-green);
  background-color: --value(--color-green);
}
@utility toast-error {
  color: --value(--color-bg-red);
  background-color: --value(--color-red);
}
@utility toast-danger {
  color: --value(--color-bg-red);
  background-color: --value(--color-red);
}
@utility toast-warning {
  color: --value(--color-bg-yellow);
  background-color: --value(--color-yellow);
}