bootstrap-generators 2.0.1 → 2.0.4

Sign up to get free protection for your applications and to get access to all the features.
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 {