sass-twitter-bootstrap 2.0.1 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. data/lib/sass/twitter/bootstrap/version.rb +1 -1
  2. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  3. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  4. data/vendor/assets/javascripts/twitter/bootstrap-affix.js +104 -0
  5. data/vendor/assets/javascripts/twitter/bootstrap-alert.js +28 -32
  6. data/vendor/assets/javascripts/twitter/bootstrap-button.js +29 -33
  7. data/vendor/assets/javascripts/twitter/bootstrap-carousel.js +43 -24
  8. data/vendor/assets/javascripts/twitter/bootstrap-collapse.js +50 -28
  9. data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +77 -19
  10. data/vendor/assets/javascripts/twitter/bootstrap-modal.js +113 -84
  11. data/vendor/assets/javascripts/twitter/bootstrap-popover.js +19 -11
  12. data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +50 -24
  13. data/vendor/assets/javascripts/twitter/bootstrap-tab.js +13 -8
  14. data/vendor/assets/javascripts/twitter/bootstrap-tooltip.js +44 -39
  15. data/vendor/assets/javascripts/twitter/bootstrap-transition.js +29 -20
  16. data/vendor/assets/javascripts/twitter/bootstrap-typeahead.js +73 -44
  17. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -0
  18. data/vendor/assets/stylesheets/tests/css-tests.css +1 -12
  19. data/vendor/assets/stylesheets/tests/css-tests.html +22 -125
  20. data/vendor/assets/stylesheets/tests/navbar.html +39 -38
  21. data/vendor/assets/stylesheets/twitter/_accordion.scss +8 -2
  22. data/vendor/assets/stylesheets/twitter/_alerts.scss +16 -21
  23. data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss +12 -10
  24. data/vendor/assets/stylesheets/twitter/_button-groups.scss +137 -39
  25. data/vendor/assets/stylesheets/twitter/_buttons.scss +129 -81
  26. data/vendor/assets/stylesheets/twitter/_carousel.scss +13 -3
  27. data/vendor/assets/stylesheets/twitter/_close.scss +16 -3
  28. data/vendor/assets/stylesheets/twitter/_code.scss +11 -10
  29. data/vendor/assets/stylesheets/twitter/_component-animations.scss +12 -8
  30. data/vendor/assets/stylesheets/twitter/_dropdowns.scss +133 -53
  31. data/vendor/assets/stylesheets/twitter/_forms.scss +298 -170
  32. data/vendor/assets/stylesheets/twitter/_grid.scss +17 -4
  33. data/vendor/assets/stylesheets/twitter/_hero-unit.scss +7 -3
  34. data/vendor/assets/stylesheets/twitter/_labels-badges.scss +69 -0
  35. data/vendor/assets/stylesheets/twitter/_layouts.scss +2 -3
  36. data/vendor/assets/stylesheets/twitter/_mixins.scss +359 -258
  37. data/vendor/assets/stylesheets/twitter/_modals.scss +26 -12
  38. data/vendor/assets/stylesheets/twitter/_navbar.scss +318 -143
  39. data/vendor/assets/stylesheets/twitter/_navs.scss +87 -56
  40. data/vendor/assets/stylesheets/twitter/_pager.scss +16 -6
  41. data/vendor/assets/stylesheets/twitter/_pagination.scss +23 -14
  42. data/vendor/assets/stylesheets/twitter/_popovers.scss +101 -33
  43. data/vendor/assets/stylesheets/twitter/_progress-bars.scss +43 -16
  44. data/vendor/assets/stylesheets/twitter/_reset.scss +16 -6
  45. data/vendor/assets/stylesheets/twitter/_responsive-1200px-min.scss +28 -0
  46. data/vendor/assets/stylesheets/twitter/_responsive-767px-max.scss +174 -0
  47. data/vendor/assets/stylesheets/twitter/_responsive-768px-979px.scss +19 -0
  48. data/vendor/assets/stylesheets/twitter/_responsive-navbar.scss +177 -0
  49. data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss +58 -0
  50. data/vendor/assets/stylesheets/twitter/_scaffolding.scss +32 -11
  51. data/vendor/assets/stylesheets/twitter/_sprites.scss +49 -14
  52. data/vendor/assets/stylesheets/twitter/_tables.scss +115 -42
  53. data/vendor/assets/stylesheets/twitter/_thumbnails.scss +23 -6
  54. data/vendor/assets/stylesheets/twitter/_tooltip.scss +47 -12
  55. data/vendor/assets/stylesheets/twitter/_type.scss +96 -93
  56. data/vendor/assets/stylesheets/twitter/_utilities.scss +24 -2
  57. data/vendor/assets/stylesheets/twitter/_variables.scss +202 -31
  58. data/vendor/assets/stylesheets/twitter/_wells.scss +17 -5
  59. data/vendor/assets/stylesheets/twitter/bootstrap.scss +3 -7
  60. data/vendor/assets/stylesheets/twitter/responsive.scss +15 -301
  61. metadata +10 -7
  62. data/vendor/assets/stylesheets/tests/buttons.html +0 -139
  63. data/vendor/assets/stylesheets/tests/forms-responsive.html +0 -71
  64. data/vendor/assets/stylesheets/tests/navbar-fixed-top.html +0 -104
  65. data/vendor/assets/stylesheets/tests/navbar-static-top.html +0 -107
  66. data/vendor/assets/stylesheets/twitter/_labels.scss +0 -32
