Project

General

Profile

1
// Name:            Navbar
2
// Description:     Component to create horizontal navigation bars
3
//
4
// Component:       `uk-navbar`
5
//
6
// Sub-objects:     `uk-navbar-container`
7
//                  `uk-navbar-left`
8
//                  `uk-navbar-right`
9
//                  `uk-navbar-center`
10
//                  `uk-navbar-center-left`
11
//                  `uk-navbar-center-right`
12
//                  `uk-navbar-nav`
13
//                  `uk-navbar-item`
14
//                  `uk-navbar-toggle`
15
//                  `uk-navbar-subtitle`
16
//                  `uk-navbar-dropbar`
17
//
18
// Adopted:         `uk-navbar-dropdown` + Modifiers
19
//                  `uk-navbar-dropdown-nav`
20
//                  `uk-navbar-dropdown-grid`
21
//                  `uk-navbar-toggle-icon`
22
//
23
// Modifiers:       `uk-navbar-transparent`
24
//                  `uk-navbar-sticky`
25
//                  `uk-navbar-dropdown-stack`
26
//
27
// States:          `uk-active`
28
//                  `uk-parent`
29
//                  `uk-open`
30
//
31
//
32
// ========================================================================
33

    
34

    
35
// Variables
36
// ========================================================================
37

    
38
$navbar-background:                              $global-muted-background !default;
39
$navbar-color-mode:                              none !default;
40

    
41
$navbar-nav-item-height:                         80px !default;
42
$navbar-nav-item-padding-horizontal:             15px !default;
43
$navbar-nav-item-color:                          $global-muted-color !default;
44
$navbar-nav-item-font-size:                      $global-font-size !default;
45
$navbar-nav-item-font-family:                    $global-font-family !default;
46
$navbar-nav-item-hover-color:                    $global-color !default;
47
$navbar-nav-item-onclick-color:                  $global-emphasis-color !default;
48
$navbar-nav-item-active-color:                   $global-emphasis-color !default;
49

    
50
$navbar-item-color:                              $global-color !default;
51

    
52
$navbar-toggle-color:                            $global-muted-color !default;
53
$navbar-toggle-hover-color:                      $global-color !default;
54

    
55
$navbar-subtitle-font-size:                      $global-small-font-size !default;
56

    
57
$navbar-dropdown-z-index:                        $global-z-index + 20 !default;
58
$navbar-dropdown-width:                          200px !default;
59
$navbar-dropdown-margin:                         0 !default;
60
$navbar-dropdown-padding:                        15px !default;
61
$navbar-dropdown-background:                     $global-muted-background !default;
62
$navbar-dropdown-color:                          $global-color !default;
63
$navbar-dropdown-grid-gutter-horizontal:         $global-gutter !default;
64
$navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-horizontal !default;
65

    
66
$navbar-dropdown-dropbar-margin-bottom:          30px !default;
67

    
68
$navbar-dropdown-nav-item-color:                 $global-muted-color !default;
69
$navbar-dropdown-nav-item-hover-color:           $global-color !default;
70
$navbar-dropdown-nav-item-active-color:          $global-emphasis-color !default;
71
$navbar-dropdown-nav-header-color:               $global-emphasis-color !default;
72
$navbar-dropdown-nav-divider-border-width:       $global-border-width !default;
73
$navbar-dropdown-nav-divider-border:             $global-border !default;
74
$navbar-dropdown-nav-sublist-item-color:         $global-muted-color !default;
75
$navbar-dropdown-nav-sublist-item-hover-color:   $global-color !default;
76

    
77
$navbar-dropbar-background:                      $navbar-dropdown-background !default;
78
$navbar-dropbar-z-index:                         $global-z-index + 20 !default;
79

    
80

    
81
/* ========================================================================
82
   Component: Navbar
83
 ========================================================================== */
84

    
85
/*
86
 * 1. Create position context to center navbar group
87
 */
88

    
89
.uk-navbar {
90
    display: -ms-flexbox;
91
    display: -webkit-flex;
92
    display: flex;
93
    /* 1 */
94
    position: relative;
95
    @if(mixin-exists(hook-navbar)) {@include hook-navbar();}
96
}
97

    
98

    
99
/* Container
100
 ========================================================================== */
