sass-twitter-bootstrap 2.0.1 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. data/lib/sass/twitter/bootstrap/version.rb +1 -1
  2. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  3. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  4. data/vendor/assets/javascripts/twitter/bootstrap-affix.js +104 -0
  5. data/vendor/assets/javascripts/twitter/bootstrap-alert.js +28 -32
  6. data/vendor/assets/javascripts/twitter/bootstrap-button.js +29 -33
  7. data/vendor/assets/javascripts/twitter/bootstrap-carousel.js +43 -24
  8. data/vendor/assets/javascripts/twitter/bootstrap-collapse.js +50 -28
  9. data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +77 -19
  10. data/vendor/assets/javascripts/twitter/bootstrap-modal.js +113 -84
  11. data/vendor/assets/javascripts/twitter/bootstrap-popover.js +19 -11
  12. data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +50 -24
  13. data/vendor/assets/javascripts/twitter/bootstrap-tab.js +13 -8
  14. data/vendor/assets/javascripts/twitter/bootstrap-tooltip.js +44 -39
  15. data/vendor/assets/javascripts/twitter/bootstrap-transition.js +29 -20
  16. data/vendor/assets/javascripts/twitter/bootstrap-typeahead.js +73 -44
  17. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -0
  18. data/vendor/assets/stylesheets/tests/css-tests.css +1 -12
  19. data/vendor/assets/stylesheets/tests/css-tests.html +22 -125
  20. data/vendor/assets/stylesheets/tests/navbar.html +39 -38
  21. data/vendor/assets/stylesheets/twitter/_accordion.scss +8 -2
  22. data/vendor/assets/stylesheets/twitter/_alerts.scss +16 -21
  23. data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss +12 -10
  24. data/vendor/assets/stylesheets/twitter/_button-groups.scss +137 -39
  25. data/vendor/assets/stylesheets/twitter/_buttons.scss +129 -81
  26. data/vendor/assets/stylesheets/twitter/_carousel.scss +13 -3
  27. data/vendor/assets/stylesheets/twitter/_close.scss +16 -3
  28. data/vendor/assets/stylesheets/twitter/_code.scss +11 -10
  29. data/vendor/assets/stylesheets/twitter/_component-animations.scss +12 -8
  30. data/vendor/assets/stylesheets/twitter/_dropdowns.scss +133 -53
  31. data/vendor/assets/stylesheets/twitter/_forms.scss +298 -170
  32. data/vendor/assets/stylesheets/twitter/_grid.scss +17 -4
  33. data/vendor/assets/stylesheets/twitter/_hero-unit.scss +7 -3
  34. data/vendor/assets/stylesheets/twitter/_labels-badges.scss +69 -0
  35. data/vendor/assets/stylesheets/twitter/_layouts.scss +2 -3
  36. data/vendor/assets/stylesheets/twitter/_mixins.scss +359 -258
  37. data/vendor/assets/stylesheets/twitter/_modals.scss +26 -12
  38. data/vendor/assets/stylesheets/twitter/_navbar.scss +318 -143
  39. data/vendor/assets/stylesheets/twitter/_navs.scss +87 -56
  40. data/vendor/assets/stylesheets/twitter/_pager.scss +16 -6
  41. data/vendor/assets/stylesheets/twitter/_pagination.scss +23 -14
  42. data/vendor/assets/stylesheets/twitter/_popovers.scss +101 -33
  43. data/vendor/assets/stylesheets/twitter/_progress-bars.scss +43 -16
  44. data/vendor/assets/stylesheets/twitter/_reset.scss +16 -6
  45. data/vendor/assets/stylesheets/twitter/_responsive-1200px-min.scss +28 -0
  46. data/vendor/assets/stylesheets/twitter/_responsive-767px-max.scss +174 -0
  47. data/vendor/assets/stylesheets/twitter/_responsive-768px-979px.scss +19 -0
  48. data/vendor/assets/stylesheets/twitter/_responsive-navbar.scss +177 -0
  49. data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss +58 -0
  50. data/vendor/assets/stylesheets/twitter/_scaffolding.scss +32 -11
  51. data/vendor/assets/stylesheets/twitter/_sprites.scss +49 -14
  52. data/vendor/assets/stylesheets/twitter/_tables.scss +115 -42
  53. data/vendor/assets/stylesheets/twitter/_thumbnails.scss +23 -6
  54. data/vendor/assets/stylesheets/twitter/_tooltip.scss +47 -12
  55. data/vendor/assets/stylesheets/twitter/_type.scss +96 -93
  56. data/vendor/assets/stylesheets/twitter/_utilities.scss +24 -2
  57. data/vendor/assets/stylesheets/twitter/_variables.scss +202 -31
  58. data/vendor/assets/stylesheets/twitter/_wells.scss +17 -5
  59. data/vendor/assets/stylesheets/twitter/bootstrap.scss +3 -7
  60. data/vendor/assets/stylesheets/twitter/responsive.scss +15 -301
  61. metadata +10 -7
  62. data/vendor/assets/stylesheets/tests/buttons.html +0 -139
  63. data/vendor/assets/stylesheets/tests/forms-responsive.html +0 -71
  64. data/vendor/assets/stylesheets/tests/navbar-fixed-top.html +0 -104
  65. data/vendor/assets/stylesheets/tests/navbar-static-top.html +0 -107
  66. data/vendor/assets/stylesheets/twitter/_labels.scss +0 -32