@@ -1,5 +1,6 @@
1
- // BUTTON STYLES
2
- // -------------
1
+ //
2
+ // Buttons
3
+ // --------------------------------------------------
3
4
 
4
5
 
5
6
  // Base styles
@@ -8,64 +9,63 @@
8
9
  // Core
9
10
  .btn {
10
11
  display: inline-block;
11
- padding: 4px 10px 4px;
12
+ @include ie7-inline-block();
13
+ padding: 4px 14px;
12
14
  margin-bottom: 0; // For input.btn
13
15
  font-size: $baseFontSize;
14
16
  line-height: $baseLineHeight;
15
- color: $grayDark;
17
+ *line-height: $baseLineHeight;
16
18
  text-align: center;
17
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
18
19
  vertical-align: middle;
19
- @include buttonBackground($white, darken($white, 10%));
20
- border: 1px solid #ccc;
21
- border-bottom-color: #bbb;
22
- @include border-radius(4px);
23
- $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
24
- @include box-shadow($shadow);
25
20
  cursor: pointer;
21
+ @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
22
+ border: 1px solid $btnBorder;
23
+ *border: 0; // Remove the border to prevent IE7's black border on input:focus
24
+ border-bottom-color: darken($btnBorder, 10%);
25
+ @include border-radius(4px);
26
+ @include ie7-restore-left-whitespace(); // Give IE7 some love
27
+ @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
28
+
29
+ // Hover state
30
+ &:hover {
31
+ color: $grayDark;
32
+ text-decoration: none;
33
+ background-color: darken($white, 10%);
34
+ *background-color: darken($white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
35
+ background-position: 0 -15px;
36
+
37
+ // transition is only when going to hover, otherwise the background
38
+ // behind the gradient (there for IE<=9 fallback) gets mismatched
39
+ @include transition(background-position .1s linear);
40
+ }
26
41
 
27
- // Give IE7 some love
28
- @include reset-filter();
29
- @include ie7-restore-left-whitespace();
30
- }
31
-
32
- // Hover state
33
- .btn:hover {
34
- color: $grayDark;
35
- text-decoration: none;
36
- background-color: darken($white, 10%);
37
- background-position: 0 -15px;
42
+ // Focus state for keyboard and accessibility
43
+ &:focus {
44
+ @include tab-focus();
45
+ }
38
46
 
39
- // transition is only when going to hover, otherwise the background
40
- // behind the gradient (there for IE<=9 fallback) gets mismatched
41
- @include transition(background-position .1s linear);
42
- }
47
+ // Active state
48
+ &.active,
49
+ &:active {
50
+ background-color: darken($white, 10%);
51
+ background-color: darken($white, 15%) \9;
52
+ background-image: none;
53
+ outline: 0;
54
+ @include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
55
+ }
43
56
 
44
- // Focus state for keyboard and accessibility
45
- .btn:focus {
46
- @include tab-focus();
47
- }
57
+ // Disabled state
58
+ &.disabled,
59
+ &[disabled] {
60
+ cursor: default;
61
+ background-color: darken($white, 10%);
62
+ background-image: none;
63
+ @include opacity(65);
64
+ @include box-shadow(none);
65
+ }
48
66
 
49
- // Active state
50
- .btn.active,
51
- .btn:active {
52
- background-image: none;
53
- $shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
54
- @include box-shadow($shadow);
55
- background-color: darken($white, 10%);
56
- background-color: darken($white, 15%) #{"\9"};
57
- outline: 0;
58
67
  }
59
68
 
60
- // Disabled state
61
- .btn.disabled,
62
- .btn[disabled] {
63
- cursor: default;
64
- background-image: none;
65
- background-color: darken($white, 10%);
66
- @include opacity(65);
67
- @include box-shadow(none);
68
- }
69
69
 
70
70
 
71
71
  // Button Sizes
@@ -79,81 +79,96 @@
79
79
  @include border-radius(5px);
80
80
  }
