Your IP : 216.73.216.170
// 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`
//
// ========================================================================
// 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
*/
.uk-overlay {
/* 1 */
display: inline-block;
/* 2 */
position: relative;
/* 3 */
max-width: 100%;
/* 4 */
vertical-align: middle;
}
/*
* Fixed wrong scaling calculation for images in Chrome
*/
.uk-overlay > img:first-child { display: block; }
/* 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. Use optional `uk-overlay-toggle` to trigger the overlay earlier
*/
.uk-overlay:hover .uk-overlay-area,
.uk-overlay-toggle:hover .uk-overlay-area { opacity: 1; } // 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. Use optional `uk-overlay-toggle` to trigger the overlay earlier
*/
.uk-overlay:hover .uk-overlay-caption,
.uk-overlay-toggle:hover .uk-overlay-caption { opacity: 1; } // 1
// Hooks
// ========================================================================
.hook-overlay-misc;
.hook-overlay-area() {}
.hook-overlay-area-icon() {}
.hook-overlay-area-content() {}
.hook-overlay-caption() {}
.hook-overlay-misc() {}