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;
  @apply w-xs;
  @apply max-h-screen overflow-y-auto;
}

@utility toast-container-top-start {
  @apply end-auto top-4 start-4;
}

@utility toast-container-top-center {
  @apply end-auto top-4 start-1/2 -translate-x-1/2;
}

@utility toast-container-top-end {
  @apply start-auto top-4 end-4;
}

@utility toast-container-center-start {
  @apply top-1/2 -translate-y-1/2 start-4 end-auto;
}

@utility toast-container-center {
  @apply top-1/2 start-1/2 -translate-y-1/2 -translate-x-1/2;
}

@utility toast-container-center-end {
  @apply top-1/2 -translate-y-1/2 start-auto end-4;
}

@utility toast-container-bottom-start {
  @apply top-auto end-auto bottom-4 start-4;
}

@utility toast-container-bottom-center {
  @apply top-auto end-auto bottom-4 start-1/2 -translate-x-1/2;
}

@utility toast-container-bottom-end {
  @apply top-auto bottom-4 end-4;
}

@utility toast {
  @apply mb-3 text-sm rounded-lg overflow-hidden;
  @apply text-cyan-900 bg-cyan-200;
  @apply shadow-sm;
  @apply block p-0;
  .btn-close-toast {
    @apply text-inherit;
  }
}

@utility toast-xxs {
  &not(.has-title) {
    @apply gap-1;
  }
}

@utility toast-xs {
  &not(.has-title) {
    @apply gap-1.5;
  }
}

@utility toast-sm {
  &not(.has-title) {
    @apply gap-2;
  }
}

@utility toast-lg {
  @apply text-lg;
}

@utility toast-xl {
  @apply text-xl;
}

@utility toast-xxl {
  @apply text-2xl;
}

@utility toast-* {
  color: --value(--color- * -900);
  background-color: --value(--color- * -200);
  .toast-progress-bar {
    background-color: --value(--color- * -800);
  }
}

@utility toast-header {
  @apply flex gap-2;
  @apply p-1.5;
  @apply border-b border-b-black/10;
  .btn-close-toast {
    @apply text-inherit;
  }
}
@utility toast-title {
  @apply flex-1;
  @apply font-medium;
}

@utility toast-body {
  @apply p-2.5;
}

@utility toast-progress {
  @apply relative;
  @apply w-full h-1;
  @apply bg-transparent;
  @apply rounded-lg;
}
@utility toast-progress-bar {
  @apply h-full rounded-lg;
}