1 | // Name: Thumbnav
|
2 | // Description: Component to create thumbnail navigations
|
3 | //
|
4 | // Component: `uk-thumbnav`
|
5 | //
|
6 | // Modifier: `uk-thumbnav-vertical`
|
7 | //
|
8 | // States: `uk-active`
|
9 | //
|
10 | // ========================================================================
|
11 |
|
12 |
|
13 | // Variables
|
14 | // ========================================================================
|
15 |
|
16 | $thumbnav-margin-horizontal: 15px !default;
|
17 | $thumbnav-margin-vertical: $thumbnav-margin-horizontal !default;
|
18 |
|
19 |
|
20 | /* ========================================================================
|
21 | Component: Thumbnav
|
22 | ========================================================================== */
|
23 |
|
24 | /*
|
25 | * 1. Allow items to wrap into the next line
|
26 | * 2. Reset list
|
27 | * 3. Gutter
|
28 | */
|
29 |
|
30 | .uk-thumbnav {
|
31 | display: flex;
|
32 | /* 1 */
|
33 | flex-wrap: wrap;
|
34 | /* 2 */
|
35 | margin: 0;
|
36 | padding: 0;
|
37 | list-style: none;
|
38 | /* 3 */
|
39 | margin-left: (-$thumbnav-margin-horizontal);
|
40 | @if(mixin-exists(hook-thumbnav)) {@include hook-thumbnav();}
|
41 | }
|
42 |
|
43 | /*
|
44 | * Space is allocated based on content dimensions, but shrinks: 0 1 auto
|
45 | * 1. Gutter
|
46 | */
|
47 |
|
48 | .uk-thumbnav > * {
|
49 | /* 1 */
|
50 | padding-left: $thumbnav-margin-horizontal;
|
51 | }
|
52 |
|
53 |
|
54 | /* Items
|
55 | ========================================================================== */
|
56 |
|
57 | /*
|
58 | * Items
|
59 | */
|
60 |
|
61 | .uk-thumbnav > * > * {
|
62 | display: inline-block;
|
63 | @if(mixin-exists(hook-thumbnav-item)) {@include hook-thumbnav-item();}
|
64 | }
|
65 |
|
66 | /* Hover + Focus */
|
67 | .uk-thumbnav > * > :hover,
|
68 | .uk-thumbnav > * > :focus {
|
69 | outline: none;
|
70 | @if(mixin-exists(hook-thumbnav-item-hover)) {@include hook-thumbnav-item-hover();}
|
71 | }
|
72 |
|
73 | /* Active */
|
74 | .uk-thumbnav > .uk-active > * {
|
75 | @if(mixin-exists(hook-thumbnav-item-active)) {@include hook-thumbnav-item-active();}
|
76 | }
|
77 |
|
78 |
|
79 | /* Modifier: 'uk-thumbnav-vertical'
|
80 | ========================================================================== */
|
81 |
|
82 | /*
|
83 | * 1. Change direction
|
84 | * 2. Gutter
|
85 | */
|
86 |
|
87 | .uk-thumbnav-vertical {
|
88 | /* 1 */
|
89 | flex-direction: column;
|
90 | /* 2 */
|
91 | margin-left: 0;
|
92 | margin-top: (-$thumbnav-margin-vertical);
|
93 | }
|
94 |
|
95 | /* 2 */
|
96 | .uk-thumbnav-vertical > * {
|
97 | padding-left: 0;
|
98 | padding-top: $thumbnav-margin-vertical;
|
99 | }
|
100 |
|
101 |
|
102 | // Hooks
|
103 | // ========================================================================
|
104 |
|
105 | @if(mixin-exists(hook-thumbnav-misc)) {@include hook-thumbnav-misc();}
|
106 |
|
107 | // @mixin hook-thumbnav(){}
|
108 | // @mixin hook-thumbnav-item(){}
|
109 | // @mixin hook-thumbnav-item-hover(){}
|
110 | // @mixin hook-thumbnav-item-active(){}
|
111 | // @mixin hook-thumbnav-misc(){}
|
112 |
|
113 |
|
114 | // Inverse
|
115 | // ========================================================================
|
116 |
|
117 |
|
118 |
|
119 | // @mixin hook-inverse-thumbnav-item(){}
|
120 | // @mixin hook-inverse-thumbnav-item-hover(){}
|
121 | // @mixin hook-inverse-thumbnav-item-active(){} |
\ | No newline at end of file |