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.
36 lines (35 loc) • 1.1 kB
JavaScript
import merge from 'lodash/merge.js';
export const rules = {
'.uk-spinner > *': { animation: 'uk-spinner-rotate 1.4s linear infinite' },
'@keyframes uk-spinner-rotate': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(270deg)' }
},
'.uk-spinner > * > *': {
strokeDasharray: '88px',
strokeDashoffset: '0',
transformOrigin: 'center',
animation: 'uk-spinner-dash 1.4s ease-in-out infinite',
strokeWidth: '1',
strokeLinecap: 'round'
},
'@keyframes uk-spinner-dash': {
'0%': { strokeDashoffset: '88px' },
'50%': { strokeDashoffset: '22px', transform: 'rotate(135deg)' },
'100%': { strokeDashoffset: '88px', transform: 'rotate(450deg)' }
}
};
export const addHooks = (args) => {
const { hooks } = args;
const defaultHooks = {
'hook-spinner': {},
'hook-misc': {}
};
const _hooks = merge(defaultHooks, hooks);
return {
'.uk-spinner': {
..._hooks['hook-spinner']
},
..._hooks['hook-misc']
};
};