← Back to branch summary

~ubuntu-branches/ubuntu/utopic/horizon/utopic

« back to all changes in this revision

Viewing changes to openstack_dashboard/static/bootstrap/less/navs.less

  • Committer: Package Import Robot
  • Author(s): Chuck Short
  • Date: 2014-07-25 11:39:09 UTC
  • mfrom: (1.1.42)
  • Revision ID: package-import@ubuntu.com-20140725113909-b8920pdy87itn1ro
Tags: 1:2014.2~b2-0ubuntu1
* New upstream release.
* debian/patches/ubuntu_settings.patch: Refresed
* debian/patches/fix-dashboard-manage.patch: Refreshed
* debian/patches/fix-dashboard-django-wsgi.patch: Refreshed

Show diffs side-by-side

added added

removed removed

Lines of Context:
openstack_dashboard/static/bootstrap/less/navs.less
1
 
// NAVIGATIONS
2
 
// -----------
3
 
 
4
 
 
5
 
 
6
 
// BASE CLASS
7
 
// ----------
8
 
 
9
 
.nav {
10
 
  margin-left: 0;
11
 
  margin-bottom: @baseLineHeight;
12
 
  list-style: none;
13
 
}
14
 
 
15
 
// Make links block level
16
 
.nav > li > a {
17
 
  display: block;
18
 
}
19
 
.nav > li > a:hover {
20
 
  text-decoration: none;
21
 
  background-color: @grayLighter;
22
 
}
23
 
 
24
 
// Nav headers (for dropdowns and lists)
25
 
.nav .nav-header {
26
 
  display: block;
27
 
  padding: 3px 15px;
28
 
  font-size: 11px;
29
 
  font-weight: bold;
30
 
  line-height: @baseLineHeight;
31
 
  color: @grayLight;
32
 
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
33
 
  text-transform: uppercase;
34
 
}
35
 
// Space them out when they follow another list item (link)
36
 
.nav li + .nav-header {
37
 
  margin-top: 9px;
38
 
}
39
 
 
40
 
 
41
 
// NAV LIST
42
 
// --------
43
 
 
44
 
.nav-list {
45
 
  padding-left: 14px;
46
 
  padding-right: 14px;
47
 
  margin-bottom: 0;
48
 
}
49
 
.nav-list > li > a,
50
 
.nav-list .nav-header {
51
 
  margin-left:  -15px;
52
 
  margin-right: -15px;
53
 
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
54
 
}
55
 
.nav-list > li > a {
56
 
  padding: 3px 15px;
57
 
}
58
 
.nav-list .active > a,
59
 
.nav-list .active > a:hover {
60
 
  color: @white;
61
 
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
62
 
  background-color: @linkColor;
63
 
}
64
 
.nav-list [class^="icon-"] {
65
 
  margin-right: 2px;
66
 
}
67
 
 
68
 
 
69
 
 
70
 
// TABS AND PILLS
71
 
// -------------
72
 
 
73
 
// Common styles
74
 
.nav-tabs,
75
 
.nav-pills {
76
 
  .clearfix();
77
 
}
78
 
.nav-tabs > li,
79
 
.nav-pills > li {
80
 
  float: left;
81
 
}
82
 
.nav-tabs > li > a,
83
 
.nav-pills > li > a {
84
 
  padding-right: 12px;
85
 
  padding-left: 12px;
86
 
  margin-right: 2px;
87
 
  line-height: 14px; // keeps the overall height an even number
88
 
}
89
 
 
90
 
// TABS
91
 
// ----
92
 
 
93
 
// Give the tabs something to sit on
94
 
.nav-tabs {
95
 
  border-bottom: 1px solid #ddd;
96
 
}
97
 
 
98
 
// Make the list-items overlay the bottom border
99
 
.nav-tabs > li {
100
 
  margin-bottom: -1px;
101
 
}
102
 
 
103
 
// Actual tabs (as links)
104
 
.nav-tabs > li > a {
105
 
  padding-top: 9px;
106
 
  padding-bottom: 9px;
107
 
  border: 1px solid transparent;
108
 
  .border-radius(4px 4px 0 0);
109
 
  &:hover {
110
 
    border-color: @grayLighter @grayLighter #ddd;
111
 
  }
112
 
}
113
 