81
81
  .btn-large [class^="icon-"] {
82
- margin-top: 1px;
82
+ margin-top: 2px;
83
83
  }
84
84
 
85
85
  // Small
86
86
  .btn-small {
87
- padding: 5px 9px;
87
+ padding: 3px 9px;
88
88
  font-size: $baseFontSize - 2px;
89
89
  line-height: $baseLineHeight - 2px;
90
90
  }
91
91
  .btn-small [class^="icon-"] {
92
- margin-top: -1px;
92
+ margin-top: 0px;
93
93
  }
94
94
 
95
95
  // Mini
96
96
  .btn-mini {
97
97
  padding: 2px 6px;
98
- font-size: $baseFontSize - 2px;
99
- line-height: $baseLineHeight - 4px;
98
+ font-size: $baseFontSize - 3px;
99
+ line-height: $baseLineHeight - 3px;
100
100
  }
101
101
 
102
102
 
103
+ // Block button
104
+ // -------------------------
105
+
106
+ .btn-block {
107
+ display: block;
108
+ width: 100%;
109
+ padding-left: 0;
110
+ padding-right: 0;
111
+ @include box-sizing(border-box);
112
+ }
113
+
114
+ // Vertically space out multiple block buttons
115
+ .btn-block + .btn-block {
116
+ margin-top: 5px;
117
+ }
118
+
119
+ // Specificity overrides
120
+ input[type="submit"],
121
+ input[type="reset"],
122
+ input[type="button"] {
123
+ &.btn-block {
124
+ width: 100%;
125
+ }
126
+ }
127
+
128
+
129
+
103
130
  // Alternate buttons
104
131
  // --------------------------------------------------
105
132
 
106
- // Set text color
107
- // -------------------------
108
- .btn-primary,
109
- .btn-primary:hover,
110
- .btn-warning,
111
- .btn-warning:hover,
112
- .btn-danger,
113
- .btn-danger:hover,
114
- .btn-success,
115
- .btn-success:hover,
116
- .btn-info,
117
- .btn-info:hover,
118
- .btn-inverse,
119
- .btn-inverse:hover {
120
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
121
- color: $white;
122
- }
123
133
  // Provide *some* extra contrast for those who can get it
124
134
  .btn-primary.active,
125
135
  .btn-warning.active,
126
136
  .btn-danger.active,
127
137
  .btn-success.active,
128
138
  .btn-info.active,
