bootstrap-sass 1.4.4 → 2.0.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.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

Files changed (71) hide show
  1. data/README.md +52 -19
  2. data/lib/bootstrap-sass.rb +24 -6
  3. data/lib/bootstrap-sass/compass_extensions.rb +10 -0
  4. data/lib/bootstrap-sass/config/sass_extentions.rb +14 -0
  5. data/lib/bootstrap-sass/engine.rb +9 -0
  6. data/templates/project/manifest.rb +18 -0
  7. data/templates/project/styles.scss +5 -0
  8. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  9. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  10. data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
  11. data/vendor/assets/javascripts/bootstrap-button.js +98 -0
  12. data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
  13. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  14. data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
  15. data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
  16. data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
  17. data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
  18. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  19. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  20. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  21. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  22. data/vendor/assets/javascripts/bootstrap.js +9 -6
  23. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +314 -0
  24. data/vendor/assets/stylesheets/_bootstrap.scss +63 -0
  25. data/vendor/assets/stylesheets/bootstrap/_accordion.scss +28 -0
  26. data/vendor/assets/stylesheets/bootstrap/_alerts.scss +62 -0
  27. data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +22 -0
  28. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +136 -0
  29. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +149 -0
  30. data/vendor/assets/stylesheets/bootstrap/_carousel.scss +116 -0
  31. data/vendor/assets/stylesheets/bootstrap/_close.scss +18 -0
  32. data/vendor/assets/stylesheets/bootstrap/_code.scss +43 -0
  33. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +18 -0
  34. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +127 -0
  35. data/vendor/assets/stylesheets/bootstrap/_forms.scss +458 -0
  36. data/vendor/assets/stylesheets/bootstrap/_grid.scss +8 -0
  37. data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +20 -0
  38. data/vendor/assets/stylesheets/bootstrap/_labels.scss +16 -0
  39. data/vendor/assets/stylesheets/bootstrap/_layouts.scss +17 -0
  40. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +479 -0
  41. data/vendor/assets/stylesheets/bootstrap/_modals.scss +72 -0
  42. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +282 -0
  43. data/vendor/assets/stylesheets/bootstrap/_navs.scss +320 -0
  44. data/vendor/assets/stylesheets/bootstrap/_pager.scss +30 -0
  45. data/vendor/assets/stylesheets/bootstrap/_pagination.scss +53 -0
  46. data/vendor/assets/stylesheets/bootstrap/_popovers.scss +49 -0
  47. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +95 -0
  48. data/vendor/assets/stylesheets/bootstrap/_reset.scss +105 -0
  49. data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +29 -0
  50. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +156 -0
  51. data/vendor/assets/stylesheets/bootstrap/_tables.scss +117 -0
  52. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +35 -0
  53. data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +35 -0
  54. data/vendor/assets/stylesheets/bootstrap/_type.scss +209 -0
  55. data/vendor/assets/stylesheets/bootstrap/_utilities.scss +23 -0
  56. data/vendor/assets/stylesheets/bootstrap/_variables.scss +99 -0
  57. data/vendor/assets/stylesheets/bootstrap/_wells.scss +17 -0
  58. metadata +68 -20
  59. data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
  60. data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
  61. data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
  62. data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
  63. data/vendor/assets/stylesheets/bootstrap.css.scss +0 -25
  64. data/vendor/assets/stylesheets/bootstrap/forms.css.scss +0 -427
  65. data/vendor/assets/stylesheets/bootstrap/mixins.css.scss +0 -216
  66. data/vendor/assets/stylesheets/bootstrap/patterns.css.scss +0 -994
  67. data/vendor/assets/stylesheets/bootstrap/reset.css.scss +0 -142
  68. data/vendor/assets/stylesheets/bootstrap/scaffolding.css.scss +0 -129
  69. data/vendor/assets/stylesheets/bootstrap/tables.css.scss +0 -212
  70. data/vendor/assets/stylesheets/bootstrap/type.css.scss +0 -186
  71. data/vendor/assets/stylesheets/bootstrap/variables.css.scss +0 -51
