1 | // Name: Pagination
|
2 | // Description: Component to create a page navigation
|
3 | //
|
4 | // Component: `uk-pagination`
|
5 | //
|
6 | // Adopted: `uk-pagination-next`
|
7 | // `uk-pagination-previous`
|
8 | //
|
9 | // States: `uk-active`
|
10 | // `uk-disabled`
|
11 | //
|
12 | // ========================================================================
|
13 |
|
14 |
|
15 | // Variables
|
16 | // ========================================================================
|
17 |
|
18 | $pagination-margin-horizontal: 20px !default;
|
19 |
|
20 | $pagination-item-color: $global-muted-color !default;
|
21 | $pagination-item-hover-color: $global-color !default;
|
22 | $pagination-item-hover-text-decoration: none !default;
|
23 | $pagination-item-active-color: $global-color !default;
|
24 | $pagination-item-disabled-color: $global-muted-color !default;
|
25 |
|
26 |
|
27 | /* ========================================================================
|
28 | Component: Pagination
|
29 | ========================================================================== */
|
30 |
|
31 | /*
|
32 | * 1. Allow items to wrap into the next line
|
33 | * 2. Gutter
|
34 | * 3. Reset list
|
35 | */
|
36 |
|
37 | .uk-pagination {
|
38 | display: flex;
|
39 | /* 1 */
|
40 | flex-wrap: wrap;
|
41 | /* 2 */
|
42 | margin-left: (-$pagination-margin-horizontal);
|
43 | /* 3 */
|
44 | padding: 0;
|
45 | list-style: none;
|
46 | @if(mixin-exists(hook-pagination)) {@include hook-pagination();}
|
47 | }
|
48 |
|
49 | /*
|
50 | * 1. Space is allocated solely based on content dimensions: 0 0 auto
|
51 | * 2. Gutter
|
52 | * 3. Create position context for dropdowns
|
53 | */
|
54 |
|
55 | .uk-pagination > * {
|
56 | /* 1 */
|
57 | flex: none;
|
58 | /* 2 */
|
59 | padding-left: $pagination-margin-horizontal;
|
60 | /* 3 */
|
61 | position: relative;
|
62 | }
|
63 |
|
64 |
|
65 | /* Items
|
66 | ========================================================================== */
|
67 |
|
68 | /*
|
69 | * 1. Prevent gap if child element is `inline-block`, e.g. an icon
|
70 | * 2. Style
|
71 | */
|
72 |
|
73 | .uk-pagination > * > * {
|
74 | /* 1 */
|
75 | display: block;
|
76 | /* 2 */
|
77 | color: $pagination-item-color;
|
78 | @if(mixin-exists(hook-pagination-item)) {@include hook-pagination-item();}
|
79 | }
|
80 |
|
81 | /* Hover + Focus */
|
82 | .uk-pagination > * > :hover,
|
83 | .uk-pagination > * > :focus {
|
84 | color: $pagination-item-hover-color;
|
85 | text-decoration: $pagination-item-hover-text-decoration;
|
86 | @if(mixin-exists(hook-pagination-item-hover)) {@include hook-pagination-item-hover();}
|
87 | }
|
88 |
|
89 | /* Active */
|
90 | .uk-pagination > .uk-active > * {
|
91 | color: $pagination-item-active-color;
|
92 | @if(mixin-exists(hook-pagination-item-active)) {@include hook-pagination-item-active();}
|
93 | }
|
94 |
|
95 | /* Disabled */
|
96 | .uk-pagination > .uk-disabled > * {
|
97 | color: $pagination-item-disabled-color;
|
98 | @if(mixin-exists(hook-pagination-item-disabled)) {@include hook-pagination-item-disabled();}
|
99 | }
|
100 |
|
101 |
|
102 | // Hooks
|
103 | // ========================================================================
|
104 |
|
105 | @if(mixin-exists(hook-pagination-misc)) {@include hook-pagination-misc();}
|
106 |
|
107 | // @mixin hook-pagination(){}
|
108 | // @mixin hook-pagination-item(){}
|
109 | // @mixin hook-pagination-item-hover(){}
|
110 | // @mixin hook-pagination-item-active(){}
|
111 | // @mixin hook-pagination-item-disabled(){}
|
112 | // @mixin hook-pagination-misc(){}
|
113 |
|
114 |
|
115 | // Inverse
|
116 | // ========================================================================
|
117 |
|
118 | $inverse-pagination-item-color: $inverse-global-muted-color !default;
|
119 | $inverse-pagination-item-hover-color: $inverse-global-color !default;
|
120 | $inverse-pagination-item-active-color: $inverse-global-color !default;
|
121 | $inverse-pagination-item-disabled-color: $inverse-global-muted-color !default;
|
122 |
|
123 |
|
124 |
|
125 | // @mixin hook-inverse-pagination-item(){}
|
126 | // @mixin hook-inverse-pagination-item-hover(){}
|
127 | // @mixin hook-inverse-pagination-item-active(){}
|
128 | // @mixin hook-inverse-pagination-item-disabled(){}
|