// Name: Lightbox // Description: Component to create an lightbox image gallery // // Component: `uk-lightbox` // // Sub-objects: `uk-lightbox-page` // `uk-lightbox-items` // `uk-lightbox-toolbar` // `uk-lightbox-toolbar-icon` // `uk-lightbox-button` // `uk-lightbox-caption` // `uk-lightbox-iframe` // // States: `uk-open` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: Lightbox ========================================================================== */ /* * 1. Hide by default * 2. Set position * 3. Allow scrolling for the modal dialog * 4. Horizontal padding * 5. Mask the background page * 6. Fade-in transition * 7. Prevent cancellation of pointer events while dragging */ .uk-lightbox { /* 1 */ display: none; /* 2 */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: $lightbox-z-index; /* 5 */ background: $lightbox-background; /* 6 */ opacity: 0; transition: opacity 0.15s linear; /* 7 */ touch-action: pinch-zoom; @if(mixin-exists(hook-lightbox)) {@include hook-lightbox();} } /* * Open * 1. Center child * 2. Fade-in */ .uk-lightbox.uk-open { display: block; /* 2 */ opacity: 1; } /* * Focus */ .uk-lightbox :focus-visible { outline-color: $lightbox-focus-outline; } /* Page ========================================================================== */ /* * Prevent scrollbars */ .uk-lightbox-page { overflow: hidden; } /* Item ========================================================================== */ /* * 1. Center child within the viewport * 2. Not visible by default * 3. Color needed for spinner icon * 4. Optimize animation * 5. Responsiveness * Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera */ .uk-lightbox-items > * { /* 1 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* 2 */ display: none; justify-content: center; align-items: center; /* 3 */ color: $lightbox-item-color; /* 4 */ will-change: transform, opacity; @if(mixin-exists(hook-lightbox-item)) {@include hook-lightbox-item();} } /* 5 */ .uk-lightbox-items > * > * { max-width: $lightbox-item-max-width; max-height: $lightbox-item-max-height; } .uk-lightbox-items > * > :not(iframe) { width: auto; height: auto; } .uk-lightbox-items > .uk-active { display: flex; } /* Toolbar ========================================================================== */ .uk-lightbox-toolbar { padding: $lightbox-toolbar-padding-vertical $lightbox-toolbar-padding-horizontal; background: $lightbox-toolbar-background; color: $lightbox-toolbar-color; @if(mixin-exists(hook-lightbox-toolbar)) {@include hook-lightbox-toolbar();} } .uk-lightbox-toolbar > * { color: $lightbox-toolbar-color; } /* Toolbar Icon (Close) ========================================================================== */ .uk-lightbox-toolbar-icon { padding: $lightbox-toolbar-icon-padding; color: $lightbox-toolbar-icon-color; @if(mixin-exists(hook-lightbox-toolbar-icon)) {@include hook-lightbox-toolbar-icon();} } /* * Hover */ .uk-lightbox-toolbar-icon:hover { color: $lightbox-toolbar-icon-hover-color; @if(mixin-exists(hook-lightbox-toolbar-icon-hover)) {@include hook-lightbox-toolbar-icon-hover();} } /* Button (Slidenav) ========================================================================== */ /* * 1. Center icon vertically and horizontally */ .uk-lightbox-button { box-sizing: border-box; width: $lightbox-button-size; height: $lightbox-button-size; background: $lightbox-button-background; color: $lightbox-button-color; /* 1 */ display: inline-flex; justify-content: center; align-items: center; @if(mixin-exists(hook-lightbox-button)) {@include hook-lightbox-button();} } /* Hover */ .uk-lightbox-button:hover { color: $lightbox-button-hover-color; @if(mixin-exists(hook-lightbox-button-hover)) {@include hook-lightbox-button-hover();} } /* OnClick */ .uk-lightbox-button:active { @if(mixin-exists(hook-lightbox-button-active)) {@include hook-lightbox-button-active();} } /* Caption ========================================================================== */ .uk-lightbox-caption:empty { display: none; } /* Iframe ========================================================================== */ .uk-lightbox-iframe { width: 80%; height: 80%; } // Hooks // ======================================================================== @if(mixin-exists(hook-lightbox-misc)) {@include hook-lightbox-misc();} // @mixin hook-lightbox(){} // @mixin hook-lightbox-item(){} // @mixin hook-lightbox-toolbar(){} // @mixin hook-lightbox-toolbar-icon(){} // @mixin hook-lightbox-toolbar-icon-hover(){} // @mixin hook-lightbox-button(){} // @mixin hook-lightbox-button-hover(){} // @mixin hook-lightbox-button-active(){} // @mixin hook-lightbox-misc(){}