101

    
102
.uk-navbar-container:not(.uk-navbar-transparent) {
103
    background: $navbar-background;
104
    @if(mixin-exists(hook-navbar-container)) {@include hook-navbar-container();}
105
}
106

    
107
// Color Mode
108
@if ( $navbar-color-mode == light ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-light;} }
109
@if ( $navbar-color-mode == dark ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-dark;} }
110

    
111

    
112
/*
113
 * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
114
 */
115

    
116
.uk-navbar-container > ::before,
117
.uk-navbar-container > ::after { display: none !important; }
118

    
119

    
120
/* Groups
121
 ========================================================================== */
122

    
123
/*
124
 * 1. Align navs and items vertically if they have a different height
125
 * 2. Note: IE 11 requires an extra `div` which affects the center selector
126
 */
127

    
128
.uk-navbar-left,
129
.uk-navbar-right,
130
// 2. [class*='uk-navbar-center'],
131
.uk-navbar-center,
132
.uk-navbar-center-left > *,
133
.uk-navbar-center-right > *, {
134
    display: -ms-flexbox;
135
    display: -webkit-flex;
136
    display: flex;
137
    /* 1 */
138
    -ms-flex-align: center;
139
    -webkit-align-items: center;
140
    align-items: center;
141
}
142

    
143
/*
144
 * Horizontal alignment
145
 * 1. Create position context for centered navbar with sub groups (left/right)
146
 * 2. Needed for dropdowns because a new position context is created
147
 *    `z-index` must be smaller than off-canvas
148
 * 3. Fix text wrapping if the centered section is larger than 50% of the navbar
149
 * 4. Align sub groups for centered navbar
150
 */
151

    
152
.uk-navbar-right { margin-left: auto; }
153

    
154
.uk-navbar-center:only-child {
155
    margin-left: auto;
156
    margin-right: auto;
157
    /* 1 */
158
    position: relative;
159
}
160

    
161
.uk-navbar-center:not(:only-child) {
162
    position: absolute;
163
    top: 50%;
164
    left: 50%;
165
    -webkit-transform: translate(-50%,-50%);
166
    transform: translate(-50%,-50%);
167
    /* 2 */
168
    z-index: $global-z-index - 10;
169
}
170

    
171
/* 3 */
172
.uk-navbar-center:not(:only-child) .uk-navbar-nav > li > a,
173
.uk-navbar-center:not(:only-child) .uk-navbar-item,
174
.uk-navbar-center:not(:only-child) .uk-navbar-toggle { white-space: nowrap; }
175

    
176
/* 4 */
177
.uk-navbar-center-left,
178
.uk-navbar-center-right {
179
   position: absolute;
180
   top: 0;
181
}
182

    
183
.uk-navbar-center-left { right: 100%; }
184
.uk-navbar-center-right { left: 100%; }
185

    
186
[class*='uk-navbar-center-'] .uk-navbar-nav > li > a,
187
[class*='uk-navbar-center-'] .uk-navbar-item,
188
[class*='uk-navbar-center-'] .uk-navbar-toggle { white-space: nowrap; }
189

    
190

    
191
/* Nav
192
 ========================================================================== */
193

    
194
/*
195
 * 1. Reset lists
196
 */
197

    
198
.uk-navbar-nav {
199
    display: -ms-flexbox;
200
    display: -webkit-flex;
201
    display: flex;
202
    /* 1 */
203
    margin: 0;
204
    padding: 0;
205
    list-style: none;
206
}
207

    
208
/*
209
 * Allow items to wrap into the next line
210
 * Only not `absolute` positioned groups
211
 */
212

    
213
.uk-navbar-left,
214
.uk-navbar-right,
215
.uk-navbar-center:only-child {
216
    -ms-flex-wrap: wrap;
217
    -webkit-flex-wrap: wrap;
218
    flex-wrap: wrap;
219
}
220

    
221
/*
222
 * Items
223
 * 1. Center content vertically and horizontally
224
 * 2. Dimensions
225
 * 3. Style
226
 * 4. Required for `a`
227
 */
