franken-ui/dist/uikit/stylings/pagination.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-pagination': {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        marginLeft: '0',
        padding: '0',
        listStyle: 'none'
    },
    '.uk-pagination > *': {
        flex: 'none',
        paddingLeft: '0',
        position: 'relative'
    },
    '.uk-pagination > * > *': {
        display: 'flex',
        alignItems: 'center',
        columnGap: '0.25em',
        padding: '5px 10px',
        color: '#999',
        transition: 'color 0.1s ease-in-out'
    },
    '.uk-pagination > * > :hover': { color: '#666', textDecoration: 'none' },
    '.uk-pagination > .uk-active > *': { color: '#666' },
    '.uk-pagination > .uk-disabled > *': { color: '#999' }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-pagination': {},
        'hook-item': {},
        'hook-item-hover': {},
        'hook-item-active': {},
        'hook-item-disabled': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-pagination': {
            ..._hooks['hook-pagination']
        },
        '.uk-pagination > * > *': {
            ..._hooks['hook-item']
        },
        '.uk-pagination > * > :hover': {
            ..._hooks['hook-item-hover']
        },
        '.uk-pagination > .uk-active > *': {
            ..._hooks['hook-item-active']
        },
        '.uk-pagination > .uk-disabled > *': {
            ..._hooks['hook-item-disabled']
        },
        ..._hooks['hook-misc']
    };
};