franken-ui
Version:
Franken UI is an HTML-first UI component library built on UIkit 3 and extended with LitElement, inspired by shadcn/ui.
43 lines (42 loc) • 2.44 kB
JavaScript
export default {
'.uk-thumbnav': {
display: 'flex', // obvious value, layout property
flexWrap: 'wrap', // obvious value, layout property
margin: '0', // reset, obvious value
padding: '0', // reset, obvious value
listStyle: 'none', // reset, obvious value for lists
marginLeft: 'var(--uk-thumbnav-margin-horizontal, -1rem)' // Customizable horizontal margin for spacing
},
'.uk-thumbnav > *': {
paddingLeft: 'var(--uk-thumbnav-item-padding-horizontal, 1rem)' // Customizable horizontal padding for item spacing, consistent with container margin
},
'.uk-thumbnav > * > *': {
display: 'inline-block', // obvious value, layout property
position: 'relative' // obvious value, for positioning pseudo-element
},
'.uk-thumbnav > * > *::after': {
content: "''", // required for pseudo-element, obvious value
position: 'absolute', // required for overlay, obvious value
top: '0', // position fill, obvious value
bottom: '0', // position fill, obvious value
left: '0', // position fill, obvious value
right: '0', // position fill, obvious value
backgroundImage: 'var(--uk-thumbnav-overlay-background, linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)))', // Customizable overlay gradient
transition: 'var(--uk-thumbnav-overlay-transition, opacity 0.1s ease-in-out)' // Customizable overlay transition
},
'.uk-thumbnav > * > :hover::after': {
opacity: 'var(--uk-thumbnav-overlay-hover-opacity, 0)' // Customizable overlay opacity on hover
},
'.uk-thumbnav > .uk-active > *::after': {
opacity: 'var(--uk-thumbnav-overlay-active-opacity, 0)' // Customizable overlay opacity on active state
},
'.uk-thumbnav-vertical': {
flexDirection: 'column', // obvious value, layout change for vertical
marginLeft: 'var(--uk-thumbnav-vertical-margin-horizontal, 0)', // Customizable horizontal margin reset for vertical layout
marginTop: 'var(--uk-thumbnav-margin-vertical, -1rem)' // Customizable vertical margin for vertical spacing
},
'.uk-thumbnav-vertical > *': {
paddingLeft: '0', // reset horizontal padding for vertical layout, obvious value
paddingTop: 'var(--uk-thumbnav-item-padding-vertical, 1rem)' // Customizable vertical padding for item spacing in vertical layout
}
};