bootstrap-generators 2.0.1 → 2.0.4

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 (127) hide show
  1. data/README.md +258 -33
  2. data/Rakefile +0 -59
  3. data/lib/bootstrap/generators/engine.rb +6 -1
  4. data/lib/bootstrap/generators/version.rb +1 -1
  5. data/lib/generators/bootstrap/install/install_generator.rb +10 -2
  6. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +120 -15
  7. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +206 -0
  8. data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css +2 -0
  9. data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css.less +5 -4
  10. data/lib/generators/bootstrap/install/templates/assets/stylesheets/fluid.css.scss +3 -2
  11. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css +2 -0
  12. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.less +5 -4
  13. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.scss +3 -2
  14. data/lib/generators/bootstrap/install/templates/config/initializers/simple_form.rb +3 -0
  15. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +3 -3
  16. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +2 -2
  17. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.erb +1 -1
  18. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.haml +1 -1
  19. data/test/fixtures/application.js +3 -0
  20. data/test/lib/generators/bootstrap/install_generator_test.rb +4 -3
  21. data/test/test_helper.rb +8 -1
  22. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  23. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  24. data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
  25. data/vendor/assets/javascripts/bootstrap-button.js +29 -33
  26. data/vendor/assets/javascripts/bootstrap-carousel.js +33 -21
  27. data/vendor/assets/javascripts/bootstrap-collapse.js +47 -26
  28. data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
  29. data/vendor/assets/javascripts/bootstrap-modal.js +25 -17
  30. data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
  31. data/vendor/assets/javascripts/bootstrap-scrollspy.js +44 -18
  32. data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
  33. data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
  34. data/vendor/assets/javascripts/bootstrap-transition.js +30 -20
  35. data/vendor/assets/javascripts/bootstrap-typeahead.js +29 -15
  36. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/accordion.less +5 -0
  37. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/alerts.less +2 -14
  38. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/bootstrap.less +2 -2
  39. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/breadcrumbs.less +2 -0
  40. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/button-groups.less +76 -33
  41. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/buttons.less +32 -24
  42. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/carousel.less +0 -0
  43. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/close.less +12 -1
  44. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/code.less +6 -6
  45. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/component-animations.less +7 -5
  46. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/dropdowns.less +58 -45
  47. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/forms.less +205 -144
  48. data/vendor/twitter/bootstrap/less/grid.less +5 -0
  49. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/hero-unit.less +3 -1
  50. data/vendor/twitter/bootstrap/less/labels-badges.less +55 -0
  51. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/layouts.less +1 -1
  52. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/mixins.less +235 -179
  53. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/modals.less +13 -6
  54. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/navbar.less +131 -72
  55. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/navs.less +53 -43
  56. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/pager.less +6 -0
  57. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/pagination.less +1 -0
  58. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/popovers.less +0 -0
  59. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/progress-bars.less +27 -5
  60. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/reset.less +8 -3
  61. data/vendor/twitter/bootstrap/less/responsive-1200px-min.less +26 -0
  62. data/vendor/twitter/bootstrap/less/responsive-767px-max.less +149 -0
  63. data/vendor/twitter/bootstrap/less/responsive-768px-979px.less +17 -0
  64. data/vendor/twitter/bootstrap/less/responsive-navbar.less +153 -0
  65. data/vendor/twitter/bootstrap/less/responsive-utilities.less +41 -0
  66. data/vendor/twitter/bootstrap/less/responsive.less +48 -0
  67. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/scaffolding.less +4 -4
  68. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/sprites.less +42 -9
  69. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/tables.less +46 -20
  70. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/thumbnails.less +14 -2
  71. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/tooltip.less +0 -0
  72. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/type.less +27 -13
  73. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/utilities.less +0 -0
  74. data/vendor/twitter/bootstrap/less/variables.less +206 -0
  75. data/vendor/{assets/stylesheets → twitter/bootstrap}/less/wells.less +10 -0
  76. data/vendor/{assets/stylesheets/scss/accordion.scss → twitter/bootstrap/sass/_accordion.scss} +5 -0
  77. data/vendor/{assets/stylesheets/scss/alerts.scss → twitter/bootstrap/sass/_alerts.scss} +3 -15
  78. data/vendor/{assets/stylesheets/scss/breadcrumbs.scss → twitter/bootstrap/sass/_breadcrumbs.scss} +2 -0
  79. data/vendor/{assets/stylesheets/scss/button-groups.scss → twitter/bootstrap/sass/_button-groups.scss} +76 -33
  80. data/vendor/{assets/stylesheets/scss/buttons.scss → twitter/bootstrap/sass/_buttons.scss} +33 -25
  81. data/vendor/{assets/stylesheets/scss/carousel.scss → twitter/bootstrap/sass/_carousel.scss} +1 -1
  82. data/vendor/{assets/stylesheets/scss/close.scss → twitter/bootstrap/sass/_close.scss} +12 -1
  83. data/vendor/{assets/stylesheets/scss/code.scss → twitter/bootstrap/sass/_code.scss} +7 -7
  84. data/vendor/{assets/stylesheets/scss/component-animations.scss → twitter/bootstrap/sass/_component-animations.scss} +9 -7
  85. data/vendor/{assets/stylesheets/scss/dropdowns.scss → twitter/bootstrap/sass/_dropdowns.scss} +58 -45
  86. data/vendor/{assets/stylesheets/scss/forms.scss → twitter/bootstrap/sass/_forms.scss} +205 -145
  87. data/vendor/twitter/bootstrap/sass/_grid.scss +5 -0
  88. data/vendor/{assets/stylesheets/scss/hero-unit.scss → twitter/bootstrap/sass/_hero-unit.scss} +3 -1
  89. data/vendor/twitter/bootstrap/sass/_labels-badges.scss +52 -0
  90. data/vendor/{assets/stylesheets/scss/layouts.scss → twitter/bootstrap/sass/_layouts.scss} +2 -2
  91. data/vendor/{assets/stylesheets/scss/mixins.scss → twitter/bootstrap/sass/_mixins.scss} +246 -182
  92. data/vendor/{assets/stylesheets/scss/modals.scss → twitter/bootstrap/sass/_modals.scss} +14 -7
  93. data/vendor/{assets/stylesheets/scss/navbar.scss → twitter/bootstrap/sass/_navbar.scss} +132 -73
  94. data/vendor/{assets/stylesheets/scss/navs.scss → twitter/bootstrap/sass/_navs.scss} +53 -43
  95. data/vendor/{assets/stylesheets/scss/pager.scss → twitter/bootstrap/sass/_pager.scss} +6 -0
  96. data/vendor/{assets/stylesheets/scss/pagination.scss → twitter/bootstrap/sass/_pagination.scss} +1 -0
  97. data/vendor/{assets/stylesheets/scss/popovers.scss → twitter/bootstrap/sass/_popovers.scss} +0 -0
  98. data/vendor/{assets/stylesheets/scss/progress-bars.scss → twitter/bootstrap/sass/_progress-bars.scss} +27 -5
  99. data/vendor/{assets/stylesheets/scss/reset.scss → twitter/bootstrap/sass/_reset.scss} +8 -3
  100. data/vendor/twitter/bootstrap/sass/_responsive-1200px-min.scss +26 -0
  101. data/vendor/twitter/bootstrap/sass/_responsive-767px-max.scss +149 -0
  102. data/vendor/twitter/bootstrap/sass/_responsive-768px-979px.scss +17 -0
  103. data/vendor/twitter/bootstrap/sass/_responsive-navbar.scss +153 -0
  104. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +41 -0
  105. data/vendor/{assets/stylesheets/scss/scaffolding.scss → twitter/bootstrap/sass/_scaffolding.scss} +4 -4
  106. data/vendor/{assets/stylesheets/scss/sprites.scss → twitter/bootstrap/sass/_sprites.scss} +40 -7
  107. data/vendor/{assets/stylesheets/scss/tables.scss → twitter/bootstrap/sass/_tables.scss} +37 -32
  108. data/vendor/{assets/stylesheets/scss/thumbnails.scss → twitter/bootstrap/sass/_thumbnails.scss} +14 -2
  109. data/vendor/{assets/stylesheets/scss/tooltip.scss → twitter/bootstrap/sass/_tooltip.scss} +1 -1
  110. data/vendor/{assets/stylesheets/scss/type.scss → twitter/bootstrap/sass/_type.scss} +27 -13
  111. data/vendor/{assets/stylesheets/scss/utilities.scss → twitter/bootstrap/sass/_utilities.scss} +0 -0
  112. data/vendor/twitter/bootstrap/sass/_variables.scss +204 -0
  113. data/vendor/{assets/stylesheets/scss/wells.scss → twitter/bootstrap/sass/_wells.scss} +10 -0
  114. data/vendor/{assets/stylesheets/scss → twitter/bootstrap/sass}/bootstrap.scss +3 -3
  115. data/vendor/twitter/bootstrap/sass/responsive.scss +48 -0
  116. metadata +93 -84
  117. data/lib/generators/bootstrap/install/templates/assets/javascripts/bootstrap-generators.js +0 -1
  118. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.less +0 -98
  119. data/vendor/assets/stylesheets/bootstrap.css +0 -3363
  120. data/vendor/assets/stylesheets/less/grid.less +0 -8
  121. data/vendor/assets/stylesheets/less/labels.less +0 -32
  122. data/vendor/assets/stylesheets/less/responsive.less +0 -327
  123. data/vendor/assets/stylesheets/less/variables.less +0 -107
  124. data/vendor/assets/stylesheets/scss/grid.scss +0 -8
  125. data/vendor/assets/stylesheets/scss/labels.scss +0 -32
  126. data/vendor/assets/stylesheets/scss/responsive.scss +0 -327
  127. data/vendor/assets/stylesheets/scss/variables.scss +0 -107
