franken-ui/dist/uikit/stylings/breadcrumb.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-breadcrumb': { padding: '0', listStyle: 'none' },
    '.uk-breadcrumb > *': { display: 'contents' },
    '.uk-breadcrumb > * > *': { fontSize: '0.875rem', color: '#999' },
    '.uk-breadcrumb > * > :hover': { color: '#666', textDecoration: 'none' },
    '.uk-breadcrumb > :last-child > span, .uk-breadcrumb > :last-child > a:not([href])': {
        color: '#666'
    },
    '.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before': {
        content: "'/'",
        display: 'inline-block',
        margin: '0 20px 0 calc(20px - 4px)',
        fontSize: '0.875rem',
        color: '#999'
    }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-breadcrumb': {},
        'hook-breadcrumb-solid': {},
        'hook-item': {},
        'hook-item-hover': {},
        'hook-item-disabled': {},
        'hook-item-active': {},
        'hook-divider': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-breadcrumb': {
            ..._hooks['hook-breadcrumb']
        },
        '.uk-breadcrumb-solid': {
            ..._hooks['hook-breadcrumb-solid']
        },
        '.uk-breadcrumb > * > *': {
            ..._hooks['hook-item']
        },
        '.uk-breadcrumb > * > :hover': {
            ..._hooks['hook-item-hover']
        },
        '.uk-breadcrumb > :last-child > span, .uk-breadcrumb > :last-child > a:not([href])': {
            ..._hooks['hook-item-active']
        },
        '.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before': {
            ..._hooks['hook-divider']
        },
        '.uk-breadcrumb > .uk-disabled > *': {
            ..._hooks['hook-item-disabled']
        },
        ..._hooks['hook-misc']
    };
};