129
- .btn-dark.active {
139
+ .btn-inverse.active {
130
140
  color: rgba(255,255,255,.75);
131
141
  }
132
142
 
133
143
  // Set the backgrounds
134
144
  // -------------------------
145
+ .btn {
146
+ // reset here as of 2.0.3 due to Recess property order
147
+ border-color: #c5c5c5;
148
+ border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
149
+ }
135
150
  .btn-primary {
136
- @include buttonBackground($primaryButtonBackground, adjust-hue($primaryButtonBackground, 20));
151
+ @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
137
152
  }
138
153
  // Warning appears are orange
139
154
  .btn-warning {
140
- @include buttonBackground(lighten($orange, 15%), $orange);
155
+ @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
141
156
  }
142
157
  // Danger and error appear as red
143
158
  .btn-danger {
144
- @include buttonBackground(#ee5f5b, #bd362f);
159
+ @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
145
160
  }
146
161
  // Success appears as green
147
162
  .btn-success {
148
- @include buttonBackground(#62c462, #51a351);
163
+ @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
149
164
  }
150
165
  // Info appears as a neutral blue
151
166
  .btn-info {
152
- @include buttonBackground(#5bc0de, #2f96b4);
167
+ @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
153
168
  }
154
169
  // Inverse appears as dark gray
155
170
  .btn-inverse {
156
- @include buttonBackground(#454545, #262626);
171
+ @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
157
172
  }
158
173
 
159
174
 
@@ -170,14 +185,47 @@ input[type="submit"].btn {
170
185
  }
171
186
 
172
187
  // IE7 has some default padding on button controls
173
- *padding-top: 2px;
174
- *padding-bottom: 2px;
175
- &.large {
188
+ *padding-top: 3px;
189
+ *padding-bottom: 3px;
190
+
191
+ &.btn-large {
176
192
  *padding-top: 7px;
177
193
  *padding-bottom: 7px;
178
194
  }
179
- &.small {
195
+ &.btn-small {
180
196
  *padding-top: 3px;
181
197
  *padding-bottom: 3px;
182
198
  }
199
+ &.btn-mini {
200
+ *padding-top: 1px;
201
+ *padding-bottom: 1px;
202
+ }
203
+ }
204
+
205
+
206
+ // Link buttons
207
+ // --------------------------------------------------
208
+
209
+ // Make a button look and behave like a link
210
+ .btn-link,
211
+ .btn-link:active,
212
+ .btn-link[disabled] {
213
+ background-color: transparent;
214
+ background-image: none;
215
+ @include box-shadow(none);
216
+ }
217
+ .btn-link {
218
+ border-color: transparent;
219
+ cursor: pointer;
220
+ color: $linkColor;
221
+ @include border-radius(0);
222
+ }
223
+ .btn-link:hover {
224
+ color: $linkColorHover;
225
+ text-decoration: underline;
226
+ background-color: transparent;
227
+ }
228
+ .btn-link[disabled]:hover {
229
+ color: $grayDark;
230
+ text-decoration: none;
183
231
  }
@@ -1,5 +1,7 @@
1
- // CAROUSEL
2
- // --------
1
+ //
2
+ // Carousel
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  .carousel {
5
7
  position: relative;
@@ -103,6 +105,7 @@
103
105
  }
104
106
  }
105
107
 
108
+
106
109
  // Caption for text below images
107
110
  // -----------------------------
108
111
 
@@ -111,11 +114,18 @@
111
114
  left: 0;
112
115
  right: 0;
113
116
  bottom: 0;
114
- padding: 10px 15px 5px;
117
+ padding: 15px;
115
118
  background: $grayDark;
116
119
  background: rgba(0,0,0,.75);
117
120
  }
118
121
  .carousel-caption h4,
119
122
  .carousel-caption p {
120
123
  color: $white;
124
+ line-height: $baseLineHeight;
125
+ }
126
+ .carousel-caption h4 {
127
+ margin: 0 0 5px;
128
+ }
129
+ .carousel-caption p {
130
+ margin-bottom: 0;
121
131
  }
@@ -1,5 +1,7 @@
1
- // CLOSE ICONS
2
- // -----------
1
+ //
2
+ // Close icons
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  .close {
5
7
  float: right;
@@ -12,7 +14,18 @@
12
14
  &:hover {
13
15
  color: $black;
14
16
  text-decoration: none;
15
- @include opacity(40);
16
17
  cursor: pointer;
18
+ @include opacity(40);
17
19
  }
18
20
  }
21
+
22
+ // Additional properties for button version
23
+ // iOS requires the button element instead of an anchor tag.
24
+ // If you want the anchor version, it requires `href="#"`.
25
+ button.close {
26
+ padding: 0;
27
+ cursor: pointer;
28
+ background: transparent;
29
+ border: 0;
30
+ -webkit-appearance: none;
31
+ }
@@ -1,20 +1,21 @@
1
- // Code.scss
2
- // Code typography styles for the <code> and <pre> elements
3
- // --------------------------------------------------------
1
+ //
2
+ // Code (inline and blocK)
3
+ // --------------------------------------------------
4
+
4
5
 
5
6
  // Inline and block code styles
6
7
  code,
7
8
  pre {
8
9
  padding: 0 3px 2px;
9
10
  @include font-family-monospace;
10
- font-size: $baseFontSize - 1;
11
+ font-size: $baseFontSize - 2;
11
12
  color: $grayDark;
12
13
  @include border-radius(3px);
13
14
  }
14
15
 
15
16
  // Inline code
16
17
  code {
17
- padding: 3px 4px;
18
+ padding: 2px 4px;
18
19
  color: #d14;
19
20
  background-color: #f7f7f9;
20
21
  border: 1px solid #e1e1e8;
@@ -25,16 +26,16 @@ pre {
25
26
  display: block;
26
27
  padding: ($baseLineHeight - 1) / 2;
27
28
  margin: 0 0 $baseLineHeight / 2;
28
- font-size: 12px;
29
+ font-size: $baseFontSize - 1; // 14px to 13px
29
30
  line-height: $baseLineHeight;
31
+ word-break: break-all;
32
+ word-wrap: break-word;
33
+ white-space: pre;
34
+ white-space: pre-wrap;
30
35
  background-color: #f5f5f5;
31
36
  border: 1px solid #ccc; // fallback for IE7-8
32
37
  border: 1px solid rgba(0,0,0,.15);
33
38
  @include border-radius(4px);
34
- white-space: pre;
35
- white-space: pre-wrap;
36
- word-break: break-all;
37
- word-wrap: break-word;
38
39
 
39
40
  // Make prettyprint styles more spaced out for readability
40
41
  &.prettyprint {
@@ -1,18 +1,22 @@
1
- // COMPONENT ANIMATIONS
2
- // --------------------
1
+ //
2
+ // Component animations
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  .fade {
7
+ @include opacity(0);
5
8
  @include transition(opacity .15s linear);
6
- opacity: 0;
7
9
  &.in {
8
- opacity: 1;
10
+ @include opacity(100);
9
11
  }
10
12
  }
11
13
 
12
14
  .collapse {
13
- @include transition(height .35s ease);
14
- position:relative;
15
- overflow:hidden;
15
+ position: relative;
16
16
  height: 0;
17
- &.in { height: auto; }
17
+ overflow: hidden;
18
+ @include transition(height .35s ease);
19
+ &.in {
20
+ height: auto;
21
+ }
18
22
  }
@@ -1,7 +1,10 @@
1
- // DROPDOWN MENUS
2
- // --------------
1
+ //
2
+ // Dropdown menus
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
7
+ .dropup,
5
8
  .dropdown {
6
9
  position: relative;
7
10
  }
@@ -13,117 +16,194 @@
13
16
  .open .dropdown-toggle {
14
17
  outline: 0;
15
18
  }
19
+
16
20
  // Dropdown arrow/caret
21
+ // --------------------
17
22
  .caret {
18
23
  display: inline-block;
19
24
  width: 0;
20
25
  height: 0;
21
- text-indent: -99999px;
22
- // IE7 won't do the border trick if there's a text indent, but it doesn't
23
- // do the content that text-indent is hiding, either, so we're ok.
24
- *text-indent: 0;
25
26
  vertical-align: top;
26
- border-left: 4px solid transparent;
27
- border-right: 4px solid transparent;
28
27
  border-top: 4px solid $black;
29
- @include opacity(30);
30
- content: "\2193";
28
+ border-right: 4px solid transparent;
29
+ border-left: 4px solid transparent;
30
+ content: "";
31
31
  }
32
+
33
+ // Place the caret
32
34
  .dropdown .caret {
33
35
  margin-top: 8px;
34
36
  margin-left: 2px;
35
37
  }
36
- .dropdown:hover .caret,
37
- .open.dropdown .caret {
38
- @include opacity(100);
39
- }
38
+
40
39
  // The dropdown menu (ul)
40
+ // ----------------------
41
41
  .dropdown-menu {
42
42
  position: absolute;
43
43
  top: 100%;
44
44
  left: 0;
45
45
  z-index: $zindexDropdown;
46
- float: left;
47
46
  display: none; // none by default, but block on "open" of the menu
47
+ float: left;
48
48
  min-width: 160px;
49
- _width: 160px;
50
- padding: 4px 0;
51
- margin: 0; // override default ul
49
+ padding: 5px 0;
50
+ margin: 2px 0 0; // override default ul
52
51
  list-style: none;
53
- background-color: $white;
54
- border-color: #ccc;
55
- border-color: rgba(0,0,0,.2);
56
- border-style: solid;
57
- border-width: 1px;
58
- @include border-radius(0 0 5px 5px);
52
+ background-color: $dropdownBackground;
53
+ border: 1px solid #ccc; // Fallback for IE7-8
54
+ border: 1px solid $dropdownBorder;
55
+ *border-right-width: 2px;
56
+ *border-bottom-width: 2px;
57
+ @include border-radius(6px);
59
58
  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
60
59
  -webkit-background-clip: padding-box;
61
60
  -moz-background-clip: padding;
62
61
  background-clip: padding-box;
63
- *border-right-width: 2px;
64
- *border-bottom-width: 2px;
65
62
 
66
- // Allow for dropdowns to go bottom up (aka, dropup-menu)
67
- &.bottom-up {
68
- top: auto;
69
- bottom: 100%;
70
- margin-bottom: 2px;
63
+ // Aligns the dropdown menu to right
64
+ &.pull-right {
65
+ right: 0;
66
+ left: auto;
71
67
  }
72
68
 
73
69
  // Dividers (basically an hr) within the dropdown
74
70
  .divider {
75
- height: 1px;
76
- margin: 5px 1px;
77
- overflow: hidden;
78
- background-color: #e5e5e5;
79
- border-bottom: 1px solid $white;
80
-
81
- // IE7 needs a set width since we gave a height. Restricting just
82
- // to IE7 to keep the 1px left/right space in other browsers.
83
- // It is unclear where IE is getting the extra space that we need
84
- // to negative-margin away, but so it goes.
85
- *width: 100%;
86
- *margin: -5px 0 5px;
71
+ @include nav-divider($dropdownDividerTop, $dropdownDividerBottom);
87
72
  }
88
73
 
89
74
  // Links within the dropdown menu
90
75
  a {
91
76
  display: block;
92
- padding: 3px 15px;
77
+ padding: 3px 20px;
93
78
  clear: both;
94
79
  font-weight: normal;
95
80
  line-height: $baseLineHeight;
96
- color: $gray;
81
+ color: $dropdownLinkColor;
97
82
  white-space: nowrap;
98
83
  }
99
84
  }
100
85
 
101
86
  // Hover state
87
+ // -----------
102
88
  .dropdown-menu li > a:hover,
89
+ .dropdown-menu li > a:focus,
90
+ .dropdown-submenu:hover > a {
91
+ text-decoration: none;
92
+ color: $dropdownLinkColorHover;
93
+ background-color: $dropdownLinkBackgroundHover;
94
+ @include gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
95
+ }
96
+
97
+ // Active state
98
+ // ------------
103
99
  .dropdown-menu .active > a,
104
100
  .dropdown-menu .active > a:hover {
105
- color: $white;
101
+ color: $dropdownLinkColorHover;
106
102
  text-decoration: none;
107
- background-color: $linkColor;
103
+ outline: 0;
104
+ background-color: $dropdownLinkBackgroundActive;
105
+ @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
106
+ }
107
+
108
+ // Disabled state
109
+ // --------------
110
+ // Gray out text and ensure the hover state remains gray
111
+ .dropdown-menu .disabled > a,
112
+ .dropdown-menu .disabled > a:hover {
113
+ color: $grayLight;
114
+ }
115
+ // Nuke hover effects
116
+ .dropdown-menu .disabled > a:hover {
117
+ text-decoration: none;
118
+ background-color: transparent;
119
+ cursor: default;
108
120
  }
109
121
 
110
122
  // Open state for the dropdown
111
- .dropdown.open {
123
+ // ---------------------------
124
+ .open {
112
125
  // IE7's z-index only goes to the nearest positioned ancestor, which would
113
126
  // make the menu appear below buttons that appeared later on the page
114
127
  *z-index: $zindexDropdown;
115
128
 
116
- .dropdown-toggle {
117
- color: $white;
118
- background: #ccc;
119
- background: rgba(0,0,0,.3);
129
+ & > .dropdown-menu {
130
+ display: block;
120
131
  }
132
+ }
133
+
134
+ // Right aligned dropdowns
135
+ // ---------------------------
136
+ .pull-right > .dropdown-menu {
137
+ right: 0;
138
+ left: auto;
139
+ }
140
+
141
+ // Allow for dropdowns to go bottom up (aka, dropup-menu)
142
+ // ------------------------------------------------------
143
+ // Just add .dropup after the standard .dropdown class and you're set, bro.
144
+ // TODO: abstract this so that the navbar fixed styles are not placed here?
145
+ .dropup,
146
+ .navbar-fixed-bottom .dropdown {
147
+ // Reverse the caret
148
+ .caret {
149
+ border-top: 0;
150
+ border-bottom: 4px solid $black;
151
+ content: "";
152
+ }
153
+ // Different positioning for bottom up menu
121
154
  .dropdown-menu {
122
- display: block;
155
+ top: auto;
156
+ bottom: 100%;
157
+ margin-bottom: 1px;
123
158
  }
124
159
  }
125
160
 
161
+ // Sub menus
162
+ // ---------------------------
163
+ .dropdown-submenu {
164
+ position: relative;
165
+ }
166
+ .dropdown-submenu > .dropdown-menu {
167
+ top: 0;
168
+ left: 100%;
169
+ margin-top: -6px;
170
+ margin-left: -1px;
171
+ -webkit-border-radius: 0 6px 6px 6px;
172
+ -moz-border-radius: 0 6px 6px 6px;
173
+ border-radius: 0 6px 6px 6px;
174
+ }
175
+ .dropdown-submenu:hover > .dropdown-menu {
176
+ display: block;
177
+ }
178
+
179
+ .dropdown-submenu > a:after {
180
+ display: block;
181
+ content: " ";
182
+ float: right;
183
+ width: 0;
184
+ height: 0;
185
+ border-color: transparent;
186
+ border-style: solid;
187
+ border-width: 5px 0 5px 5px;
188
+ border-left-color: darken($dropdownBackground, 20%);
189
+ margin-top: 5px;
190
+ margin-right: -10px;
191
+ }
192
+ .dropdown-submenu:hover > a:after {
193
+ border-left-color: $dropdownLinkColorHover;
194
+ }
195
+
196
+
197
+ // Tweak nav headers
198
+ // -----------------
199
+ // Increase padding from 15px to 20px on sides
200
+ .dropdown .dropdown-menu .nav-header {
201
+ padding-left: 20px;
202
+ padding-right: 20px;
203
+ }
204
+
126
205
  // Typeahead
206
+ // ---------
127
207
  .typeahead {
128
208
  margin-top: 2px; // give it some space to breathe
129
209
  @include border-radius(4px);