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
@@ -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
+ }