Project

General

Profile

1
// Name:            Cover
2
// Description:     Utilities to let embedded content cover their container in a centered position
3
//
4
// Component:       `uk-cover`
5
//
6
// Sub-object:      `uk-cover-container`
7
//
8
// ========================================================================
9

    
10

    
11
/* ========================================================================
12
   Component: Cover
13
 ========================================================================== */
14

    
15
/*
16
 * Works with iframes and embedded content
17
 * 1. Reset responsiveness for embedded content
18
 * 2. Center object
19
 * Note: Percent values on the `top` property only works if this element
20
 *       is absolute positioned or if the container has a height
21
 */
22

    
23
.uk-cover {
24
    /* 1 */
25
    max-width: none;
26
    /* 2 */
27
    position: absolute;
28
    left: 50%;
29
    top: 50%;
30
    -webkit-transform: translate(-50%,-50%);
31
    transform: translate(-50%,-50%);
32
}
33

    
34

    
35
/* Container
36
 ========================================================================== */
37

    
38
/*
39
 * 1. Parent container which clips resized object
40
 * 2. Needed if the child is positioned absolute. See note above
41
 */
42

    
43
.uk-cover-container {
44
    /* 1 */
45
    overflow: hidden;
46
    /* 2 */
47
    position: relative;
48
}
49

    
50

    
51
// Hooks
52
// ========================================================================
53

    
54
.hook-cover-misc;
55

    
56
.hook-cover-misc() {}
(18-18/66)