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
@@ -0,0 +1,5 @@
1
+ // Fixed (940px)
2
+ @include grid-core($gridColumnWidth, $gridGutterWidth);
3
+
4
+ // Fluid (940px)
5
+ @include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
@@ -4,17 +4,19 @@
4
4
  .hero-unit {
5
5
  padding: 60px;
6
6
  margin-bottom: 30px;
7
- background-color: #f5f5f5;
7
+ background-color: $heroUnitBackground;
8
8
  @include border-radius(6px);
9
9
  h1 {
10
10
  margin-bottom: 0;
11
11
  font-size: 60px;
12
12
  line-height: 1;
13
+ color: $heroUnitHeadingColor;
13
14
  letter-spacing: -1px;
14
15
  }
15
16
  p {
16
17
  font-size: 18px;
17
18
  font-weight: 200;
18
19
  line-height: $baseLineHeight * 1.5;
20
+ color: $heroUnitLeadColor;
19
21
  }
20
22
  }
@@ -0,0 +1,52 @@
1
+ // LABELS & BADGES
2
+ // ---------------
3
+
4
+ // Base classes
5
+ .label,
6
+ .badge {
7
+ font-size: $baseFontSize * .846;
8
+ font-weight: bold;
9
+ line-height: 14px; // ensure proper line-height if floated
10
+ color: $white;
11
+ vertical-align: baseline;
12
+ white-space: nowrap;
13
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
14
+ background-color: $grayLight;
15
+ }
16
+ // Set unique padding and border-radii
17
+ .label {
18
+ padding: 1px 4px 2px;
19
+ @include border-radius(3px);
20
+ }
21
+ .badge {
22
+ padding: 1px 9px 2px;
23
+ @include border-radius(9px);
24
+ }
25
+
26
+ // Hover state, but only for links
27
+ a {
28
+ &.label:hover,
29
+ &.badge:hover {
30
+ color: $white;
31
+ text-decoration: none;
32
+ cursor: pointer;
33
+ }
34
+ }
35
+
36
+ // Colors
37
+ // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
38
+ // Important (red)
39
+ .label-important, .badge-important { background-color: $errorText; }
40
+ .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
41
+ // Warnings (orange)
42
+ .label-warning, .badge-warning { background-color: $orange; }
43
+ .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
44
+ // Success (green)
45
+ .label-success, .badge-success { background-color: $successText; }
46
+ .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
47
+ // Info (turquoise)
48
+ .label-info, .badge-info { background-color: $infoText; }
49
+ .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
50
+ // Inverse (black)
51
+ .label-inverse, .badge-inverse { background-color: $grayDark; }
52
+ .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
@@ -11,7 +11,7 @@
11
11
 
12
12
  // Fluid layouts (left aligned, with sidebar, min- & max-width content)
13
13
  .container-fluid {
14
- padding-left: $gridGutterWidth;
15
14
  padding-right: $gridGutterWidth;
15
+ padding-left: $gridGutterWidth;
16
16
  @include clearfix();
17
- }
17
+ }
@@ -9,7 +9,7 @@
9
9
  // Clearfix
10
10
  // --------
11
11
  // For clearing floats like a boss h5bp.com/q
