1 |
49598
|
stefanos.g
|
// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
|
2 |
|
|
|
3 |
|
|
//
|
4 |
|
|
// OMTDComponent: Navbar
|
5 |
|
|
//
|
6 |
|
|
// ========================================================================
|
7 |
|
|
|
8 |
|
|
|
9 |
|
|
// Variables
|
10 |
|
|
// ========================================================================
|
11 |
|
|
|
12 |
|
|
@navbar-background: rgba(0,0,0,0);
|
13 |
|
|
@navbar-color: @global-color;
|
14 |
|
|
@navbar-link-color: @global-link-color;
|
15 |
|
|
@navbar-link-hover-color: @global-link-hover-color;
|
16 |
|
|
|
17 |
|
|
@navbar-nav-height: 70px;
|
18 |
|
|
@navbar-nav-line-height: @navbar-nav-height;
|
19 |
|
|
@navbar-nav-padding-horizontal: 0;
|
20 |
|
|
@navbar-nav-color: @global-heading-color;
|
21 |
|
|
@navbar-nav-font-size: @global-font-size;
|
22 |
|
|
@navbar-nav-font-family: @global-alt-font-family;
|
23 |
|
|
@navbar-nav-hover-background: rgba(0,0,0,0);
|
24 |
|
|
@navbar-nav-hover-color: @global-link-color;
|
25 |
|
|
@navbar-nav-onclick-background: rgba(0,0,0,0);
|
26 |
|
|
@navbar-nav-onclick-color: @global-link-hover-color;
|
27 |
|
|
@navbar-nav-active-background: rgba(0,0,0,0);
|
28 |
|
|
@navbar-nav-active-color: @global-link-color;
|
29 |
|
|
|
30 |
|
|
@navbar-brand-font-size: round((@global-font-size * 1.333)); // 20px
|
31 |
|
|
@navbar-brand-color: @global-color;
|
32 |
|
|
@navbar-brand-hover-color: @global-color;
|
33 |
|
|
|
34 |
|
|
@navbar-toggle-font-size: round((@global-font-size * 1.2)); // 18px
|
35 |
|
|
@navbar-toggle-color: @global-color;
|
36 |
|
|
@navbar-toggle-hover-color: @global-color;
|
37 |
|
|
|
38 |
|
|
//
|
39 |
|
|
// New
|
40 |
|
|
//
|
41 |
|
|
|
42 |
|
|
@navbar-nav-text-transform: @global-text-transform;
|
43 |
|
|
@navbar-nav-margin-horizontal: @global-grid-gutter;
|
44 |
|
|
@navbar-attached-box-shadow: 0 0 20px 0 rgba(51,51,51,0.1);
|
45 |
|
|
@navbar-toggle-icon: "\e906";
|
46 |
|
|
@navbar-toggle-icon-font-family: "Chester";
|
47 |
|
|
|
48 |
|
|
|
49 |
|
|
// OMTDComponent
|
50 |
|
|
// ========================================================================
|
51 |
|
|
|
52 |
|
|
.hook-navbar() {}
|
53 |
|
|
|
54 |
|
|
|
55 |
|
|
// Sub-object: `uk-navbar-nav`
|
56 |
|
|
// ========================================================================
|
57 |
|
|
|
58 |
|
|
.hook-navbar-nav() {
|
59 |
|
|
|
60 |
|
|
text-transform: @navbar-nav-text-transform;
|
61 |
|
|
|
62 |
|
|
&:before {
|
63 |
|
|
content: "";
|
64 |
|
|
position: absolute;
|
65 |
|
|
bottom: 17px;
|
66 |
|
|
left: 0;
|
67 |
|
|
height: @global-border-width;
|
68 |
|
|
width: 0;
|
69 |
|
|
background: fade(@navbar-nav-hover-color, 70%);
|
70 |
|
|
-webkit-transition: width .4s;
|
71 |
|
|
transition: width .4s;
|
72 |
|
|
}
|
73 |
|
|
|
74 |
|
|
}
|
75 |
|
|
|
76 |
|
|
// Hover
|
77 |
|
|
.hook-navbar-nav-hover() {
|
78 |
|
|
|
79 |
|
|
&:before { width: 100%; }
|
80 |
|
|
|
81 |
|
|
}
|
82 |
|
|
|
83 |
|
|
// OnClick
|
84 |
|
|
.hook-navbar-nav-onclick() {}
|
85 |
|
|
|
86 |
|
|
// Active
|
87 |
|
|
.hook-navbar-nav-active() {
|
88 |
|
|
|
89 |
|
|
&:before { width: 100%; }
|
90 |
|
|
|
91 |
|
|
}
|
92 |
|
|
|
93 |
|
|
|
94 |
|
|
// Sub-object: `uk-navbar-content`
|
95 |
|
|
// ========================================================================
|
96 |
|
|
|
97 |
|
|
.hook-navbar-content() {}
|
98 |
|
|
|
99 |
|
|
|
100 |
|
|
// Miscellaneous
|
101 |
|
|
// ========================================================================
|
102 |
|
|
|
103 |
|
|
.hook-navbar-misc() {
|
104 |
|
|
|
105 |
|
|
.uk-navbar-nav > li:not(:last-child),
|
106 |
|
|
.uk-navbar-brand { margin-right: @navbar-nav-margin-horizontal; }
|
107 |
|
|
|
108 |
|
|
.uk-navbar-attached {
|
109 |
|
|
background: @global-background;
|
110 |
|
|
box-shadow: @navbar-attached-box-shadow;
|
111 |
|
|
}
|
112 |
|
|
|
113 |
|
|
.uk-navbar-toggle { padding: 0 @global-grid-gutter; }
|
114 |
|
|
.uk-navbar-toggle:after { font-family: @navbar-toggle-icon-font-family; }
|
115 |
|
|
|
116 |
|
|
}
|