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 | // `uk-slidenav-large`
|
11 | //
|
12 | // ========================================================================
|
13 |
|
14 |
|
15 | // Variables
|
16 | // ========================================================================
|
17 |
|
18 | $slidenav-padding-vertical: 5px !default;
|
19 | $slidenav-padding-horizontal: 10px !default;
|
20 |
|
21 | $slidenav-color: rgba($global-color, 0.5) !default;
|
22 | $slidenav-hover-color: rgba($global-color, 0.9) !default;
|
23 | $slidenav-active-color: rgba($global-color, 0.5) !default;
|
24 |
|
25 | $slidenav-large-padding-vertical: 10px !default;
|
26 | $slidenav-large-padding-horizontal: $slidenav-large-padding-vertical !default;
|
27 |
|
28 |
|
29 | /* ========================================================================
|
30 | Component: Slidenav
|
31 | ========================================================================== */
|
32 |
|
33 | /*
|
34 | * Adopts `uk-icon`
|
35 | */
|
36 |
|
37 | .uk-slidenav {
|
38 | padding: $slidenav-padding-vertical $slidenav-padding-horizontal;
|
39 | color: $slidenav-color;
|
40 | @if(mixin-exists(hook-slidenav)) {@include hook-slidenav();}
|
41 | }
|
42 |
|
43 | /* Hover + Focus */
|
44 | .uk-slidenav:hover,
|
45 | .uk-slidenav:focus {
|
46 | color: $slidenav-hover-color;
|
47 | outline: none;
|
48 | @if(mixin-exists(hook-slidenav-hover)) {@include hook-slidenav-hover();}
|
49 | }
|
50 |
|
51 | /* OnClick */
|
52 | .uk-slidenav:active {
|
53 | color: $slidenav-active-color;
|
54 | @if(mixin-exists(hook-slidenav-active)) {@include hook-slidenav-active();}
|
55 | }
|
56 |
|
57 |
|
58 | /* Icon modifier
|
59 | ========================================================================== */
|
60 |
|
61 | /*
|
62 | * Previous
|
63 | */
|
64 |
|
65 | .uk-slidenav-previous {
|
66 | @if(mixin-exists(hook-slidenav-previous)) {@include hook-slidenav-previous();}
|
67 | }
|
68 |
|
69 | /*
|
70 | * Next
|
71 | */
|
72 |
|
73 | .uk-slidenav-next {
|
74 | @if(mixin-exists(hook-slidenav-next)) {@include hook-slidenav-next();}
|
75 | }
|
76 |
|
77 |
|
78 | /* Size modifier
|
79 | ========================================================================== */
|
80 |
|
81 | .uk-slidenav-large {
|
82 | padding: $slidenav-large-padding-vertical $slidenav-large-padding-horizontal;
|
83 | @if(mixin-exists(hook-slidenav-large)) {@include hook-slidenav-large();}
|
84 | }
|
85 |
|
86 |
|
87 | /* Container
|
88 | ========================================================================== */
|
89 |
|
90 | .uk-slidenav-container {
|
91 | display: flex;
|
92 | @if(mixin-exists(hook-slidenav-container)) {@include hook-slidenav-container();}
|
93 | }
|
94 |
|
95 |
|
96 | // Hooks
|
97 | // ========================================================================
|
98 |
|
99 | @if(mixin-exists(hook-slidenav-misc)) {@include hook-slidenav-misc();}
|
100 |
|
101 | // @mixin hook-slidenav(){}
|
102 | // @mixin hook-slidenav-hover(){}
|
103 | // @mixin hook-slidenav-active(){}
|
104 | // @mixin hook-slidenav-previous(){}
|
105 | // @mixin hook-slidenav-next(){}
|
106 | // @mixin hook-slidenav-large(){}
|
107 | // @mixin hook-slidenav-container(){}
|
108 | // @mixin hook-slidenav-misc(){}
|
109 |
|
110 |
|
111 | // Inverse
|
112 | // ========================================================================
|
113 |
|
114 | $inverse-slidenav-color: rgba($inverse-global-color, 0.7) !default;
|
115 | $inverse-slidenav-hover-color: rgba($inverse-global-color, 0.95) !default;
|
116 | $inverse-slidenav-active-color: rgba($inverse-global-color, 0.7) !default;
|
117 |
|
118 |
|
119 |
|
120 | // @mixin hook-inverse-slidenav(){}
|
121 | // @mixin hook-inverse-slidenav-hover(){}
|
122 | // @mixin hook-inverse-slidenav-active(){}
|