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.
75 lines (74 loc) • 2.12 kB
JavaScript
import merge from 'lodash/merge.js';
export const rules = {
'.uk-dotnav': {
display: 'flex',
flexWrap: 'wrap',
margin: '0',
padding: '0',
listStyle: 'none',
marginLeft: '-12px'
},
'.uk-dotnav > *': { flex: 'none', paddingLeft: '12px' },
'.uk-dotnav > * > *': {
display: 'block',
boxSizing: 'border-box',
width: '10px',
height: '10px',
borderRadius: '50%',
background: 'transparent',
textIndent: '100%',
overflow: 'hidden',
whiteSpace: 'nowrap',
border: '1px solid rgba(102, 102, 102, 0.4)',
transition: '0.2s ease-in-out',
transitionProperty: 'background-color, border-color'
},
'.uk-dotnav > * > :hover': {
backgroundColor: 'rgba(102, 102, 102, 0.6)',
borderColor: 'transparent'
},
'.uk-dotnav > * > :active': {
backgroundColor: 'rgba(102, 102, 102, 0.2)',
borderColor: 'transparent'
},
'.uk-dotnav > .uk-active > *': {
backgroundColor: 'rgba(102, 102, 102, 0.6)',
borderColor: 'transparent'
},
'.uk-dotnav-vertical': {
flexDirection: 'column',
marginLeft: '0',
marginTop: '-12px'
},
'.uk-dotnav-vertical > *': { paddingLeft: '0', paddingTop: '12px' }
};
export const addHooks = (args) => {
const { hooks } = args;
const defaultHooks = {
'hook-dotnav': {},
'hook-item': {},
'hook-item-hover': {},
'hook-item-onclick': {},
'hook-item-active': {},
'hook-misc': {}
};
const _hooks = merge(defaultHooks, hooks);
return {
'.uk-dotnav': {
..._hooks['hook-dotnav']
},
'.uk-dotnav > * > *': {
..._hooks['hook-item']
},
'.uk-dotnav > * > :hover': {
..._hooks['hook-item-hover']
},
'.uk-dotnav > * > :active': {
..._hooks['hook-item-onclick']
},
'.uk-dotnav > .uk-active > *': {
..._hooks['hook-item-active']
},
..._hooks['hook-misc']
};
};