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