fadgram-ui/components/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-* {
    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);
    }
}

@layer components {
    .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-sm;
        @apply flex flex-col;
        @apply overflow-hidden;

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

    .card-header {
        @apply flex-none;
        @apply px-3 py-1;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply text-gray-600 dark:text-white;
        @apply border-b border-gray-200 dark:border-gray-700;
    }

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

    .card-body {
        @apply grow;
        @apply text-gray-700 dark:text-gray-300;
        padding: var(--card-body-padding);
    }

    .card-footer {
        @apply flex-none;
        @apply px-3 py-1;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply text-gray-600 dark:text-white;
        @apply border-t border-gray-200 dark:border-gray-700;
    }
}