Project

General

Profile

1
// Name:            Slidenav
2
// Description:     Component to create previous/next icon navigations
3
//
4
// Component:       `uk-slidenav`
5
//
6
// Sub-objects:     `uk-slidenav-container`
7
//
8
// Modifiers:       `uk-slidenav-previous`
9
//                  `uk-slidenav-next`
10
//
11
// ========================================================================
12

    
13

    
14
// Variables
15
// ========================================================================
16

    
17
$slidenav-padding:                               5px !default;
18
$slidenav-color:                                 fade-out($global-color, 0.4) !default;
19

    
20
$slidenav-hover-color:                           fade-out($global-color, 0.2) !default;
21

    
22
$slidenav-active-color:                          fade-out($global-color, 0.1) !default;
23

    
24

    
25
/* ========================================================================
26
   Component: Slidenav
27
 ========================================================================== */
28

    
29
/*
30
 * Adopts `uk-icon`
31
 */
32

    
33
.uk-slidenav {
34
    padding: $slidenav-padding;
35
    color: $slidenav-color;
36
    @if(mixin-exists(hook-slidenav)) {@include hook-slidenav();}
37
}
38

    
39
/* Hover + Focus */
40
.uk-slidenav:hover,
41
.uk-slidenav:focus {
42
    color: $slidenav-hover-color;
43
    outline: none;
44
    @if(mixin-exists(hook-slidenav-hover)) {@include hook-slidenav-hover();}
45
}
46

    
47
/* OnClick */
48
.uk-slidenav:active {
49
    color: $slidenav-active-color;
50
    @if(mixin-exists(hook-slidenav-active)) {@include hook-slidenav-active();}
51
}
52

    
53

    
54
/* Icon modifier
55
 ========================================================================== */
56

    
57
/*
58
 * Previous
59
 */
60

    
61
.uk-slidenav-previous {
62
    @if(mixin-exists(hook-slidenav-previous)) {@include hook-slidenav-previous();}
63
}
64

    
65
/*
66
 * Next
67
 */
68

    
69
.uk-slidenav-next {
70
    @if(mixin-exists(hook-slidenav-next)) {@include hook-slidenav-next();}
71
}
72

    
73

    
74
/* Container
75
 ========================================================================== */
76

    
77
.uk-slidenav-container {
78
    display: -ms-flexbox;
79
    display: -webkit-flex;
80
    display: flex;
81
    @if(mixin-exists(hook-slidenav-container)) {@include hook-slidenav-container();}
82
}
83

    
84

    
85
// Hooks
86
// ========================================================================
87

    
88
@if(mixin-exists(hook-slidenav-misc)) {@include hook-slidenav-misc();}
89

    
90
// @mixin hook-slidenav(){}
91
// @mixin hook-slidenav-hover(){}
92
// @mixin hook-slidenav-active(){}
93
// @mixin hook-slidenav-previous(){}
94
// @mixin hook-slidenav-next(){}
95
// @mixin hook-slidenav-container(){}
96
// @mixin hook-slidenav-misc(){}
97

    
98

    
99
// Inverse
100
// ========================================================================
101

    
102
$inverse-slidenav-color:                        fade-out($inverse-global-color, 0.4) !default;
103
$inverse-slidenav-hover-color:                  fade-out($inverse-global-color, 0.2) !default;
104
$inverse-slidenav-active-color:                 fade-out($inverse-global-color, 0.1) !default;
105

    
106

    
107

    
108
// @mixin hook-inverse-slidenav(){}
109
// @mixin hook-inverse-slidenav-hover(){}
110
// @mixin hook-inverse-slidenav-active(){}
(50-50/66)