franken-ui
Version:
Franken UI is an HTML-first UI component library built on UIkit 3 and extended with LitElement, inspired by shadcn/ui.
56 lines (55 loc) • 2.58 kB
JavaScript
export default {
// Base dotnav styles
'.uk-dotnav': {
display: 'flex', // Removed variable - fundamental layout
flexWrap: 'wrap', // Removed variable - fundamental layout
marginLeft: 'var(--uk-dotnav-margin-left, -0.75rem)'
},
// Dotnav items
'.uk-dotnav > *': {
flex: 'none', // Removed variable - fundamental layout
paddingLeft: 'var(--uk-dotnav-item-padding, 0.75rem)'
},
// Dotnav dots
'.uk-dotnav > * > *': {
// Layout
display: 'block', // Removed variable - fundamental layout
boxSizing: 'border-box', // Removed variable - fundamental box model
width: 'var(--uk-dotnav-dot-size, 10px)',
height: 'var(--uk-dotnav-dot-size, 10px)', // Using same variable for consistent sizing
// Visual
border: 'var(--uk-dotnav-dot-border, 1px solid hsl(var(--primary)))', // Combined border properties
borderRadius: '50%', // Removed variable - fundamental shape for dots
backgroundColor: 'var(--uk-dotnav-dot-bg, transparent)',
// Accessibility
textIndent: '100%', // Removed variable - fundamental accessibility
overflow: 'hidden', // Removed variable - fundamental accessibility
whiteSpace: 'nowrap', // Removed variable - fundamental text behavior
// Transitions
transition: '0.2s ease-in-out', // Removed variable - fundamental transition
transitionProperty: 'background-color, border-color' // Removed variable - fundamental properties
},
// States
'.uk-dotnav > * > :hover': {
borderColor: 'var(--uk-dotnav-dot-hover-border, transparent)',
backgroundColor: 'var(--uk-dotnav-dot-hover-bg, hsl(var(--primary)))'
},
'.uk-dotnav > * > :active': {
borderColor: 'var(--uk-dotnav-dot-active-border, transparent)',
backgroundColor: 'var(--uk-dotnav-dot-active-bg, hsl(var(--primary)))'
},
'.uk-dotnav > .uk-active > *': {
borderColor: 'var(--uk-dotnav-dot-current-border, transparent)',
backgroundColor: 'var(--uk-dotnav-dot-current-bg, hsl(var(--primary)))'
},
// Vertical variant
'.uk-dotnav-vertical': {
flexDirection: 'column', // Removed variable - fundamental layout
marginLeft: '0', // Removed variable - fundamental reset
marginTop: 'var(--uk-dotnav-vertical-margin-top, -0.75rem)'
},
'.uk-dotnav-vertical > *': {
paddingLeft: '0', // Removed variable - fundamental reset
paddingTop: 'var(--uk-dotnav-vertical-item-padding-top, 0.75rem)'
}
};