WebStackPage.github.io/assets/js/uikit/less/overlay.less

// Name:            Overlay
// Description:     Defines styles for image overlays
//
// Component:       `uk-overlay`
//
// Sub-objects:     `uk-overlay-area`
//                  `uk-overlay-area-content`
//                  `uk-overlay-caption`
//                  `uk-overlay-toggle`
//
// States:          `uk-hover`
//
// Markup:
//
// <!-- uk-overlay -->
// <a class="uk-overlay" href="">
//     <img src="" alt="">
//     <div class="uk-overlay-area"></div>
// </a>
//
// ========================================================================


// Variables
// ========================================================================

@overlay-area-background:                       rgba(0,0,0,0.3);

@overlay-area-icon:                             "\f002";
@overlay-area-icon-size:                        50px;
@overlay-area-icon-color:                       #fff;

@overlay-area-content-font-size:                1rem;
@overlay-area-content-padding-horizontal:       15px;
@overlay-area-content-color:                    #fff;
@overlay-area-content-link-color:               inherit;

@overlay-caption-background:                    rgba(0,0,0,0.5);
@overlay-caption-padding:                       15px;
@overlay-caption-color:                         #fff;


/* ========================================================================
   Component: Overlay
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Set max-width for responsive images to prevent `inline-block` consequences
 * 4. Remove the gap between the container and its child element
 * 5. Fixed wrong scaling calculation for images in Chrome
 */

.uk-overlay {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    vertical-align: middle;
    /* 5 */
    overflow: hidden;
}

/*
 * Remove margin from content
 */

.uk-overlay > :first-child { margin-bottom: 0; }


/* Sub-object `uk-overlay-area`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-area {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    background: @overlay-area-background;
    /* 3 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -webkit-transform: translate3d(0,0,0);
    .hook-overlay-area;
}

/*
 * Hover
 * 1. `uk-hover` to support touch devices
 * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-area,
.uk-overlay.uk-hover .uk-overlay-area, // 1
.uk-overlay-toggle:hover .uk-overlay-area, // 2
.uk-overlay-toggle.uk-hover .uk-overlay-area { opacity: 1; }

/*
 * Icon
 */

.uk-overlay-area:empty:before {
    content: @overlay-area-icon;
    position: absolute;
    top: 50%;
    left: 50%;
    width: @overlay-area-icon-size;
    height: @overlay-area-icon-size;
    margin-top: -(@overlay-area-icon-size / 2);
    margin-left: -(@overlay-area-icon-size / 2);
    font-size: @overlay-area-icon-size;
    line-height: 1;
    font-family: FontAwesome;
    text-align: center;
    color: @overlay-area-icon-color;
    .hook-overlay-area-icon;
}


/* Sub-object `uk-overlay-area-content`
 ========================================================================== */

/*
 * Remove whitespace between child elements when using `inline-block`
 * Needed for Firefox
 */

.uk-overlay-area:not(:empty) { font-size: 0.001px; }

/*
 * 1. Needed for vertical alignment
 */

.uk-overlay-area:not(:empty):before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/*
 * 1. Set vertical alignment
 * 2. Reset whitespace hack
 * 3. Set horizontal alignment
 * 4. Set style
 */

.uk-overlay-area-content {
    /* 1 */
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    vertical-align: middle;
    /* 2 */
    font-size: @overlay-area-content-font-size;
    /* 3 */
    text-align: center;
    /* 4 */
    padding: 0 @overlay-area-content-padding-horizontal;
    color: @overlay-area-content-color;
    .hook-overlay-area-content;
}

/*
 * Remove margin from the last-child
 */

.uk-overlay-area-content > :last-child { margin-bottom: 0; }

/*
 * Links in overlay area
 */

.uk-overlay-area-content a:not([class]),
.uk-overlay-area-content a:not([class]):hover { color: @overlay-area-content-link-color; }


/* Sub-object `uk-overlay-caption`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-caption {
    /* 1 */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    padding: @overlay-caption-padding;
    background: @overlay-caption-background;
    color: @overlay-caption-color;
    /* 3 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -webkit-transform: translate3d(0,0,0);
    .hook-overlay-caption;
}

/*
 * Hover
 * 1. `uk-hover` to support touch devices
 * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-caption,
.uk-overlay.uk-hover .uk-overlay-caption, // 1
.uk-overlay-toggle:hover .uk-overlay-caption, // 2
.uk-overlay-toggle.uk-hover .uk-overlay-caption { opacity: 1; }


// Hooks
// ========================================================================

.hook-overlay-misc;

.hook-overlay-area() {}
.hook-overlay-area-icon() {}
.hook-overlay-area-content() {}
.hook-overlay-caption() {}
.hook-overlay-misc() {}