compass_twitter_bootstrap 0.1.8 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (96) hide show
  1. data/CHANGELOG.md +6 -0
  2. data/README.md +14 -8
  3. data/build/convert.rb +58 -33
  4. data/lib/compass_twitter_bootstrap.rb +1 -1
  5. data/lib/compass_twitter_bootstrap/version.rb +1 -1
  6. data/stylesheets/_compass_twitter_bootstrap.scss +45 -7
  7. data/stylesheets/_compass_twitter_bootstrap_responsive.scss +322 -0
  8. data/stylesheets/compass_twitter_bootstrap/_accordion.scss +28 -0
  9. data/stylesheets/compass_twitter_bootstrap/_alerts.scss +70 -0
  10. data/stylesheets/compass_twitter_bootstrap/_breadcrumbs.scss +22 -0
  11. data/stylesheets/compass_twitter_bootstrap/_button-groups.scss +147 -0
  12. data/stylesheets/compass_twitter_bootstrap/_buttons.scss +165 -0
  13. data/stylesheets/compass_twitter_bootstrap/_carousel.scss +121 -0
  14. data/stylesheets/compass_twitter_bootstrap/_close.scss +18 -0
  15. data/stylesheets/compass_twitter_bootstrap/_code.scss +44 -0
  16. data/stylesheets/compass_twitter_bootstrap/_component-animations.scss +18 -0
  17. data/stylesheets/compass_twitter_bootstrap/_dropdowns.scss +131 -0
  18. data/stylesheets/compass_twitter_bootstrap/_forms.scss +335 -299
  19. data/stylesheets/compass_twitter_bootstrap/_grid.scss +8 -0
  20. data/stylesheets/compass_twitter_bootstrap/_hero-unit.scss +20 -0
  21. data/stylesheets/compass_twitter_bootstrap/_labels.scss +16 -0
  22. data/stylesheets/compass_twitter_bootstrap/_layouts.scss +17 -0
  23. data/stylesheets/compass_twitter_bootstrap/_mixins.scss +409 -68
  24. data/stylesheets/compass_twitter_bootstrap/_modals.scss +72 -0
  25. data/stylesheets/compass_twitter_bootstrap/_navbar.scss +292 -0
  26. data/stylesheets/compass_twitter_bootstrap/_navs.scss +344 -0
  27. data/stylesheets/compass_twitter_bootstrap/_pager.scss +30 -0
  28. data/stylesheets/compass_twitter_bootstrap/_pagination.scss +55 -0
  29. data/stylesheets/compass_twitter_bootstrap/_popovers.scss +49 -0
  30. data/stylesheets/compass_twitter_bootstrap/_progress-bars.scss +95 -0
  31. data/stylesheets/compass_twitter_bootstrap/_reset.scss +37 -52
  32. data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss +13 -123
  33. data/stylesheets/compass_twitter_bootstrap/_sprites.scss +156 -0
  34. data/stylesheets/compass_twitter_bootstrap/_tables.scss +75 -160
  35. data/stylesheets/compass_twitter_bootstrap/_thumbnails.scss +35 -0
  36. data/stylesheets/compass_twitter_bootstrap/_tooltip.scss +35 -0
  37. data/stylesheets/compass_twitter_bootstrap/_type.scss +100 -70
  38. data/stylesheets/compass_twitter_bootstrap/_utilities.scss +23 -0
  39. data/stylesheets/compass_twitter_bootstrap/_variables.scss +94 -55
  40. data/stylesheets/compass_twitter_bootstrap/_wells.scss +17 -0
  41. data/stylesheets_sass/_compass_twitter_bootstrap.sass +49 -6
  42. data/stylesheets_sass/_compass_twitter_bootstrap_responsive.sass +252 -0
  43. data/stylesheets_sass/compass_twitter_bootstrap/_accordion.sass +24 -0
  44. data/stylesheets_sass/compass_twitter_bootstrap/_alerts.sass +65 -0
  45. data/stylesheets_sass/compass_twitter_bootstrap/_breadcrumbs.sass +18 -0
  46. data/stylesheets_sass/compass_twitter_bootstrap/_button-groups.sass +129 -0
  47. data/stylesheets_sass/compass_twitter_bootstrap/_buttons.sass +150 -0
  48. data/stylesheets_sass/compass_twitter_bootstrap/_carousel.sass +95 -0
  49. data/stylesheets_sass/compass_twitter_bootstrap/_close.sass +16 -0
  50. data/stylesheets_sass/compass_twitter_bootstrap/_code.sass +41 -0
  51. data/stylesheets_sass/compass_twitter_bootstrap/_component-animations.sass +16 -0
  52. data/stylesheets_sass/compass_twitter_bootstrap/_dropdowns.sass +121 -0
  53. data/stylesheets_sass/compass_twitter_bootstrap/_forms.sass +327 -306
  54. data/stylesheets_sass/compass_twitter_bootstrap/_grid.sass +8 -0
  55. data/stylesheets_sass/compass_twitter_bootstrap/_hero-unit.sass +17 -0
  56. data/stylesheets_sass/compass_twitter_bootstrap/_labels.sass +23 -0
  57. data/stylesheets_sass/compass_twitter_bootstrap/_layouts.sass +14 -0
  58. data/stylesheets_sass/compass_twitter_bootstrap/_mixins.sass +425 -57
  59. data/stylesheets_sass/compass_twitter_bootstrap/_modals.sass +75 -0
  60. data/stylesheets_sass/compass_twitter_bootstrap/_navbar.sass +258 -0
  61. data/stylesheets_sass/compass_twitter_bootstrap/_navs.sass +316 -0
  62. data/stylesheets_sass/compass_twitter_bootstrap/_pager.sass +29 -0
  63. data/stylesheets_sass/compass_twitter_bootstrap/_pagination.sass +53 -0
  64. data/stylesheets_sass/compass_twitter_bootstrap/_popovers.sass +55 -0
  65. data/stylesheets_sass/compass_twitter_bootstrap/_progress-bars.sass +89 -0
  66. data/stylesheets_sass/compass_twitter_bootstrap/_reset.sass +33 -67
  67. data/stylesheets_sass/compass_twitter_bootstrap/_scaffolding.sass +13 -175
  68. data/stylesheets_sass/compass_twitter_bootstrap/_sprites.sass +392 -0
  69. data/stylesheets_sass/compass_twitter_bootstrap/_tables.sass +67 -139
  70. data/stylesheets_sass/compass_twitter_bootstrap/_thumbnails.sass +34 -0
  71. data/stylesheets_sass/compass_twitter_bootstrap/_tooltip.sass +43 -0
  72. data/stylesheets_sass/compass_twitter_bootstrap/_type.sass +95 -65
  73. data/stylesheets_sass/compass_twitter_bootstrap/_utilities.sass +20 -0
  74. data/stylesheets_sass/compass_twitter_bootstrap/_variables.sass +67 -45
  75. data/stylesheets_sass/compass_twitter_bootstrap/_wells.sass +15 -0
  76. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  77. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  78. data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
  79. data/vendor/assets/javascripts/bootstrap-button.js +98 -0
  80. data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
  81. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  82. data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
  83. data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
  84. data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
  85. data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
  86. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  87. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  88. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  89. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  90. metadata +69 -17
  91. data/stylesheets/compass_twitter_bootstrap/_patterns.scss +0 -1058
  92. data/stylesheets_sass/compass_twitter_bootstrap/_patterns.sass +0 -923
  93. data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
  94. data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
  95. data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
  96. data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
@@ -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,
24
+ .modal-backdrop.fade.in {
25
+ @include opacity(0.8);
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
+ @include transition(e('opacity .3s linear, top .3s ease-out'));
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,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 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,
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 font-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(1.0);
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(1.0);
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
+ }