@@ -0,0 +1,72 @@
1
+ // MODALS
2
+ // ------
3
+
4
+ .modal-open {
5
+ .dropdown-menu { z-index: $zindexDropdown + $zindexModal; }
6
+ .dropdown.open { *z-index: $zindexDropdown + $zindexModal; }
7
+ .popover { z-index: $zindexPopover + $zindexModal; }
8
+ .tooltip { z-index: $zindexTooltip + $zindexModal; }
9
+ }
10
+
11
+ .modal-backdrop {
12
+ position: fixed;
13
+ top: 0;
14
+ right: 0;
15
+ bottom: 0;
16
+ left: 0;
17
+ z-index: $zindexModalBackdrop;
18
+ background-color: $black;
19
+ // Fade for backdrop
20
+ &.fade { opacity: 0; }
21
+ }
22
+
23
+ .modal-backdrop, .modal-backdrop.fade.in {
24
+ @include opacity(80);
25
+ }
26
+
27
+ .modal {
28
+ position: fixed;
29
+ top: 50%;
30
+ left: 50%;
31
+ z-index: $zindexModal;
32
+ max-height: 500px;
33
+ overflow: auto;
34
+ width: 560px;
35
+ margin: -250px 0 0 -280px;
36
+ background-color: $white;
37
+ border: 1px solid #999;
38
+ border: 1px solid rgba(0,0,0,.3);
39
+ *border: 1px solid #999; /* IE6-7 */
40
+ @include border-radius(6px);
41
+ @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
42
+ @include background-clip(padding-box);
43
+ &.fade {
44
+ $transition: opacity .3s linear, top .3s ease-out;
45
+ @include transition($transition);
46
+ top: -25%;
47
+ }
48
+ &.fade.in { top: 50%; }
49
+ }
50
+ .modal-header {
51
+ padding: 9px 15px;
52
+ border-bottom: 1px solid #eee;
53
+ // Close icon
54
+ .close { margin-top: 2px; }
55
+ }
56
+ .modal-body {
57
+ padding: 15px;
58
+ }
59
+ .modal-footer {
60
+ padding: 14px 15px 15px;
61
+ margin-bottom: 0;
62
+ background-color: #f5f5f5;
63
+ border-top: 1px solid #ddd;
64
+ @include border-radius(0 0 6px 6px);
65
+ @include box-shadow(inset 0 1px 0 $white);
66
+ @include clearfix();
67
+ .btn {
68
+ float: right;
69
+ margin-left: 5px;
70
+ margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
71
+ }
72
+ }
@@ -0,0 +1,282 @@
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
+ @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
18
+ @include border-radius(4px);
19
+ $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
20
+ @include 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
+ @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
31
+ $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
32
+ @include box-shadow($shadow);
33
+ }
34
+ .btn-navbar .icon-bar {
35
+ display: block;
36
+ width: 18px;
37
+ height: 2px;
38
+ background-color: #f5f5f5;
39
+ @include border-radius(1px);
40
+ @include 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, .btn-group {
80
+ margin-top: 5px; // make buttons vertically centered in navbar
81
+ }
82
+ .btn-group .btn {
83
+ margin-top: 0;
84
+ }
85
+ }
86
+
87
+ // Navbar forms
88
+ .navbar-form {
89
+ margin-bottom: 0; // remove default bottom margin
90
+ @include clearfix();
91
+ input, select {
92
+ display: inline-block;
93
+ margin-top: 5px;
94
+ margin-bottom: 0;
95
+ }
96
+ .radio, .checkbox {
97
+ margin-top: 5px;
98
+ }
99
+ input[type="image"], input[type="checkbox"], input[type="radio"] {
100
+ margin-top: 3px;
101
+ }
102
+ }
103
+
104
+ // Navbar search
105
+ .navbar-search {
106
+ position: relative;
107
+ float: left;
108
+ margin-top: 6px;
109
+ margin-bottom: 0;
110
+ .search-query {
111
+ padding: 4px 9px;
112
+ @include font-sans-serif(13px, normal, 1);
113
+ color: $white;
114
+ color: rgba(255,255,255,.75);
115
+ background: #666;
116
+ background: rgba(255,255,255,.3);
117
+ border: 1px solid #111;
118
+ $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
119
+ @include box-shadow($shadow);
120
+ @include transition(none);
121
+
122
+ // Placeholder text gets special styles; can't be bundled together though for some reason
123
+ @include placeholder($grayLighter);
124
+
125
+ // Hover states
126
+ &:hover {
127
+ color: $white;
128
+ background-color: $grayLight;
129
+ background-color: rgba(255,255,255,.5);
130
+ }
131
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
132
+ &:focus, &.focused {
133
+ padding: 5px 10px;
134
+ color: $grayDark;
135
+ text-shadow: 0 1px 0 $white;
136
+ background-color: $white;
137
+ border: 0;
138
+ @include box-shadow(0 0 3px rgba(0,0,0,.15));
139
+ outline: 0;
140
+ }
141
+ }
142
+ }
143
+
144
+
145
+ // FIXED NAVBAR
146
+ // ------------
147
+
148
+ .navbar-fixed-top {
149
+ position: fixed;
150
+ top: 0;
151
+ right: 0;
152
+ left: 0;
153
+ z-index: $zindexFixedNavbar;
154
+ }
155
+ .navbar-fixed-top .navbar-inner {
156
+ padding-left: 0;
157
+ padding-right: 0;
158
+ @include border-radius(0);
159
+ }
160
+
161
+
162
+ // NAVIGATION
163
+ // ----------
164
+
165
+ .navbar .nav {
166
+ position: relative;
167
+ left: 0;
168
+ display: block;
169
+ float: left;
170
+ margin: 0 10px 0 0;
171
+ }
172
+ .navbar .nav.pull-right {
173
+ float: right; // redeclare due to specificity
174
+ }
175
+ .navbar .nav > li {
176
+ display: block;
177
+ float: left;
178
+ }
179
+
180
+ // Links
181
+ .navbar .nav > li > a {
182
+ float: none;
183
+ padding: 10px 10px 11px;
184
+ line-height: 19px;
185
+ color: $navbarLinkColor;
186
+ text-decoration: none;
187
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
188
+ }
189
+ // Hover
190
+ .navbar .nav > li > a:hover {
191
+ background-color: transparent;
192
+ color: $navbarLinkColorHover;
193
+ text-decoration: none;
194
+ }
195
+
196
+ // Active nav items
197
+ .navbar .nav .active > a, .navbar .nav .active > a:hover {
198
+ color: $navbarLinkColorHover;
199
+ text-decoration: none;
200
+ background-color: $navbarBackground;
201
+ background-color: rgba(0,0,0,.5);
202
+ }
203
+
204
+ // Dividers (basically a vertical hr)
205
+ .navbar .divider-vertical {
206
+ height: $navbarHeight;
207
+ width: 1px;
208
+ margin: 0 9px;
209
+ overflow: hidden;
210
+ background-color: $navbarBackground;
211
+ border-right: 1px solid $navbarBackgroundHighlight;
212
+ }
213
+
214
+ // Secondary (floated right) nav in topbar
215
+ .navbar .nav.pull-right {
216
+ margin-left: 10px;
217
+ margin-right: 0;
218
+ }
219
+
220
+
221
+
222
+ // Dropdown menus
223
+ // --------------
224
+
225
+ // Menu position and menu carets
226
+ .navbar .dropdown-menu {
227
+ margin-top: 1px;
228
+ @include border-radius(4px);
229
+ &:before {
230
+ content: '';
231
+ display: inline-block;
232
+ border-left: 7px solid transparent;
233
+ border-right: 7px solid transparent;
234
+ border-bottom: 7px solid #ccc;
235
+ border-bottom-color: rgba(0,0,0,.2);
236
+ position: absolute;
237
+ top: -7px;
238
+ left: 9px;
239
+ }
240
+ &:after {
241
+ content: '';
242
+ display: inline-block;
243
+ border-left: 6px solid transparent;
244
+ border-right: 6px solid transparent;
245
+ border-bottom: 6px solid $white;
246
+ position: absolute;
247
+ top: -6px;
248
+ left: 10px;
249
+ }
250
+ }
251
+
252
+ // Dropdown toggle caret
253
+ .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
254
+ border-top-color: $white;
255
+ }
256
+ .navbar .nav .active .caret {
257
+ @include opacity(100);
258
+ }
259
+
260
+ // Remove background color from open dropdown
261
+ .navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle {
262
+ background-color: transparent;
263
+ }
264
+
265
+ // Dropdown link on hover
266
+ .navbar .nav .active > .dropdown-toggle:hover {
267
+ color: $white;
268
+ }
269
+
270
+ // Right aligned menus need alt position
271
+ .navbar .nav.pull-right .dropdown-menu {
272
+ left: auto;
273
+ right: 0;
274
+ &:before {
275
+ left: auto;
276
+ right: 12px;
277
+ }
278
+ &:after {
279
+ left: auto;
280
+ right: 13px;
281
+ }
282
+ }
@@ -0,0 +1,320 @@
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
+
25
+
26
+ // NAV LIST
27
+ // --------
28
+
29
+ .nav-list {
30
+ padding-left: 14px;
31
+ padding-right: 14px;
32
+ margin-bottom: 0;
33
+ }
34
+ .nav-list > li > a, .nav-list .nav-header {
35
+ display: block;
36
+ padding: 3px 15px;
37
+ margin-left: -15px;
38
+ margin-right: -15px;
39
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
40
+ }
41
+ .nav-list .nav-header {
42
+ font-size: 11px;
43
+ font-weight: bold;
44
+ line-height: $baseLineHeight;
45
+ color: $grayLight;
46
+ text-transform: uppercase;
47
+ }
48
+ .nav-list > li + .nav-header {
49
+ margin-top: 9px;
50
+ }
51
+ .nav-list .active > a {
52
+ color: $white;
53
+ text-shadow: 0 -1px 0 rgba(0,0,0,.2);
54
+ background-color: $linkColor;
55
+ }
56
+ .nav-list .icon {
57
+ margin-right: 2px;
58
+ }
59
+
60
+
61
+
62
+ // TABS AND PILLS
63
+ // -------------
64
+
65
+ // Common styles
66
+ .nav-tabs, .nav-pills {
67
+ @include clearfix();
68
+ }
69
+ .nav-tabs > li, .nav-pills > li {
70
+ float: left;
71
+ }
72
+ .nav-tabs > li > a, .nav-pills > li > a {
73
+ padding-right: 12px;
74
+ padding-left: 12px;
75
+ margin-right: 2px;
76
+ line-height: 14px; // keeps the overall height an even number
77
+ }
78
+
79
+ // TABS
80
+ // ----
81
+
82
+ // Give the tabs something to sit on
83
+ .nav-tabs {
84
+ border-bottom: 1px solid #ddd;
85
+ }
86
+
87
+ // Make the list-items overlay the bottom border
88
+ .nav-tabs > li {
89
+ margin-bottom: -1px;
90
+ }
91
+
92
+ // Actual tabs (as links)
93
+ .nav-tabs > li > a {
94
+ padding-top: 9px;
95
+ padding-bottom: 9px;
96
+ border: 1px solid transparent;
97
+ @include border-radius(4px 4px 0 0);
98
+ &:hover {
99
+ border-color: $grayLighter $grayLighter #ddd;
100
+ }
101
+ }
102
+ // Active state, and it's :hover to override normal :hover
103
+ .nav-tabs > .active > a, .nav-tabs > .active > a:hover {
104
+ color: $gray;
105
+ background-color: $white;
106
+ border: 1px solid #ddd;
107
+ border-bottom-color: transparent;
108
+ cursor: default;
109
+ }
110
+
111
+ // PILLS
112
+ // -----
113
+
114
+ // Links rendered as pills
115
+ .nav-pills > li > a {
116
+ padding-top: 8px;
117
+ padding-bottom: 8px;
118
+ margin-top: 2px;
119
+ margin-bottom: 2px;
120
+ @include border-radius(5px);
121
+ }
122
+
123
+ // Active state
124
+ .nav-pills .active > a, .nav-pills .active > a:hover {
125
+ color: $white;
126
+ background-color: $linkColor;
127
+ }
128
+
129
+
130
+
131
+ // STACKED NAV
132
+ // -----------
133
+
134
+ // Stacked tabs and pills
135
+ .nav-stacked > li {
136
+ float: none;
137
+ }
138
+ .nav-stacked > li > a {
139
+ margin-right: 0; // no need for the gap between nav items
140
+ }
141
+
142
+ // Tabs
143
+ .nav-tabs.nav-stacked {
144
+ border-bottom: 0;
145
+ }
146
+ .nav-tabs.nav-stacked > li > a {
147
+ border: 1px solid #ddd;
148
+ @include border-radius(0);
149
+ }
150
+ .nav-tabs.nav-stacked > li:first-child > a {
151
+ @include border-radius(4px 4px 0 0);
152
+ }
153
+ .nav-tabs.nav-stacked > li:last-child > a {
154
+ @include border-radius(0 0 4px 4px);
155
+ }
156
+ .nav-tabs.nav-stacked > li > a:hover {
157
+ border-color: #ddd;
158
+ z-index: 2;
159
+ }
160
+
161
+ // Pills
162
+ .nav-pills.nav-stacked > li > a {
163
+ margin-bottom: 3px;
164
+ }
165
+ .nav-pills.nav-stacked > li:last-child > a {
166
+ margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
167
+ }
168
+
169
+
170
+
171
+ // DROPDOWNS
172
+ // ---------
173
+
174
+ // Position the menu
175
+ .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu {
176
+ margin-top: 1px;
177
+ border-width: 1px;
178
+ }
179
+ .nav-pills .dropdown-menu {
180
+ @include border-radius(4px);
181
+ }
182
+
183
+ // Default dropdown links
184
+ // -------------------------
185
+ // Make carets use linkColor to start
186
+ .nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
187
+ border-top-color: $linkColor;
188
+ margin-top: 6px;
189
+ }
190
+ .nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
191
+ border-top-color: $linkColorHover;
192
+ }
193
+
194
+ // Active dropdown links
195
+ // -------------------------
196
+ .nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
197
+ border-top-color: $grayDark;
198
+ }
199
+
200
+ // Active:hover dropdown links
201
+ // -------------------------
202
+ .nav > .dropdown.active > a:hover {
203
+ color: $black;
204
+ cursor: pointer;
205
+ }
206
+
207
+ // Open dropdowns
208
+ // -------------------------
209
+ .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover {
210
+ color: $white;
211
+ background-color: $grayLight;
212
+ border-color: $grayLight;
213
+ }
214
+ .nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
215
+ border-top-color: $white;
216
+ @include opacity(100);
217
+ }
218
+
219
+ // Dropdowns in stacked tabs
220
+ .tabs-stacked .open > a:hover {
221
+ border-color: $grayLight;
222
+ }
223
+
224
+
225
+
226
+ // TABBABLE
227
+ // --------
228
+
229
+
230
+ // COMMON STYLES
231
+ // -------------
232
+
233
+ // Clear any floats
234
+ .tabbable {
235
+ @include clearfix();
236
+ }
237
+
238
+ // Remove border on bottom, left, right
239
+ .tabs-below .nav-tabs, .tabs-right .nav-tabs, .tabs-left .nav-tabs {
240
+ border-bottom: 0;
241
+ }
242
+
243
+ // Show/hide tabbable areas
244
+ .tab-content > .tab-pane, .pill-content > .pill-pane {
245
+ display: none;
246
+ }
247
+ .tab-content > .active, .pill-content > .active {
248
+ display: block;
249
+ }
250
+
251
+
252
+ // BOTTOM
253
+ // ------
254
+
255
+ .tabs-below .nav-tabs {
256
+ border-top: 1px solid #ddd;
257
+ }
258
+ .tabs-below .nav-tabs > li {
259
+ margin-top: -1px;
260
+ margin-bottom: 0;
261
+ }
262
+ .tabs-below .nav-tabs > li > a {
263
+ @include border-radius(0 0 4px 4px);
264
+ &:hover {
265
+ border-bottom-color: transparent;
266
+ border-top-color: #ddd;
267
+ }
268
+ }
269
+ .tabs-below .nav-tabs .active > a, .tabs-below .nav-tabs .active > a:hover {
270
+ border-color: transparent #ddd #ddd #ddd;
271
+ }
272
+
273
+ // LEFT & RIGHT
274
+ // ------------
275
+
276
+ // Common styles
277
+ .tabs-left .nav-tabs > li, .tabs-right .nav-tabs > li {
278
+ float: none;
279
+ }
280
+ .tabs-left .nav-tabs > li > a, .tabs-right .nav-tabs > li > a {
281
+ min-width: 74px;
282
+ margin-right: 0;
283
+ margin-bottom: 3px;
284
+ }
285
+
286
+ // Tabs on the left
287
+ .tabs-left .nav-tabs {
288
+ float: left;
289
+ margin-right: 19px;
290
+ border-right: 1px solid #ddd;
291
+ }
292
+ .tabs-left .nav-tabs > li > a {
293
+ margin-right: -1px;
294
+ @include border-radius(4px 0 0 4px);
295
+ }
296
+ .tabs-left .nav-tabs > li > a:hover {
297
+ border-color: $grayLighter #ddd $grayLighter $grayLighter;
298
+ }
299
+ .tabs-left .nav-tabs .active > a, .tabs-left .nav-tabs .active > a:hover {
300
+ border-color: #ddd transparent #ddd #ddd;
301
+ *border-right-color: $white;
302
+ }
303
+
304
+ // Tabs on the right
305
+ .tabs-right .nav-tabs {
306
+ float: right;
307
+ margin-left: 19px;
308
+ border-left: 1px solid #ddd;
309
+ }
310
+ .tabs-right .nav-tabs > li > a {
311
+ margin-left: -1px;
312
+ @include border-radius(0 4px 4px 0);
313
+ }
314
+ .tabs-right .nav-tabs > li > a:hover {
315
+ border-color: $grayLighter $grayLighter $grayLighter #ddd;
316
+ }
317
+ .tabs-right .nav-tabs .active > a, .tabs-right .nav-tabs .active > a:hover {
318
+ border-color: #ddd #ddd #ddd transparent;
319
+ *border-left-color: $white;
320
+ }