bootstrapped-rails 2.0.7.2 → 2.0.7.3
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/app/helpers/twitter_breadcrumbs_helper.rb +5 -0
- data/app/views/twitter_bootstrap/_breadcrumbs.html.erb +14 -0
- data/bootstrapped-rails.gemspec +2 -2
- data/lib/bootstrapped-rails/breadcrumbs.rb +21 -0
- data/lib/bootstrapped-rails/engine.rb +8 -0
- data/lib/bootstrapped-rails/version.rb +1 -1
- data/logical_license +23 -0
- data/readme.md +58 -25
- data/vendor/assets/javascripts/bootstrapped/bootstrap-alert.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-button.js +4 -2
- data/vendor/assets/javascripts/bootstrapped/bootstrap-carousel.js +7 -3
- data/vendor/assets/javascripts/bootstrapped/bootstrap-collapse.js +4 -2
- data/vendor/assets/javascripts/bootstrapped/bootstrap-dropdown.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-modal.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-popover.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-scrollspy.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-tab.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-tooltip.js +2 -2
- data/vendor/assets/javascripts/bootstrapped/bootstrap-transition.js +1 -1
- data/vendor/assets/javascripts/bootstrapped/bootstrap-typeahead.js +7 -7
- data/vendor/assets/stylesheets/bootstrapped-sass/_reset.scss +31 -10
- data/vendor/assets/stylesheets/custom_partials/animation.scss +170 -0
- data/vendor/assets/stylesheets/custom_partials/box-shadow.scss +13 -0
- data/vendor/assets/stylesheets/custom_partials/box-sizing.scss +6 -0
- data/vendor/assets/stylesheets/custom_partials/flex-box.scss +64 -0
- data/vendor/assets/stylesheets/custom_partials/license +24 -0
- data/vendor/toolkit/twitter/bootstrap/accordion.less +28 -0
- data/vendor/toolkit/twitter/bootstrap/alerts.less +70 -0
- data/vendor/toolkit/twitter/bootstrap/bootstrap.less +62 -0
- data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +22 -0
- data/vendor/toolkit/twitter/bootstrap/button-groups.less +148 -0
- data/vendor/toolkit/twitter/bootstrap/buttons.less +183 -0
- data/vendor/toolkit/twitter/bootstrap/carousel.less +121 -0
- data/vendor/toolkit/twitter/bootstrap/close.less +18 -0
- data/vendor/toolkit/twitter/bootstrap/code.less +57 -0
- data/vendor/toolkit/twitter/bootstrap/component-animations.less +18 -0
- data/vendor/toolkit/twitter/bootstrap/dropdowns.less +130 -0
- data/vendor/toolkit/twitter/bootstrap/forms.less +522 -0
- data/vendor/toolkit/twitter/bootstrap/grid.less +8 -0
- data/vendor/toolkit/twitter/bootstrap/hero-unit.less +20 -0
- data/vendor/toolkit/twitter/bootstrap/labels.less +32 -0
- data/vendor/toolkit/twitter/bootstrap/layouts.less +17 -0
- data/vendor/toolkit/twitter/bootstrap/mixins.less +590 -0
- data/vendor/toolkit/twitter/bootstrap/modals.less +83 -0
- data/vendor/toolkit/twitter/bootstrap/navbar.less +299 -0
- data/vendor/toolkit/twitter/bootstrap/navs.less +353 -0
- data/vendor/toolkit/twitter/bootstrap/pager.less +30 -0
- data/vendor/toolkit/twitter/bootstrap/pagination.less +55 -0
- data/vendor/toolkit/twitter/bootstrap/popovers.less +49 -0
- data/vendor/toolkit/twitter/bootstrap/progress-bars.less +95 -0
- data/vendor/toolkit/twitter/bootstrap/reset.less +126 -0
- data/vendor/toolkit/twitter/bootstrap/responsive.less +327 -0
- data/vendor/toolkit/twitter/bootstrap/scaffolding.less +29 -0
- data/vendor/toolkit/twitter/bootstrap/sprites.less +158 -0
- data/vendor/toolkit/twitter/bootstrap/tables.less +150 -0
- data/vendor/toolkit/twitter/bootstrap/thumbnails.less +35 -0
- data/vendor/toolkit/twitter/bootstrap/tooltip.less +35 -0
- data/vendor/toolkit/twitter/bootstrap/type.less +218 -0
- data/vendor/toolkit/twitter/bootstrap/utilities.less +23 -0
- data/vendor/toolkit/twitter/bootstrap/variables.less +107 -0
- data/vendor/toolkit/twitter/bootstrap/wells.less +17 -0
- data/vendor/toolkit/twitter/bootstrap_base.less +2 -0
- metadata +64 -10
@@ -0,0 +1,83 @@
|
|
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
|
+
max-height: 500px;
|
37
|
+
overflow: auto;
|
38
|
+
width: 560px;
|
39
|
+
margin: -250px 0 0 -280px;
|
40
|
+
background-color: @white;
|
41
|
+
border: 1px solid #999;
|
42
|
+
border: 1px solid rgba(0,0,0,.3);
|
43
|
+
*border: 1px solid #999; /* IE6-7 */
|
44
|
+
.border-radius(6px);
|
45
|
+
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
46
|
+
.background-clip(padding-box);
|
47
|
+
&.fade {
|
48
|
+
.transition(e('opacity .3s linear, top .3s ease-out'));
|
49
|
+
top: -25%;
|
50
|
+
}
|
51
|
+
&.fade.in { top: 50%; }
|
52
|
+
}
|
53
|
+
.modal-header {
|
54
|
+
padding: 9px 15px;
|
55
|
+
border-bottom: 1px solid #eee;
|
56
|
+
// Close icon
|
57
|
+
.close { margin-top: 2px; }
|
58
|
+
}
|
59
|
+
|
60
|
+
// Body (where all modal content resises)
|
61
|
+
.modal-body {
|
62
|
+
padding: 15px;
|
63
|
+
}
|
64
|
+
// Remove bottom margin if need be
|
65
|
+
.modal-body .modal-form {
|
66
|
+
margin-bottom: 0;
|
67
|
+
}
|
68
|
+
|
69
|
+
// Footer (for actions)
|
70
|
+
.modal-footer {
|
71
|
+
padding: 14px 15px 15px;
|
72
|
+
margin-bottom: 0;
|
73
|
+
background-color: #f5f5f5;
|
74
|
+
border-top: 1px solid #ddd;
|
75
|
+
.border-radius(0 0 6px 6px);
|
76
|
+
.box-shadow(inset 0 1px 0 @white);
|
77
|
+
.clearfix();
|
78
|
+
.btn {
|
79
|
+
float: right;
|
80
|
+
margin-left: 5px;
|
81
|
+
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
|
82
|
+
}
|
83
|
+
}
|
@@ -0,0 +1,299 @@
|
|
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; // then undo the margin here so we don't accidentally double it
|
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
|
+
.input-append,
|
108
|
+
.input-prepend {
|
109
|
+
margin-top: 6px;
|
110
|
+
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
|
111
|
+
input {
|
112
|
+
margin-top: 0; // remove the margin on top since it's on the parent
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
|
117
|
+
// Navbar search
|
118
|
+
.navbar-search {
|
119
|
+
position: relative;
|
120
|
+
float: left;
|
121
|
+
margin-top: 6px;
|
122
|
+
margin-bottom: 0;
|
123
|
+
.search-query {
|
124
|
+
padding: 4px 9px;
|
125
|
+
#font > .sans-serif(13px, normal, 1);
|
126
|
+
color: @white;
|
127
|
+
color: rgba(255,255,255,.75);
|
128
|
+
background: #666;
|
129
|
+
background: rgba(255,255,255,.3);
|
130
|
+
border: 1px solid #111;
|
131
|
+
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
|
132
|
+
.box-shadow(@shadow);
|
133
|
+
.transition(none);
|
134
|
+
|
135
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
136
|
+
.placeholder(@grayLighter);
|
137
|
+
|
138
|
+
// Hover states
|
139
|
+
&:hover {
|
140
|
+
color: @white;
|
141
|
+
background-color: @grayLight;
|
142
|
+
background-color: rgba(255,255,255,.5);
|
143
|
+
}
|
144
|
+
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
|
145
|
+
&:focus,
|
146
|
+
&.focused {
|
147
|
+
padding: 5px 10px;
|
148
|
+
color: @grayDark;
|
149
|
+
text-shadow: 0 1px 0 @white;
|
150
|
+
background-color: @white;
|
151
|
+
border: 0;
|
152
|
+
.box-shadow(0 0 3px rgba(0,0,0,.15));
|
153
|
+
outline: 0;
|
154
|
+
}
|
155
|
+
}
|
156
|
+
}
|
157
|
+
|
158
|
+
|
159
|
+
// FIXED NAVBAR
|
160
|
+
// ------------
|
161
|
+
|
162
|
+
.navbar-fixed-top {
|
163
|
+
position: fixed;
|
164
|
+
top: 0;
|
165
|
+
right: 0;
|
166
|
+
left: 0;
|
167
|
+
z-index: @zindexFixedNavbar;
|
168
|
+
}
|
169
|
+
.navbar-fixed-top .navbar-inner {
|
170
|
+
padding-left: 0;
|
171
|
+
padding-right: 0;
|
172
|
+
.border-radius(0);
|
173
|
+
}
|
174
|
+
|
175
|
+
|
176
|
+
// NAVIGATION
|
177
|
+
// ----------
|
178
|
+
|
179
|
+
.navbar .nav {
|
180
|
+
position: relative;
|
181
|
+
left: 0;
|
182
|
+
display: block;
|
183
|
+
float: left;
|
184
|
+
margin: 0 10px 0 0;
|
185
|
+
}
|
186
|
+
.navbar .nav.pull-right {
|
187
|
+
float: right; // redeclare due to specificity
|
188
|
+
}
|
189
|
+
.navbar .nav > li {
|
190
|
+
display: block;
|
191
|
+
float: left;
|
192
|
+
}
|
193
|
+
|
194
|
+
// Links
|
195
|
+
.navbar .nav > li > a {
|
196
|
+
float: none;
|
197
|
+
padding: 10px 10px 11px;
|
198
|
+
line-height: 19px;
|
199
|
+
color: @navbarLinkColor;
|
200
|
+
text-decoration: none;
|
201
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
202
|
+
}
|
203
|
+
// Hover
|
204
|
+
.navbar .nav > li > a:hover {
|
205
|
+
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
|
206
|
+
color: @navbarLinkColorHover;
|
207
|
+
text-decoration: none;
|
208
|
+
}
|
209
|
+
|
210
|
+
// Active nav items
|
211
|
+
.navbar .nav .active > a,
|
212
|
+
.navbar .nav .active > a:hover {
|
213
|
+
color: @navbarLinkColorHover;
|
214
|
+
text-decoration: none;
|
215
|
+
background-color: @navbarBackground;
|
216
|
+
}
|
217
|
+
|
218
|
+
// Dividers (basically a vertical hr)
|
219
|
+
.navbar .divider-vertical {
|
220
|
+
height: @navbarHeight;
|
221
|
+
width: 1px;
|
222
|
+
margin: 0 9px;
|
223
|
+
overflow: hidden;
|
224
|
+
background-color: @navbarBackground;
|
225
|
+
border-right: 1px solid @navbarBackgroundHighlight;
|
226
|
+
}
|
227
|
+
|
228
|
+
// Secondary (floated right) nav in topbar
|
229
|
+
.navbar .nav.pull-right {
|
230
|
+
margin-left: 10px;
|
231
|
+
margin-right: 0;
|
232
|
+
}
|
233
|
+
|
234
|
+
|
235
|
+
|
236
|
+
// Dropdown menus
|
237
|
+
// --------------
|
238
|
+
|
239
|
+
// Menu position and menu carets
|
240
|
+
.navbar .dropdown-menu {
|
241
|
+
margin-top: 1px;
|
242
|
+
.border-radius(4px);
|
243
|
+
&:before {
|
244
|
+
content: '';
|
245
|
+
display: inline-block;
|
246
|
+
border-left: 7px solid transparent;
|
247
|
+
border-right: 7px solid transparent;
|
248
|
+
border-bottom: 7px solid #ccc;
|
249
|
+
border-bottom-color: rgba(0,0,0,.2);
|
250
|
+
position: absolute;
|
251
|
+
top: -7px;
|
252
|
+
left: 9px;
|
253
|
+
}
|
254
|
+
&:after {
|
255
|
+
content: '';
|
256
|
+
display: inline-block;
|
257
|
+
border-left: 6px solid transparent;
|
258
|
+
border-right: 6px solid transparent;
|
259
|
+
border-bottom: 6px solid @white;
|
260
|
+
position: absolute;
|
261
|
+
top: -6px;
|
262
|
+
left: 10px;
|
263
|
+
}
|
264
|
+
}
|
265
|
+
|
266
|
+
// Dropdown toggle caret
|
267
|
+
.navbar .nav .dropdown-toggle .caret,
|
268
|
+
.navbar .nav .open.dropdown .caret {
|
269
|
+
border-top-color: @white;
|
270
|
+
}
|
271
|
+
.navbar .nav .active .caret {
|
272
|
+
.opacity(100);
|
273
|
+
}
|
274
|
+
|
275
|
+
// Remove background color from open dropdown
|
276
|
+
.navbar .nav .open > .dropdown-toggle,
|
277
|
+
.navbar .nav .active > .dropdown-toggle,
|
278
|
+
.navbar .nav .open.active > .dropdown-toggle {
|
279
|
+
background-color: transparent;
|
280
|
+
}
|
281
|
+
|
282
|
+
// Dropdown link on hover
|
283
|
+
.navbar .nav .active > .dropdown-toggle:hover {
|
284
|
+
color: @white;
|
285
|
+
}
|
286
|
+
|
287
|
+
// Right aligned menus need alt position
|
288
|
+
.navbar .nav.pull-right .dropdown-menu {
|
289
|
+
left: auto;
|
290
|
+
right: 0;
|
291
|
+
&:before {
|
292
|
+
left: auto;
|
293
|
+
right: 12px;
|
294
|
+
}
|
295
|
+
&:after {
|
296
|
+
left: auto;
|
297
|
+
right: 13px;
|
298
|
+
}
|
299
|
+
}
|
@@ -0,0 +1,353 @@
|
|
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
|
+
}
|