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.69 kB
JavaScript
import merge from 'lodash/merge.js';
export const rules = {
'.uk-thumbnav': {
display: 'flex',
flexWrap: 'wrap',
margin: '0',
padding: '0',
listStyle: 'none',
marginLeft: '-15px'
},
'.uk-thumbnav > *': { paddingLeft: '15px' },
'.uk-thumbnav > * > *': { display: 'inline-block', position: 'relative' },
'.uk-thumbnav > * > *::after': {
content: "''",
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0',
backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4))',
transition: 'opacity 0.1s ease-in-out'
},
'.uk-thumbnav > * > :hover::after': { opacity: '0' },
'.uk-thumbnav > .uk-active > *::after': { opacity: '0' },
'.uk-thumbnav-vertical': {
flexDirection: 'column',
marginLeft: '0',
marginTop: '-15px'
},
'.uk-thumbnav-vertical > *': { paddingLeft: '0', paddingTop: '15px' }
};
export const addHooks = (args) => {
const { hooks } = args;
const defaultHooks = {
'hook-thumbnav': {},
'hook-item': {},
'hook-item-hover': {},
'hook-item-active': {},
'hook-misc': {}
};
const _hooks = merge(defaultHooks, hooks);
return {
'.uk-thumbnav': {
..._hooks['hook-thumbnav']
},
'.uk-thumbnav > * > *': {
..._hooks['hook-item']
},
'.uk-thumbnav > * > :hover': {
..._hooks['hook-item-hover']
},
'.uk-thumbnav > .uk-active > *': {
..._hooks['hook-item-active']
},
..._hooks['hook-misc']
};
};