// Active state, and it's :hover to override normal :hover
114
 
.nav-tabs > .active > a,
115
 
.nav-tabs > .active > a:hover {
116
 
  color: @gray;
117
 
  background-color: @white;
118
 
  border: 1px solid #ddd;
119
 
  border-bottom-color: transparent;
120
 
  cursor: default;
121
 
}
122
 
 
123
 
// PILLS
124
 
// -----
125
 
 
126
 
// Links rendered as pills
127
 
.nav-pills > li > a {
128
 
  padding-top: 8px;
129
 
  padding-bottom: 8px;
130
 
  margin-top: 2px;
131
 
  margin-bottom: 2px;
132
 
  .border-radius(5px);
133
 
}
134
 
 
135
 
// Active state
136
 
.nav-pills .active > a,
137
 
.nav-pills .active > a:hover {
138
 
  color: @white;
139
 
  background-color: @linkColor;
140
 
}
141
 
 
142
 
 
143
 
 
144
 
// STACKED NAV
145
 
// -----------
146
 
 
147
 
// Stacked tabs and pills
148
 
.nav-stacked > li {
149
 
  float: none;
150
 
}
151
 
.nav-stacked > li > a {
152
 
  margin-right: 0; // no need for the gap between nav items
153
 
}
154
 
 
155
 
// Tabs
156
 
.nav-tabs.nav-stacked {
157
 
  border-bottom: 0;
158
 
}
159
 
.nav-tabs.nav-stacked > li > a {
160
 
  border: 1px solid #ddd;
161
 
  .border-radius(0);
162
 
}
163
 
.nav-tabs.nav-stacked > li:first-child > a {
164
 
  .border-radius(4px 4px 0 0);
165
 
}
166
 
.nav-tabs.nav-stacked > li:last-child > a {
167
 
  .border-radius(0 0 4px 4px);
168
 
}
169
 
.nav-tabs.nav-stacked > li > a:hover {
170
 
  border-color: #ddd;
171
 
  z-index: 2;
172
 
}
173
 
 
174
 
// Pills
175
 
.nav-pills.nav-stacked > li > a {
176
 
  margin-bottom: 3px;
177
 
}
178
 
.nav-pills.nav-stacked > li:last-child > a {
179
 
  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
180
 
}
181
 
 
182
 
 
183
 
 
184
 
// DROPDOWNS
185
 
// ---------
186
 
 
187
 
// Position the menu
188
 
.nav-tabs .dropdown-menu,
189
 
.nav-pills .dropdown-menu {
190
 
  margin-top: 1px;
191
 
  border-width: 1px;
192
 
}
193
 
.nav-pills .dropdown-menu {
194
 
  .border-radius(4px);
195
 
}
196
 
 
197
 
// Default dropdown links
198
 
// -------------------------
199
 
// Make carets use linkColor to start
200
 
.nav-tabs .dropdown-toggle .caret,
201
 
.nav-pills .dropdown-toggle .caret {
202
 
  border-top-color: @linkColor;
203
 
  margin-top: 6px;
204
 
}
205
 
.nav-tabs .dropdown-toggle:hover .caret,
206
 
.nav-pills .dropdown-toggle:hover .caret {
207
 
  border-top-color: @linkColorHover;
208
 
}
209
 
 
210
 
// Active dropdown links
211
 
// -------------------------
212
 
.nav-tabs .active .dropdown-toggle .caret,
213
 
.nav-pills .active .dropdown-toggle .caret {
214
 
  border-top-color: @grayDark;
215
 
}
216
 
 
217
 
// Active:hover dropdown links
218
 
// -------------------------
219
 
.nav > .dropdown.active > a:hover {
220
 
  color: @black;
221
 
  cursor: pointer;
222
 
}
223
 
 
224
 
// Open dropdowns
225
 
// -------------------------
226
 
.nav-tabs .open .dropdown-toggle,
227
 
.nav-pills .open .dropdown-toggle,
228
 
.nav > .open.active > a:hover {
229
 
  color: @white;
230
 
  background-color: @grayLight;
231
 
  border-color: @grayLight;
232
 
}
233
 
.nav .open .caret,
234
 
