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.
Files changed (64) hide show
  1. data/LICENSE +14 -0
  2. data/README.md +106 -0
  3. data/lib/querobolsa-bootstrap-sass.rb +43 -0
  4. data/lib/querobolsa-bootstrap-sass/compass_functions.rb +10 -0
  5. data/lib/querobolsa-bootstrap-sass/engine.rb +7 -0
  6. data/lib/querobolsa-bootstrap-sass/rails_functions.rb +14 -0
  7. data/templates/project/manifest.rb +18 -0
  8. data/templates/project/styles.scss +5 -0
  9. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  10. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  11. data/vendor/assets/javascripts/bootstrap-alert.js +90 -0
  12. data/vendor/assets/javascripts/bootstrap-button.js +96 -0
  13. data/vendor/assets/javascripts/bootstrap-carousel.js +169 -0
  14. data/vendor/assets/javascripts/bootstrap-collapse.js +157 -0
  15. data/vendor/assets/javascripts/bootstrap-dropdown.js +100 -0
  16. data/vendor/assets/javascripts/bootstrap-modal.js +218 -0
  17. data/vendor/assets/javascripts/bootstrap-popover.js +98 -0
  18. data/vendor/assets/javascripts/bootstrap-scrollspy.js +151 -0
  19. data/vendor/assets/javascripts/bootstrap-tab.js +135 -0
  20. data/vendor/assets/javascripts/bootstrap-tooltip.js +275 -0
  21. data/vendor/assets/javascripts/bootstrap-transition.js +61 -0
  22. data/vendor/assets/javascripts/bootstrap-typeahead.js +285 -0
  23. data/vendor/assets/javascripts/bootstrap.js +12 -0
  24. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +35 -0
  25. data/vendor/assets/stylesheets/_bootstrap.scss +62 -0
  26. data/vendor/assets/stylesheets/bootstrap/_accordion.scss +33 -0
  27. data/vendor/assets/stylesheets/bootstrap/_alerts.scss +56 -0
  28. data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +24 -0
  29. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +178 -0
  30. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +171 -0
  31. data/vendor/assets/stylesheets/bootstrap/_carousel.scss +116 -0
  32. data/vendor/assets/stylesheets/bootstrap/_close.scss +29 -0
  33. data/vendor/assets/stylesheets/bootstrap/_code.scss +56 -0
  34. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +20 -0
  35. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +137 -0
  36. data/vendor/assets/stylesheets/bootstrap/_forms.scss +482 -0
  37. data/vendor/assets/stylesheets/bootstrap/_grid.scss +5 -0
  38. data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +22 -0
  39. data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +50 -0
  40. data/vendor/assets/stylesheets/bootstrap/_layouts.scss +17 -0
  41. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +625 -0
  42. data/vendor/assets/stylesheets/bootstrap/_modals.scss +90 -0
  43. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +344 -0
  44. data/vendor/assets/stylesheets/bootstrap/_navs.scss +340 -0
  45. data/vendor/assets/stylesheets/bootstrap/_pager.scss +35 -0
  46. data/vendor/assets/stylesheets/bootstrap/_pagination.scss +53 -0
  47. data/vendor/assets/stylesheets/bootstrap/_popovers.scss +49 -0
  48. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +118 -0
  49. data/vendor/assets/stylesheets/bootstrap/_reset.scss +110 -0
  50. data/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss +26 -0
  51. data/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss +136 -0
  52. data/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss +16 -0
  53. data/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss +147 -0
  54. data/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss +41 -0
  55. data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +29 -0
  56. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +177 -0
  57. data/vendor/assets/stylesheets/bootstrap/_tables.scss +133 -0
  58. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +49 -0
  59. data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +35 -0
  60. data/vendor/assets/stylesheets/bootstrap/_type.scss +224 -0
  61. data/vendor/assets/stylesheets/bootstrap/_utilities.scss +23 -0
  62. data/vendor/assets/stylesheets/bootstrap/_variables.scss +237 -0
  63. data/vendor/assets/stylesheets/bootstrap/_wells.scss +27 -0
  64. 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
+ }