228

    
229
.uk-navbar-nav > li > a,    // Nav item
230
.uk-navbar-item,            // Content item
231
.uk-navbar-toggle {         // Clickable item
232
    /* 1 */
233
    display: -ms-flexbox;
234
    display: -webkit-flex;
235
    display: flex;
236
    -ms-flex-pack: center;
237
    -webkit-justify-content: center;
238
    justify-content: center;
239
    -ms-flex-align: center;
240
    -webkit-align-items: center;
241
    align-items: center;
242
    /* 2 */
243
    box-sizing: border-box;
244
    height: $navbar-nav-item-height;
245
    padding: 0 $navbar-nav-item-padding-horizontal;
246
    /* 3 */
247
    font-size: $navbar-nav-item-font-size;
248
    font-family: $navbar-nav-item-font-family;
249
    /* 4 */
250
    text-decoration: none;
251
}
252

    
253
/*
254
 * Nav items
255
 */
256

    
257
.uk-navbar-nav > li > a {
258
    color: $navbar-nav-item-color;
259
    @if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();}
260
}
261

    
262
/*
263
 * Hover
264
 * Apply hover style also to focus state and if dropdown is opened
265
 */
266

    
267
.uk-navbar-nav > li:hover > a,
268
.uk-navbar-nav > li > a:focus,
269
.uk-navbar-nav > li > a.uk-open {
270
    color: $navbar-nav-item-hover-color;
271
    outline: none;
272
    @if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();}
273
}
274

    
275
/* OnClick */
276
.uk-navbar-nav > li > a:active {
277
    color: $navbar-nav-item-onclick-color;
278
    @if(mixin-exists(hook-navbar-nav-item-onclick)) {@include hook-navbar-nav-item-onclick();}
279
}
280

    
281
/* Active */
282
.uk-navbar-nav > li.uk-active > a {
283
    color: $navbar-nav-item-active-color;
284
    @if(mixin-exists(hook-navbar-nav-item-active)) {@include hook-navbar-nav-item-active();}
285
}
286

    
287

    
288
/* Item
289
 ========================================================================== */
290

    
291
.uk-navbar-item {
292
    color: $navbar-item-color;
293
    @if(mixin-exists(hook-navbar-item)) {@include hook-navbar-item();}
294
}
295

    
296

    
297
/* Toggle
298
 ========================================================================== */
299

    
300
.uk-navbar-toggle {
301
    color: $navbar-toggle-color;
302
    @if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();}
303
}
304

    
305
.uk-navbar-toggle:hover,
306
.uk-navbar-toggle:focus,
307
.uk-navbar-toggle.uk-open {
308
    color: $navbar-toggle-hover-color;
309
    outline: none;
310
    text-decoration: none;
311
    @if(mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();}
312
}
313

    
314
/*
315
 * Icon
316
 * Adopts `uk-icon`
317
 */
318

    
319
.uk-navbar-toggle-icon {
320
    @if(mixin-exists(hook-navbar-toggle-icon)) {@include hook-navbar-toggle-icon();}
321
}
322

    
323
/* Hover + Focus */
324
:hover > .uk-navbar-toggle-icon,
325
:focus > .uk-navbar-toggle-icon {
326
    @if(mixin-exists(hook-navbar-toggle-icon-hover)) {@include hook-navbar-toggle-icon-hover();}
327
}
328

    
329

    
330
/* Subtitle
331
 ========================================================================== */
332

    
333
.uk-navbar-subtitle {
334
    font-size: $navbar-subtitle-font-size;
335
    @if(mixin-exists(hook-navbar-subtitle)) {@include hook-navbar-subtitle();}
336
}
337

    
338

    
339
/* Style modifiers
340
 ========================================================================== */
341

    
342
.uk-navbar-transparent {
343
    @if(mixin-exists(hook-navbar-transparent)) {@include hook-navbar-transparent();}
344
}
345

    
346
.uk-navbar-sticky {
347
    @if(mixin-exists(hook-navbar-sticky)) {@include hook-navbar-sticky();}
348
}
349

    
350

    
351
/* Dropdown
352
 ========================================================================== */
