aboutsummaryrefslogtreecommitdiffstats
path: root/scss/uikit/components/lightbox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss/uikit/components/lightbox.scss')
-rw-r--r--scss/uikit/components/lightbox.scss232
1 files changed, 232 insertions, 0 deletions
diff --git a/scss/uikit/components/lightbox.scss b/scss/uikit/components/lightbox.scss
new file mode 100644
index 00000000..4f9c698d
--- /dev/null
+++ b/scss/uikit/components/lightbox.scss
@@ -0,0 +1,232 @@
+// 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
+// ========================================================================
+
+$lightbox-z-index: $global-z-index + 10 !default;
+$lightbox-background: #000 !default;
+
+$lightbox-item-color: rgba(255,255,255,0.7) !default;
+
+$lightbox-toolbar-padding-vertical: 10px !default;
+$lightbox-toolbar-padding-horizontal: 10px !default;
+$lightbox-toolbar-background: rgba(0,0,0,0.3) !default;
+$lightbox-toolbar-color: rgba(255,255,255,0.7) !default;
+
+$lightbox-toolbar-icon-padding: 5px !default;
+$lightbox-toolbar-icon-color: rgba(255,255,255,0.7) !default;
+
+$lightbox-toolbar-icon-hover-color: #fff !default;
+
+$lightbox-button-size: 50px !default;
+$lightbox-button-background: $lightbox-toolbar-background !default;
+$lightbox-button-color: rgba(255,255,255,0.7) !default;
+
+$lightbox-button-hover-color: #fff !default;
+
+
+/* ========================================================================
+ 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
+ */
+
+.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;
+ @if(mixin-exists(hook-lightbox)) {@include hook-lightbox();}
+}
+
+/*
+ * Open
+ * 1. Center child
+ * 2. Fade-in
+ */
+
+.uk-lightbox.uk-open {
+ display: block;
+ /* 2 */
+ opacity: 1;
+}
+
+
+/* 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
+ * Using `vh` and `vw` to make responsive image work in IE11
+ */
+
+.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: 100vw;
+ max-height: 100vh;
+}
+
+.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();}
+}
+
+
+/* Caption
+ ========================================================================== */
+
+.uk-lightbox-caption {}
+
+
+/* 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-misc(){}