@@ -8,25 +8,24 @@
8
8
  // Core
9
9
  .btn {
10
10
  display: inline-block;
11
+ @include ie7-inline-block();
11
12
  padding: 4px 10px 4px;
12
13
  margin-bottom: 0; // For input.btn
13
14
  font-size: $baseFontSize;
14
15
  line-height: $baseLineHeight;
16
+ *line-height: 20px;
15
17
  color: $grayDark;
16
18
  text-align: center;
17
19
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
18
20
  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
21
  cursor: pointer;
26
-
27
- // Give IE7 some love
28
- @include reset-filter();
29
- @include ie7-restore-left-whitespace();
22
+ @include buttonBackground($btnBackground, $btnBackgroundHighlight);
23
+ border: 1px solid $btnBorder;
24
+ *border: 0; // Remove the border to prevent IE7's black border on input:focus
25
+ border-bottom-color: darken($btnBorder, 10%);
26
+ @include border-radius(4px);
27
+ @include ie7-restore-left-whitespace(); // Give IE7 some love
28
+ @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
30
29
  }
31
30
 
32
31
  // Hover state
@@ -34,6 +33,7 @@
34
33
  color: $grayDark;
35
34
  text-decoration: none;
36
35
  background-color: darken($white, 10%);
36
+ *background-color: darken($white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
37
37
  background-position: 0 -15px;
38
38
 
39
39
  // transition is only when going to hover, otherwise the background
@@ -49,20 +49,19 @@
49
49
  // Active state
50
50
  .btn.active,
51
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
52
  background-color: darken($white, 10%);
56
- background-color: darken($white, 15%) #{"\9"};
53
+ background-color: darken($white, 15%) \9;
54
+ background-image: none;
57
55
  outline: 0;
56
+ @include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
58
57
  }