353

    
354
/*
355
 * Adopts `uk-dropdown`
356
 * 1. Hide by default
357
 * 2. Set position
358
 * 3. Set a default width
359
 * 4. Style
360
 */
361

    
362
.uk-navbar-dropdown {
363
    /* 1 */
364
    display: none;
365
    /* 2 */
366
    position: absolute;
367
    z-index: $navbar-dropdown-z-index;
368
    /* 3 */
369
    box-sizing: border-box;
370
    width: $navbar-dropdown-width;
371
    /* 4 */
372
    padding: $navbar-dropdown-padding;
373
    background: $navbar-dropdown-background;
374
    color: $navbar-dropdown-color;
375
    @if(mixin-exists(hook-navbar-dropdown)) {@include hook-navbar-dropdown();}
376
}
377

    
378
/* Show */
379
.uk-navbar-dropdown.uk-open { display: block; }
380

    
381
/*
382
 * Direction / Alignment modifiers
383
 */
384

    
385
/* Direction */
386
[class*='uk-navbar-dropdown-top'] { margin-top: (-$navbar-dropdown-margin); }
387
[class*='uk-navbar-dropdown-bottom'] { margin-top: $navbar-dropdown-margin; }
388
[class*='uk-navbar-dropdown-left'] { margin-left: (-$navbar-dropdown-margin); }
389
[class*='uk-navbar-dropdown-right'] { margin-left: $navbar-dropdown-margin; }
390

    
391
/*
392
 * Grid
393
 * Adopts `uk-grid`
394
 */
395

    
396
/* Gutter Horizontal */
397
.uk-navbar-dropdown-grid { margin-left: (-$navbar-dropdown-grid-gutter-horizontal); }
398
.uk-navbar-dropdown-grid > * { padding-left: $navbar-dropdown-grid-gutter-horizontal; }
399

    
400
/* Gutter Vertical */
401
.uk-navbar-dropdown-grid > .uk-grid-margin { margin-top: $navbar-dropdown-grid-gutter-vertical; }
402

    
403
/* Stack */
404
.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * { width: 100% !important; }
405

    
406
/*
407
 * Width modifier
408
 */
409

    
410
.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 2); }
411
.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 3); }
412
.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 4); }
413
.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 5); }
414

    
415
/*
416
 * Dropbar modifier
417
 */
418

    
419
.uk-navbar-dropdown-dropbar {
420
    margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
421
    @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
422
}
423

    
424

    
425
/* Dropdown Nav
426
 * Adopts `uk-nav`
427
 ========================================================================== */
428

    
429
.uk-navbar-dropdown-nav {
430
    @if(mixin-exists(hook-navbar-dropdown-nav)) {@include hook-navbar-dropdown-nav();}
431
}
432

    
433
/*
434
 * Items
435
 */
436

    
437
.uk-navbar-dropdown-nav > li > a {
438
    color: $navbar-dropdown-nav-item-color;
439
    @if(mixin-exists(hook-navbar-dropdown-nav-item)) {@include hook-navbar-dropdown-nav-item();}
440
}
441

    
442
/* Hover + Focus */
443
.uk-navbar-dropdown-nav > li > a:hover,
444
.uk-navbar-dropdown-nav > li > a:focus {
445
    color: $navbar-dropdown-nav-item-hover-color;
446
    @if(mixin-exists(hook-navbar-dropdown-nav-item-hover)) {@include hook-navbar-dropdown-nav-item-hover();}
447
}
448

    
449
/* Active */
450
.uk-navbar-dropdown-nav > li.uk-active > a {
451
    color: $navbar-dropdown-nav-item-active-color;
452
    @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();}
453
}
454

    
455
/*
456
 * Header
457
 */
458

    
459
.uk-navbar-dropdown-nav .uk-nav-header {
460
    color: $navbar-dropdown-nav-header-color;
461
    @if(mixin-exists(hook-navbar-dropdown-nav-header)) {@include hook-navbar-dropdown-nav-header();}
462
}
463

    
464
/*
465
 * Divider
466
 */
