franken-ui
Version:
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.
58 lines (57 loc) • 1.59 kB
JavaScript
import merge from 'lodash/merge.js';
export const rules = {
'.uk-iconnav': {
display: 'flex',
flexWrap: 'wrap',
margin: '0',
padding: '0',
listStyle: 'none',
marginLeft: '-10px'
},
'.uk-iconnav > *': { paddingLeft: '10px' },
'.uk-iconnav > * > a': {
display: 'flex',
alignItems: 'center',
columnGap: '0.25em',
lineHeight: '0',
color: '#999',
textDecoration: 'none',
fontSize: '0.875rem',
transition: '0.1s ease-in-out',
transitionProperty: 'color, background-color'
},
'.uk-iconnav > * > a:hover': { color: '#666' },
'.uk-iconnav > .uk-active > a': { color: '#666' },
'.uk-iconnav-vertical': {
flexDirection: 'column',
marginLeft: '0',
marginTop: '-10px'
},
'.uk-iconnav-vertical > *': { paddingLeft: '0', paddingTop: '10px' }
};
export const addHooks = (args) => {
const { hooks } = args;
const defaultHooks = {
'hook-iconnav': {},
'hook-item': {},
'hook-item-hover': {},
'hook-item-active': {},
'hook-misc': {}
};
const _hooks = merge(defaultHooks, hooks);
return {
'.uk-iconnav': {
..._hooks['hook-iconnav']
},
'.uk-iconnav > * > a': {
..._hooks['hook-item']
},
'.uk-iconnav > * > a:hover': {
..._hooks['hook-item-hover']
},
'.uk-iconnav > .uk-active > a': {
..._hooks['hook-item-active']
},
..._hooks['hook-misc']
};
};