.nav .open.active .caret,
235
 
.nav .open a:hover .caret {
236
 
  border-top-color: @white;
237
 
  .opacity(100);
238
 
}
239
 
 
240
 
// Dropdowns in stacked tabs
241
 
.tabs-stacked .open > a:hover {
242
 
  border-color: @grayLight;
243
 
}
244
 
 
245
 
 
246
 
 
247
 
// TABBABLE
248
 
// --------
249
 
 
250
 
 
251
 
// COMMON STYLES
252
 
// -------------
253
 
 
254
 
// Clear any floats
255
 
.tabbable {
256
 
  .clearfix();
257
 
}
258
 
.tab-content {
259
 
  overflow: hidden; // prevent content from running below tabs
260
 
}
261
 
 
262
 
// Remove border on bottom, left, right
263
 
.tabs-below .nav-tabs,
264
 
.tabs-right .nav-tabs,
265
 
.tabs-left .nav-tabs {
266
 
  border-bottom: 0;
267
 
}
268
 
 
269
 
// Show/hide tabbable areas
270
 
.tab-content > .tab-pane,
271
 
.pill-content > .pill-pane {
272
 
  display: none;
273
 
}
274
 
.tab-content > .active,
275
 
.pill-content > .active {
276
 
  display: block;
277
 
}
278
 
 
279
 
 
280
 
// BOTTOM
281
 
// ------
282
 
 
283
 
.tabs-below .nav-tabs {
284
 
  border-top: 1px solid #ddd;
285
 
}
286
 
.tabs-below .nav-tabs > li {
287
 
  margin-top: -1px;
288
 
  margin-bottom: 0;
289
 
}
290
 
.tabs-below .nav-tabs > li > a {
291
 
  .border-radius(0 0 4px 4px);
292
 
  &:hover {
293
 
    border-bottom-color: transparent;
294
 
    border-top-color: #ddd;
295
 
  }
296
 
}
297
 
.tabs-below .nav-tabs .active > a,
298
 
.tabs-below .nav-tabs .active > a:hover {
299
 
  border-color: transparent #ddd #ddd #ddd;
300
 
}
301
 
 
302
 
// LEFT & RIGHT
303
 
// ------------
304
 
 
305
 
// Common styles
306
 
.tabs-left .nav-tabs > li,
307
 
.tabs-right .nav-tabs > li {
308
 
  float: none;
309
 
}
310
 
.tabs-left .nav-tabs > li > a,
311
 
.tabs-right .nav-tabs > li > a {
312
 
  min-width: 74px;
313
 
  margin-right: 0;
314
 
  margin-bottom: 3px;
315
 
}
316
 
 
317
 
// Tabs on the left
318
 
.tabs-left .nav-tabs {
319
 
  float: left;
320
 
  margin-right: 19px;
321
 
  border-right: 1px solid #ddd;
322
 
}
323
 
.tabs-left .nav-tabs > li > a {
324
 
  margin-right: -1px;
325
 
  .border-radius(4px 0 0 4px);
326
 
}
327
 
.tabs-left .nav-tabs > li > a:hover {
328
 
  border-color: @grayLighter #ddd @grayLighter @grayLighter;
329
 
}
330
 
.tabs-left .nav-tabs .active > a,
331
 
.tabs-left .nav-tabs .active > a:hover {
332
 
  border-color: #ddd transparent #ddd #ddd;
333
 
  *border-right-color: @white;
334
 
}
335
 
 
336
 
// Tabs on the right
337
 
.tabs-right .nav-tabs {
338
 
  float: right;
339
 
  margin-left: 19px;
340
 
  border-left: 1px solid #ddd;
341
 
}
342
 
.tabs-right .nav-tabs > li > a {
343
 
  margin-left: -1px;
344
 
  .border-radius(0 4px 4px 0);
345
 
}
346
 
.tabs-right .nav-tabs > li > a:hover {
347
 
  border-color: @grayLighter @grayLighter @grayLighter #ddd;
348
 
}
349
 
.tabs-right .nav-tabs .active > a,
350
 
.tabs-right .nav-tabs .active > a:hover {
351
 
  border-color: #ddd #ddd #ddd transparent;
352
 
  *border-left-color: @white;
353
 
}