12
- @mixin clearfix() {
12
+ @mixin clearfix {
13
13
  *zoom: 1;
14
14
  &:before,
15
15
  &:after {
@@ -46,7 +46,7 @@
46
46
  // IE7 inline-block
47
47
  // ----------------
48
48
  @mixin ie7-inline-block() {
49
- *display: inline; /* IE7 inline-block hack */
49
+ *display: inline; // IE7 inline-block hack
50
50
  *zoom: 1;
51
51
  }
52
52
 
@@ -74,11 +74,11 @@
74
74
 
75
75
  // Sizing shortcuts
76
76
  // -------------------------
77
- @mixin size($height: 5px, $width: 5px) {
77
+ @mixin size($height, $width) {
78
78
  width: $width;
79
79
  height: $height;
80
80
  }
81
- @mixin square($size: 5px) {
81
+ @mixin square($size) {
82
82
  @include size($size, $size);
83
83
  }
84
84
 
@@ -88,6 +88,9 @@
88
88
  :-moz-placeholder {
89
89
  color: $color;
90
90
  }
91
+ :-ms-input-placeholder {
92
+ color: $color;
93
+ }
91
94
  ::-webkit-input-placeholder {
92
95
  color: $color;
93
96
  }
@@ -102,19 +105,32 @@
102
105
  white-space: nowrap;
103
106
  }
104
107
 
108
+ // CSS image replacement
109
+ // -------------------------
110
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
111
+ @mixin hide-text {
112
+ font: 0/0 a;
113
+ color: transparent;
114
+ text-shadow: none;
115
+ background-color: transparent;
116
+ border: 0;
117
+ }
105
118
 
119
+ .hide-text {
120
+ @include hide-text();
121
+ }
106
122
 
107
123
  // FONTS
108
124
  // --------------------------------------------------
109
125
 
110
126
  @mixin font-family-serif() {
111
- font-family: Georgia, "Times New Roman", Times, serif;
127
+ font-family: $serifFontFamily;
112
128
  }
113
129
  @mixin font-family-sans-serif() {
114
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
130
+ font-family: $sansFontFamily;
115
131
  }
116
132
  @mixin font-family-monospace() {
117
- font-family: Menlo, Monaco, "Courier New", monospace;
133
+ font-family: $monoFontFamily;
118
134
  }
119
135
  @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
120
136
  font-size: $size;
@@ -135,154 +151,18 @@
135
151
  }
136
152
 
137
153
 
138
-
139
- // GRID SYSTEM
154
+ // FORMS
140
155
  // --------------------------------------------------
141
156
 
142
- // Site container
143
- // -------------------------
144
- @mixin container-fixed() {
145
- width: $gridRowWidth;
146
- margin-left: auto;
147
- margin-right: auto;
148
- @include clearfix();
149
- }
150
-
151
- // Le grid system
152
- // -------------------------
153
-
154
- @mixin gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
155
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
156
- }
157
- @mixin gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns) {
158
- margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
159
- }
160
- @mixin gridSystem-gridColumn($gridGutterWidth) {
161
- float: left;
162
- margin-left: $gridGutterWidth;
163
- }
164
-
165
- // Take these values and mixins, and make 'em do their thang
166
- @mixin gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
167
- // Row surrounds the columns
168
- .row {
169
- margin-left: $gridGutterWidth * -1;
170
- @include clearfix();
171
- }
172
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
173
- [class*="span"] {
174
- @include gridSystem-gridColumn($gridGutterWidth);
175
- }
176
- // Default columns
177
- .span1 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
178
- .span2 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
179
- .span3 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
180
- .span4 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
181
- .span5 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
182
- .span6 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
183
- .span7 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
184
- .span8 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
185
- .span9 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
186
- .span10 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
187
- .span11 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
188
- .span12,
189
- .container { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
190
- // Offset column options
191
- .offset1 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1); }
192
- .offset2 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2); }
193
- .offset3 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3); }
194
- .offset4 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4); }
195
- .offset5 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5); }
196
- .offset6 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6); }
197
- .offset7 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7); }
198
- .offset8 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8); }
199
- .offset9 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9); }
200
- .offset10 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10); }
201
- .offset11 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11); }
202
- }
203
-
204
- // Fluid grid system
205
- // -------------------------
206
-
207
- @mixin fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
208
- width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
209
- }
210
- @mixin fluidGridSystem-gridColumn($fluidGridGutterWidth) {
211
- float: left;
212
- margin-left: $fluidGridGutterWidth;
213
- }
214
- // Take these values and mixins, and make 'em do their thang
215
- @mixin fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
216
- // Row surrounds the columns
217
- .row-fluid {
218
- width: 100%;
219
- @include clearfix();
220
-
221
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
222
- > [class*="span"] {
223
- @include fluidGridSystem-gridColumn($fluidGridGutterWidth);
224
- }
225
- > [class*="span"]:first-child {
226
- margin-left: 0;
227
- }
228
- // Default columns
229
- > .span1 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
230
- > .span2 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
231
- > .span3 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
232
- > .span4 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
233
- > .span5 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
234
- > .span6 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
235
- > .span7 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
236
- > .span8 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
237
- > .span9 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
238
- > .span10 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
239
- > .span11 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
240
- > .span12 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
241
- }
242
- }
243
-
244
- // Input grid system
245
- // -------------------------
246
- @mixin inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
247
- width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
248
- }
249
- @mixin inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
250
- input,
251
- textarea,
252
- .uneditable-input {
253
- &.span1 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
254
- &.span2 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
255
- &.span3 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
256
- &.span4 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
257
- &.span5 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
258
- &.span6 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
259
- &.span7 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
260
- &.span8 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
261
- &.span9 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
262
- &.span10 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
263
- &.span11 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
264
- &.span12 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
265
- }
266
- }
267
-
268
- // Make a Grid
269
- // -------------------------
270
- // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
271
- @mixin makeRow() {
272
- margin-left: $gridGutterWidth * -1;
273
- @include clearfix();
274
- }
275
- @mixin makeColumn($columns: 1) {
276
- float: left;
277
- margin-left: $gridGutterWidth;
278
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
157
+ // Block level inputs
158
+ @mixin input-block-level {
159
+ display: block;
160
+ width: 100%;
161
+ min-height: 28px; // Make inputs at least the height of their button counterpart
162
+ @include box-sizing(border-box); // Makes inputs behave like true block-level elements
279
163
  }
280
164
 
281
165
 
282
-
283
- // Form field states (used in forms)
284
- // --------------------------------------------------
285
-
286
166
  // Mixin for form field states
287
167
  @mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
288
168
  // Set the text color
@@ -292,6 +172,8 @@
292
172
  color: $textColor;
293
173
  }