@@ -1,8 +1,21 @@
1
- // GRID SYSTEM
2
- // -----------
1
+ //
2
+ // Grid system
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  // Fixed (940px)
5
- @include gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth);
7
+ @include grid-core($gridColumnWidth, $gridGutterWidth);
6
8
 
7
9
  // Fluid (940px)
8
- @include fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
10
+ @include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
11
+
12
+ // Reset utility classes due to specificity
13
+ [class*="span"].hide,
14
+ .row-fluid [class*="span"].hide {
15
+ display: none;
16
+ }
17
+
18
+ [class*="span"].pull-right,
19
+ .row-fluid [class*="span"].pull-right {
20
+ float: right;
21
+ }
@@ -1,20 +1,24 @@
1
- // HERO UNIT
2
- // ---------
1
+ //
2
+ // Hero unit
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  .hero-unit {
5
7
  padding: 60px;
6
8
  margin-bottom: 30px;
7
- background-color: #f5f5f5;
9
+ background-color: $heroUnitBackground;
8
10
  @include border-radius(6px);
9
11
  h1 {
10
12
  margin-bottom: 0;
11
13
  font-size: 60px;
12
14
  line-height: 1;
15
+ color: $heroUnitHeadingColor;
13
16
  letter-spacing: -1px;
14
17
  }
15
18
  p {
16
19
  font-size: 18px;
17
20
  font-weight: 200;
18
21
  line-height: $baseLineHeight * 1.5;
22
+ color: $heroUnitLeadColor;
19
23
  }
20
24
  }
@@ -0,0 +1,69 @@
1
+ //
2
+ // Labels and badges
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Base classes
7
+ .label,
8
+ .badge {
9
+ font-size: $baseFontSize * .846;
10
+ font-weight: bold;
11
+ line-height: 14px; // ensure proper line-height if floated
12
+ color: $white;
13
+ vertical-align: baseline;
14
+ white-space: nowrap;
15
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
16
+ background-color: $grayLight;
17
+ }
18
+ // Set unique padding and border-radii
19
+ .label {
20
+ padding: 1px 4px 2px;
21
+ @include border-radius(3px);
22
+ }
23
+ .badge {
24
+ padding: 1px 9px 2px;
25
+ @include border-radius(9px);
26
+ }
27
+
28
+ // Hover state, but only for links
29
+ a {
30
+ &.label:hover,
31
+ &.badge:hover {
32
+ color: $white;
33
+ text-decoration: none;
34
+ cursor: pointer;
35
+ }
36
+ }
37
+
38
+ // Colors
39
+ // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
40
+ // Important (red)
41
+ .label-important, .badge-important { background-color: $errorText; }
42
+ .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); }
43
+ // Warnings (orange)
44
+ .label-warning, .badge-warning { background-color: $orange; }
45
+ .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); }
46
+ // Success (green)
47
+ .label-success, .badge-success { background-color: $successText; }
48
+ .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); }
49
+ // Info (turquoise)
50
+ .label-info, .badge-info { background-color: $infoText; }
51
+ .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); }
52
+ // Inverse (black)
53
+ .label-inverse, .badge-inverse { background-color: $grayDark; }
54
+ .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); }
55
+
56
+ // Quick fix for labels/badges in buttons
57
+ .btn {
58
+ .label,
59
+ .badge {
60
+ position: relative;
61
+ top: -1px;
62
+ }
63
+ }
64
+ .btn-mini {
65
+ .label,
66
+ .badge {
67
+ top: 0;
68
+ }
69
+ }
@@ -1,7 +1,6 @@
1
1
  //
2
2
  // Layouts
3
- // Fixed-width and fluid (with sidebar) layouts
4
- // --------------------------------------------
3
+ // --------------------------------------------------
5
4
 
6
5
 
