querobolsa-bootstrap-sass 0.1.0
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/LICENSE +14 -0
- data/README.md +106 -0
- data/lib/querobolsa-bootstrap-sass.rb +43 -0
- data/lib/querobolsa-bootstrap-sass/compass_functions.rb +10 -0
- data/lib/querobolsa-bootstrap-sass/engine.rb +7 -0
- data/lib/querobolsa-bootstrap-sass/rails_functions.rb +14 -0
- data/templates/project/manifest.rb +18 -0
- data/templates/project/styles.scss +5 -0
- data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/bootstrap-alert.js +90 -0
- data/vendor/assets/javascripts/bootstrap-button.js +96 -0
- data/vendor/assets/javascripts/bootstrap-carousel.js +169 -0
- data/vendor/assets/javascripts/bootstrap-collapse.js +157 -0
- data/vendor/assets/javascripts/bootstrap-dropdown.js +100 -0
- data/vendor/assets/javascripts/bootstrap-modal.js +218 -0
- data/vendor/assets/javascripts/bootstrap-popover.js +98 -0
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +151 -0
- data/vendor/assets/javascripts/bootstrap-tab.js +135 -0
- data/vendor/assets/javascripts/bootstrap-tooltip.js +275 -0
- data/vendor/assets/javascripts/bootstrap-transition.js +61 -0
- data/vendor/assets/javascripts/bootstrap-typeahead.js +285 -0
- data/vendor/assets/javascripts/bootstrap.js +12 -0
- data/vendor/assets/stylesheets/_bootstrap-responsive.scss +35 -0
- data/vendor/assets/stylesheets/_bootstrap.scss +62 -0
- data/vendor/assets/stylesheets/bootstrap/_accordion.scss +33 -0
- data/vendor/assets/stylesheets/bootstrap/_alerts.scss +56 -0
- data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +24 -0
- data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +178 -0
- data/vendor/assets/stylesheets/bootstrap/_buttons.scss +171 -0
- data/vendor/assets/stylesheets/bootstrap/_carousel.scss +116 -0
- data/vendor/assets/stylesheets/bootstrap/_close.scss +29 -0
- data/vendor/assets/stylesheets/bootstrap/_code.scss +56 -0
- data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +20 -0
- data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +137 -0
- data/vendor/assets/stylesheets/bootstrap/_forms.scss +482 -0
- data/vendor/assets/stylesheets/bootstrap/_grid.scss +5 -0
- data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +22 -0
- data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +50 -0
- data/vendor/assets/stylesheets/bootstrap/_layouts.scss +17 -0
- data/vendor/assets/stylesheets/bootstrap/_mixins.scss +625 -0
- data/vendor/assets/stylesheets/bootstrap/_modals.scss +90 -0
- data/vendor/assets/stylesheets/bootstrap/_navbar.scss +344 -0
- data/vendor/assets/stylesheets/bootstrap/_navs.scss +340 -0
- data/vendor/assets/stylesheets/bootstrap/_pager.scss +35 -0
- data/vendor/assets/stylesheets/bootstrap/_pagination.scss +53 -0
- data/vendor/assets/stylesheets/bootstrap/_popovers.scss +49 -0
- data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +118 -0
- data/vendor/assets/stylesheets/bootstrap/_reset.scss +110 -0
- data/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss +26 -0
- data/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss +136 -0
- data/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss +16 -0
- data/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss +147 -0
- data/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss +41 -0
- data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +29 -0
- data/vendor/assets/stylesheets/bootstrap/_sprites.scss +177 -0
- data/vendor/assets/stylesheets/bootstrap/_tables.scss +133 -0
- data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +49 -0
- data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +35 -0
- data/vendor/assets/stylesheets/bootstrap/_type.scss +224 -0
- data/vendor/assets/stylesheets/bootstrap/_utilities.scss +23 -0
- data/vendor/assets/stylesheets/bootstrap/_variables.scss +237 -0
- data/vendor/assets/stylesheets/bootstrap/_wells.scss +27 -0
- metadata +142 -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, .modal-backdrop.fade.in {
|
26
|
+
@include opacity(0.8);
|
27
|
+
}
|
28
|
+
|
29
|
+
// Base modal
|
30
|
+
.modal {
|
31
|
+
position: fixed;
|
32
|
+
top: 50%;
|
33
|
+
left: 50%;
|
34
|
+
z-index: $zindexModal;
|
35
|
+
overflow: auto;
|
36
|
+
width: 560px;
|
37
|
+
margin: -250px 0 0 -280px;
|
38
|
+
background-color: $white;
|
39
|
+
border: 1px solid #999;
|
40
|
+
border: 1px solid rgba(0,0,0,.3);
|
41
|
+
*border: 1px solid #999; /* IE6-7 */
|
42
|
+
@include border-radius(6px);
|
43
|
+
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
44
|
+
@include background-clip(padding-box);
|
45
|
+
&.fade {
|
46
|
+
$transition: opacity .3s linear, top .3s ease-out;
|
47
|
+
@include transition($transition);
|
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
|
+
@include border-radius(0 0 6px 6px);
|
78
|
+
@include box-shadow(inset 0 1px 0 $white);
|
79
|
+
@include 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,344 @@
|
|
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
|
+
@include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
|
23
|
+
@include border-radius(4px);
|
24
|
+
@include 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, .btn-group {
|
73
|
+
@include navbarVerticalAlign(30px); // Vertically center in navbar
|
74
|
+
}
|
75
|
+
.btn-group .btn {
|
76
|
+
margin: 0; // then undo the margin here so we don't accidentally double it
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
// Navbar forms
|
81
|
+
.navbar-form {
|
82
|
+
margin-bottom: 0; // remove default bottom margin
|
83
|
+
@include clearfix();
|
84
|
+
input, select, .radio, .checkbox {
|
85
|
+
@include navbarVerticalAlign(30px); // Vertically center in navbar
|
86
|
+
}
|
87
|
+
input, select {
|
88
|
+
display: inline-block;
|
89
|
+
margin-bottom: 0;
|
90
|
+
}
|
91
|
+
input[type="image"], input[type="checkbox"], input[type="radio"] {
|
92
|
+
margin-top: 3px;
|
93
|
+
}
|
94
|
+
.input-append, .input-prepend {
|
95
|
+
margin-top: 6px;
|
96
|
+
white-space: nowrap; // prevents two items from separating within a .navbar-form that has .pull-left
|
97
|
+
input {
|
98
|
+
margin-top: 0; // remove the margin on top since it's on the parent
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
// Navbar search
|
104
|
+
.navbar-search {
|
105
|
+
position: relative;
|
106
|
+
float: left;
|
107
|
+
@include navbarVerticalAlign(28px); // Vertically center in navbar
|
108
|
+
margin-bottom: 0;
|
109
|
+
.search-query {
|
110
|
+
padding: 4px 9px;
|
111
|
+
@include font-sans-serif(13px, normal, 1);
|
112
|
+
color: $white;
|
113
|
+
background-color: $navbarSearchBackground;
|
114
|
+
border: 1px solid $navbarSearchBorder;
|
115
|
+
@include box-shadow(#{inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)});
|
116
|
+
@include transition(none);
|
117
|
+
|
118
|
+
@include placeholder($navbarSearchPlaceholderColor);
|
119
|
+
// Placeholder text gets special styles; can't be a grouped selector
|
120
|
+
// &:-moz-placeholder {
|
121
|
+
// color: $navbarSearchPlaceholderColor;
|
122
|
+
// }
|
123
|
+
// &::-webkit-input-placeholder {
|
124
|
+
// color: $navbarSearchPlaceholderColor;
|
125
|
+
// }
|
126
|
+
|
127
|
+
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
|
128
|
+
&:focus, &.focused {
|
129
|
+
padding: 5px 10px;
|
130
|
+
color: $grayDark;
|
131
|
+
text-shadow: 0 1px 0 $white;
|
132
|
+
background-color: $navbarSearchBackgroundFocus;
|
133
|
+
border: 0;
|
134
|
+
@include box-shadow(0 0 3px rgba(0,0,0,.15));
|
135
|
+
outline: 0;
|
136
|
+
}
|
137
|
+
}
|
138
|
+
}
|
139
|
+
|
140
|
+
|
141
|
+
|
142
|
+
// FIXED NAVBAR
|
143
|
+
// ------------
|
144
|
+
|
145
|
+
// Shared (top/bottom) styles
|
146
|
+
.navbar-fixed-top, .navbar-fixed-bottom {
|
147
|
+
position: fixed;
|
148
|
+
right: 0;
|
149
|
+
left: 0;
|
150
|
+
z-index: $zindexFixedNavbar;
|
151
|
+
margin-bottom: 0; // remove 18px margin for static navbar
|
152
|
+
}
|
153
|
+
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
|
154
|
+
padding-left: 0;
|
155
|
+
padding-right: 0;
|
156
|
+
@include border-radius(0);
|
157
|
+
}
|
158
|
+
|
159
|
+
.navbar-fixed-top .container, .navbar-fixed-bottom .container {
|
160
|
+
@include gridCoreSpan($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
161
|
+
}
|
162
|
+
|
163
|
+
// Fixed to top
|
164
|
+
.navbar-fixed-top { top: 0; }
|
165
|
+
|
166
|
+
// Fixed to bottom
|
167
|
+
.navbar-fixed-bottom { bottom: 0; }
|
168
|
+
|
169
|
+
|
170
|
+
|
171
|
+
// NAVIGATION
|
172
|
+
// ----------
|
173
|
+
|
174
|
+
.navbar .nav {
|
175
|
+
position: relative;
|
176
|
+
left: 0;
|
177
|
+
display: block;
|
178
|
+
float: left;
|
179
|
+
margin: 0 10px 0 0;
|
180
|
+
}
|
181
|
+
.navbar .nav.pull-right {
|
182
|
+
float: right; // redeclare due to specificity
|
183
|
+
}
|
184
|
+
.navbar .nav > li {
|
185
|
+
display: block;
|
186
|
+
float: left;
|
187
|
+
}
|
188
|
+
|
189
|
+
// Links
|
190
|
+
.navbar .nav > li > a {
|
191
|
+
float: none;
|
192
|
+
// Vertically center the text given $navbarHeight
|
193
|
+
$elementHeight: 20px;
|
194
|
+
padding: (($navbarHeight - $elementHeight) / 2 - 1) 10px (($navbarHeight - $elementHeight) / 2 + 1);
|
195
|
+
line-height: 19px;
|
196
|
+
color: $navbarLinkColor;
|
197
|
+
text-decoration: none;
|
198
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
199
|
+
}
|
200
|
+
// Buttons
|
201
|
+
.navbar .btn {
|
202
|
+
display: inline-block;
|
203
|
+
padding: 4px 10px 4px;
|
204
|
+
// Vertically center the button given $navbarHeight
|
205
|
+
$elementHeight: 28px;
|
206
|
+
margin: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
|
207
|
+
line-height: $baseLineHeight;
|
208
|
+
}
|
209
|
+
.navbar .btn-group {
|
210
|
+
margin: 0;
|
211
|
+
// Vertically center the button given $navbarHeight
|
212
|
+
$elementHeight: 28px;
|
213
|
+
padding: (($navbarHeight - $elementHeight) / 2 - 1) 5px (($navbarHeight - $elementHeight) / 2);
|
214
|
+
}
|
215
|
+
// Hover
|
216
|
+
.navbar .nav > li > a:hover {
|
217
|
+
background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
|
218
|
+
color: $navbarLinkColorHover;
|
219
|
+
text-decoration: none;
|
220
|
+
}
|
221
|
+
|
222
|
+
// Active nav items
|
223
|
+
.navbar .nav .active > a, .navbar .nav .active > a:hover {
|
224
|
+
color: $navbarLinkColorActive;
|
225
|
+
text-decoration: none;
|
226
|
+
background-color: $navbarLinkBackgroundActive;
|
227
|
+
}
|
228
|
+
|
229
|
+
// Dividers (basically a vertical hr)
|
230
|
+
.navbar .divider-vertical {
|
231
|
+
height: $navbarHeight;
|
232
|
+
width: 1px;
|
233
|
+
margin: 0 9px;
|
234
|
+
overflow: hidden;
|
235
|
+
background-color: $navbarBackground;
|
236
|
+
border-right: 1px solid $navbarBackgroundHighlight;
|
237
|
+
}
|
238
|
+
|
239
|
+
// Secondary (floated right) nav in topbar
|
240
|
+
.navbar .nav.pull-right {
|
241
|
+
margin-left: 10px;
|
242
|
+
margin-right: 0;
|
243
|
+
}
|
244
|
+
|
245
|
+
// Navbar button for toggling navbar items in responsive layouts
|
246
|
+
// These definitions need to come after '.navbar .btn'
|
247
|
+
.navbar .btn-navbar {
|
248
|
+
display: none;
|
249
|
+
float: right;
|
250
|
+
padding: 7px 10px;
|
251
|
+
margin-left: 5px;
|
252
|
+
margin-right: 5px;
|
253
|
+
@include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
|
254
|
+
@include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)});
|
255
|
+
}
|
256
|
+
.navbar .btn-navbar .icon-bar {
|
257
|
+
display: block;
|
258
|
+
width: 18px;
|
259
|
+
height: 2px;
|
260
|
+
background-color: #f5f5f5;
|
261
|
+
@include border-radius(1px);
|
262
|
+
@include box-shadow(0 1px 0 rgba(0,0,0,.25));
|
263
|
+
}
|
264
|
+
.btn-navbar .icon-bar + .icon-bar {
|
265
|
+
margin-top: 3px;
|
266
|
+
}
|
267
|
+
|
268
|
+
|
269
|
+
// Dropdown menus
|
270
|
+
// --------------
|
271
|
+
|
272
|
+
// Menu position and menu carets
|
273
|
+
.navbar .dropdown-menu {
|
274
|
+
&:before {
|
275
|
+
content: '';
|
276
|
+
display: inline-block;
|
277
|
+
border-left: 7px solid transparent;
|
278
|
+
border-right: 7px solid transparent;
|
279
|
+
border-bottom: 7px solid #ccc;
|
280
|
+
border-bottom-color: $dropdownBorder;
|
281
|
+
position: absolute;
|
282
|
+
top: -7px;
|
283
|
+
left: 9px;
|
284
|
+
}
|
285
|
+
&:after {
|
286
|
+
content: '';
|
287
|
+
display: inline-block;
|
288
|
+
border-left: 6px solid transparent;
|
289
|
+
border-right: 6px solid transparent;
|
290
|
+
border-bottom: 6px solid $dropdownBackground;
|
291
|
+
position: absolute;
|
292
|
+
top: -6px;
|
293
|
+
left: 10px;
|
294
|
+
}
|
295
|
+
}
|
296
|
+
// Menu position and menu caret support for dropups via extra dropup class
|
297
|
+
.navbar-fixed-bottom .dropdown-menu {
|
298
|
+
&:before {
|
299
|
+
border-top: 7px solid #ccc;
|
300
|
+
border-top-color: $dropdownBorder;
|
301
|
+
border-bottom: 0;
|
302
|
+
bottom: -7px;
|
303
|
+
top: auto;
|
304
|
+
}
|
305
|
+
&:after {
|
306
|
+
border-top: 6px solid $dropdownBackground;
|
307
|
+
border-bottom: 0;
|
308
|
+
bottom: -6px;
|
309
|
+
top: auto;
|
310
|
+
}
|
311
|
+
}
|
312
|
+
// Dropdown toggle caret
|
313
|
+
.navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
|
314
|
+
border-top-color: $white;
|
315
|
+
border-bottom-color: $white;
|
316
|
+
}
|
317
|
+
.navbar .nav li.dropdown.active .caret {
|
318
|
+
@include opacity(1);
|
319
|
+
}
|
320
|
+
|
321
|
+
// Remove background color from open dropdown
|
322
|
+
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
323
|
+
background-color: transparent;
|
324
|
+
}
|
325
|
+
|
326
|
+
// Dropdown link on hover
|
327
|
+
.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
|
328
|
+
color: $white;
|
329
|
+
}
|
330
|
+
|
331
|
+
// Right aligned menus need alt position
|
332
|
+
// TODO: rejigger this at some point to simplify the selectors
|
333
|
+
.navbar .pull-right .dropdown-menu, .navbar .dropdown-menu.pull-right {
|
334
|
+
left: auto;
|
335
|
+
right: 0;
|
336
|
+
&:before {
|
337
|
+
left: auto;
|
338
|
+
right: 12px;
|
339
|
+
}
|
340
|
+
&:after {
|
341
|
+
left: auto;
|
342
|
+
right: 13px;
|
343
|
+
}
|
344
|
+
}
|
@@ -0,0 +1,340 @@
|
|
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, .nav-list .nav-header {
|
55
|
+
margin-left: -15px;
|
56
|
+
margin-right: -15px;
|
57
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
58
|
+
}
|
59
|
+
.nav-list > li > a {
|
60
|
+
padding: 3px 15px;
|
61
|
+
}
|
62
|
+
.nav-list > .active > a, .nav-list > .active > a:hover {
|
63
|
+
color: $white;
|
64
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
65
|
+
background-color: $linkColor;
|
66
|
+
}
|
67
|
+
.nav-list [class^="icon-"] {
|
68
|
+
margin-right: 2px;
|
69
|
+
}
|
70
|
+
// Dividers (basically an hr) within the dropdown
|
71
|
+
.nav-list .divider {
|
72
|
+
@include nav-divider();
|
73
|
+
}
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
// TABS AND PILLS
|
78
|
+
// -------------
|
79
|
+
|
80
|
+
// Common styles
|
81
|
+
.nav-tabs, .nav-pills {
|
82
|
+
@include clearfix();
|
83
|
+
}
|
84
|
+
.nav-tabs > li, .nav-pills > li {
|
85
|
+
float: left;
|
86
|
+
}
|
87
|
+
.nav-tabs > li > a, .nav-pills > li > a {
|
88
|
+
padding-right: 12px;
|
89
|
+
padding-left: 12px;
|
90
|
+
margin-right: 2px;
|
91
|
+
line-height: 14px; // keeps the overall height an even number
|
92
|
+
}
|
93
|
+
|
94
|
+
// TABS
|
95
|
+
// ----
|
96
|
+
|
97
|
+
// Give the tabs something to sit on
|
98
|
+
.nav-tabs {
|
99
|
+
border-bottom: 1px solid #ddd;
|
100
|
+
}
|
101
|
+
// Make the list-items overlay the bottom border
|
102
|
+
.nav-tabs > li {
|
103
|
+
margin-bottom: -1px;
|
104
|
+
}
|
105
|
+
// Actual tabs (as links)
|
106
|
+
.nav-tabs > li > a {
|
107
|
+
padding-top: 8px;
|
108
|
+
padding-bottom: 8px;
|
109
|
+
line-height: $baseLineHeight;
|
110
|
+
border: 1px solid transparent;
|
111
|
+
@include border-radius(4px 4px 0 0);
|
112
|
+
&:hover {
|
113
|
+
border-color: $grayLighter $grayLighter #ddd;
|
114
|
+
}
|
115
|
+
}
|
116
|
+
// Active state, and it's :hover to override normal :hover
|
117
|
+
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
|
118
|
+
color: $gray;
|
119
|
+
background-color: $white;
|
120
|
+
border: 1px solid #ddd;
|
121
|
+
border-bottom-color: transparent;
|
122
|
+
cursor: default;
|
123
|
+
}
|
124
|
+
|
125
|
+
|
126
|
+
// PILLS
|
127
|
+
// -----
|
128
|
+
|
129
|
+
// Links rendered as pills
|
130
|
+
.nav-pills > li > a {
|
131
|
+
padding-top: 8px;
|
132
|
+
padding-bottom: 8px;
|
133
|
+
margin-top: 2px;
|
134
|
+
margin-bottom: 2px;
|
135
|
+
@include border-radius(5px);
|
136
|
+
}
|
137
|
+
|
138
|
+
// Active state
|
139
|
+
.nav-pills .active > a, .nav-pills .active > a:hover {
|
140
|
+
color: $white;
|
141
|
+
background-color: $linkColor;
|
142
|
+
}
|
143
|
+
|
144
|
+
|
145
|
+
|
146
|
+
// STACKED NAV
|
147
|
+
// -----------
|
148
|
+
|
149
|
+
// Stacked tabs and pills
|
150
|
+
.nav-stacked > li {
|
151
|
+
float: none;
|
152
|
+
}
|
153
|
+
.nav-stacked > li > a {
|
154
|
+
margin-right: 0; // no need for the gap between nav items
|
155
|
+
}
|
156
|
+
|
157
|
+
// Tabs
|
158
|
+
.nav-tabs.nav-stacked {
|
159
|
+
border-bottom: 0;
|
160
|
+
}
|
161
|
+
.nav-tabs.nav-stacked > li > a {
|
162
|
+
border: 1px solid #ddd;
|
163
|
+
@include border-radius(0);
|
164
|
+
}
|
165
|
+
.nav-tabs.nav-stacked > li:first-child > a {
|
166
|
+
@include border-radius(4px 4px 0 0);
|
167
|
+
}
|
168
|
+
.nav-tabs.nav-stacked > li:last-child > a {
|
169
|
+
@include border-radius(0 0 4px 4px);
|
170
|
+
}
|
171
|
+
.nav-tabs.nav-stacked > li > a:hover {
|
172
|
+
border-color: #ddd;
|
173
|
+
z-index: 2;
|
174
|
+
}
|
175
|
+
|
176
|
+
// Pills
|
177
|
+
.nav-pills.nav-stacked > li > a {
|
178
|
+
margin-bottom: 3px;
|
179
|
+
}
|
180
|
+
.nav-pills.nav-stacked > li:last-child > a {
|
181
|
+
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
|
182
|
+
}
|
183
|
+
|
184
|
+
|
185
|
+
|
186
|
+
// DROPDOWNS
|
187
|
+
// ---------
|
188
|
+
|
189
|
+
.nav-tabs .dropdown-menu {
|
190
|
+
@include border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
|
191
|
+
}
|
192
|
+
.nav-pills .dropdown-menu {
|
193
|
+
@include border-radius(4px); // make rounded corners match the pills
|
194
|
+
}
|
195
|
+
|
196
|
+
// Default dropdown links
|
197
|
+
// -------------------------
|
198
|
+
// Make carets use linkColor to start
|
199
|
+
.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
|
200
|
+
border-top-color: $linkColor;
|
201
|
+
border-bottom-color: $linkColor;
|
202
|
+
margin-top: 6px;
|
203
|
+
}
|
204
|
+
.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
|
205
|
+
border-top-color: $linkColorHover;
|
206
|
+
border-bottom-color: $linkColorHover;
|
207
|
+
}
|
208
|
+
|
209
|
+
// Active dropdown links
|
210
|
+
// -------------------------
|
211
|
+
.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
|
212
|
+
border-top-color: $grayDark;
|
213
|
+
border-bottom-color: $grayDark;
|
214
|
+
}
|
215
|
+
|
216
|
+
// Active:hover dropdown links
|
217
|
+
// -------------------------
|
218
|
+
.nav > .dropdown.active > a:hover {
|
219
|
+
color: $black;
|
220
|
+
cursor: pointer;
|
221
|
+
}
|
222
|
+
|
223
|
+
// Open dropdowns
|
224
|
+
// -------------------------
|
225
|
+
.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover {
|
226
|
+
color: $white;
|
227
|
+
background-color: $grayLight;
|
228
|
+
border-color: $grayLight;
|
229
|
+
}
|
230
|
+
.nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, .nav li.dropdown.open a:hover .caret {
|
231
|
+
border-top-color: $white;
|
232
|
+
border-bottom-color: $white;
|
233
|
+
@include opacity(1);
|
234
|
+
}
|
235
|
+
|
236
|
+
// Dropdowns in stacked tabs
|
237
|
+
.tabs-stacked .open > a:hover {
|
238
|
+
border-color: $grayLight;
|
239
|
+
}
|
240
|
+
|
241
|
+
|
242
|
+
|
243
|
+
// TABBABLE
|
244
|
+
// --------
|
245
|
+
|
246
|
+
|
247
|
+
// COMMON STYLES
|
248
|
+
// -------------
|
249
|
+
|
250
|
+
// Clear any floats
|
251
|
+
.tabbable {
|
252
|
+
@include clearfix();
|
253
|
+
}
|
254
|
+
.tab-content {
|
255
|
+
overflow: auto; // prevent content from running below tabs
|
256
|
+
}
|
257
|
+
|
258
|
+
// Remove border on bottom, left, right
|
259
|
+
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {
|
260
|
+
border-bottom: 0;
|
261
|
+
}
|
262
|
+
|
263
|
+
// Show/hide tabbable areas
|
264
|
+
.tab-content > .tab-pane, .pill-content > .pill-pane {
|
265
|
+
display: none;
|
266
|
+
}
|
267
|
+
.tab-content > .active, .pill-content > .active {
|
268
|
+
display: block;
|
269
|
+
}
|
270
|
+
|
271
|
+
|
272
|
+
// BOTTOM
|
273
|
+
// ------
|
274
|
+
|
275
|
+
.tabs-below > .nav-tabs {
|
276
|
+
border-top: 1px solid #ddd;
|
277
|
+
}
|
278
|
+
.tabs-below > .nav-tabs > li {
|
279
|
+
margin-top: -1px;
|
280
|
+
margin-bottom: 0;
|
281
|
+
}
|
282
|
+
.tabs-below > .nav-tabs > li > a {
|
283
|
+
@include border-radius(0 0 4px 4px);
|
284
|
+
&:hover {
|
285
|
+
border-bottom-color: transparent;
|
286
|
+
border-top-color: #ddd;
|
287
|
+
}
|
288
|
+
}
|
289
|
+
.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover {
|
290
|
+
border-color: transparent #ddd #ddd #ddd;
|
291
|
+
}
|
292
|
+
|
293
|
+
// LEFT & RIGHT
|
294
|
+
// ------------
|
295
|
+
|
296
|
+
// Common styles
|
297
|
+
.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li {
|
298
|
+
float: none;
|
299
|
+
}
|
300
|
+
.tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a {
|
301
|
+
min-width: 74px;
|
302
|
+
margin-right: 0;
|
303
|
+
margin-bottom: 3px;
|
304
|
+
}
|
305
|
+
|
306
|
+
// Tabs on the left
|
307
|
+
.tabs-left > .nav-tabs {
|
308
|
+
float: left;
|
309
|
+
margin-right: 19px;
|
310
|
+
border-right: 1px solid #ddd;
|
311
|
+
}
|
312
|
+
.tabs-left > .nav-tabs > li > a {
|
313
|
+
margin-right: -1px;
|
314
|
+
@include border-radius(4px 0 0 4px);
|
315
|
+
}
|
316
|
+
.tabs-left > .nav-tabs > li > a:hover {
|
317
|
+
border-color: $grayLighter #ddd $grayLighter $grayLighter;
|
318
|
+
}
|
319
|
+
.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover {
|
320
|
+
border-color: #ddd transparent #ddd #ddd;
|
321
|
+
*border-right-color: $white;
|
322
|
+
}
|
323
|
+
|
324
|
+
// Tabs on the right
|
325
|
+
.tabs-right > .nav-tabs {
|
326
|
+
float: right;
|
327
|
+
margin-left: 19px;
|
328
|
+
border-left: 1px solid #ddd;
|
329
|
+
}
|
330
|
+
.tabs-right > .nav-tabs > li > a {
|
331
|
+
margin-left: -1px;
|
332
|
+
@include border-radius(0 4px 4px 0);
|
333
|
+
}
|
334
|
+
.tabs-right > .nav-tabs > li > a:hover {
|
335
|
+
border-color: $grayLighter $grayLighter $grayLighter #ddd;
|
336
|
+
}
|
337
|
+
.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover {
|
338
|
+
border-color: #ddd #ddd #ddd transparent;
|
339
|
+
*border-left-color: $white;
|
340
|
+
}
|