fadgram-ui/components/progress.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 progress-* {
    .progress-bar {
        background-color: --value(--color-*);
    }
}

@layer components {
    .progress {
        @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 text-white text-xs;

        &.xs {
            @apply h-1;

            .progress-bar {
                @apply h-1 text-xxs;
            }
        }

        &.sm {
            @apply h-1.5;

            .progress-bar {
                @apply h-1.5 text-xs;
            }
        }

        &.lg {
            @apply h-4;

            .progress-bar {
                @apply h-4 text-sm;
            }
        }

        &.xl {
            @apply h-6;

            .progress-bar {
                @apply h-6 text-base;
            }
        }
    }

    .progress-bar {
        @apply flex items-center justify-center text-[0.5rem] font-medium text-primary-100 h-full rounded-full leading-none text-center bg-primary-600 dark:bg-primary-500;
    }
}