7
6
  // Container (centered, fixed-width layouts)
@@ -11,7 +10,7 @@
11
10
 
12
11
  // Fluid layouts (left aligned, with sidebar, min- & max-width content)
13
12
  .container-fluid {
14
- padding-left: $gridGutterWidth;
15
13
  padding-right: $gridGutterWidth;
14
+ padding-left: $gridGutterWidth;
16
15
  @include clearfix();
17
16
  }
@@ -1,6 +1,6 @@
1
- // Mixins.scss
2
- // Snippets of reusable CSS to develop faster and keep code readable
3
- // -----------------------------------------------------------------
1
+ //
2
+ // Mixins
3
+ // --------------------------------------------------
4
4
 
5
5
 
6
6
  // UTILITY MIXINS
@@ -9,12 +9,15 @@
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 {
16
16
  display: table;
17
17
  content: "";
18
+ // Fixes Opera/contenteditable bug:
19
+ // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
20
+ line-height: 0;
18
21
  }
19
22
  &:after {
20
23
  clear: both;
@@ -62,29 +65,28 @@
62
65
 
63
66
  @mixin ie7-restore-right-whitespace() {
64
67
  *margin-right: .3em;
65
-
66
- &:last-child {
67
- *margin-left: 0;
68
- }
69
68
  }
70
69
 
71
70
  // Sizing shortcuts
72
71
  // -------------------------
73
- @mixin size($height: 5px, $width: 5px) {
72
+ @mixin size($height, $width) {
74
73
  width: $width;
75
74
  height: $height;
76
75
  }
77
- @mixin square($size: 5px) {
76
+ @mixin square($size) {
78
77
  @include size($size, $size);
79
78
  }
80
79
 
81
80
  // Placeholder text
82
81
  // -------------------------
83
82
  @mixin placeholder($color: $placeholderText) {
84
- :-moz-placeholder {
83
+ &:-moz-placeholder {
85
84
  color: $color;
86
85
  }
87
- ::-webkit-input-placeholder {
86
+ &:-ms-input-placeholder {
87
+ color: $color;
88
+ }
89
+ &::-webkit-input-placeholder {
88
90
  color: $color;
89
91
  }
90
92
  }
@@ -98,20 +100,28 @@
98
100
  white-space: nowrap;
99
101
  }
100
102
 
101
-
103
+ // CSS image replacement
104
+ // -------------------------
105
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
106
+ @mixin hide-text {
107
+ font: 0/0 a;
108
+ color: transparent;
109
+ text-shadow: none;
110
+ background-color: transparent;
111
+ border: 0;
112
+ }
102
113
 
103
114
  // FONTS
104
115
  // --------------------------------------------------
105
116
 
106
- // Font Stacks
107
- @mixin font-family-serif {
108
- font-family: Georgia, "Times New Roman", Times, serif;
117
+ @mixin font-family-serif() {
118
+ font-family: $serifFontFamily;
109
119
  }
110
- @mixin font-family-sans-serif {
111
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
120
+ @mixin font-family-sans-serif() {
121
+ font-family: $sansFontFamily;
112
122
  }
113
- @mixin font-family-monospace {
114
- font-family: Menlo, Monaco, "Courier New", monospace;
123
+ @mixin font-family-monospace() {
124
+ font-family: $monoFontFamily;
115
125
  }
116
126
  @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
117
127
  font-size: $size;
@@ -119,167 +129,32 @@
119
129
  line-height: $lineHeight;
120
130
  }
121
131
  @mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
122
- @include font-family-serif;
132
+ @include font-family-serif();
123
133
  @include font-shorthand($size, $weight, $lineHeight);
124
134
  }
125
135
  @mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
126
- @include font-family-sans-serif;
136
+ @include font-family-sans-serif();
127
137
  @include font-shorthand($size, $weight, $lineHeight);
128
138
  }
129
139
  @mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
130
- @include font-family-monospace;
140
+ @include font-family-monospace();
131
141
  @include font-shorthand($size, $weight, $lineHeight);
132
142
  }
133
143
 
134
144
 
135
-
136
- // GRID SYSTEM
145
+ // FORMS
137
146
  // --------------------------------------------------
138
147
 
139
- // Site container
140
- // -------------------------
141
- @mixin container-fixed() {
142
- width: $gridRowWidth;
143
- margin-left: auto;
144
- margin-right: auto;
145
- @include clearfix();
146
- }
147
-
148
- // Le grid system
149
- // -------------------------
150
- @mixin gridSystem-columns ($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
151
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
152
- }
153
- @mixin gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns) {
154
- margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
155
- }
156
- @mixin gridSystem-gridColumn($gridGutterWidth) {
157
- float: left;
158
- margin-left: $gridGutterWidth;
159
- }
160
-
161
- // Take these values and mixins, and make 'em do their thang
162
- @mixin gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
163
- // Row surrounds the columns
164
- .row {
165
- margin-left: $gridGutterWidth * -1;
166
- @include clearfix();
167
- }
168
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
169
- [class*="span"] {
170
- @include gridSystem-gridColumn($gridGutterWidth);
171
- }
172
- // Default columns
173
- .span1 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
174
- .span2 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
175
- .span3 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
176
- .span4 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
177
- .span5 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
178
- .span6 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
179
- .span7 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
180
- .span8 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
181
- .span9 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
182
- .span10 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
183
- .span11 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
184
- .span12,
185
- .container { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
186
- // Offset column options
187
- .offset1 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1); }
188
- .offset2 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2); }
189
- .offset3 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3); }
190
- .offset4 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4); }
191
- .offset5 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5); }
192
- .offset6 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6); }
193
- .offset7 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7); }
194
- .offset8 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8); }
195
- .offset9 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9); }
196
- .offset10 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10); }
197
- .offset11 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11); }
198
- }
199
-
200
- // Fluid grid system
201
- // -------------------------
202
- @mixin fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
203
- width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
204
- }
205
- @mixin fluidGridSystem-gridColumn($fluidGridGutterWidth) {
206
- float: left;
207
- margin-left: $fluidGridGutterWidth;
208
- }
209
- // Take these values and mixins, and make 'em do their thang
210
- @mixin fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
211
- // Row surrounds the columns
212
- .row-fluid {
213
- width: 100%;
214
- @include clearfix();
215
-
216
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
217
- > [class*="span"] {
218
- @include fluidGridSystem-gridColumn($fluidGridGutterWidth);
219
- }
220
- > [class*="span"]:first-child {
221
- margin-left: 0;
222
- }
223
- // Default columns
224
- > .span1 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
225
- > .span2 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
226
- > .span3 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
227
- > .span4 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
228
- > .span5 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
229
- > .span6 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
230
- > .span7 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
231
- > .span8 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
232
- > .span9 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
233
- > .span10 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
234
- > .span11 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
235
- > .span12 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
236
- }
237
- }
238
-
239
-
240
-
241
- // Input grid system
242
- // -------------------------
243
- @mixin inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
244
- width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
245
- }
246
- @mixin inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
247
- input,
248
- textarea,
249
- .uneditable-input {
250
- &.span1 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
251
- &.span2 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
252
- &.span3 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
253
- &.span4 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
254
- &.span5 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
255
- &.span6 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
256
- &.span7 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
257
- &.span8 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
258
- &.span9 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
259
- &.span10 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
260
- &.span11 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
261
- &.span12 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
262
- }
263
- }
264
-
265
- // Make a Grid
266
- // -------------------------
267
- // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
268
- @mixin makeRow() {
269
- margin-left: $gridGutterWidth * -1;
270
- @include clearfix();
271
- }
272
- @mixin makeColumn($columns: 1) {
273
- float: left;
274
- margin-left: $gridGutterWidth;
275
- width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
148
+ // Block level inputs
149
+ @mixin input-block-level {
150
+ display: block;
151
+ width: 100%;
152
+ min-height: 30px; // Make inputs at least the height of their button counterpart
153
+ @include box-sizing(border-box); // Makes inputs behave like true block-level elements
276
154
  }
277
155
 
278
156
 
279
157
 
280
- // Form field states (used in forms.scss)
281
- // --------------------------------------------------
282
-
283
158
  // Mixin for form field states
284
159
  @mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
285
160
  // Set the text color
@@ -289,14 +164,21 @@
289
164
  color: $textColor;
290
165
  }
