bootstrap-sass 1.4.4 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.

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
+ }