Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100755 292 lines (263 sloc) 6.058 kB
31af9b8 @mikevalstar Added twitter bootstrap css to project.
authored
1 // NAVBAR (FIXED AND STATIC)
2 // -------------------------
3
4
5 // COMMON STYLES
6 // -------------
7
8 .navbar {
9 overflow: visible;
10 margin-bottom: @baseLineHeight;
11 }
12
13 // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
14 .navbar-inner {
15 padding-left: 20px;
16 padding-right: 20px;
17 #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
18 .border-radius(4px);
19 @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
20 .box-shadow(@shadow);
21 }
22
23 // Navbar button for toggling navbar items in responsive layouts
24 .btn-navbar {
25 display: none;
26 float: right;
27 padding: 7px 10px;
28 margin-left: 5px;
29 margin-right: 5px;
30 .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
31 @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
32 .box-shadow(@shadow);
33 }
34 .btn-navbar .icon-bar {
35 display: block;
36 width: 18px;
37 height: 2px;
38 background-color: #f5f5f5;
39 .border-radius(1px);
40 .box-shadow(0 1px 0 rgba(0,0,0,.25));
41 }
42 .btn-navbar .icon-bar + .icon-bar {
43 margin-top: 3px;
44 }
45 // Override the default collapsed state
46 .nav-collapse.collapse {
47 height: auto;
48 }
49
50
51 // Brand, links, text, and buttons
52 .navbar {
53 // Hover and active states
54 .brand:hover {
55 text-decoration: none;
56 }
57 // Website or project name
58 .brand {
59 float: left;
60 display: block;
61 padding: 8px 20px 12px;
62 margin-left: -20px; // negative indent to left-align the text down the page
63 font-size: 20px;
64 font-weight: 200;
65 line-height: 1;
66 color: @white;
67 }
68 // Plain text in topbar
69 .navbar-text {
70 margin-bottom: 0;
71 line-height: 40px;
72 color: @navbarText;
73 a:hover {
74 color: @white;
75 background-color: transparent;
76 }
77 }
78 // Buttons in navbar
79 .btn,
80 .btn-group {
81 margin-top: 5px; // make buttons vertically centered in navbar
82 }
83 .btn-group .btn {
84 margin-top: 0;
85 }
86 }
87
88 // Navbar forms
89 .navbar-form {
90 margin-bottom: 0; // remove default bottom margin
91 .clearfix();
92 input,
93 select {
94 display: inline-block;
95 margin-top: 5px;
96 margin-bottom: 0;
97 }
98 .radio,
99 .checkbox {
100 margin-top: 5px;
101 }
102 input[type="image"],
103 input[type="checkbox"],
104 input[type="radio"] {
105 margin-top: 3px;
106 }
107 }
108
109 // Navbar search
110 .navbar-search {
111 position: relative;
112 float: left;
113 margin-top: 6px;
114 margin-bottom: 0;
115 .search-query {
116 padding: 4px 9px;
117 #font > .sans-serif(13px, normal, 1);
118 color: @white;
119 color: rgba(255,255,255,.75);
120 background: #666;
121 background: rgba(255,255,255,.3);
122 border: 1px solid #111;
123 @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
124 .box-shadow(@shadow);
125 .transition(none);
126
127 // Placeholder text gets special styles; can't be bundled together though for some reason
128 .placeholder(@grayLighter);
129
130 // Hover states
131 &:hover {
132 color: @white;
133 background-color: @grayLight;
134 background-color: rgba(255,255,255,.5);
135 }
136 // Focus states (we use .focused since IE8 and down doesn't support :focus)
137 &:focus,
138 &.focused {
139 padding: 5px 10px;
140 color: @grayDark;
141 text-shadow: 0 1px 0 @white;
142 background-color: @white;
143 border: 0;
144 .box-shadow(0 0 3px rgba(0,0,0,.15));
145 outline: 0;
146 }
147 }
148 }
149
150
151 // FIXED NAVBAR
152 // ------------
153
154 .navbar-fixed-top {
155 position: fixed;
156 top: 0;
157 right: 0;
158 left: 0;
159 z-index: @zindexFixedNavbar;
160 }
161 .navbar-fixed-top .navbar-inner {
162 padding-left: 0;
163 padding-right: 0;
164 .border-radius(0);
165 }
166
167
168 // NAVIGATION
169 // ----------
170
171 .navbar .nav {
172 position: relative;
173 left: 0;
174 display: block;
175 float: left;
176 margin: 0 10px 0 0;
177 }
178 .navbar .nav.pull-right {
179 float: right; // redeclare due to specificity
180 }
181 .navbar .nav > li {
182 display: block;
183 float: left;
184 }
185
186 // Links
187 .navbar .nav > li > a {
188 float: none;
189 padding: 10px 10px 11px;
190 line-height: 19px;
191 color: @navbarLinkColor;
192 text-decoration: none;
193 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
194 }
195 // Hover
196 .navbar .nav > li > a:hover {
197 background-color: transparent;
198 color: @navbarLinkColorHover;
199 text-decoration: none;
200 }
201
202 // Active nav items
203 .navbar .nav .active > a,
204 .navbar .nav .active > a:hover {
205 color: @navbarLinkColorHover;
206 text-decoration: none;
207 background-color: @navbarBackground;
208 background-color: rgba(0,0,0,.5);
209 }
210
211 // Dividers (basically a vertical hr)
212 .navbar .divider-vertical {
213 height: @navbarHeight;
214 width: 1px;
215 margin: 0 9px;
216 overflow: hidden;
217 background-color: @navbarBackground;
218 border-right: 1px solid @navbarBackgroundHighlight;
219 }
220
221 // Secondary (floated right) nav in topbar
222 .navbar .nav.pull-right {
223 margin-left: 10px;
224 margin-right: 0;
225 }
226
227
228
229 // Dropdown menus
230 // --------------
231
232 // Menu position and menu carets
233 .navbar .dropdown-menu {
234 margin-top: 1px;
235 .border-radius(4px);
236 &:before {
237 content: '';
238 display: inline-block;
239 border-left: 7px solid transparent;
240 border-right: 7px solid transparent;
241 border-bottom: 7px solid #ccc;
242 border-bottom-color: rgba(0,0,0,.2);
243 position: absolute;
244 top: -7px;
245 left: 9px;
246 }
247 &:after {
248 content: '';
249 display: inline-block;
250 border-left: 6px solid transparent;
251 border-right: 6px solid transparent;
252 border-bottom: 6px solid @white;
253 position: absolute;
254 top: -6px;
255 left: 10px;
256 }
257 }
258
259 // Dropdown toggle caret
260 .navbar .nav .dropdown-toggle .caret,
261 .navbar .nav .open.dropdown .caret {
262 border-top-color: @white;
263 }
264 .navbar .nav .active .caret {
265 .opacity(100);
266 }
267
268 // Remove background color from open dropdown
269 .navbar .nav .open > .dropdown-toggle,
270 .navbar .nav .active > .dropdown-toggle,
271 .navbar .nav .open.active > .dropdown-toggle {
272 background-color: transparent;
273 }
274
275 // Dropdown link on hover
276 .navbar .nav .active > .dropdown-toggle:hover {
277 color: @white;
278 }
279
280 // Right aligned menus need alt position
281 .navbar .nav.pull-right .dropdown-menu {
282 left: auto;
283 right: 0;
284 &:before {
285 left: auto;
286 right: 12px;
287 }
288 &:after {
289 left: auto;
290 right: 13px;
291 }
292 }
Something went wrong with that request. Please try again.