franken-ui/dist/components/offcanvas.js

Franken UI is an HTML-first UI component library built on UIkit 3 and extended with LitElement, inspired by shadcn/ui.

export default {
    '.uk-offcanvas': {
        display: 'none', // Static - core visibility
        position: 'fixed', // Static - core positioning
        top: '0', // Static - core positioning
        bottom: '0', // Static - core positioning
        left: '0', // Static - core positioning
        zIndex: 'var(--uk-offcanvas-z-index, 1000)'
    },
    '.uk-offcanvas-flip .uk-offcanvas': {
        right: '0', // Static - core flip positioning
        left: 'auto' // Static - core flip positioning
    },
    '.uk-offcanvas-bar': {
        position: 'absolute', // Static - core positioning
        top: '0', // Static - core positioning
        bottom: '0', // Static - core positioning
        left: 'var(--uk-offcanvas-bar-width-i)', // Initial offscreen position
        boxSizing: 'border-box', // Static - core sizing
        width: 'var(--uk-offcanvas-bar-width)',
        overflowY: 'auto', // Static - core scrolling
        borderRightWidth: 'var(--uk-offcanvas-bar-border-width, 1px)',
        borderColor: 'var(--uk-offcanvas-bar-border-color, hsl(var(--border) / var(--border-alpha, 1)))',
        backgroundColor: 'var(--uk-offcanvas-bar-bg, hsl(var(--background)))'
    },
    '.uk-offcanvas-flip .uk-offcanvas-bar': {
        left: 'auto', // Static - core flip positioning
        right: 'var(--uk-offcanvas-bar-width-i)', // Initial offscreen position
        borderRight: 'none', // Static - core border
        borderLeftWidth: 'var(--uk-offcanvas-bar-border-width, 1px)',
        borderColor: 'var(--uk-offcanvas-bar-border-color, hsl(var(--border) / var(--border-alpha, 1)))'
    },
    '.uk-open > .uk-offcanvas-bar': {
        left: '0' // Static - core positioning when open
    },
    '.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar': {
        left: 'auto', // Static - core flip positioning
        right: '0' // Static - core flip positioning
    },
    '.uk-offcanvas-bar-animation': {
        transition: 'var(--uk-offcanvas-bar-transition, left 0.3s ease-out)'
    },
    '.uk-offcanvas-flip .uk-offcanvas-bar-animation': {
        transitionProperty: 'right' // Static - core animation property
    },
    '.uk-offcanvas-reveal': {
        position: 'absolute', // Static - core positioning
        top: '0', // Static - core positioning
        bottom: '0', // Static - core positioning
        left: '0', // Static - core positioning
        width: '0', // Static - initial reveal state
        overflow: 'hidden', // Static - content clipping
        transition: 'var(--uk-offcanvas-reveal-transition, width 0.3s ease-out)'
    },
    '.uk-offcanvas-reveal .uk-offcanvas-bar': {
        left: 'var(--uk-offcanvas-reveal-bar-left, 0)' // Bar position in reveal effect
    },
    '.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar': {
        left: 'var(--uk-offcanvas-flip-reveal-bar-left, auto)', // Flip modifier, reset left
        right: 'var(--uk-offcanvas-flip-reveal-bar-right, 0)' // Flip modifier, bar position in reveal effect
    },
    '.uk-open > .uk-offcanvas-reveal': {
        width: 'var(--uk-offcanvas-bar-width)' // Reveal to full bar width when opened
    },
    '.uk-offcanvas-flip .uk-offcanvas-reveal': {
        right: 'var(--uk-offcanvas-flip-reveal-right, 0)', // Flip modifier, right position for reveal
        left: 'var(--uk-offcanvas-flip-reveal-left, auto)' // Flip modifier, reset left for reveal
    },
    '.uk-offcanvas-overlay': {
        width: '100vw', // Static - full viewport width
        touchAction: 'none' // Static - disable touch events
    },
    '.uk-offcanvas-overlay::before': {
        content: '""', // Static - pseudo-element content
        position: 'absolute', // Static - overlay positioning
        top: '0', // Static - overlay positioning
        bottom: '0', // Static - overlay positioning
        left: '0', // Static - overlay positioning
        right: '0', // Static - overlay positioning
        backgroundColor: 'var(--uk-offcanvas-overlay-bg, rgba(0, 0, 0, 0.8))',
        opacity: '0', // Static - initial state
        transition: 'var(--uk-offcanvas-overlay-transition, opacity 0.15s linear)',
        WebkitBackdropFilter: 'blur(var(--uk-offcanvas-overlay-blur))',
        backdropFilter: 'blur(var(--uk-offcanvas-overlay-blur))'
    },
    '.uk-offcanvas-overlay.uk-open::before': {
        opacity: 'var(--uk-offcanvas-overlay-opacity, 1)'
    },
    '.uk-offcanvas-page, .uk-offcanvas-container': {
        overflowX: 'hidden clip' // Static - prevent horizontal scroll
    },
    '.uk-offcanvas-container': {
        position: 'relative', // Static - container positioning
        left: '0', // Static - initial position
        transition: 'var(--uk-offcanvas-container-transition, left 0.3s ease-out)',
        boxSizing: 'border-box', // Static - core sizing
        width: '100%' // Static - container width
    },
    ':not(.uk-offcanvas-flip).uk-offcanvas-container-animation': {
        left: 'var(--uk-offcanvas-container-animation-left, var(--uk-offcanvas-bar-width))' // Container animation left offset
    },
    '.uk-offcanvas-flip.uk-offcanvas-container-animation': {
        left: 'var(--uk-offcanvas-container-flip-animation-left, var(--uk-offcanvas-bar-width-i))' // Flip modifier, container animation left offset
    }
};