fadgram-ui/css/card.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 card {
  @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300;
  @apply rounded-lg border border-gray-200 dark:border-gray-700;
  @apply shadow;
  @apply flex flex-col;
  @apply overflow-hidden;

  &.card-body {
    @apply block flex-none;
    padding: var(--card-body-padding, --spacing(3.5));
  }
}

@utility card-header {
  @apply flex-none;
  @apply px-3 py-1;
  @apply bg-gray-50 dark:bg-gray-800;
  @apply text-gray-600 dark:text-white;
  @apply rounded-t-lg border-b border-gray-200 dark:border-gray-700;
}

@utility card-title {
  @apply mb-0;
}

@utility card-body {
  @apply flex-1;
  @apply text-gray-700 dark:text-gray-300;
  padding: var(--card-body-padding, --spacing(3.5));
}

@utility card-footer {
  @apply flex-none;
  @apply px-3 py-1;
  @apply bg-gray-50 dark:bg-gray-800;
  @apply text-gray-600 dark:text-white;
  @apply rounded-b-lg border-t border-gray-200 dark:border-gray-700;
}

@utility card-* {
  background-color: --value(--color- *);
  color: --value(--color-bg- *);

  .card-header,
  .card-footer {
    background-color: --value(--color- * -700);
    color: --value(--color-bg- *);
    border-color: --value(--color- * -800);
  }

  .card-body {
    color: --value(--color-bg- *);
  }
}

@utility bg-card {
  background-color: --value(--color-white);

  @variant dark {
    background-color: --value(--color-gray-700);
  }
}

@utility border-card {
  border-width: --spacing(1);
  border-style: solid;
  border-color: --value(--color-gray-200);

  @variant dark {
    border-color: --value(--color-gray-700);
  }
}