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 !default;
|
17 | $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
|
18 |
|
19 | $iconnav-item-color: $global-muted-color !default;
|
20 |
|
21 | $iconnav-item-hover-color: $global-color !default;
|
22 |
|
23 | $iconnav-item-active-color: $global-color !default;
|
24 |
|
25 |
|
26 | /* ========================================================================
|
27 | Component: Iconnav
|
28 | ========================================================================== */
|
29 |
|
30 | /*
|
31 | * 1. Allow items to wrap into the next line
|
32 | * 2. Reset list
|
33 | * 3. Gutter
|
34 | */
|
35 |
|
36 | .uk-iconnav {
|
37 | display: flex;
|
38 | /* 1 */
|
39 | flex-wrap: wrap;
|
40 | /* 2 */
|
41 | margin: 0;
|
42 | padding: 0;
|
43 | list-style: none;
|
44 | /* 3 */
|
45 | margin-left: (-$iconnav-margin-horizontal);
|
46 | @if(mixin-exists(hook-iconnav)) {@include hook-iconnav();}
|
47 | }
|
48 |
|
49 | /*
|
50 | * Space is allocated based on content dimensions, but shrinks: 0 1 auto
|
51 | * 1. Gutter
|
52 | */
|
53 |
|
54 | .uk-iconnav > * {
|
55 | /* 1 */
|
56 | padding-left: $iconnav-margin-horizontal;
|
57 | }
|
58 |
|
59 |
|
60 | /* Items
|
61 | ========================================================================== */
|
62 |
|
63 | /*
|
64 | * Items must target `a` elements to exclude other elements (e.g. dropdowns)
|
65 | * 1. Prevent gap if child element is `inline-block`, e.g. an icon
|
66 | * 2. Style
|
67 | */
|
68 |
|
69 | .uk-iconnav > * > a {
|
70 | /* 1 */
|
71 | display: block;
|
72 | /* 2 */
|
73 | color: $iconnav-item-color;
|
74 | @if(mixin-exists(hook-iconnav-item)) {@include hook-iconnav-item();}
|
75 | }
|
76 |
|
77 | /* Hover + Focus */
|
78 | .uk-iconnav > * > a:hover,
|
79 | .uk-iconnav > * > a:focus {
|
80 | color: $iconnav-item-hover-color;
|
81 | outline: none;
|
82 | @if(mixin-exists(hook-iconnav-item-hover)) {@include hook-iconnav-item-hover();}
|
83 | }
|
84 |
|
85 | /* Active */
|
86 | .uk-iconnav > .uk-active > a {
|
87 | color: $iconnav-item-active-color;
|
88 | @if(mixin-exists(hook-iconnav-item-active)) {@include hook-iconnav-item-active();}
|
89 | }
|
90 |
|
91 |
|
92 | /* Modifier: 'uk-iconnav-vertical'
|
93 | ========================================================================== */
|
94 |
|
95 | /*
|
96 | * 1. Change direction
|
97 | * 2. Gutter
|
98 | */
|
99 |
|
100 | .uk-iconnav-vertical {
|
101 | /* 1 */
|
102 | flex-direction: column;
|
103 | /* 2 */
|
104 | margin-left: 0;
|
105 | margin-top: (-$iconnav-margin-vertical);
|
106 | }
|
107 |
|
108 | /* 2 */
|
109 | .uk-iconnav-vertical > * {
|
110 | padding-left: 0;
|
111 | padding-top: $iconnav-margin-vertical;
|
112 | }
|
113 |
|
114 |
|
115 | // Hooks
|
116 | // ========================================================================
|
117 |
|
118 | @if(mixin-exists(hook-iconnav-misc)) {@include hook-iconnav-misc();}
|
119 |
|
120 | // @mixin hook-iconnav(){}
|
121 | // @mixin hook-iconnav-item(){}
|
122 | // @mixin hook-iconnav-item-hover(){}
|
123 | // @mixin hook-iconnav-item-active(){}
|
124 | // @mixin hook-iconnav-misc(){}
|
125 |
|
126 |
|
127 | // Inverse
|
128 | // ========================================================================
|
129 |
|
130 | $inverse-iconnav-item-color: $inverse-global-muted-color !default;
|
131 | $inverse-iconnav-item-hover-color: $inverse-global-color !default;
|
132 | $inverse-iconnav-item-active-color: $inverse-global-color !default;
|
133 |
|
134 |
|
135 |
|
136 | // @mixin hook-inverse-iconnav-item(){}
|
137 | // @mixin hook-inverse-iconnav-item-hover(){}
|
138 | // @mixin hook-inverse-iconnav-item-active(){} |
\ | No newline at end of file |