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.
51 lines (50 loc) • 1.42 kB
JavaScript
import merge from 'lodash/merge.js';
export const rules = {
'.uk-slidenav': {
padding: '5px 10px',
color: 'rgba(102, 102, 102, 0.5)',
transition: 'color 0.1s ease-in-out'
},
'.uk-slidenav:hover': { color: 'rgba(102, 102, 102, 0.9)' },
'.uk-slidenav:active': { color: 'rgba(102, 102, 102, 0.5)' },
'.uk-slidenav-large': { padding: '10px 10px' },
'.uk-slidenav-container': { display: 'flex' }
};
export const addHooks = (args) => {
const { hooks } = args;
const defaultHooks = {
'hook-slidenav': {},
'hook-hover': {},
'hook-active': {},
'hook-previous': {},
'hook-next': {},
'hook-large': {},
'hook-container': {},
'hook-misc': {}
};
const _hooks = merge(defaultHooks, hooks);
return {
'.uk-slidenav': {
..._hooks['hook-slidenav']
},
'.uk-slidenav:hover': {
..._hooks['hook-hover']
},
'.uk-slidenav:active': {
..._hooks['hook-active']
},
'.uk-slidenav-previous': {
..._hooks['hook-previous']
},
'.uk-slidenav-next': {
..._hooks['hook-next']
},
'.uk-slidenav-large': {
..._hooks['hook-large']
},
'.uk-slidenav-container': {
..._hooks['hook-container']
},
..._hooks['hook-misc']
};
};