294
174
  // Style inputs accordingly
175
+ .checkbox,
176
+ .radio,
295
177
  input,
296
178
  select,
297
179
  textarea {
@@ -317,14 +199,14 @@
317
199
  // --------------------------------------------------
318
200
 
319
201
  // Border Radius
320
- @mixin border-radius($radius: 5px) {
202
+ @mixin border-radius($radius) {
321
203
  -webkit-border-radius: $radius;
322
204
  -moz-border-radius: $radius;
323
205
  border-radius: $radius;
324
206
  }
325
207
 
326
208
  // Drop shadows
327
- @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
209
+ @mixin box-shadow($shadow) {
328
210
  -webkit-box-shadow: $shadow;
329
211
  -moz-box-shadow: $shadow;
330
212
  box-shadow: $shadow;
@@ -354,21 +236,23 @@
354
236
  -o-transform: scale($ratio);
355
237
  transform: scale($ratio);
356
238
  }
357
- @mixin translate($x: 0, $y: 0) {
239
+ @mixin translate($x, $y) {
358
240
  -webkit-transform: translate($x, $y);
359
241
  -moz-transform: translate($x, $y);
360
242
  -ms-transform: translate($x, $y);
361
243
  -o-transform: translate($x, $y);
362
244
  transform: translate($x, $y);
363
245
  }
364
- @mixin skew($x: 0, $y: 0) {
246
+
247
+ @mixin skew($x, $y) {
365
248
  -webkit-transform: skew($x, $y);
366
249
  -moz-transform: skew($x, $y);
367
250
  -ms-transform: skew($x, $y);
368
251
  -o-transform: skew($x, $y);
369
252
  transform: skew($x, $y);
370
253
  }
371
- @mixin translate3d($x: 0, $y: 0, $z: 0) {
254
+
255
+ @mixin translate3d($x, $y, $z) {
372
256
  -webkit-transform: translate($x, $y, $z);
373
257
  -moz-transform: translate($x, $y, $z);
374
258
  -ms-transform: translate($x, $y, $z);
@@ -376,6 +260,17 @@
376
260
  transform: translate($x, $y, $z);
377
261
  }
378
262
 
263
+ // Backface visibility
264
+ // Prevent browsers from flickering when using CSS 3D transforms.
265
+ // Default value is `visible`, but can be changed to `hidden
266
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
267
+ @mixin backface-visibility($visibility){
268
+ -webkit-backface-visibility: $visibility;
269
+ -moz-backface-visibility: $visibility;
270
+ -ms-backface-visibility: $visibility;
271
+ backface-visibility: $visibility;
272
+ }
273
+
379
274
  // Background clipping
380
275
  // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
381
276
  @mixin background-clip($clip) {
@@ -385,7 +280,7 @@
385
280
  }
386
281
 
387
282
  // Background sizing
388
- @mixin background-size($size){
283
+ @mixin background-size($size) {
389
284
  -webkit-background-size: $size;
390
285
  -moz-background-size: $size;
391
286
  -o-background-size: $size;
@@ -397,26 +292,33 @@
397
292
  @mixin box-sizing($boxmodel) {
398
293
  -webkit-box-sizing: $boxmodel;
399
294
  -moz-box-sizing: $boxmodel;
295
+ -ms-box-sizing: $boxmodel;
400
296
  box-sizing: $boxmodel;
401
297
  }
402
298
 
299
+ // Uses box-sizing mixin, so must be defined here
300
+ .input-block-level {
301
+ @include input-block-level();
302
+ }
303
+
403
304
  // User select
404
305
  // For selecting text on the page
405
306
  @mixin user-select($select) {
406
307
  -webkit-user-select: $select;
407
308
  -moz-user-select: $select;
309
+ -ms-user-select: $select;
408
310
  -o-user-select: $select;
409
311
  user-select: $select;
410
312
  }
411
313
 
412
314
  // Resize anything
413
- @mixin resizable($direction: both) {
315
+ @mixin resizable($direction) {
414
316
  resize: $direction; // Options: horizontal, vertical, both
415
317
  overflow: auto; // Safari fix
416
318
  }
417
319
 
418
320
  // CSS3 Content Columns
419
- @mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
321
+ @mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
420
322
  -webkit-column-count: $columnCount;
421
323
  -moz-column-count: $columnCount;
422
324
  column-count: $columnCount;
@@ -425,10 +327,20 @@
425
327
  column-gap: $columnGap;
426
328
  }
427
329
 
330
+ // Optional hyphenation
331
+ @mixin hyphens($mode: auto) {
332
+ word-wrap: break-word;
333
+ -webkit-hyphens: $mode;
334
+ -moz-hyphens: $mode;
335
+ -ms-hyphens: $mode;
336
+ -o-hyphens: $mode;
337
+ hyphens: $mode;
338
+ }
339
+
428
340
  // Opacity
429
- @mixin opacity($opacity: 100) {
341
+ @mixin opacity($opacity) {
430
342
  opacity: $opacity / 100;
431
- filter: alpha(opacity=$opacity);
343
+ filter: alpha(opacity=$opacity);
432
344
  }
433
345
 
434
346
 
@@ -440,6 +352,7 @@
440
352
  @mixin translucent-background($color: $white, $alpha: 1) {
441
353
  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
442
354
  }
355
+
443
356
  @mixin translucent-border($color: $white, $alpha: 1) {
444
357
  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
445
358
  @include background-clip(padding-box);
@@ -449,7 +362,7 @@
449
362
  @mixin gradientBar($primaryColor, $secondaryColor) {
450
363
  @include gradient-vertical($primaryColor, $secondaryColor);
451
364
  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
452
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
365
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
453
366
  }
454
367
 
455
368
  // Gradients
@@ -462,7 +375,7 @@
462
375
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
463
376
  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
464
377
  background-repeat: repeat-x;
465
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
378
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=1); // IE9 and down
466
379
  }
467
380
  @mixin gradient-vertical($startColor: #555, $endColor: #333) {
468
381
  background-color: mix($startColor, $endColor, 60%);
@@ -473,7 +386,7 @@
473
386
  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
474
387
  background-image: linear-gradient(top, $startColor, $endColor); // The standard
475
388
  background-repeat: repeat-x;
476
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
389
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=0); // IE9 and down
477
390
  }
478
391
  @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
479
392
  background-color: $endColor;
@@ -493,7 +406,7 @@
493
406
  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
494
407
  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
495
408
  background-repeat: no-repeat;
496
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor; // IE9 and down, gets no color-stop at all the proper fallback
409
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($startColor, 1%)}', endColorstr='#{darken($endColor, 1%)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
497
410
  }
498
411
  @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
499
412
  background-color: $outerColor;
@@ -501,8 +414,8 @@
501
414
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
502
415
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
503
416
  background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
417
+ background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
504
418
  background-repeat: no-repeat;
505
- // Opera cannot do radial gradients yet
506
419
  }
507
420
  @mixin gradient-striped($color, $angle: -45deg) {
508
421
  background-color: $color;
@@ -515,20 +428,44 @@
515
428
  }
516
429
 
517
430
  // Reset filters for IE
518
- @mixin reset-filter() {
519
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
431
+ @mixin gradient-reset-filter() {
432
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
520
433
  }
521
434
 
522
- // Mixin for generating button backgrounds
523
- // ---------------------------------------
435
+
436
+
437
+ // COMPONENT MIXINS
438
+ // --------------------------------------------------
439
+
440
+ // Horizontal dividers
441
+ // -------------------------
442
+ // Dividers (basically an hr) within dropdowns and nav lists
443
+ @mixin nav-divider($top: #e5e5e5, $bottom: $white) {
444
+ // IE7 needs a set width since we gave a height. Restricting just
445
+ // to IE7 to keep the 1px left/right space in other browsers.
446
+ // It is unclear where IE is getting the extra space that we need
447
+ // to negative-margin away, but so it goes.
448
+ *width: 100%;
449
+ height: 1px;
450
+ margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
451
+ *margin: -5px 0 5px;
452
+ overflow: hidden;
453
+ background-color: $top;
454
+ border-bottom: 1px solid $bottom;
455
+ }
456
+
457
+ // Button backgrounds
458
+ // ------------------
524
459
  @mixin buttonBackground($startColor, $endColor) {
525
460
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
526
461
  @include gradientBar($startColor, $endColor);
527
- @include reset-filter();
462
+ *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
463
+ @include gradient-reset-filter();
528
464
 
529
465
  // in these cases the gradient won't cover the background, so we override
530
466
  &:hover, &:active, &.active, &.disabled, &[disabled] {
531
467
  background-color: $endColor;
468
+ *background-color: darken($endColor, 5%);
532
469
  }
533
470
 
534
471
  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
@@ -538,42 +475,169 @@
538
475
  }
539
476
  }
540
477
 
478
+ // Navbar vertical align
479
+ // -------------------------
480
+ // Vertically center elements in the navbar.
481
+ // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
482
+ @mixin navbarVerticalAlign($elementHeight) {
483
+ margin-top: ($navbarHeight - $elementHeight) / 2;
484
+ }
541
485
 
542
- // COMPONENT MIXINS
543
- // --------------------------------------------------
544
-
545
- // POPOVER ARROWS
486
+ // Popover arrows
546
487
  // -------------------------
547
488
  // For tipsies and popovers
548
- @mixin popoverArrow-top($arrowWidth: 5px) {
489
+ @mixin popoverArrow-top($arrowWidth: 5px, $color: $black) {
549
490
  bottom: 0;
550
491
  left: 50%;
551
492
  margin-left: -$arrowWidth;
552
493
  border-left: $arrowWidth solid transparent;
553
494
  border-right: $arrowWidth solid transparent;
554
- border-top: $arrowWidth solid $black;
495
+ border-top: $arrowWidth solid $color;
555
496
  }
556
- @mixin popoverArrow-left($arrowWidth: 5px) {
497
+ @mixin popoverArrow-left($arrowWidth: 5px, $color: $black) {
557
498
  top: 50%;
558
499
  right: 0;
559
500
  margin-top: -$arrowWidth;
560
501
  border-top: $arrowWidth solid transparent;
561
502
  border-bottom: $arrowWidth solid transparent;
562
- border-left: $arrowWidth solid $black;
503
+ border-left: $arrowWidth solid $color;
563
504
  }
564
- @mixin popoverArrow-bottom($arrowWidth: 5px) {
505
+ @mixin popoverArrow-bottom($arrowWidth: 5px, $color: $black) {
565
506
  top: 0;
566
507
  left: 50%;
567
508
  margin-left: -$arrowWidth;
568
509
  border-left: $arrowWidth solid transparent;
569
510
  border-right: $arrowWidth solid transparent;
570
- border-bottom: $arrowWidth solid $black;
511
+ border-bottom: $arrowWidth solid $color;
571
512
  }
572
- @mixin popoverArrow-right($arrowWidth: 5px) {
513
+ @mixin popoverArrow-right($arrowWidth: 5px, $color: $black) {
573
514
  top: 50%;
574
515
  left: 0;
575
516
  margin-top: -$arrowWidth;
576
517
  border-top: $arrowWidth solid transparent;
577
518
  border-bottom: $arrowWidth solid transparent;
578
- border-right: $arrowWidth solid $black;
519
+ border-right: $arrowWidth solid $color;
520
+ }
521
+
522
+ // Grid System
523
+ // -----------
524
+
525
+ // Centered container element
526
+ @mixin container-fixed() {
527
+ margin-right: auto;
528
+ margin-left: auto;
529
+ @include clearfix();
530
+ }
531
+
532
+ // Table columns
533
+ @mixin tableColumns($columnSpan: 1) {
534
+ float: none; // undo default grid column styles
535
+ width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
536
+ margin-left: 0; // undo default grid column styles
537
+ }
538
+
539
+ // Make a Grid
540
+ // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
541
+ @mixin makeRow() {
542
+ margin-left: $gridGutterWidth * -1;
543
+ @include clearfix();
544
+ }
545
+ @mixin makeColumn($columns: 1, $offset: 0) {
546
+ float: left;
547
+ margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
548
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
549
+ }
550
+
551
+ // The Grid
552
+ @mixin core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
553
+ margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
554
+ }
555
+
556
+ @mixin core-span($columns, $gridColumnWidth, $gridGutterWidth) {
557
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
558
+ }
559
+
560
+ @mixin grid-core($gridColumnWidth, $gridGutterWidth) {
561
+ .row {
562
+ margin-left: $gridGutterWidth * -1;
563
+ @include clearfix();
564
+ }
565
+
566
+ [class*="span"] {
567
+ float: left;
568
+ margin-left: $gridGutterWidth;
569
+ }
570
+
571
+ // Set the container width, and override it for fixed navbars in media queries
572
+ .container,
573
+ .navbar-fixed-top .container,
574
+ .navbar-fixed-bottom .container {
575
+ @include core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
576
+ }
577
+
578
+ // generate .spanX and .offsetX
579
+ $i: $gridColumns;
580
+ @while $i > 0 {
581
+ .span#{$i} { @include core-span($i, $gridColumnWidth, $gridGutterWidth); }
582
+ $i: $i - 1;
583
+ }
584
+
585
+ $i: $gridColumns;
586
+ @while $i > 0 {
587
+ .offset#{$i} { @include core-offset($i, $gridColumnWidth, $gridGutterWidth); }
588
+ $i: $i - 1;
589
+ }
590
+ }
591
+
592
+ @mixin fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
593
+ width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
594
+ *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
595
+ }
596
+
597
+ @mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
598
+ .row-fluid {
599
+ width: 100%;
600
+ @include clearfix();
601
+ [class*="span"] {
602
+ @include input-block-level();
603
+ float: left;
604
+ margin-left: $fluidGridGutterWidth;
605
+ *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
606
+ }
607
+ [class*="span"]:first-child {
608
+ margin-left: 0;
609
+ }
610
+
611
+ // generate .spanX
612
+ $i: $gridColumns;
613
+ @while $i > 0 {
614
+ .span#{$i} {
615
+ @include fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth);
616
+ }
617
+ $i: $i - 1;
618
+ }
619
+ }
579
620
  }
621
+
622
+ @mixin input-span($columns, $gridColumnWidth, $gridGutterWidth) {
623
+ width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
624
+ }
625
+
626
+ @mixin grid-input($gridColumnWidth, $gridGutterWidth) {
627
+ input,
628
+ textarea,
629
+ .uneditable-input {
630
+ margin-left: 0; // override margin-left from core grid system
631
+ }
632
+
633
+ // generate .spanX
634
+ $i: $gridColumns;
635
+ @while $i > 0 {
636
+ input.span#{$i},
637
+ textarea.span#{$i},
638
+ .uneditable-input.span#{$i} {
639
+ @include input-span($i, $gridColumnWidth, $gridGutterWidth);
640
+ }
641
+ $i: $i - 1;
642
+ }
643
+ }