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.
60 lines (59 loc) • 2.02 kB
JavaScript
import merge from 'lodash/merge.js';
export const rules = {
'[hidden], .uk-hidden': { display: 'none !important' },
'.uk-invisible': { visibility: 'hidden !important' },
'.uk-hidden-visually:not(:focus):not(:active):not(:focus-within), .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within)': {
position: 'absolute !important',
width: '1px !important',
height: '1px !important',
padding: '0 !important',
border: '0 !important',
margin: '0 !important',
overflow: 'hidden !important',
clipPath: 'inset(50%) !important',
whiteSpace: 'nowrap !important'
},
'.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within)': {
opacity: '0 !important'
},
'@media (hover: none)': {
'.uk-hidden-touch': { display: 'none !important' }
},
'@media (hover)': { '.uk-hidden-notouch': { display: 'none !important' } }
};
export const media = {
'@media (min-width: 640px)': {
'.uk-hidden\\@s': { display: 'none !important' }
},
'@media (min-width: 768px)': {
'.uk-hidden\\@m': { display: 'none !important' }
},
'@media (min-width: 1024px)': {
'.uk-hidden\\@l': { display: 'none !important' }
},
'@media (min-width: 1280px)': {
'.uk-hidden\\@xl': { display: 'none !important' }
},
'@media (max-width: 640px)': {
'.uk-visible\\@s': { display: 'none !important' }
},
'@media (max-width: 768px)': {
'.uk-visible\\@m': { display: 'none !important' }
},
'@media (max-width: 1024px)': {
'.uk-visible\\@l': { display: 'none !important' }
},
'@media (max-width: 1280px)': {
'.uk-visible\\@xl': { display: 'none !important' }
}
};
export const addHooks = (args) => {
const { hooks } = args;
const defaultHooks = {
'hook-misc': {}
};
const _hooks = merge(defaultHooks, hooks);
return {
..._hooks['hook-misc']
};
};