franken-ui/dist/uikit/stylings/comment.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-comment-body': {
        display: 'flow-root',
        overflowWrap: 'break-word',
        wordWrap: 'break-word'
    },
    '.uk-comment-header': { display: 'flow-root', marginBottom: '20px' },
    '.uk-comment-body > :last-child, .uk-comment-header > :last-child': {
        marginBottom: '0'
    },
    '.uk-comment-title': { fontSize: '1.25rem', lineHeight: '1.4' },
    '.uk-comment-meta': {
        fontSize: '0.875rem',
        lineHeight: '1.4',
        color: '#999'
    },
    '.uk-comment-list': { padding: '0', listStyle: 'none' },
    '.uk-comment-list > :nth-child(n + 2)': { marginTop: '70px' },
    '.uk-comment-list .uk-comment ~ ul': {
        margin: '70px 0 0 0',
        paddingLeft: '30px',
        listStyle: 'none'
    },
    '.uk-comment-list .uk-comment ~ ul > :nth-child(n + 2)': {
        marginTop: '70px'
    },
    '.uk-comment-primary': { padding: '30px', backgroundColor: '#f8f8f8' }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-comment': {},
        'hook-body': {},
        'hook-header': {},
        'hook-title': {},
        'hook-meta': {},
        'hook-avatar': {},
        'hook-list-adjacent': {},
        'hook-list-sub': {},
        'hook-list-sub-adjacent': {},
        'hook-primary': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-comment': {
            ..._hooks['hook-comment']
        },
        '.uk-comment-body': {
            ..._hooks['hook-body']
        },
        '.uk-comment-header': {
            ..._hooks['hook-header']
        },
        '.uk-comment-title': {
            ..._hooks['hook-title']
        },
        '.uk-comment-meta': {
            ..._hooks['hook-meta']
        },
        '.uk-comment-avatar': {
            ..._hooks['hook-avatar']
        },
        '.uk-comment-list > :nth-child(n + 2)': {
            ..._hooks['hook-list-adjacent']
        },
        '.uk-comment-list .uk-comment ~ ul': {
            ..._hooks['hook-list-sub']
        },
        '.uk-comment-list .uk-comment ~ ul > :nth-child(n + 2)': {
            ..._hooks['hook-list-sub-adjacent']
        },
        '.uk-comment-primary': {
            ..._hooks['hook-primary']
        },
        ..._hooks['hook-misc']
    };
};
export const media = {
    '@media (min-width: 768px)': {
        '.uk-comment-list .uk-comment ~ ul': { paddingLeft: '100px' }
    }
};