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;
18
@slidenav-color:                                fadeout(@global-color, 40%);
19

    
20
@slidenav-hover-color:                          fadeout(@global-color, 20%);
21

    
22
@slidenav-active-color:                         fadeout(@global-color, 10%);
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
    .hook-slidenav;
37
}
38

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

    
47
/* OnClick */
48
.uk-slidenav:active {
49
    color: @slidenav-active-color;
50
    .hook-slidenav-active;
51
}
52

    
53

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

    
57
/*
58
 * Previous
59
 */
60

    
61
.uk-slidenav-previous {
62
    .hook-slidenav-previous;
63
}
64

    
65
/*
66
 * Next
67
 */
68

    
69
.uk-slidenav-next {
70
    .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
    .hook-slidenav-container;
82
}
83

    
84

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

    
88
.hook-slidenav-misc;
89

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

    
98

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

    
102
@inverse-slidenav-color:                       fadeout(@inverse-global-color, 40%);
103
@inverse-slidenav-hover-color:                 fadeout(@inverse-global-color, 20%);
104
@inverse-slidenav-active-color:                fadeout(@inverse-global-color, 10%);
105

    
106
.hook-inverse() {
107

    
108
    .uk-slidenav {
109
        color: @inverse-slidenav-color;
110
        .hook-inverse-slidenav;
111
    }
112

    
113
    .uk-slidenav:hover,
114
    .uk-slidenav:focus {
115
        color: @inverse-slidenav-hover-color;
116
        .hook-inverse-slidenav-hover;
117
    }
118

    
119
    .uk-slidenav:active {
120
        color: @inverse-slidenav-active-color;
121
        .hook-inverse-slidenav-active;
122
    }
123

    
124
}
125

    
126
.hook-inverse-slidenav() {}
127
.hook-inverse-slidenav-hover() {}
128
.hook-inverse-slidenav-active() {}
(50-50/66)