59
58
 
60
59
  // Disabled state
61
60
  .btn.disabled,
62
61
  .btn[disabled] {
63
62
  cursor: default;
64
- background-image: none;
65
63
  background-color: darken($white, 10%);
64
+ background-image: none;
66
65
  @include opacity(65);
67
66
  @include box-shadow(none);
68
67
  }
@@ -117,8 +116,8 @@
117
116
  .btn-info:hover,
118
117
  .btn-inverse,
119
118
  .btn-inverse:hover {
120
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
121
119
  color: $white;
120
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
122
121
  }
123
122
  // Provide *some* extra contrast for those who can get it
124
123
  .btn-primary.active,
@@ -126,34 +125,39 @@
126
125
  .btn-danger.active,
127
126
  .btn-success.active,
128
127
  .btn-info.active,
129
- .btn-dark.active {
128
+ .btn-inverse.active {
130
129
  color: rgba(255,255,255,.75);
131
130
  }
132
131
 
133
132
  // Set the backgrounds
134
133
  // -------------------------
134
+ .btn {
135
+ // reset here as of 2.0.3 due to Recess property order
136
+ border-color: #ccc;
137
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
138
+ }
135
139
  .btn-primary {
136
- @include buttonBackground($primaryButtonBackground, adjust-hue($primaryButtonBackground, 20));
140
+ @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
137
141
  }
138
142
  // Warning appears are orange
139
143
  .btn-warning {
140
- @include buttonBackground(lighten($orange, 15%), $orange);
144
+ @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
141
145
  }
142
146
  // Danger and error appear as red
143
147
  .btn-danger {
144
- @include buttonBackground(#ee5f5b, #bd362f);
148
+ @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
145
149
  }
146
150
  // Success appears as green
147
151
  .btn-success {
148
- @include buttonBackground(#62c462, #51a351);
152
+ @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
149
153
  }
150
154
  // Info appears as a neutral blue
151
155
  .btn-info {
152
- @include buttonBackground(#5bc0de, #2f96b4);
156
+ @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
153
157
  }
154
158
  // Inverse appears as dark gray
155
159
  .btn-inverse {
156
- @include buttonBackground(#454545, #262626);
160
+ @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
157
161
  }
158
162
 
159
163
 
@@ -172,12 +176,16 @@ input[type="submit"].btn {
172
176
  // IE7 has some default padding on button controls
173
177
  *padding-top: 2px;
174
178
  *padding-bottom: 2px;
175
- &.large {
179
+ &.btn-large {
176
180
  *padding-top: 7px;
177
181
  *padding-bottom: 7px;
178
182
  }
179
- &.small {
183
+ &.btn-small {
180
184
  *padding-top: 3px;
181
185
  *padding-bottom: 3px;
182
186
  }
187
+ &.btn-mini {
188
+ *padding-top: 1px;
189
+ *padding-bottom: 1px;
190
+ }
183
191
  }
@@ -87,7 +87,7 @@
87
87
  // animation if you trip this while
88
88
  // in the middle of another animation
89
89
  // ;_;
90
- // @include transition(opacity .2s linear);
90
+ // .transition(opacity .2s linear);
91
91
 
92
92
  // Reposition the right one
93
93
  &.right {
@@ -12,7 +12,18 @@
12
12
  &:hover {
13
13
  color: $black;
14
14
  text-decoration: none;
15
- @include opacity(40);
16
15
  cursor: pointer;
16
+ @include opacity(40);
17
17
  }
18
18
  }
19
+
20
+ // Additional properties for button version
21
+ // iOS requires the button element instead of an anchor tag.
22
+ // If you want the anchor version, it requires `href="#"`.
23
+ button.close {
24
+ padding: 0;
25
+ cursor: pointer;
26
+ background: transparent;
27
+ border: 0;
28
+ -webkit-appearance: none;
29
+ }
@@ -14,7 +14,7 @@ pre {
14
14
 
15
15
  // Inline code
16
16
  code {
17
- padding: 3px 4px;
17
+ padding: 2px 4px;
18
18
  color: #d14;
19
19
  background-color: #f7f7f9;
20
20
  border: 1px solid #e1e1e8;
@@ -25,16 +25,16 @@ pre {
25
25
  display: block;
26
26
  padding: ($baseLineHeight - 1) / 2;
27
27
  margin: 0 0 $baseLineHeight / 2;
28
- font-size: 12px;
28
+ font-size: $baseFontSize * .925; // 13px to 12px
29
29
  line-height: $baseLineHeight;
30
+ word-break: break-all;
31
+ word-wrap: break-word;
32
+ white-space: pre;
33
+ white-space: pre-wrap;
30
34
  background-color: #f5f5f5;
31
35
  border: 1px solid #ccc; // fallback for IE7-8
32
36
  border: 1px solid rgba(0,0,0,.15);
33
37
  @include border-radius(4px);
34
- white-space: pre;
35
- white-space: pre-wrap;
36
- word-break: break-all;
37
- word-wrap: break-word;
38
38
 
39
39
  // Make prettyprint styles more spaced out for readability
40
40
  &.prettyprint {
@@ -54,4 +54,4 @@ pre {
54
54
  .pre-scrollable {
55
55
  max-height: 340px;
56
56
  overflow-y: scroll;
57
- }
57
+ }
@@ -2,17 +2,19 @@
2
2
  // --------------------
3
3
 
4
4
  .fade {
5
+ @include opacity(0);
5
6
  @include transition(opacity .15s linear);
6
- opacity: 0;
7
7
  &.in {
8
- opacity: 1;
8
+ @include opacity(100);
9
9
  }
10
10
  }
11
11
 
12
12
  .collapse {
13
- @include transition(height .35s ease);
14
- position:relative;
15
- overflow:hidden;
13
+ position: relative;
16
14
  height: 0;
17
- &.in { height: auto; }
18
- }
15
+ overflow: hidden;
16
+ @include transition(height .35s ease);
17
+ &.in {
18
+ height: auto;
19
+ }
20
+ }
@@ -2,6 +2,7 @@
2
2
  // --------------
3
3
 
4
4
  // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
5
+ .dropup,
5
6
  .dropdown {
6
7
  position: relative;
7
8
  }
@@ -13,77 +14,64 @@
13
14
  .open .dropdown-toggle {
14
15
  outline: 0;
15
16
  }
17
+
16
18
  // Dropdown arrow/caret
19
+ // --------------------
17
20
  .caret {
18
21
  display: inline-block;
19
22
  width: 0;
20
23
  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
24
  vertical-align: top;
26
- border-left: 4px solid transparent;
27
- border-right: 4px solid transparent;
28
25
  border-top: 4px solid $black;
26
+ border-right: 4px solid transparent;
27
+ border-left: 4px solid transparent;
28
+ content: "";
29
29
  @include opacity(30);
30
- content: "\2193";
31
30
  }
31
+
32
+ // Place the caret
32
33
  .dropdown .caret {
33
34
  margin-top: 8px;
34
35
  margin-left: 2px;
35
36
  }
36
37
  .dropdown:hover .caret,
37
- .open.dropdown .caret {
38
+ .open .caret {
38
39
  @include opacity(100);
39
40
  }
41
+
40
42
  // The dropdown menu (ul)
43
+ // ----------------------
41
44
  .dropdown-menu {
42
45
  position: absolute;
43
46
  top: 100%;
44
47
  left: 0;
45
48
  z-index: $zindexDropdown;
46
- float: left;
47
49
  display: none; // none by default, but block on "open" of the menu
50
+ float: left;
48
51
  min-width: 160px;
49
- _width: 160px;
50
52
  padding: 4px 0;
51
- margin: 0; // override default ul
53
+ margin: 1px 0 0; // override default ul
52
54
  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);
55
+ background-color: $dropdownBackground;
56
+ border: 1px solid #ccc;
57
+ border: 1px solid rgba(0,0,0,.2);
58
+ *border-right-width: 2px;
59
+ *border-bottom-width: 2px;
60
+ @include border-radius(5px);
59
61
  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
60
62
  -webkit-background-clip: padding-box;
61
63
  -moz-background-clip: padding;
62
64
  background-clip: padding-box;
63
- *border-right-width: 2px;
64
- *border-bottom-width: 2px;
65
65
 
66
- // Allow for dropdowns to go bottom up (aka, dropup-menu)
67
- &.bottom-up {
68
- top: auto;
69
- bottom: 100%;
70
- margin-bottom: 2px;
66
+ // Aligns the dropdown menu to right
67
+ &.pull-right {
68
+ right: 0;
69
+ left: auto;
71
70
  }
72
71
 
73
72
  // Dividers (basically an hr) within the dropdown
74
73
  .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;
74
+ @include nav-divider();
87
75
  }
88
76
 
89
77
  // Links within the dropdown menu
@@ -93,37 +81,62 @@
93
81
  clear: both;
94
82
  font-weight: normal;
95
83
  line-height: $baseLineHeight;
96
- color: $gray;
84
+ color: $dropdownLinkColor;
97
85
  white-space: nowrap;
98
86
  }
99
87
  }
100
88
 
101
89
  // Hover state
90
+ // -----------
102
91
  .dropdown-menu li > a:hover,
103
92
  .dropdown-menu .active > a,
104
93
  .dropdown-menu .active > a:hover {
105
- color: $white;
94
+ color: $dropdownLinkColorHover;
106
95
  text-decoration: none;
107
- background-color: $linkColor;
96
+ background-color: $dropdownLinkBackgroundHover;
108
97
  }
109
98
 
110
99
  // Open state for the dropdown
111
- .dropdown.open {
100
+ // ---------------------------
101
+ .open {
112
102
  // IE7's z-index only goes to the nearest positioned ancestor, which would
113
103
  // make the menu appear below buttons that appeared later on the page
114
104
  *z-index: $zindexDropdown;
115
105
 
116
- .dropdown-toggle {
117
- color: $white;
118
- background: #ccc;
119
- background: rgba(0,0,0,.3);
120
- }
121
106
  .dropdown-menu {
122
107
  display: block;
123
108
  }
124
109
  }
125
110
 
111
+ // Right aligned dropdowns
112
+ // ---------------------------
113
+ .pull-right .dropdown-menu {
114
+ right: 0;
115
+ left: auto;
116
+ }
117
+
118
+ // Allow for dropdowns to go bottom up (aka, dropup-menu)
119
+ // ------------------------------------------------------
120
+ // Just add .dropup after the standard .dropdown class and you're set, bro.
121
+ // TODO: abstract this so that the navbar fixed styles are not placed here?
122
+ .dropup,
123
+ .navbar-fixed-bottom .dropdown {
124
+ // Reverse the caret
125
+ .caret {
126
+ border-top: 0;
127
+ border-bottom: 4px solid $black;
128
+ content: "\2191";
129
+ }
130
+ // Different positioning for bottom up menu
131
+ .dropdown-menu {
132
+ top: auto;
133
+ bottom: 100%;
134
+ margin-bottom: 1px;
135
+ }
136
+ }
137
+
126
138
  // Typeahead
139
+ // ---------
127
140
  .typeahead {
128
141
  margin-top: 2px; // give it some space to breathe
129
142
  @include border-radius(4px);
@@ -27,7 +27,7 @@ legend {
27
27
  line-height: $baseLineHeight * 2;
28
28
  color: $grayDark;
29
29
  border: 0;
30
- border-bottom: 1px solid #eee;
30
+ border-bottom: 1px solid #e5e5e5;
31
31
 
32
32
  // Small
33
33
  small {
@@ -42,83 +42,113 @@ input,
42
42
  button,
43
43
  select,
44
44
  textarea {
45
- @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
45
+ @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
46
46
  }
47
47
  input,
48
48
  button,
49
49
  select,
50
50
  textarea {
51
- @include font-family-sans-serif(); // And only set font-family here for those that need it (note the missing label element)
51
+ font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
52
52
  }
53
53
 
54
54
  // Identify controls by their labels
55
55
  label {
56
56
  display: block;
57
57
  margin-bottom: 5px;
58
- color: $grayDark;
59
58
  }
60
59
 
61
- // Inputs, Textareas, Selects
62
- input,
63
- textarea,
60
+ // Form controls
61
+ // -------------------------
62
+
63
+ // Shared size and type resets
64
64
  select,
65
+ textarea,
66
+ input[type="text"],
67
+ input[type="password"],
68
+ input[type="datetime"],
69
+ input[type="datetime-local"],
70
+ input[type="date"],
71
+ input[type="month"],
72
+ input[type="time"],
73
+ input[type="week"],
74
+ input[type="number"],
75
+ input[type="email"],
76
+ input[type="url"],
77
+ input[type="search"],
78
+ input[type="tel"],
79
+ input[type="color"],
65
80
  .uneditable-input {
66
81
  display: inline-block;
67
- width: 210px;
68
82
  height: $baseLineHeight;
69
83
  padding: 4px;
70
84
  margin-bottom: 9px;
71
85
  font-size: $baseFontSize;
72
86
  line-height: $baseLineHeight;
73
87
  color: $gray;
74
- border: 1px solid #ccc;
75
- @include border-radius(3px);
76
88
  }
77
- .uneditable-textarea {
78
- width: auto;
89
+
90
+ // Reset appearance properties for textual inputs and textarea
91
+ // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
92
+ input,
93
+ textarea {
94
+ width: 210px;
95
+ }
96
+ // Reset height since textareas have rows
97
+ textarea {
79
98
  height: auto;
80
99
  }
100
+ // Everything else
101
+ textarea,
102
+ input[type="text"],
103
+ input[type="password"],
104
+ input[type="datetime"],
105
+ input[type="datetime-local"],
106
+ input[type="date"],
107
+ input[type="month"],
108
+ input[type="time"],
109
+ input[type="week"],
110
+ input[type="number"],
111
+ input[type="email"],
112
+ input[type="url"],
113
+ input[type="search"],
114
+ input[type="tel"],
115
+ input[type="color"],
116
+ .uneditable-input {
117
+ background-color: $inputBackground;
118
+ border: 1px solid $inputBorder;
119
+ @include border-radius($inputBorderRadius);
120
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
121
+ @include transition(#{border linear .2s, box-shadow linear .2s});
81
122
 
82
- // Inputs within a label
83
- label input,
84
- label textarea,
85
- label select {
86
- display: block;
123
+ // Focus state
124
+ &:focus {
125
+ border-color: rgba(82,168,236,.8);
126
+ outline: 0;
127
+ outline: thin dotted \9; /* IE6-9 */
128
+ @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)});
129
+ }
87
130
  }
88
131
 
89
- // Mini reset for unique input types
90
- input[type="image"],
91
- input[type="checkbox"],
92
- input[type="radio"] {
93
- width: auto;
94
- height: auto;
95
- padding: 0;
132
+ // Position radios and checkboxes better
133
+ input[type="radio"],
134
+ input[type="checkbox"] {
96
135
  margin: 3px 0;
97
136
  *margin-top: 0; /* IE7 */
98
137
  line-height: normal;
99
138
  cursor: pointer;
100
- @include border-radius(0);
101
- border: 0 \9; /* IE9 and down */
102
- }
103
- input[type="image"] {
104
- border: 0;
105
139
  }
106
140
 
107
- // Reset the file input to browser defaults
108
- input[type="file"] {
109
- width: auto;
110
- padding: initial;
111
- line-height: initial;
112
- border: initial;
113
- background-color: $white;
114
- background-color: initial;
115
- @include box-shadow(none);
141
+ // Reset width of input buttons, radios, checkboxes
142
+ input[type="submit"],
143
+ input[type="reset"],
144
+ input[type="button"],
145
+ input[type="radio"],
146
+ input[type="checkbox"] {
147
+ width: auto; // Override of generic input selector
116
148
  }
117
149
 
118
- // Help out input buttons
119
- input[type="button"],
120
- input[type="reset"],
121
- input[type="submit"] {
150
+ // Make uneditable textareas behave like a textarea
151
+ .uneditable-textarea {
122
152
  width: auto;
123
153
  height: auto;
124
154
  }
@@ -131,15 +161,10 @@ input[type="file"] {
131
161
  line-height: 28px;
132
162
  }
133
163
 
134
- // Reset line-height for IE
135
- input[type="file"] {
136
- line-height: 18px \9;
137
- }
138
-
139
- // Chrome on Linux and Mobile Safari need background-color
164
+ // Make select elements obey height by applying a border
140
165
  select {
141
166
  width: 220px; // default input width + 10px of padding that doesn't get applied
142
- background-color: $white;
167
+ border: 1px solid #bbb;
143
168
  }
144
169
 
145
170
  // Make multiple select elements height not fixed
@@ -148,19 +173,12 @@ select[size] {
148
173
  height: auto;
149
174
  }
150
175
 
151
- // Remove shadow from image inputs
152
- input[type="image"] {
153
- @include box-shadow(none);
154
- }
155
-
156
- // Make textarea height behave
157
- textarea {
158
- height: auto;
159
- }
160
-
161
- // Hidden inputs
162
- input[type="hidden"] {
163
- display: none;
176
+ // Focus for select, file, radio, and checkbox
177
+ select:focus,
178
+ input[type="file"]:focus,
179
+ input[type="radio"]:focus,
180
+ input[type="checkbox"]:focus {
181
+ @include tab-focus();
164
182
  }
165
183
 
166
184
 
@@ -171,6 +189,7 @@ input[type="hidden"] {
171
189
  // Indent the labels to position radios/checkboxes as hanging
172
190
  .radio,
173
191
  .checkbox {
192
+ min-height: 18px; // clear the floating input if there is no label text
174
193
  padding-left: 18px;
175
194
  }
176
195
  .radio input[type="radio"],
@@ -201,33 +220,6 @@ input[type="hidden"] {
201
220
 
202
221
 
203
222
 
204
- // FOCUS STATE
205
- // -----------
206
-
207
- input,
208
- textarea {
209
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
210
- $transition: border linear .2s, box-shadow linear .2s;
211
- @include transition($transition);
212
- }
213
- input:focus,
214
- textarea:focus {
215
- border-color: rgba(82,168,236,.8);
216
- $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
217
- @include box-shadow($shadow);
218
- outline: 0;
219
- outline: thin dotted \9; /* IE6-9 */
220
- }
221
- input[type="file"]:focus,
222
- input[type="radio"]:focus,
223
- input[type="checkbox"]:focus,
224
- select:focus {
225
- @include box-shadow(none); // override for file inputs
226
- @include tab-focus();
227
- }
228
-
229
-
230
-
231
223
  // INPUT SIZES
232
224
  // -----------
233
225
 
@@ -243,18 +235,31 @@ select:focus {
243
235
  input[class*="span"],
244
236
  select[class*="span"],
245
237
  textarea[class*="span"],
246
- .uneditable-input {
238
+ .uneditable-input[class*="span"],
239
+ // Redeclare since the fluid row class is more specific
240
+ .row-fluid input[class*="span"],
241
+ .row-fluid select[class*="span"],
242
+ .row-fluid textarea[class*="span"],
243
+ .row-fluid .uneditable-input[class*="span"] {
247
244
  float: none;
248
245
  margin-left: 0;
249
246
  }
247
+ // Ensure input-prepend/append never wraps
248
+ .input-append input[class*="span"],
249
+ .input-append .uneditable-input[class*="span"],
250
+ .input-prepend input[class*="span"],
251
+ .input-prepend .uneditable-input[class*="span"],
252
+ .row-fluid .input-prepend [class*="span"],
253
+ .row-fluid .input-append [class*="span"] {
254
+ display: inline-block;
255
+ }
250
256
 
251
257
 
252
258
 
253
259
  // GRID SIZING FOR INPUTS
254
260
  // ----------------------
255
261
 
256
- @include inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth);
257
-
262
+ @include grid-input($gridColumnWidth, $gridGutterWidth);
258
263
 
259
264
 
260
265
 
@@ -268,9 +273,16 @@ textarea[disabled],
268
273
  input[readonly],
269
274
  select[readonly],
270
275
  textarea[readonly] {
271
- background-color: #f5f5f5;
272
- border-color: #ddd;
273
276
  cursor: not-allowed;
277
+ background-color: $inputDisabledBackground;
278
+ border-color: #ddd;
279
+ }
280
+ // Explicitly reset the colors here
281
+ input[type="radio"][disabled],
282
+ input[type="checkbox"][disabled],
283
+ input[type="radio"][readonly],
284
+ input[type="checkbox"][readonly] {
285
+ background-color: transparent;
274
286
  }
275
287
 
276
288
 
@@ -301,7 +313,7 @@ select:focus:required:invalid {
301
313
  border-color: #ee5f5b;
302
314
  &:focus {
303
315
  border-color: darken(#ee5f5b, 10%);
304
- @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
316
+ @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
305
317
  }
306
318
  }
307
319
 
@@ -314,38 +326,42 @@ select:focus:required:invalid {
314
326
  padding: ($baseLineHeight - 1) 20px $baseLineHeight;
315
327
  margin-top: $baseLineHeight;
316
328
  margin-bottom: $baseLineHeight;
317
- background-color: #f5f5f5;
318
- border-top: 1px solid #ddd;
329
+ background-color: $formActionsBackground;
330
+ border-top: 1px solid #e5e5e5;
331
+ @include clearfix(); // Adding clearfix to allow for .pull-right button containers
319
332
  }
320
333
 
321
334
  // For text that needs to appear as an input but should not be an input
322
335
  .uneditable-input {
323
- display: block;
324
- background-color: $white;
336
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
337
+ white-space: nowrap;
338
+ cursor: not-allowed;
339
+ background-color: $inputBackground;
325
340
  border-color: #eee;
326
341
  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
327
- cursor: not-allowed;
328
342
  }
329
343
 
330
344
  // Placeholder text gets special styles; can't be bundled together though for some reason
331
- @include placeholder($grayLight);
345
+ @include placeholder();
332
346
 
333
347
 
334
348
 
335
349
  // HELP TEXT
336
350
  // ---------
337
351
 
352
+ .help-block,
353
+ .help-inline {
354
+ color: $gray; // lighten the text some for contrast
355
+ }
356
+
338
357
  .help-block {
339
358
  display: block; // account for any element using help-block
340
- margin-top: 5px;
341
- margin-bottom: 0;
342
- color: $grayLight;
359
+ margin-bottom: $baseLineHeight / 2;
343
360
  }
344
361
 
345
362
  .help-inline {
346
363
  display: inline-block;
347
364
  @include ie7-inline-block();
348
- margin-bottom: 9px;
349
365
  vertical-align: middle;
350
366
  padding-left: 5px;
351
367
  }
@@ -359,12 +375,16 @@ select:focus:required:invalid {
359
375
  .input-prepend,
360
376
  .input-append {
361
377
  margin-bottom: 5px;
362
- @include clearfix(); // Clear the float to prevent wrapping
363
378
  input,
379
+ select,
364
380
  .uneditable-input {
365
- @include border-radius(0 3px 3px 0);
381
+ position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
382
+ margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
383
+ *margin-left: 0;
384
+ vertical-align: middle;
385
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
386
+ // Make input on top when focused so blue border and shadow always show
366
387
  &:focus {
367
- position: relative;
368
388
  z-index: 2;
369
389
  }
370
390
  }
@@ -372,21 +392,23 @@ select:focus:required:invalid {
372
392
  border-left-color: #ccc;
373
393
  }
374
394
  .add-on {
375
- float: left;
376
- display: block;
395
+ display: inline-block;
377
396
  width: auto;
378
- min-width: 16px;
379
397
  height: $baseLineHeight;
380
- margin-right: -1px;
398
+ min-width: 16px;
381
399
  padding: 4px 5px;
382
400
  font-weight: normal;
383
401
  line-height: $baseLineHeight;
384
- color: $grayLight;
385
402
  text-align: center;
386
403
  text-shadow: 0 1px 0 $white;
387
- background-color: #f5f5f5;
404
+ vertical-align: middle;
405
+ background-color: $grayLighter;
388
406
  border: 1px solid #ccc;
389
- @include border-radius(3px 0 0 3px);
407
+ }
408
+ .add-on,
409
+ .btn {
410
+ margin-left: -1px;
411
+ @include border-radius(0);
390
412
  }
391
413
  .active {
392
414
  background-color: lighten($green, 30);
@@ -394,33 +416,46 @@ select:focus:required:invalid {
394
416
  }
395
417
  }
396
418
  .input-prepend {
397
- .add-on {
398
- *margin-top: 1px; /* IE6-7 */
419
+ .add-on,
420
+ .btn {
421
+ margin-right: -1px;
422
+ }
423
+ .add-on:first-child,
424
+ .btn:first-child {
425
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
399
426
  }
400
427
  }
401
428
  .input-append {
402
429
  input,
430
+ select,
403
431
  .uneditable-input {
404
- float: left;
405
- @include border-radius(3px 0 0 3px);
432
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
406
433
  }
407
434
  .uneditable-input {
435
+ border-right-color: #ccc;
408
436
  border-left-color: #eee;
409
- border-right-color: #ccc;
410
437
  }
411
- .add-on {
412
- margin-right: 0;
413
- margin-left: -1px;
414
- @include border-radius(0 3px 3px 0);
438
+ .add-on:last-child,
439
+ .btn:last-child {
440
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
415
441
  }
416
- input:first-child {
417
- // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
418
- // inherit the sum of its ancestors' margins.
419
- *margin-left: -160px;
420
-
421
- &+.add-on {
422
- *margin-left: -21px;
423
- }
442
+ }
443
+ // Remove all border-radius for inputs with both prepend and append
444
+ .input-prepend.input-append {
445
+ input,
446
+ select,
447
+ .uneditable-input {
448
+ @include border-radius(0);
449
+ }
450
+ .add-on:first-child,
451
+ .btn:first-child {
452
+ margin-right: -1px;
453
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
454
+ }
455
+ .add-on:last-child,
456
+ .btn:last-child {
457
+ margin-left: -1px;
458
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
424
459
  }
425
460
  }
426
461
 
@@ -430,8 +465,10 @@ select:focus:required:invalid {
430
465
  // -----------
431
466
 
432
467
  .search-query {
433
- padding-left: 14px;
434
468
  padding-right: 14px;
469
+ padding-right: 4px \9;
470
+ padding-left: 14px;
471
+ padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
435
472
  margin-bottom: 0; // remove the default margin on all inputs
436
473
  @include border-radius(14px);
437
474
  }
@@ -451,8 +488,11 @@ select:focus:required:invalid {
451
488
  textarea,
452
489
  select,
453
490
  .help-inline,
454
- .uneditable-input {
491
+ .uneditable-input,
492
+ .input-prepend,
493
+ .input-append {
455
494
  display: inline-block;
495
+ @include ie7-inline-block();
456
496
  margin-bottom: 0;
457
497
  }
458
498
  // Re-hide hidden elements due to specifity
@@ -461,28 +501,35 @@ select:focus:required:invalid {
461
501
  }
462
502
  }
463
503
  .form-search label,
464
- .form-inline label,
504
+ .form-inline label {
505
+ display: inline-block;
506
+ }
507
+ // Remove margin for input-prepend/-append
465
508
  .form-search .input-append,
466
509
  .form-inline .input-append,
467
510
  .form-search .input-prepend,
468
511
  .form-inline .input-prepend {
469
- display: inline-block;
470
- }
471
- // Make the prepend and append add-on vertical-align: middle;
472
- .form-search .input-append .add-on,
473
- .form-inline .input-prepend .add-on,
474
- .form-search .input-append .add-on,
475
- .form-inline .input-prepend .add-on {
476
- vertical-align: middle;
512
+ margin-bottom: 0;
477
513
  }
478
- // Inline checkbox/radio labels
514
+ // Inline checkbox/radio labels (remove padding on left)
479
515
  .form-search .radio,
480
- .form-inline .radio,
481
516
  .form-search .checkbox,
517
+ .form-inline .radio,
482
518
  .form-inline .checkbox {
519
+ padding-left: 0;
483
520
  margin-bottom: 0;
484
521
  vertical-align: middle;
485
522
  }
523
+ // Remove float and margin, set to inline-block
524
+ .form-search .radio input[type="radio"],
525
+ .form-search .checkbox input[type="checkbox"],
526
+ .form-inline .radio input[type="radio"],
527
+ .form-inline .checkbox input[type="checkbox"] {
528
+ float: left;
529
+ margin-right: 3px;
530
+ margin-left: 0;
531
+ }
532
+
486
533
 
487
534
  // Margin to space out fieldsets
488
535
  .control-group {
@@ -513,7 +560,20 @@ legend + .control-group {
513
560
  }
514
561
  // Move over all input controls and content
515
562
  .controls {
563
+ // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
564
+ // don't inherit the margin of the parent, in this case .controls
565
+ *display: inline-block;
566
+ *padding-left: 20px;
516
567
  margin-left: 160px;
568
+ *margin-left: 0;
569
+ &:first-child {
570
+ *padding-left: 160px;
571
+ }
572
+ }
573
+ // Remove bottom margin on block level help text since that's accounted for on .control-group
574
+ .help-block {
575
+ margin-top: $baseLineHeight / 2;
576
+ margin-bottom: 0;
517
577
  }
518
578
  // Move over buttons in .form-actions to align with .controls
519
579
  .form-actions {