mod_auth_openid_loginpage 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/public/css/bootstrap-responsive.css +815 -0
- data/public/css/bootstrap-responsive.min.css +9 -0
- data/public/css/bootstrap.css +4983 -0
- data/public/css/bootstrap.min.css +9 -0
- data/public/img/glyphicons-halflings-white.png +0 -0
- data/public/img/glyphicons-halflings.png +0 -0
- data/public/js/bootstrap-alert.js +90 -0
- data/public/js/bootstrap-button.js +96 -0
- data/public/js/bootstrap-carousel.js +169 -0
- data/public/js/bootstrap-collapse.js +157 -0
- data/public/js/bootstrap-dropdown.js +100 -0
- data/public/js/bootstrap-modal.js +218 -0
- data/public/js/bootstrap-popover.js +98 -0
- data/public/js/bootstrap-scrollspy.js +151 -0
- data/public/js/bootstrap-tab.js +135 -0
- data/public/js/bootstrap-tooltip.js +275 -0
- data/public/js/bootstrap-transition.js +61 -0
- data/public/js/bootstrap-typeahead.js +285 -0
- data/public/js/bootstrap.js +1825 -0
- data/public/js/bootstrap.min.js +6 -0
- data/public/js/jquery.js +9252 -0
- data/public/js/jquery.tablesorter.min.js +4 -0
- data/public/js/less-1.3.0.min.js +9 -0
- data/public/less/accordion.less +33 -0
- data/public/less/alerts.less +58 -0
- data/public/less/bootstrap.less +62 -0
- data/public/less/breadcrumbs.less +24 -0
- data/public/less/button-groups.less +191 -0
- data/public/less/buttons.less +191 -0
- data/public/less/carousel.less +121 -0
- data/public/less/close.less +29 -0
- data/public/less/code.less +57 -0
- data/public/less/component-animations.less +20 -0
- data/public/less/dropdowns.less +143 -0
- data/public/less/forms.less +583 -0
- data/public/less/grid.less +5 -0
- data/public/less/hero-unit.less +22 -0
- data/public/less/labels-badges.less +55 -0
- data/public/less/layouts.less +17 -0
- data/public/less/mixins.less +646 -0
- data/public/less/modals.less +90 -0
- data/public/less/navbar.less +358 -0
- data/public/less/navs.less +363 -0
- data/public/less/pager.less +36 -0
- data/public/less/pagination.less +56 -0
- data/public/less/popovers.less +49 -0
- data/public/less/progress-bars.less +117 -0
- data/public/less/reset.less +131 -0
- data/public/less/responsive-1200px-min.less +26 -0
- data/public/less/responsive-767px-max.less +149 -0
- data/public/less/responsive-768px-979px.less +17 -0
- data/public/less/responsive-navbar.less +153 -0
- data/public/less/responsive-utilities.less +41 -0
- data/public/less/responsive.less +48 -0
- data/public/less/scaffolding.less +29 -0
- data/public/less/sprites.less +191 -0
- data/public/less/tables.less +176 -0
- data/public/less/tests/css-tests.css +52 -0
- data/public/less/tests/css-tests.html +917 -0
- data/public/less/tests/forms.html +179 -0
- data/public/less/tests/navbar.html +108 -0
- data/public/less/thumbnails.less +47 -0
- data/public/less/tooltip.less +35 -0
- data/public/less/type.less +232 -0
- data/public/less/utilities.less +23 -0
- data/public/less/variables.less +206 -0
- data/public/less/wells.less +27 -0
- data/views/layout.erb +61 -0
- data/views/login_page.erb +9 -0
- metadata +190 -0
@@ -0,0 +1,90 @@
|
|
1
|
+
// MODALS
|
2
|
+
// ------
|
3
|
+
|
4
|
+
// Recalculate z-index where appropriate
|
5
|
+
.modal-open {
|
6
|
+
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
|
7
|
+
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
|
8
|
+
.popover { z-index: @zindexPopover + @zindexModal; }
|
9
|
+
.tooltip { z-index: @zindexTooltip + @zindexModal; }
|
10
|
+
}
|
11
|
+
|
12
|
+
// Background
|
13
|
+
.modal-backdrop {
|
14
|
+
position: fixed;
|
15
|
+
top: 0;
|
16
|
+
right: 0;
|
17
|
+
bottom: 0;
|
18
|
+
left: 0;
|
19
|
+
z-index: @zindexModalBackdrop;
|
20
|
+
background-color: @black;
|
21
|
+
// Fade for backdrop
|
22
|
+
&.fade { opacity: 0; }
|
23
|
+
}
|
24
|
+
|
25
|
+
.modal-backdrop,
|
26
|
+
.modal-backdrop.fade.in {
|
27
|
+
.opacity(80);
|
28
|
+
}
|
29
|
+
|
30
|
+
// Base modal
|
31
|
+
.modal {
|
32
|
+
position: fixed;
|
33
|
+
top: 50%;
|
34
|
+
left: 50%;
|
35
|
+
z-index: @zindexModal;
|
36
|
+
overflow: auto;
|
37
|
+
width: 560px;
|
38
|
+
margin: -250px 0 0 -280px;
|
39
|
+
background-color: @white;
|
40
|
+
border: 1px solid #999;
|
41
|
+
border: 1px solid rgba(0,0,0,.3);
|
42
|
+
*border: 1px solid #999; /* IE6-7 */
|
43
|
+
.border-radius(6px);
|
44
|
+
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
45
|
+
.background-clip(padding-box);
|
46
|
+
&.fade {
|
47
|
+
.transition(e('opacity .3s linear, top .3s ease-out'));
|
48
|
+
top: -25%;
|
49
|
+
}
|
50
|
+
&.fade.in { top: 50%; }
|
51
|
+
}
|
52
|
+
.modal-header {
|
53
|
+
padding: 9px 15px;
|
54
|
+
border-bottom: 1px solid #eee;
|
55
|
+
// Close icon
|
56
|
+
.close { margin-top: 2px; }
|
57
|
+
}
|
58
|
+
|
59
|
+
// Body (where all modal content resides)
|
60
|
+
.modal-body {
|
61
|
+
overflow-y: auto;
|
62
|
+
max-height: 400px;
|
63
|
+
padding: 15px;
|
64
|
+
}
|
65
|
+
// Remove bottom margin if need be
|
66
|
+
.modal-form {
|
67
|
+
margin-bottom: 0;
|
68
|
+
}
|
69
|
+
|
70
|
+
// Footer (for actions)
|
71
|
+
.modal-footer {
|
72
|
+
padding: 14px 15px 15px;
|
73
|
+
margin-bottom: 0;
|
74
|
+
text-align: right; // right align buttons
|
75
|
+
background-color: #f5f5f5;
|
76
|
+
border-top: 1px solid #ddd;
|
77
|
+
.border-radius(0 0 6px 6px);
|
78
|
+
.box-shadow(inset 0 1px 0 @white);
|
79
|
+
.clearfix(); // clear it in case folks use .pull-* classes on buttons
|
80
|
+
|
81
|
+
// Properly space out buttons
|
82
|
+
.btn + .btn {
|
83
|
+
margin-left: 5px;
|
84
|
+
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
|
85
|
+
}
|
86
|
+
// but override that for button groups
|
87
|
+
.btn-group .btn + .btn {
|
88
|
+
margin-left: -1px;
|
89
|
+
}
|
90
|
+
}
|
@@ -0,0 +1,358 @@
|
|
1
|
+
// NAVBAR (FIXED AND STATIC)
|
2
|
+
// -------------------------
|
3
|
+
|
4
|
+
|
5
|
+
// COMMON STYLES
|
6
|
+
// -------------
|
7
|
+
|
8
|
+
.navbar {
|
9
|
+
// Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
|
10
|
+
*position: relative;
|
11
|
+
*z-index: 2;
|
12
|
+
|
13
|
+
overflow: visible;
|
14
|
+
margin-bottom: @baseLineHeight;
|
15
|
+
}
|
16
|
+
|
17
|
+
// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
|
18
|
+
.navbar-inner {
|
19
|
+
min-height: @navbarHeight;
|
20
|
+
padding-left: 20px;
|
21
|
+
padding-right: 20px;
|
22
|
+
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
|
23
|
+
.border-radius(4px);
|
24
|
+
.box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
|
25
|
+
}
|
26
|
+
|
27
|
+
// Set width to auto for default container
|
28
|
+
// We then reset it for fixed navbars in the #gridSystem mixin
|
29
|
+
.navbar .container {
|
30
|
+
width: auto;
|
31
|
+
}
|
32
|
+
|
33
|
+
// Override the default collapsed state
|
34
|
+
.nav-collapse.collapse {
|
35
|
+
height: auto;
|
36
|
+
}
|
37
|
+
|
38
|
+
|
39
|
+
// Brand, links, text, and buttons
|
40
|
+
.navbar {
|
41
|
+
color: @navbarText;
|
42
|
+
// Hover and active states
|
43
|
+
.brand:hover {
|
44
|
+
text-decoration: none;
|
45
|
+
}
|
46
|
+
// Website or project name
|
47
|
+
.brand {
|
48
|
+
float: left;
|
49
|
+
display: block;
|
50
|
+
// Vertically center the text given @navbarHeight
|
51
|
+
@elementHeight: 20px;
|
52
|
+
padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
|
53
|
+
margin-left: -20px; // negative indent to left-align the text down the page
|
54
|
+
font-size: 20px;
|
55
|
+
font-weight: 200;
|
56
|
+
line-height: 1;
|
57
|
+
color: @navbarBrandColor;
|
58
|
+
}
|
59
|
+
// Plain text in topbar
|
60
|
+
.navbar-text {
|
61
|
+
margin-bottom: 0;
|
62
|
+
line-height: @navbarHeight;
|
63
|
+
}
|
64
|
+
// Janky solution for now to account for links outside the .nav
|
65
|
+
.navbar-link {
|
66
|
+
color: @navbarLinkColor;
|
67
|
+
&:hover {
|
68
|
+
color: @navbarLinkColorHover;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
// Buttons in navbar
|
72
|
+
.btn,
|
73
|
+
.btn-group {
|
74
|
+
.navbarVerticalAlign(30px); // Vertically center in navbar
|
75
|
+
}
|
76
|
+
.btn-group .btn {
|
77
|
+
margin: 0; // then undo the margin here so we don't accidentally double it
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
// Navbar forms
|
82
|
+
.navbar-form {
|
83
|
+
margin-bottom: 0; // remove default bottom margin
|
84
|
+
.clearfix();
|
85
|
+
input,
|
86
|
+
select,
|
87
|
+
.radio,
|
88
|
+
.checkbox {
|
89
|
+
.navbarVerticalAlign(30px); // Vertically center in navbar
|
90
|
+
}
|
91
|
+
input,
|
92
|
+
select {
|
93
|
+
display: inline-block;
|
94
|
+
margin-bottom: 0;
|
95
|
+
}
|
96
|
+
input[type="image"],
|
97
|
+
input[type="checkbox"],
|
98
|
+
input[type="radio"] {
|
99
|
+
margin-top: 3px;
|
100
|
+
}
|
101
|
+
.input-append,
|
102
|
+
.input-prepend {
|
103
|
+
margin-top: 6px;
|
104
|
+
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
|
105
|
+
input {
|
106
|
+
margin-top: 0; // remove the margin on top since it's on the parent
|
107
|
+
}
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
// Navbar search
|
112
|
+
.navbar-search {
|
113
|
+
position: relative;
|
114
|
+
float: left;
|
115
|
+
.navbarVerticalAlign(28px); // Vertically center in navbar
|
116
|
+
margin-bottom: 0;
|
117
|
+
.search-query {
|
118
|
+
padding: 4px 9px;
|
119
|
+
#font > .sans-serif(13px, normal, 1);
|
120
|
+
color: @white;
|
121
|
+
background-color: @navbarSearchBackground;
|
122
|
+
border: 1px solid @navbarSearchBorder;
|
123
|
+
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
|
124
|
+
.transition(none);
|
125
|
+
|
126
|
+
.placeholder(@navbarSearchPlaceholderColor);
|
127
|
+
|
128
|
+
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
|
129
|
+
&:focus,
|
130
|
+
&.focused {
|
131
|
+
padding: 5px 10px;
|
132
|
+
color: @grayDark;
|
133
|
+
text-shadow: 0 1px 0 @white;
|
134
|
+
background-color: @navbarSearchBackgroundFocus;
|
135
|
+
border: 0;
|
136
|
+
.box-shadow(0 0 3px rgba(0,0,0,.15));
|
137
|
+
outline: 0;
|
138
|
+
}
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
142
|
+
|
143
|
+
|
144
|
+
// FIXED NAVBAR
|
145
|
+
// ------------
|
146
|
+
|
147
|
+
// Shared (top/bottom) styles
|
148
|
+
.navbar-fixed-top,
|
149
|
+
.navbar-fixed-bottom {
|
150
|
+
position: fixed;
|
151
|
+
right: 0;
|
152
|
+
left: 0;
|
153
|
+
z-index: @zindexFixedNavbar;
|
154
|
+
margin-bottom: 0; // remove 18px margin for static navbar
|
155
|
+
}
|
156
|
+
.navbar-fixed-top .navbar-inner,
|
157
|
+
.navbar-fixed-bottom .navbar-inner {
|
158
|
+
padding-left: 0;
|
159
|
+
padding-right: 0;
|
160
|
+
.border-radius(0);
|
161
|
+
}
|
162
|
+
|
163
|
+
.navbar-fixed-top .container,
|
164
|
+
.navbar-fixed-bottom .container {
|
165
|
+
#grid > .core > .span(@gridColumns);
|
166
|
+
}
|
167
|
+
|
168
|
+
// Fixed to top
|
169
|
+
.navbar-fixed-top {
|
170
|
+
top: 0;
|
171
|
+
}
|
172
|
+
|
173
|
+
// Fixed to bottom
|
174
|
+
.navbar-fixed-bottom {
|
175
|
+
bottom: 0;
|
176
|
+
}
|
177
|
+
|
178
|
+
|
179
|
+
|
180
|
+
// NAVIGATION
|
181
|
+
// ----------
|
182
|
+
|
183
|
+
.navbar .nav {
|
184
|
+
position: relative;
|
185
|
+
left: 0;
|
186
|
+
display: block;
|
187
|
+
float: left;
|
188
|
+
margin: 0 10px 0 0;
|
189
|
+
}
|
190
|
+
.navbar .nav.pull-right {
|
191
|
+
float: right; // redeclare due to specificity
|
192
|
+
}
|
193
|
+
.navbar .nav > li {
|
194
|
+
display: block;
|
195
|
+
float: left;
|
196
|
+
}
|
197
|
+
|
198
|
+
// Links
|
199
|
+
.navbar .nav > li > a {
|
200
|
+
float: none;
|
201
|
+
// Vertically center the text given @navbarHeight
|
202
|
+
@elementHeight: 20px;
|
203
|
+
padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
|
204
|
+
line-height: 19px;
|
205
|
+
color: @navbarLinkColor;
|
206
|
+
text-decoration: none;
|
207
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
208
|
+
}
|
209
|
+
// Buttons
|
210
|
+
.navbar .btn {
|
211
|
+
display: inline-block;
|
212
|
+
padding: 4px 10px 4px;
|
213
|
+
// Vertically center the button given @navbarHeight
|
214
|
+
@elementHeight: 28px;
|
215
|
+
margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
|
216
|
+
line-height: @baseLineHeight;
|
217
|
+
}
|
218
|
+
.navbar .btn-group {
|
219
|
+
margin: 0;
|
220
|
+
// Vertically center the button given @navbarHeight
|
221
|
+
@elementHeight: 28px;
|
222
|
+
padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
|
223
|
+
}
|
224
|
+
// Hover
|
225
|
+
.navbar .nav > li > a:hover {
|
226
|
+
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
|
227
|
+
color: @navbarLinkColorHover;
|
228
|
+
text-decoration: none;
|
229
|
+
}
|
230
|
+
|
231
|
+
// Active nav items
|
232
|
+
.navbar .nav .active > a,
|
233
|
+
.navbar .nav .active > a:hover {
|
234
|
+
color: @navbarLinkColorActive;
|
235
|
+
text-decoration: none;
|
236
|
+
background-color: @navbarLinkBackgroundActive;
|
237
|
+
}
|
238
|
+
|
239
|
+
// Dividers (basically a vertical hr)
|
240
|
+
.navbar .divider-vertical {
|
241
|
+
height: @navbarHeight;
|
242
|
+
width: 1px;
|
243
|
+
margin: 0 9px;
|
244
|
+
overflow: hidden;
|
245
|
+
background-color: @navbarBackground;
|
246
|
+
border-right: 1px solid @navbarBackgroundHighlight;
|
247
|
+
}
|
248
|
+
|
249
|
+
// Secondary (floated right) nav in topbar
|
250
|
+
.navbar .nav.pull-right {
|
251
|
+
margin-left: 10px;
|
252
|
+
margin-right: 0;
|
253
|
+
}
|
254
|
+
|
255
|
+
// Navbar button for toggling navbar items in responsive layouts
|
256
|
+
// These definitions need to come after '.navbar .btn'
|
257
|
+
.navbar .btn-navbar {
|
258
|
+
display: none;
|
259
|
+
float: right;
|
260
|
+
padding: 7px 10px;
|
261
|
+
margin-left: 5px;
|
262
|
+
margin-right: 5px;
|
263
|
+
.buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
|
264
|
+
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
|
265
|
+
}
|
266
|
+
.navbar .btn-navbar .icon-bar {
|
267
|
+
display: block;
|
268
|
+
width: 18px;
|
269
|
+
height: 2px;
|
270
|
+
background-color: #f5f5f5;
|
271
|
+
.border-radius(1px);
|
272
|
+
.box-shadow(0 1px 0 rgba(0,0,0,.25));
|
273
|
+
}
|
274
|
+
.btn-navbar .icon-bar + .icon-bar {
|
275
|
+
margin-top: 3px;
|
276
|
+
}
|
277
|
+
|
278
|
+
|
279
|
+
// Dropdown menus
|
280
|
+
// --------------
|
281
|
+
|
282
|
+
// Menu position and menu carets
|
283
|
+
.navbar .dropdown-menu {
|
284
|
+
&:before {
|
285
|
+
content: '';
|
286
|
+
display: inline-block;
|
287
|
+
border-left: 7px solid transparent;
|
288
|
+
border-right: 7px solid transparent;
|
289
|
+
border-bottom: 7px solid #ccc;
|
290
|
+
border-bottom-color: @dropdownBorder;
|
291
|
+
position: absolute;
|
292
|
+
top: -7px;
|
293
|
+
left: 9px;
|
294
|
+
}
|
295
|
+
&:after {
|
296
|
+
content: '';
|
297
|
+
display: inline-block;
|
298
|
+
border-left: 6px solid transparent;
|
299
|
+
border-right: 6px solid transparent;
|
300
|
+
border-bottom: 6px solid @dropdownBackground;
|
301
|
+
position: absolute;
|
302
|
+
top: -6px;
|
303
|
+
left: 10px;
|
304
|
+
}
|
305
|
+
}
|
306
|
+
// Menu position and menu caret support for dropups via extra dropup class
|
307
|
+
.navbar-fixed-bottom .dropdown-menu {
|
308
|
+
&:before {
|
309
|
+
border-top: 7px solid #ccc;
|
310
|
+
border-top-color: @dropdownBorder;
|
311
|
+
border-bottom: 0;
|
312
|
+
bottom: -7px;
|
313
|
+
top: auto;
|
314
|
+
}
|
315
|
+
&:after {
|
316
|
+
border-top: 6px solid @dropdownBackground;
|
317
|
+
border-bottom: 0;
|
318
|
+
bottom: -6px;
|
319
|
+
top: auto;
|
320
|
+
}
|
321
|
+
}
|
322
|
+
// Dropdown toggle caret
|
323
|
+
.navbar .nav li.dropdown .dropdown-toggle .caret,
|
324
|
+
.navbar .nav li.dropdown.open .caret {
|
325
|
+
border-top-color: @white;
|
326
|
+
border-bottom-color: @white;
|
327
|
+
}
|
328
|
+
.navbar .nav li.dropdown.active .caret {
|
329
|
+
.opacity(100);
|
330
|
+
}
|
331
|
+
|
332
|
+
// Remove background color from open dropdown
|
333
|
+
.navbar .nav li.dropdown.open > .dropdown-toggle,
|
334
|
+
.navbar .nav li.dropdown.active > .dropdown-toggle,
|
335
|
+
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
336
|
+
background-color: transparent;
|
337
|
+
}
|
338
|
+
|
339
|
+
// Dropdown link on hover
|
340
|
+
.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
|
341
|
+
color: @white;
|
342
|
+
}
|
343
|
+
|
344
|
+
// Right aligned menus need alt position
|
345
|
+
// TODO: rejigger this at some point to simplify the selectors
|
346
|
+
.navbar .pull-right .dropdown-menu,
|
347
|
+
.navbar .dropdown-menu.pull-right {
|
348
|
+
left: auto;
|
349
|
+
right: 0;
|
350
|
+
&:before {
|
351
|
+
left: auto;
|
352
|
+
right: 12px;
|
353
|
+
}
|
354
|
+
&:after {
|
355
|
+
left: auto;
|
356
|
+
right: 13px;
|
357
|
+
}
|
358
|
+
}
|
@@ -0,0 +1,363 @@
|
|
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
|
+
// Redeclare pull classes because of specifity
|
25
|
+
.nav > .pull-right {
|
26
|
+
float: right;
|
27
|
+
}
|
28
|
+
|
29
|
+
// Nav headers (for dropdowns and lists)
|
30
|
+
.nav .nav-header {
|
31
|
+
display: block;
|
32
|
+
padding: 3px 15px;
|
33
|
+
font-size: 11px;
|
34
|
+
font-weight: bold;
|
35
|
+
line-height: @baseLineHeight;
|
36
|
+
color: @grayLight;
|
37
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
38
|
+
text-transform: uppercase;
|
39
|
+
}
|
40
|
+
// Space them out when they follow another list item (link)
|
41
|
+
.nav li + .nav-header {
|
42
|
+
margin-top: 9px;
|
43
|
+
}
|
44
|
+
|
45
|
+
|
46
|
+
// NAV LIST
|
47
|
+
// --------
|
48
|
+
|
49
|
+
.nav-list {
|
50
|
+
padding-left: 15px;
|
51
|
+
padding-right: 15px;
|
52
|
+
margin-bottom: 0;
|
53
|
+
}
|
54
|
+
.nav-list > li > a,
|
55
|
+
.nav-list .nav-header {
|
56
|
+
margin-left: -15px;
|
57
|
+
margin-right: -15px;
|
58
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
59
|
+
}
|
60
|
+
.nav-list > li > a {
|
61
|
+
padding: 3px 15px;
|
62
|
+
}
|
63
|
+
.nav-list > .active > a,
|
64
|
+
.nav-list > .active > a:hover {
|
65
|
+
color: @white;
|
66
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
67
|
+
background-color: @linkColor;
|
68
|
+
}
|
69
|
+
.nav-list [class^="icon-"] {
|
70
|
+
margin-right: 2px;
|
71
|
+
}
|
72
|
+
// Dividers (basically an hr) within the dropdown
|
73
|
+
.nav-list .divider {
|
74
|
+
.nav-divider();
|
75
|
+
}
|
76
|
+
|
77
|
+
|
78
|
+
|
79
|
+
// TABS AND PILLS
|
80
|
+
// -------------
|
81
|
+
|
82
|
+
// Common styles
|
83
|
+
.nav-tabs,
|
84
|
+
.nav-pills {
|
85
|
+
.clearfix();
|
86
|
+
}
|
87
|
+
.nav-tabs > li,
|
88
|
+
.nav-pills > li {
|
89
|
+
float: left;
|
90
|
+
}
|
91
|
+
.nav-tabs > li > a,
|
92
|
+
.nav-pills > li > a {
|
93
|
+
padding-right: 12px;
|
94
|
+
padding-left: 12px;
|
95
|
+
margin-right: 2px;
|
96
|
+
line-height: 14px; // keeps the overall height an even number
|
97
|
+
}
|
98
|
+
|
99
|
+
// TABS
|
100
|
+
// ----
|
101
|
+
|
102
|
+
// Give the tabs something to sit on
|
103
|
+
.nav-tabs {
|
104
|
+
border-bottom: 1px solid #ddd;
|
105
|
+
}
|
106
|
+
// Make the list-items overlay the bottom border
|
107
|
+
.nav-tabs > li {
|
108
|
+
margin-bottom: -1px;
|
109
|
+
}
|
110
|
+
// Actual tabs (as links)
|
111
|
+
.nav-tabs > li > a {
|
112
|
+
padding-top: 8px;
|
113
|
+
padding-bottom: 8px;
|
114
|
+
line-height: @baseLineHeight;
|
115
|
+
border: 1px solid transparent;
|
116
|
+
.border-radius(4px 4px 0 0);
|
117
|
+
&:hover {
|
118
|
+
border-color: @grayLighter @grayLighter #ddd;
|
119
|
+
}
|
120
|
+
}
|
121
|
+
// Active state, and it's :hover to override normal :hover
|
122
|
+
.nav-tabs > .active > a,
|
123
|
+
.nav-tabs > .active > a:hover {
|
124
|
+
color: @gray;
|
125
|
+
background-color: @white;
|
126
|
+
border: 1px solid #ddd;
|
127
|
+
border-bottom-color: transparent;
|
128
|
+
cursor: default;
|
129
|
+
}
|
130
|
+
|
131
|
+
|
132
|
+
// PILLS
|
133
|
+
// -----
|
134
|
+
|
135
|
+
// Links rendered as pills
|
136
|
+
.nav-pills > li > a {
|
137
|
+
padding-top: 8px;
|
138
|
+
padding-bottom: 8px;
|
139
|
+
margin-top: 2px;
|
140
|
+
margin-bottom: 2px;
|
141
|
+
.border-radius(5px);
|
142
|
+
}
|
143
|
+
|
144
|
+
// Active state
|
145
|
+
.nav-pills > .active > a,
|
146
|
+
.nav-pills > .active > a:hover {
|
147
|
+
color: @white;
|
148
|
+
background-color: @linkColor;
|
149
|
+
}
|
150
|
+
|
151
|
+
|
152
|
+
|
153
|
+
// STACKED NAV
|
154
|
+
// -----------
|
155
|
+
|
156
|
+
// Stacked tabs and pills
|
157
|
+
.nav-stacked > li {
|
158
|
+
float: none;
|
159
|
+
}
|
160
|
+
.nav-stacked > li > a {
|
161
|
+
margin-right: 0; // no need for the gap between nav items
|
162
|
+
}
|
163
|
+
|
164
|
+
// Tabs
|
165
|
+
.nav-tabs.nav-stacked {
|
166
|
+
border-bottom: 0;
|
167
|
+
}
|
168
|
+
.nav-tabs.nav-stacked > li > a {
|
169
|
+
border: 1px solid #ddd;
|
170
|
+
.border-radius(0);
|
171
|
+
}
|
172
|
+
.nav-tabs.nav-stacked > li:first-child > a {
|
173
|
+
.border-radius(4px 4px 0 0);
|
174
|
+
}
|
175
|
+
.nav-tabs.nav-stacked > li:last-child > a {
|
176
|
+
.border-radius(0 0 4px 4px);
|
177
|
+
}
|
178
|
+
.nav-tabs.nav-stacked > li > a:hover {
|
179
|
+
border-color: #ddd;
|
180
|
+
z-index: 2;
|
181
|
+
}
|
182
|
+
|
183
|
+
// Pills
|
184
|
+
.nav-pills.nav-stacked > li > a {
|
185
|
+
margin-bottom: 3px;
|
186
|
+
}
|
187
|
+
.nav-pills.nav-stacked > li:last-child > a {
|
188
|
+
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
|
189
|
+
}
|
190
|
+
|
191
|
+
|
192
|
+
|
193
|
+
// DROPDOWNS
|
194
|
+
// ---------
|
195
|
+
|
196
|
+
.nav-tabs .dropdown-menu {
|
197
|
+
.border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
|
198
|
+
}
|
199
|
+
.nav-pills .dropdown-menu {
|
200
|
+
.border-radius(4px); // make rounded corners match the pills
|
201
|
+
}
|
202
|
+
|
203
|
+
// Default dropdown links
|
204
|
+
// -------------------------
|
205
|
+
// Make carets use linkColor to start
|
206
|
+
.nav-tabs .dropdown-toggle .caret,
|
207
|
+
.nav-pills .dropdown-toggle .caret {
|
208
|
+
border-top-color: @linkColor;
|
209
|
+
border-bottom-color: @linkColor;
|
210
|
+
margin-top: 6px;
|
211
|
+
}
|
212
|
+
.nav-tabs .dropdown-toggle:hover .caret,
|
213
|
+
.nav-pills .dropdown-toggle:hover .caret {
|
214
|
+
border-top-color: @linkColorHover;
|
215
|
+
border-bottom-color: @linkColorHover;
|
216
|
+
}
|
217
|
+
|
218
|
+
// Active dropdown links
|
219
|
+
// -------------------------
|
220
|
+
.nav-tabs .active .dropdown-toggle .caret,
|
221
|
+
.nav-pills .active .dropdown-toggle .caret {
|
222
|
+
border-top-color: @grayDark;
|
223
|
+
border-bottom-color: @grayDark;
|
224
|
+
}
|
225
|
+
|
226
|
+
// Active:hover dropdown links
|
227
|
+
// -------------------------
|
228
|
+
.nav > .dropdown.active > a:hover {
|
229
|
+
color: @black;
|
230
|
+
cursor: pointer;
|
231
|
+
}
|
232
|
+
|
233
|
+
// Open dropdowns
|
234
|
+
// -------------------------
|
235
|
+
.nav-tabs .open .dropdown-toggle,
|
236
|
+
.nav-pills .open .dropdown-toggle,
|
237
|
+
.nav > li.dropdown.open.active > a:hover {
|
238
|
+
color: @white;
|
239
|
+
background-color: @grayLight;
|
240
|
+
border-color: @grayLight;
|
241
|
+
}
|
242
|
+
.nav li.dropdown.open .caret,
|
243
|
+
.nav li.dropdown.open.active .caret,
|
244
|
+
.nav li.dropdown.open a:hover .caret {
|
245
|
+
border-top-color: @white;
|
246
|
+
border-bottom-color: @white;
|
247
|
+
.opacity(100);
|
248
|
+
}
|
249
|
+
|
250
|
+
// Dropdowns in stacked tabs
|
251
|
+
.tabs-stacked .open > a:hover {
|
252
|
+
border-color: @grayLight;
|
253
|
+
}
|
254
|
+
|
255
|
+
|
256
|
+
|
257
|
+
// TABBABLE
|
258
|
+
// --------
|
259
|
+
|
260
|
+
|
261
|
+
// COMMON STYLES
|
262
|
+
// -------------
|
263
|
+
|
264
|
+
// Clear any floats
|
265
|
+
.tabbable {
|
266
|
+
.clearfix();
|
267
|
+
}
|
268
|
+
.tab-content {
|
269
|
+
overflow: auto; // prevent content from running below tabs
|
270
|
+
}
|
271
|
+
|
272
|
+
// Remove border on bottom, left, right
|
273
|
+
.tabs-below > .nav-tabs,
|
274
|
+
.tabs-right > .nav-tabs,
|
275
|
+
.tabs-left > .nav-tabs {
|
276
|
+
border-bottom: 0;
|
277
|
+
}
|
278
|
+
|
279
|
+
// Show/hide tabbable areas
|
280
|
+
.tab-content > .tab-pane,
|
281
|
+
.pill-content > .pill-pane {
|
282
|
+
display: none;
|
283
|
+
}
|
284
|
+
.tab-content > .active,
|
285
|
+
.pill-content > .active {
|
286
|
+
display: block;
|
287
|
+
}
|
288
|
+
|
289
|
+
|
290
|
+
// BOTTOM
|
291
|
+
// ------
|
292
|
+
|
293
|
+
.tabs-below > .nav-tabs {
|
294
|
+
border-top: 1px solid #ddd;
|
295
|
+
}
|
296
|
+
.tabs-below > .nav-tabs > li {
|
297
|
+
margin-top: -1px;
|
298
|
+
margin-bottom: 0;
|
299
|
+
}
|
300
|
+
.tabs-below > .nav-tabs > li > a {
|
301
|
+
.border-radius(0 0 4px 4px);
|
302
|
+
&:hover {
|
303
|
+
border-bottom-color: transparent;
|
304
|
+
border-top-color: #ddd;
|
305
|
+
}
|
306
|
+
}
|
307
|
+
.tabs-below > .nav-tabs > .active > a,
|
308
|
+
.tabs-below > .nav-tabs > .active > a:hover {
|
309
|
+
border-color: transparent #ddd #ddd #ddd;
|
310
|
+
}
|
311
|
+
|
312
|
+
// LEFT & RIGHT
|
313
|
+
// ------------
|
314
|
+
|
315
|
+
// Common styles
|
316
|
+
.tabs-left > .nav-tabs > li,
|
317
|
+
.tabs-right > .nav-tabs > li {
|
318
|
+
float: none;
|
319
|
+
}
|
320
|
+
.tabs-left > .nav-tabs > li > a,
|
321
|
+
.tabs-right > .nav-tabs > li > a {
|
322
|
+
min-width: 74px;
|
323
|
+
margin-right: 0;
|
324
|
+
margin-bottom: 3px;
|
325
|
+
}
|
326
|
+
|
327
|
+
// Tabs on the left
|
328
|
+
.tabs-left > .nav-tabs {
|
329
|
+
float: left;
|
330
|
+
margin-right: 19px;
|
331
|
+
border-right: 1px solid #ddd;
|
332
|
+
}
|
333
|
+
.tabs-left > .nav-tabs > li > a {
|
334
|
+
margin-right: -1px;
|
335
|
+
.border-radius(4px 0 0 4px);
|
336
|
+
}
|
337
|
+
.tabs-left > .nav-tabs > li > a:hover {
|
338
|
+
border-color: @grayLighter #ddd @grayLighter @grayLighter;
|
339
|
+
}
|
340
|
+
.tabs-left > .nav-tabs .active > a,
|
341
|
+
.tabs-left > .nav-tabs .active > a:hover {
|
342
|
+
border-color: #ddd transparent #ddd #ddd;
|
343
|
+
*border-right-color: @white;
|
344
|
+
}
|
345
|
+
|
346
|
+
// Tabs on the right
|
347
|
+
.tabs-right > .nav-tabs {
|
348
|
+
float: right;
|
349
|
+
margin-left: 19px;
|
350
|
+
border-left: 1px solid #ddd;
|
351
|
+
}
|
352
|
+
.tabs-right > .nav-tabs > li > a {
|
353
|
+
margin-left: -1px;
|
354
|
+
.border-radius(0 4px 4px 0);
|
355
|
+
}
|
356
|
+
.tabs-right > .nav-tabs > li > a:hover {
|
357
|
+
border-color: @grayLighter @grayLighter @grayLighter #ddd;
|
358
|
+
}
|
359
|
+
.tabs-right > .nav-tabs .active > a,
|
360
|
+
.tabs-right > .nav-tabs .active > a:hover {
|
361
|
+
border-color: #ddd #ddd #ddd transparent;
|
362
|
+
*border-left-color: @white;
|
363
|
+
}
|