aboutsummaryrefslogtreecommitdiffstats
path: root/scss/uikit/components/slideshow.scss
blob: fc355d419d0f00670450b6860af31cb7df03a819 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// Name:            Slideshow
// Description:     Component to create slideshows
//
// Component:       `uk-slideshow`
//
// Sub-objects:     `uk-slideshow-items`
//
// States:          `uk-active`
//
// ========================================================================


/* ========================================================================
   Component: Slideshow
 ========================================================================== */

/*
 * 1. Prevent tab highlighting on iOS.
 */

.uk-slideshow {
    /* 1 */
    -webkit-tap-highlight-color: transparent;
    @if(mixin-exists(hook-slideshow)) {@include hook-slideshow();}
}


/* Items
 ========================================================================== */

/*
 * 1. Create position and stacking context
 * 2. Reset list
 * 3. Clip child elements
 * 4. Prevent displaying the callout information on iOS.
 */

.uk-slideshow-items {
    /* 1 */
    position: relative;
    z-index: 0;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    overflow: hidden;
    /* 4 */
    -webkit-touch-callout: none;
}


/* Item
 ========================================================================== */

/*
 * 1. Position items above each other
 * 2. Take the full width
 * 3. Clip child elements, e.g. for `uk-cover`
 * 4. Optimize animation
 * 5. Disable horizontal panning gestures in IE11 and Edge
 */

.uk-slideshow-items > * {
    /* 1 */
    position: absolute;
    top: 0;
    left: 0;
    /* 2 */
    right: 0;
    bottom: 0;
    /* 3 */
    overflow: hidden;
    /* 4 */
    will-change: transform, opacity;
    /* 5 */
    touch-action: pan-y;
}

/*
 * Hide not active items
 */

.uk-slideshow-items > :not(.uk-active) { display: none; }


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

@if(mixin-exists(hook-slideshow-misc)) {@include hook-slideshow-misc();}

// @mixin hook-slideshow(){}
// @mixin hook-slideshow-misc(){}