bootstrap-sass-keppy 0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. data/LICENSE +14 -0
  2. data/README.md +97 -0
  3. data/lib/bootstrap-sass.rb +43 -0
  4. data/lib/bootstrap-sass/compass_functions.rb +10 -0
  5. data/lib/bootstrap-sass/engine.rb +7 -0
  6. data/lib/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 +129 -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
+ }