Project

General

Profile

1
// Name:            Iconnav
2
// Description:     Component to create icon navigations
3
//
4
// Component:       `uk-iconnav`
5
//
6
// Modifier:        `uk-iconnav-vertical`
7
//
8
// States:          `uk-active`
9
//
10
// ========================================================================
11

    
12

    
13
// Variables
14
// ========================================================================
15

    
16
@iconnav-margin-horizontal:                      @global-small-margin;
17
@iconnav-margin-vertical:                        @iconnav-margin-horizontal;
18

    
19
@iconnav-item-color:                             @global-muted-color;
20

    
21
@iconnav-item-hover-color:                       @global-color;
22

    
23
@iconnav-item-active-color:                      @global-color;
24

    
25

    
26
/* ========================================================================
27
   Component: Iconnav
28
 ========================================================================== */
29

    
30
/*
31
 * 1. Allow items to wrap into the next line
32
 * 2. Reset lists
33
 * 3. Gutter
34
 */
35

    
36
.uk-iconnav {
37
    display: -ms-flexbox;
38
    display: -webkit-flex;
39
    display: flex;
40
    /* 1 */
41
    -ms-flex-wrap: wrap;
42
    -webkit-flex-wrap: wrap;
43
    flex-wrap: wrap;
44
    /* 2 */
45
    margin: 0;
46
    padding: 0;
47
    list-style: none;
48
    /* 3 */
49
    margin-left: -@iconnav-margin-horizontal;
50
    .hook-iconnav;
51
}
52

    
53
/*
54
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
55
 * 2. Gutter
56
 */
57

    
58
.uk-iconnav > * {
59
    /* 1 */
60
    -ms-flex: none;
61
    -webkit-flex: none;
62
    flex: none;
63
    /* 2 */
64
    padding-left: @iconnav-margin-horizontal;
65
}
66

    
67

    
68
/* Items
69
 ========================================================================== */
70

    
71
/*
72
 * Items
73
 * 1. Prevent gap if child element is `inline-block`, e.g. an icon
74
 * 2. Style
75
 */
76

    
77
.uk-iconnav > * > * {
78
    /* 1 */
79
    display: block;
80
    /* 2 */
81
    color: @iconnav-item-color;
82
    .hook-iconnav-item;
83
}
84

    
85
/* Hover + Focus */
86
.uk-iconnav > * > :hover,
87
.uk-iconnav > * > :focus {
88
    color: @iconnav-item-hover-color;
89
    outline: none;
90
    .hook-iconnav-item-hover;
91
}
92

    
93
/* Active */
94
.uk-iconnav > .uk-active > * {
95
    color: @iconnav-item-active-color;
96
    .hook-iconnav-item-active;
97
}
98

    
99

    
100
/* Modifier: 'uk-iconnav-vertical'
101
 ========================================================================== */
102

    
103
/*
104
 * 1. Change direction
105
 * 2. Gutter
106
 */
107

    
108
.uk-iconnav-vertical {
109
    /* 1 */
110
    -ms-flex-direction: column;
111
    -webkit-flex-direction: column;
112
    flex-direction: column;
113
    /* 2 */
114
    margin-left: 0;
115
    margin-top: -@iconnav-margin-vertical;
116
}
117

    
118
/* 2 */
119
.uk-iconnav-vertical > * {
120
    padding-left: 0;
121
    padding-top: @iconnav-margin-vertical;
122
}
123

    
124

    
125
// Hooks
126
// ========================================================================
127

    
128
.hook-iconnav-misc;
129

    
130
.hook-iconnav() {}
131
.hook-iconnav-item() {}
132
.hook-iconnav-item-hover() {}
133
.hook-iconnav-item-active() {}
134
.hook-iconnav-misc() {}
135

    
136

    
137
// Inverse
138
// ========================================================================
139

    
140
@inverse-iconnav-item-color:               @inverse-global-muted-color;
141
@inverse-iconnav-item-hover-color:         @inverse-global-color;
142
@inverse-iconnav-item-active-color:        @inverse-global-color;
143

    
144
.hook-inverse() {
145

    
146
    .uk-iconnav > * > * {
147
        color: @inverse-iconnav-item-color;
148
        .hook-inverse-iconnav-item;
149
    }
150

    
151
    .uk-iconnav > * > :hover,
152
    .uk-iconnav > * > :focus {
153
        color: @inverse-iconnav-item-hover-color;
154
        .hook-inverse-iconnav-item-hover;
155
    }
156

    
157
    .uk-iconnav > .uk-active > * {
158
        color: @inverse-iconnav-item-active-color;
159
        .hook-inverse-iconnav-item-active;
160
    }
161

    
162
}
163

    
164
.hook-inverse-iconnav-item() {}
165
.hook-inverse-iconnav-item-hover() {}
166
.hook-inverse-iconnav-item-active() {}
(29-29/66)