franken-ui/dist/uikit/stylings/countdown.js

Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.

import merge from 'lodash/merge.js';
export const rules = {
    '.uk-countdown-number': {
        fontVariantNumeric: 'tabular-nums',
        fontSize: '2rem',
        lineHeight: '0.8'
    },
    '.uk-countdown-separator': { fontSize: '1rem', lineHeight: '1.6' }
};
export const media = {
    '@media (min-width: 640px)': {
        '.uk-countdown-number': { fontSize: '4rem' },
        '.uk-countdown-separator': { fontSize: '2rem' }
    },
    '@media (min-width: 768px)': {
        '.uk-countdown-number': { fontSize: '6rem' },
        '.uk-countdown-separator': { fontSize: '3rem' }
    }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-countdown': {},
        'hook-item': {},
        'hook-number': {},
        'hook-separator': {},
        'hook-label': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-countdown': {
            ..._hooks['hook-countdown']
        },
        '.uk-countdown-number, .uk-countdown-separator': {
            ..._hooks['hook-item']
        },
        '.uk-countdown-number': {
            ..._hooks['hook-number']
        },
        '.uk-countdown-separator': {
            ..._hooks['hook-separator']
        },
        '.uk-countdown-label': {
            ..._hooks['hook-label']
        },
        ..._hooks['hook-misc']
    };
};