467

    
468
.uk-navbar-dropdown-nav .uk-nav-divider {
469
    border-top: $navbar-dropdown-nav-divider-border-width solid $navbar-dropdown-nav-divider-border;
470
    @if(mixin-exists(hook-navbar-dropdown-nav-divider)) {@include hook-navbar-dropdown-nav-divider();}
471
}
472

    
473
/*
474
 * Sublists
475
 */
476

    
477
.uk-navbar-dropdown-nav .uk-nav-sub a { color: $navbar-dropdown-nav-sublist-item-color; }
478

    
479
.uk-navbar-dropdown-nav .uk-nav-sub a:hover,
480
.uk-navbar-dropdown-nav .uk-nav-sub a:focus { color: $navbar-dropdown-nav-sublist-item-hover-color; }
481

    
482

    
483
/* Dropbar
484
 ========================================================================== */
485

    
486
.uk-navbar-dropbar {
487
    position: relative;
488
    background: $navbar-dropbar-background;
489
    overflow: hidden;
490
    @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
491
}
492

    
493
/*
494
 * Slide modifier
495
 */
496

    
497
.uk-navbar-dropbar-slide {
498
    position: absolute;
499
    z-index: $navbar-dropbar-z-index;
500
    left: 0;
501
    right: 0;
502
}
503

    
504

    
505
// Hooks
506
// ========================================================================
507

    
508
@if(mixin-exists(hook-navbar-misc)) {@include hook-navbar-misc();}
509

    
510
// @mixin hook-navbar(){}
511
// @mixin hook-navbar-container(){}
512
// @mixin hook-navbar-nav-item(){}
513
// @mixin hook-navbar-nav-item-hover(){}
514
// @mixin hook-navbar-nav-item-onclick(){}
515
// @mixin hook-navbar-nav-item-active(){}
516
// @mixin hook-navbar-item(){}
517
// @mixin hook-navbar-toggle(){}
518
// @mixin hook-navbar-toggle-hover(){}
519
// @mixin hook-navbar-toggle-icon(){}
520
// @mixin hook-navbar-toggle-icon-hover(){}
521
// @mixin hook-navbar-subtitle(){}
522
// @mixin hook-navbar-transparent(){}
523
// @mixin hook-navbar-sticky(){}
524
// @mixin hook-navbar-dropdown(){}
525
// @mixin hook-navbar-dropdown-dropbar(){}
526
// @mixin hook-navbar-dropdown-nav(){}
527
// @mixin hook-navbar-dropdown-nav-item(){}
528
// @mixin hook-navbar-dropdown-nav-item-hover(){}
529
// @mixin hook-navbar-dropdown-nav-item-active(){}
530
// @mixin hook-navbar-dropdown-nav-header(){}
531
// @mixin hook-navbar-dropdown-nav-divider(){}
532
// @mixin hook-navbar-dropbar(){}
533
// @mixin hook-navbar-misc(){}
534

    
535

    
536
// Inverse
537
// ========================================================================
538

    
539
$inverse-navbar-nav-item-color:                 $inverse-global-muted-color !default;
540
$inverse-navbar-nav-item-hover-color:           $inverse-global-color !default;
541
$inverse-navbar-nav-item-onclick-color:         $inverse-global-emphasis-color !default;
542
$inverse-navbar-nav-item-active-color:          $inverse-global-emphasis-color !default;
543
$inverse-navbar-item-color:                     $inverse-global-color !default;
544
$inverse-navbar-toggle-color:                   $inverse-global-muted-color !default;
545
$inverse-navbar-toggle-hover-color:             $inverse-global-color !default;
546

    
547

    
548

    
549
// @mixin hook-inverse-navbar-nav-item(){}
550
// @mixin hook-inverse-navbar-nav-item-hover(){}
551
// @mixin hook-inverse-navbar-nav-item-onclick(){}
552
// @mixin hook-inverse-navbar-nav-item-active(){}
553
// @mixin hook-inverse-navbar-item(){}
554
// @mixin hook-inverse-navbar-toggle(){}
555
// @mixin hook-inverse-navbar-toggle-hover(){}
(38-38/66)