291
166
  // Style inputs accordingly
167
+ .checkbox,
168
+ .radio,
292
169
  input,
293
170
  select,
294
171
  textarea {
295
172
  color: $textColor;
173
+ }
174
+ input,
175
+ select,
176
+ textarea {
296
177
  border-color: $borderColor;
178
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
297
179
  &:focus {
298
180
  border-color: darken($borderColor, 10%);
299
- @include box-shadow(0 0 6px lighten($borderColor, 20%));
181
+ @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%)});
300
182
  }
301
183
  }
302
184
  // Give a small background color for input-prepend/-append
@@ -314,14 +196,54 @@
314
196
  // --------------------------------------------------
315
197
 
316
198
  // Border Radius
317
- @mixin border-radius($radius: 5px) {
199
+ @mixin border-radius($radius) {
318
200
  -webkit-border-radius: $radius;
319
201
  -moz-border-radius: $radius;
320
202
  border-radius: $radius;
321
203
  }
322
204
 
205
+ // Single Corner Border Radius
206
+ @mixin border-top-left-radius($radius) {
207
+ -webkit-border-top-left-radius: $radius;
208
+ -moz-border-radius-topleft: $radius;
209
+ border-top-left-radius: $radius;
210
+ }
211
+ @mixin border-top-right-radius($radius) {
212
+ -webkit-border-top-right-radius: $radius;
213
+ -moz-border-radius-topright: $radius;
214
+ border-top-right-radius: $radius;
215
+ }
216
+ @mixin border-bottom-right-radius($radius) {
217
+ -webkit-border-bottom-right-radius: $radius;
218
+ -moz-border-radius-bottomright: $radius;
219
+ border-bottom-right-radius: $radius;
220
+ }
221
+ @mixin border-bottom-left-radius($radius) {
222
+ -webkit-border-bottom-left-radius: $radius;
223
+ -moz-border-radius-bottomleft: $radius;
224
+ border-bottom-left-radius: $radius;
225
+ }
226
+
227
+ // Single Side Border Radius
228
+ @mixin border-top-radius($radius) {
229
+ @include border-top-right-radius($radius);
230
+ @include border-top-left-radius($radius);
231
+ }
232
+ @mixin border-right-radius($radius) {
233
+ @include border-top-right-radius($radius);
234
+ @include border-bottom-right-radius($radius);
235
+ }
236
+ @mixin border-bottom-radius($radius) {
237
+ @include border-bottom-right-radius($radius);
238
+ @include border-bottom-left-radius($radius);
239
+ }
240
+ @mixin border-left-radius($radius) {
241
+ @include border-top-left-radius($radius);
242
+ @include border-bottom-left-radius($radius);
243
+ }
244
+
323
245
  // Drop shadows
324
- @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
246
+ @mixin box-shadow($shadow) { // ToDo: Multiple shadow solution for SASS
325
247
  -webkit-box-shadow: $shadow;
326
248
  -moz-box-shadow: $shadow;
327
249
  box-shadow: $shadow;
@@ -331,11 +253,17 @@
331
253
  @mixin transition($transition) {
332
254
  -webkit-transition: $transition;
333
255
  -moz-transition: $transition;
334
- -ms-transition: $transition;
335
256
  -o-transition: $transition;
336
257
  transition: $transition;
337
258
  }
338
259
 
260
+ @mixin transition-delay($transition-delay) {
261
+ -webkit-transition-delay: $transition-delay;
262
+ -moz-transition-delay: $transition-delay;
263
+ -o-transition-delay: $transition-delay;
264
+ transition-delay: $transition-delay;
265
+ }
266
+
339
267
  // Transformations
340
268
  @mixin rotate($degrees) {
341
269
  -webkit-transform: rotate($degrees);
@@ -351,26 +279,35 @@
351
279
  -o-transform: scale($ratio);
352
280
  transform: scale($ratio);
353
281
  }
354
- @mixin translate($x: 0, $y: 0) {
282
+ @mixin translate($x, $y) {
355
283
  -webkit-transform: translate($x, $y);
356
284
  -moz-transform: translate($x, $y);
357
285
  -ms-transform: translate($x, $y);
358
286
  -o-transform: translate($x, $y);
359
287
  transform: translate($x, $y);
360
288
  }
361
- @mixin skew($x: 0, $y: 0) {
289
+ @mixin skew($x, $y) {
362
290
  -webkit-transform: skew($x, $y);
363
291
  -moz-transform: skew($x, $y);
364
- -ms-transform: skew($x, $y);
292
+ -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
365
293
  -o-transform: skew($x, $y);
366
294
  transform: skew($x, $y);
367
295
  }
368
- @mixin translate3d($x: 0, $y: 0, $z: 0) {
369
- -webkit-transform: translate($x, $y, $z);
370
- -moz-transform: translate($x, $y, $z);
371
- -ms-transform: translate($x, $y, $z);
372
- -o-transform: translate($x, $y, $z);
373
- transform: translate($x, $y, $z);
296
+ @mixin translate3d($x, $y, $z) {
297
+ -webkit-transform: translate3d($x, $y, $z);
298
+ -moz-transform: translate3d($x, $y, $z);
299
+ -o-transform: translate3d($x, $y, $z);
300
+ transform: translate3d($x, $y, $z);
301
+ }
302
+
303
+ // Backface visibility
304
+ // Prevent browsers from flickering when using CSS 3D transforms.
305
+ // Default value is `visible`, but can be changed to `hidden
306
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
307
+ @mixin backface-visibility($visibility){
308
+ -webkit-backface-visibility: $visibility;
309
+ -moz-backface-visibility: $visibility;
310
+ backface-visibility: $visibility;
374
311
  }
375
312
 
376
313
  // Background clipping
@@ -382,7 +319,7 @@
382
319
  }
383
320
 
384
321
  // Background sizing
385
- @mixin background-size($size){
322
+ @mixin background-size($size) {
386
323
  -webkit-background-size: $size;
387
324
  -moz-background-size: $size;
388
325
  -o-background-size: $size;
@@ -402,18 +339,19 @@
402
339
  @mixin user-select($select) {
403
340
  -webkit-user-select: $select;
404
341
  -moz-user-select: $select;
342
+ -ms-user-select: $select;
405
343
  -o-user-select: $select;
406
344
  user-select: $select;
407
345
  }
408
346
 
409
347
  // Resize anything
410
- @mixin resizable($direction: both) {
348
+ @mixin resizable($direction) {
411
349
  resize: $direction; // Options: horizontal, vertical, both
412
350
  overflow: auto; // Safari fix
413
351
  }
414
352
 
415
353
  // CSS3 Content Columns
416
- @mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
354
+ @mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
417
355
  -webkit-column-count: $columnCount;
418
356
  -moz-column-count: $columnCount;
419
357
  column-count: $columnCount;
@@ -422,10 +360,20 @@
422
360
  column-gap: $columnGap;
423
361
  }
424
362
 
363
+ // Optional hyphenation
364
+ @mixin hyphens($mode: auto) {
365
+ word-wrap: break-word;
366
+ -webkit-hyphens: $mode;
367
+ -moz-hyphens: $mode;
368
+ -ms-hyphens: $mode;
369
+ -o-hyphens: $mode;
370
+ hyphens: $mode;
371
+ }
372
+
425
373
  // Opacity
426
- @mixin opacity($opacity: 100) {
374
+ @mixin opacity($opacity) {
427
375
  opacity: $opacity / 100;
428
- filter: alpha(opacity=$opacity);
376
+ filter: alpha(opacity=$opacity);
429
377
  }
430
378
 
431
379
 
@@ -435,144 +383,297 @@
435
383
 
436
384
  // Add an alphatransparency value to any background or border color (via Elyse Holladay)
437
385
  @mixin translucent-background($color: $white, $alpha: 1) {
438
- background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
386
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
439
387
  }
388
+
440
389
  @mixin translucent-border($color: $white, $alpha: 1) {
441
390
  border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
442
391
  @include background-clip(padding-box);
443
392
  }
444
393
 
445
-
394
+ // Gradient Bar Colors for buttons and alerts
395
+ @mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
396
+ color: $textColor;
397
+ text-shadow: $textShadow;
398
+ @include gradient-vertical($primaryColor, $secondaryColor);
399
+ border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
400
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
401
+ }
446
402
 
447
403
  // Gradients
448
404
  @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
449
405
  background-color: $endColor;
450
406
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
451
- background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
452
407
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
453
408
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
454
409
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
455
- background-image: linear-gradient(left, $startColor, $endColor); // Le standard
410
+ background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
456
411
  background-repeat: repeat-x;
457
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
412
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
458
413
  }
459
414
  @mixin gradient-vertical($startColor: #555, $endColor: #333) {
460
- background-color: mix($startColor, $endColor, 60%);
415
+ background-color: mix($startColor, $endColor, 62.5%);
461
416
  background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
462
- background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
463
417
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
464
418
  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
465
419
  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
466
- background-image: linear-gradient(top, $startColor, $endColor); // The standard
420
+ background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
467
421
  background-repeat: repeat-x;
468
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
422
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
469
423
  }
470
424
  @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
471
425
  background-color: $endColor;
472
426
  background-repeat: repeat-x;
473
427
  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
474
- background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
475
428
  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
476
429
  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
477
- background-image: linear-gradient($deg, $startColor, $endColor); // The standard
430
+ background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
478
431
  }
479
432
  @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
480
433
  background-color: mix($midColor, $endColor, 80%);
481
434
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
482
435
  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
483
436
  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
484
- background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
485
437
  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
486
438
  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
487
439
  background-repeat: no-repeat;
488
- 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
440
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
489
441
  }
490
442
  @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
491
443
  background-color: $outerColor;
492
444
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
493
445
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
494
446
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
495
- background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
447
+ background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
496
448
  background-repeat: no-repeat;
497
- // Opera cannot do radial gradients yet
498
- }
499
- @mixin gradient-striped($color,$angle: -45deg) {
500
- background-color: $color;
501
- background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
502
- background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
503
- background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
504
- background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
505
- background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
506
- //background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
507
- }
508
-
509
- // Gradient Bar Colors for buttons and alerts
510
- @mixin gradientBar($primaryColor, $secondaryColor) {
511
- @include gradient-vertical($primaryColor, $secondaryColor);
512
- border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
513
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
449
+ }
450
+ @mixin gradient-striped($color: #555, $angle: 45deg) {
451
+ background-color: $color;
452
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
453
+ background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
454
+ background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
455
+ background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
456
+ background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
514
457
  }
515
458
 
516
459
  // Reset filters for IE
517
- @mixin reset-filter() {
518
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
460
+ @mixin gradient-reset-filter() {
461
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
462
+ }
463
+
464
+
465
+
466
+ // COMPONENT MIXINS
467
+ // --------------------------------------------------
468
+
469
+ // Horizontal dividers
470
+ // -------------------------
471
+ // Dividers (basically an hr) within dropdowns and nav lists
472
+ @mixin nav-divider($top: #e5e5e5, $bottom: $white) {
473
+ // IE7 needs a set width since we gave a height. Restricting just
474
+ // to IE7 to keep the 1px left/right space in other browsers.
475
+ // It is unclear where IE is getting the extra space that we need
476
+ // to negative-margin away, but so it goes.
477
+ *width: 100%;
478
+ height: 1px;
479
+ margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
480
+ *margin: -5px 0 5px;
481
+ overflow: hidden;
482
+ background-color: $top;
483
+ border-bottom: 1px solid $bottom;
519
484
  }
520
485
 
521
- // Mixin for generating button backgrounds
522
- // ---------------------------------------
523
- @mixin buttonBackground($startColor, $endColor) {
486
+ // Button backgrounds
487
+ // ------------------
488
+ @mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
524
489
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
525
- @include gradientBar($startColor, $endColor);
526
- @include reset-filter();
490
+ @include gradientBar($startColor, $endColor, $textColor, $textShadow);
491
+ *background-color: $endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
492
+ @include gradient-reset-filter();
527
493
 
528
494
  // in these cases the gradient won't cover the background, so we override
529
495
  &:hover, &:active, &.active, &.disabled, &[disabled] {
496
+ color: $textColor;
530
497
  background-color: $endColor;
498
+ *background-color: darken($endColor, 5%);
531
499
  }
532
500
 
533
501
  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
534
502
  &:active,
535
503
  &.active {
536
- background-color: darken($endColor, 10%) #{"\9"};
504
+ background-color: darken($endColor, 10%) \9;
537
505
  }
538
506
  }
539
507
 
508
+ // Navbar vertical align
509
+ // -------------------------
510
+ // Vertically center elements in the navbar.
511
+ // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
512
+ @mixin navbarVerticalAlign($elementHeight) {
513
+ margin-top: ($navbarHeight - $elementHeight) / 2;
514
+ }
540
515
 
541
- // COMPONENT MIXINS
542
- // --------------------------------------------------
543
516
 
544
- // POPOVER ARROWS
545
- // -------------------------
546
- // For tipsies and popovers
547
- @mixin popoverArrow-top($arrowWidth: 5px) {
548
- bottom: 0;
549
- left: 50%;
550
- margin-left: -$arrowWidth;
551
- border-left: $arrowWidth solid transparent;
552
- border-right: $arrowWidth solid transparent;
553
- border-top: $arrowWidth solid $black;
554
- }
555
- @mixin popoverArrow-left($arrowWidth: 5px) {
556
- top: 50%;
557
- right: 0;
558
- margin-top: -$arrowWidth;
559
- border-top: $arrowWidth solid transparent;
560
- border-bottom: $arrowWidth solid transparent;
561
- border-left: $arrowWidth solid $black;
562
- }
563
- @mixin popoverArrow-bottom($arrowWidth: 5px) {
564
- top: 0;
565
- left: 50%;
566
- margin-left: -$arrowWidth;
567
- border-left: $arrowWidth solid transparent;
568
- border-right: $arrowWidth solid transparent;
569
- border-bottom: $arrowWidth solid $black;
570
- }
571
- @mixin popoverArrow-right($arrowWidth: 5px) {
572
- top: 50%;
573
- left: 0;
574
- margin-top: -$arrowWidth;
575
- border-top: $arrowWidth solid transparent;
576
- border-bottom: $arrowWidth solid transparent;
577
- border-right: $arrowWidth solid $black;
517
+
518
+ // Grid System
519
+ // -----------
520
+
521
+ // Centered container element
522
+ @mixin container-fixed() {
523
+ margin-right: auto;
524
+ margin-left: auto;
525
+ @include clearfix();
526
+ }
527
+
528
+ // Table columns
529
+ @mixin tableColumns($columnSpan: 1) {
530
+ float: none; // undo default grid column styles
531
+ width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
532
+ margin-left: 0; // undo default grid column styles
533
+ }
534
+
535
+ // Make a Grid
536
+ // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
537
+ @mixin makeRow() {
538
+ margin-left: $gridGutterWidth * -1;
539
+ @include clearfix();
540
+ }
541
+ @mixin makeColumn($columns: 1, $offset: 0) {
542
+ float: left;
543
+ margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
544
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
545
+ }
546
+
547
+
548
+ // The Grid
549
+ @mixin grid-core($gridColumnWidth, $gridGutterWidth) {
550
+ .row {
551
+ margin-left: $gridGutterWidth * -1;
552
+ @include clearfix();
553
+ }
554
+
555
+ [class*="span"] {
556
+ float: left;
557
+ min-height: 1px; // prevent collapsing columns
558
+ margin-left: $gridGutterWidth;
559
+ }
560
+
561
+ // Set the container width, and override it for fixed navbars in media queries
562
+ .container,
563
+ .navbar-static-top .container,
564
+ .navbar-fixed-top .container,
565
+ .navbar-fixed-bottom .container {
566
+ @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
567
+ }
568
+
569
+ // generate .spanX and .offsetX
570
+ @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
571
+ @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
572
+ }
573
+
574
+ @mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
575
+ @while $gridColumns > 0 {
576
+ .span#{$gridColumns} { @include grid-core-span($gridColumns, $gridColumnWidth, $gridGutterWidth)}
577
+ $gridColumns: $gridColumns - 1;
578
+ }
579
+ }
580
+
581
+ @mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
582
+ @while $gridColumns > 0 {
583
+ .offset#{$gridColumns} { @include grid-core-offset($gridColumns, $gridColumnWidth, $gridGutterWidth); }
584
+ $gridColumns: $gridColumns - 1;
585
+ }
586
+ }
587
+
588
+ @mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
589
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
590
+ }
591
+
592
+ @mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
593
+ margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
594
+ }
595
+
596
+
597
+
598
+ @mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
599
+ .row-fluid {
600
+ width: 100%;
601
+ @include clearfix();
602
+ [class*="span"] {
603
+ @include input-block-level();
604
+ float: left;
605
+ margin-left: $fluidGridGutterWidth;
606
+ *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
607
+ }
608
+ [class*="span"]:first-child {
609
+ margin-left: 0;
610
+ }
611
+
612
+ // generate .spanX and .offsetX
613
+ @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
614
+ @include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
615
+ }
616
+ }
617
+
618
+ @mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
619
+ @while $gridColumns > 0 {
620
+ .span#{$gridColumns} { @include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
621
+ $gridColumns: $gridColumns - 1;
622
+ }
623
+ }
624
+
625
+ @mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
626
+ @while $gridColumns > 0 {
627
+ .offset#{$gridColumns} { @include grid-fluid-offset($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
628
+ .offset#{$gridColumns}:first-child { @include grid-fluid-offset-first-child($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth); }
629
+ $gridColumns: $gridColumns - 1;
630
+ }
631
+ }
632
+
633
+ @mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
634
+ width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
635
+ *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
636
+ }
637
+
638
+ @mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
639
+ margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
640
+ *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
641
+ }
642
+
643
+ @mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
644
+ margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
645
+ *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
646
+ }
647
+
648
+
649
+
650
+ @mixin grid-input($gridColumnWidth, $gridGutterWidth) {
651
+ input,
652
+ textarea,
653
+ .uneditable-input {
654
+ margin-left: 0; // override margin-left from core grid system
655
+ }
656
+
657
+ // Space grid-sized controls properly if multiple per line
658
+ .controls-row [class*="span"] + [class*="span"] {
659
+ margin-left: $gridGutterWidth;
660
+ }
661
+
662
+ // generate .spanX
663
+ @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
664
+ }
665
+
666
+ @mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
667
+ @while $gridColumns > 0 {
668
+ input.span#{$gridColumns},
669
+ textarea.span#{$gridColumns},
670
+ .uneditable-input.span#{$gridColumns} {
671
+ @include grid-input-span($gridColumns, $gridColumnWidth, $gridGutterWidth);
672
+ }
673
+ $gridColumns: $gridColumns - 1;
674
+ }
675
+ }
676
+
677
+ @mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
678
+ width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
578
679
  }