compass-bootstrap-rails 0.1.3.1

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 (37) hide show
  1. data/.gitignore +8 -0
  2. data/Gemfile +4 -0
  3. data/README.mkdn +151 -0
  4. data/Rakefile +1 -0
  5. data/compass-bootstrap.gemspec +25 -0
  6. data/lib/compass-bootstrap/rails/engine.rb +7 -0
  7. data/lib/compass-bootstrap/rails.rb +7 -0
  8. data/lib/compass-bootstrap/version.rb +5 -0
  9. data/lib/compass-bootstrap.rb +9 -0
  10. data/stylesheets/compass-bootstrap/_compass_bootstrap.scss +29 -0
  11. data/stylesheets/compass-bootstrap/_forms.scss +465 -0
  12. data/stylesheets/compass-bootstrap/_mixins.scss +210 -0
  13. data/stylesheets/compass-bootstrap/_patterns.scss +1003 -0
  14. data/stylesheets/compass-bootstrap/_reset.scss +141 -0
  15. data/stylesheets/compass-bootstrap/_scaffolding.scss +137 -0
  16. data/stylesheets/compass-bootstrap/_tables.scss +171 -0
  17. data/stylesheets/compass-bootstrap/_type.scss +187 -0
  18. data/stylesheets/compass-bootstrap/_variables.scss +60 -0
  19. data/vendor/assets/javascripts/bootstrap-alerts.js +104 -0
  20. data/vendor/assets/javascripts/bootstrap-dropdown.js +50 -0
  21. data/vendor/assets/javascripts/bootstrap-modal.js +227 -0
  22. data/vendor/assets/javascripts/bootstrap-popover.js +77 -0
  23. data/vendor/assets/javascripts/bootstrap-scrollspy.js +105 -0
  24. data/vendor/assets/javascripts/bootstrap-tabs.js +62 -0
  25. data/vendor/assets/javascripts/bootstrap-twipsy.js +307 -0
  26. data/vendor/assets/stylesheets/compass-bootstrap/_compass_bootstrap.scss +29 -0
  27. data/vendor/assets/stylesheets/compass-bootstrap/_forms.scss +465 -0
  28. data/vendor/assets/stylesheets/compass-bootstrap/_mixins.scss +210 -0
  29. data/vendor/assets/stylesheets/compass-bootstrap/_patterns.scss +1003 -0
  30. data/vendor/assets/stylesheets/compass-bootstrap/_reset.scss +141 -0
  31. data/vendor/assets/stylesheets/compass-bootstrap/_scaffolding.scss +137 -0
  32. data/vendor/assets/stylesheets/compass-bootstrap/_tables.scss +171 -0
  33. data/vendor/assets/stylesheets/compass-bootstrap/_type.scss +187 -0
  34. data/vendor/assets/stylesheets/compass-bootstrap/_variables.scss +60 -0
  35. data/vendor/assets/stylesheets/compass-bootstrap/compass_bootstrap.scss +29 -0
  36. data/vendor/assets/stylesheets/compass-bootstrap/manifest.rb +20 -0
  37. metadata +94 -0
@@ -0,0 +1,465 @@
1
+ /* Forms.less
2
+ * Base styles for various input types, form layouts, and states
3
+ * ------------------------------------------------------------- */
4
+
5
+
6
+ // FORM STYLES
7
+ // -----------
8
+
9
+ form {
10
+ margin-bottom: $baseline;
11
+ }
12
+
13
+ // Groups of fields with labels on top (legends)
14
+ fieldset {
15
+ margin-bottom: $baseline;
16
+ padding-top: $baseline;
17
+ legend {
18
+ display: block;
19
+ padding-left: 150px;
20
+ font-size: $basefont * 1.5;
21
+ line-height: 1;
22
+ color: $grayDark;
23
+ *padding: 0 0 5px 145px; /* IE6-7 */
24
+ *line-height: 1.5; /* IE6-7 */
25
+ }
26
+ }
27
+
28
+ // Parent element that clears floats and wraps labels and fields together
29
+ form .clearfix {
30
+ margin-bottom: $baseline;
31
+ @include clearfix();
32
+ }
33
+
34
+ // Set font for forms
35
+ label,
36
+ input,
37
+ select,
38
+ textarea {
39
+ @include font-sans-serif(normal,13px,normal);
40
+ }
41
+
42
+ // Float labels left
43
+ label {
44
+ padding-top: 6px;
45
+ font-size: $basefont;
46
+ line-height: $baseline;
47
+ float: left;
48
+ width: 130px;
49
+ text-align: right;
50
+ color: $grayDark;
51
+ }
52
+
53
+ // Shift over the inside div to align all label's relevant content
54
+ form .input {
55
+ margin-left: 150px;
56
+ }
57
+
58
+ // Checkboxs and radio buttons
59
+ input[type=checkbox],
60
+ input[type=radio] {
61
+ cursor: pointer;
62
+ }
63
+
64
+ // Inputs, Textareas, Selects
65
+ input,
66
+ textarea,
67
+ select,
68
+ .uneditable-input {
69
+ display: inline-block;
70
+ width: 210px;
71
+ height: $baseline;
72
+ padding: 4px;
73
+ font-size: $basefont;
74
+ line-height: $baseline;
75
+ color: $gray;
76
+ border: 1px solid #ccc;
77
+ @include border-radius(3px);
78
+ }
79
+
80
+ /* mini reset for non-html5 file types */
81
+ input[type=checkbox],
82
+ input[type=radio] {
83
+ width: auto;
84
+ height: auto;
85
+ padding: 0;
86
+ margin: 3px 0;
87
+ *margin-top: 0; /* IE6-7 */
88
+ line-height: normal;
89
+ border: none;
90
+ }
91
+
92
+ input[type=file] {
93
+ background-color: $white;
94
+ padding: initial;
95
+ border: initial;
96
+ line-height: initial;
97
+ @include box-shadow(none);
98
+ }
99
+
100
+ input[type=button],
101
+ input[type=reset],
102
+ input[type=submit] {
103
+ width: auto;
104
+ height: auto;
105
+ }
106
+
107
+ select,
108
+ input[type=file] {
109
+ height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
110
+ line-height: $baseline * 1.5;
111
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
112
+ }
113
+
114
+ // Make multiple select elements height not fixed
115
+ select[multiple] {
116
+ height: inherit;
117
+ }
118
+
119
+ textarea {
120
+ height: auto;
121
+ }
122
+
123
+ // For text that needs to appear as an input but should not be an input
124
+ .uneditable-input {
125
+ background-color: $white;
126
+ display: block;
127
+ border-color: #eee;
128
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
129
+ cursor: not-allowed;
130
+ }
131
+
132
+ // Placeholder text gets special styles; can't be bundled together though for some reason
133
+ :-moz-placeholder {
134
+ color: $grayLight;
135
+ }
136
+ ::-webkit-input-placeholder {
137
+ color: $grayLight;
138
+ }
139
+
140
+ // Focus states
141
+ input,
142
+ textarea {
143
+ $transition: border linear .2s, box-shadow linear .2s;
144
+ @include transition($transition);
145
+ @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
146
+ }
147
+ input:focus,
148
+ textarea:focus {
149
+ outline: 0;
150
+ border-color: rgba(82,168,236,.8);
151
+ $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
152
+ @include box-shadow($shadow);
153
+ }
154
+ input[type=file]:focus,
155
+ input[type=checkbox]:focus,
156
+ select:focus {
157
+ @include box-shadow(none); // override for file inputs
158
+ outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
159
+ }
160
+
161
+ // Error styles
162
+ form div.clearfix.error {
163
+ background: lighten($red, 57%);
164
+ padding: 10px 0;
165
+ margin: -10px 0 10px;
166
+ @include border-radius(4px);
167
+ $error-text: desaturate(lighten($red, 25%), 25%);
168
+ > label,
169
+ span.help-inline,
170
+ span.help-block {
171
+ color: $red;
172
+ }
173
+ input,
174
+ textarea {
175
+ border-color: $error-text;
176
+ @include box-shadow(0 0 3px rgba(171,41,32,.25));
177
+ &:focus {
178
+ border-color: darken($error-text, 10%);
179
+ @include box-shadow(0 0 6px rgba(171,41,32,.5));
180
+ }
181
+ }
182
+ .input-prepend,
183
+ .input-append {
184
+ span.add-on {
185
+ background: lighten($red, 50%);
186
+ border-color: $error-text;
187
+ color: darken($error-text, 10%);
188
+ }
189
+ }
190
+ }
191
+
192
+ // Form element sizes
193
+ // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
194
+ .input-mini,
195
+ input.mini,
196
+ textarea.mini,
197
+ select.mini {
198
+ width: 60px;
199
+ }
200
+ .input-small,
201
+ input.small,
202
+ textarea.small,
203
+ select.small {
204
+ width: 90px;
205
+ }
206
+ .input-medium,
207
+ input.medium,
208
+ textarea.medium,
209
+ select.medium {
210
+ width: 150px;
211
+ }
212
+ .input-large,
213
+ input.large,
214
+ textarea.large,
215
+ select.large {
216
+ width: 210px;
217
+ }
218
+ .input-xlarge,
219
+ input.xlarge,
220
+ textarea.xlarge,
221
+ select.xlarge {
222
+ width: 270px;
223
+ }
224
+ .input-xxlarge,
225
+ input.xxlarge,
226
+ textarea.xxlarge,
227
+ select.xxlarge {
228
+ width: 530px;
229
+ }
230
+ textarea.xxlarge {
231
+ overflow-y: auto;
232
+ }
233
+
234
+ // Grid style input sizes
235
+ // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
236
+ @mixin formColumns($columnSpan: 1) {
237
+ display: inline-block;
238
+ float: none;
239
+ width: (($gridColumnWidth - 10) * $columnSpan) + (($gridColumnWidth - 10) * ($columnSpan - 1));
240
+ margin-left: 0;
241
+ }
242
+ input,
243
+ textarea,
244
+ select {
245
+ // Default columns
246
+ &.span1 { @include formColumns(1); }
247
+ &.span2 { @include formColumns(2); }
248
+ &.span3 { @include formColumns(3); }
249
+ &.span4 { @include formColumns(4); }
250
+ &.span5 { @include formColumns(5); }
251
+ &.span6 { @include formColumns(6); }
252
+ &.span7 { @include formColumns(7); }
253
+ &.span8 { @include formColumns(8); }
254
+ &.span9 { @include formColumns(9); }
255
+ &.span10 { @include formColumns(10); }
256
+ &.span11 { @include formColumns(11); }
257
+ &.span12 { @include formColumns(12); }
258
+ &.span13 { @include formColumns(13); }
259
+ &.span14 { @include formColumns(14); }
260
+ &.span15 { @include formColumns(15); }
261
+ &.span16 { @include formColumns(16); }
262
+ }
263
+
264
+ // Disabled and read-only inputs
265
+ input[disabled],
266
+ select[disabled],
267
+ textarea[disabled],
268
+ input[readonly],
269
+ select[readonly],
270
+ textarea[readonly] {
271
+ background-color: #f5f5f5;
272
+ border-color: #ddd;
273
+ cursor: not-allowed;
274
+ }
275
+
276
+ // Actions (the buttons)
277
+ .actions {
278
+ background: #f5f5f5;
279
+ margin-top: $baseline;
280
+ margin-bottom: $baseline;
281
+ padding: ($baseline - 1) 20px $baseline 150px;
282
+ border-top: 1px solid #ddd;
283
+ @include border-radius(0 0 3px 3px);
284
+ .secondary-action {
285
+ float: right;
286
+ a {
287
+ line-height: 30px;
288
+ &:hover {
289
+ text-decoration: underline;
290
+ }
291
+ }
292
+ }
293
+ }
294
+
295
+ // Help Text
296
+ .help-inline,
297
+ .help-block {
298
+ font-size: $basefont - 2;
299
+ line-height: $baseline;
300
+ color: $grayLight;
301
+ }
302
+ .help-inline {
303
+ padding-left: 5px;
304
+ *position: relative; /* IE6-7 */
305
+ *top: -5px; /* IE6-7 */
306
+ }
307
+
308
+ // Big blocks of help text
309
+ .help-block {
310
+ display: block;
311
+ max-width: 600px;
312
+ }
313
+
314
+ // Inline Fields (input fields that appear as inline objects
315
+ .inline-inputs {
316
+ color: $gray;
317
+ span, input {
318
+ display: inline-block;
319
+ }
320
+ input.mini {
321
+ width: 60px;
322
+ }
323
+ input.small {
324
+ width: 90px;
325
+ }
326
+ span {
327
+ padding: 0 2px 0 1px;
328
+ }
329
+ }
330
+
331
+ // Allow us to put symbols and text within the input field for a cleaner look
332
+ .input-prepend,
333
+ .input-append {
334
+ input {
335
+ @include border-radius(0 3px 3px 0);
336
+ }
337
+ .add-on {
338
+ position: relative;
339
+ background: #f5f5f5;
340
+ border: 1px solid #ccc;
341
+ z-index: 2;
342
+ float: left;
343
+ display: block;
344
+ width: auto;
345
+ min-width: 16px;
346
+ height: 18px;
347
+ padding: 4px 4px 4px 5px;
348
+ margin-right: -1px;
349
+ font-weight: normal;
350
+ line-height: 18px;
351
+ color: $grayLight;
352
+ text-align: center;
353
+ text-shadow: 0 1px 0 $white;
354
+ @include border-radius(3px 0 0 3px);
355
+ }
356
+ .active {
357
+ background: lighten($green, 30);
358
+ border-color: $green;
359
+ }
360
+ }
361
+ .input-prepend {
362
+ .add-on {
363
+ *margin-top: 1px; /* IE6-7 */
364
+ }
365
+ }
366
+ .input-append {
367
+ input {
368
+ float: left;
369
+ @include border-radius(3px 0 0 3px);
370
+ }
371
+ .add-on {
372
+ @include border-radius(0 3px 3px 0);
373
+ margin-right: 0;
374
+ margin-left: -1px;
375
+ }
376
+ }
377
+
378
+ // Stacked options for forms (radio buttons or checkboxes)
379
+ .inputs-list {
380
+ margin: 0 0 5px;
381
+ width: 100%;
382
+ li {
383
+ display: block;
384
+ padding: 0;
385
+ width: 100%;
386
+ }
387
+ label {
388
+ display: block;
389
+ float: none;
390
+ width: auto;
391
+ padding: 0;
392
+ line-height: $baseline;
393
+ text-align: left;
394
+ white-space: normal;
395
+ strong {
396
+ color: $gray;
397
+ }
398
+ small {
399
+ font-size: $basefont - 2;
400
+ font-weight: normal;
401
+ }
402
+ }
403
+ .inputs-list {
404
+ margin-left: 25px;
405
+ margin-bottom: 10px;
406
+ padding-top: 0;
407
+ }
408
+ &:first-child {
409
+ padding-top: 6px;
410
+ }
411
+ li + li {
412
+ padding-top: 2px;
413
+ }
414
+ input[type=radio],
415
+ input[type=checkbox] {
416
+ margin-bottom: 0;
417
+ }
418
+ }
419
+
420
+ // Stacked forms
421
+ .form-stacked {
422
+ padding-left: 20px;
423
+ fieldset {
424
+ padding-top: $baseline / 2;
425
+ }
426
+ legend {
427
+ padding-left: 0;
428
+ }
429
+ label {
430
+ display: block;
431
+ float: none;
432
+ width: auto;
433
+ font-weight: bold;
434
+ text-align: left;
435
+ line-height: 20px;
436
+ padding-top: 0;
437
+ }
438
+ .clearfix {
439
+ margin-bottom: $baseline / 2;
440
+ div.input {
441
+ margin-left: 0;
442
+ }
443
+ }
444
+ .inputs-list {
445
+ margin-bottom: 0;
446
+ li {
447
+ padding-top: 0;
448
+ label {
449
+ font-weight: normal;
450
+ padding-top: 0;
451
+ }
452
+ }
453
+ }
454
+ div.clearfix.error {
455
+ padding-top: 10px;
456
+ padding-bottom: 10px;
457
+ padding-left: 10px;
458
+ margin-top: 0;
459
+ margin-left: -10px;
460
+ }
461
+ .actions {
462
+ margin-left: -20px;
463
+ padding-left: 20px;
464
+ }
465
+ }
@@ -0,0 +1,210 @@
1
+ /* Variables.less
2
+ * Snippets of reusable CSS to develop faster and keep code readable
3
+ * ----------------------------------------------------------------- */
4
+
5
+ // Clearfix for clearing floats like a boss h5bp.com/q
6
+ @mixin clearfix() {
7
+ zoom: 1;
8
+ &:before,
9
+ &:after {
10
+ display: table;
11
+ content: "";
12
+ zoom: 1;
13
+ *display: inline;
14
+ }
15
+ &:after {
16
+ clear: both;
17
+ }
18
+ }
19
+
20
+ // Center-align a block level element
21
+ @mixin center-block() {
22
+ display: block;
23
+ margin-left: auto;
24
+ margin-right: auto;
25
+ }
26
+
27
+ // Sizing shortcuts
28
+ @mixin size($height: 5px, $width: 5px) {
29
+ height: $height;
30
+ width: $width;
31
+ }
32
+ @mixin square($size: 5px) {
33
+ @include size($size, $size);
34
+ }
35
+
36
+ // Input placeholder text
37
+ @mixin placeholder($color: $grayLight) {
38
+ :-moz-placeholder {
39
+ color: $color;
40
+ }
41
+ ::-webkit-input-placeholder {
42
+ color: $color;
43
+ }
44
+ }
45
+
46
+ // Font Stacks
47
+ @mixin font-shorthand($weight: normal, $size: 14px, $lineHeight: 20px) {
48
+ font-size: $size;
49
+ font-weight: $weight;
50
+ line-height: $lineHeight;
51
+ }
52
+ @mixin font-sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
53
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
54
+ font-size: $size;
55
+ font-weight: $weight;
56
+ line-height: $lineHeight;
57
+ }
58
+ @mixin font-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
59
+ font-family: "Georgia", Times New Roman, Times, serif;
60
+ font-size: $size;
61
+ font-weight: $weight;
62
+ line-height: $lineHeight;
63
+ }
64
+ @mixin font-monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
65
+ font-family: "Monaco", Courier New, monospace;
66
+ font-size: $size;
67
+ font-weight: $weight;
68
+ line-height: $lineHeight;
69
+ }
70
+
71
+ // Grid System
72
+ @mixin fixed-container() {
73
+ width: $siteWidth;
74
+ margin-left: auto;
75
+ margin-right: auto;
76
+ @include clearfix();
77
+ }
78
+ @mixin columns($columnSpan: 1) {
79
+ width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
80
+ }
81
+ @mixin offset($columnOffset: 1) {
82
+ margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
83
+ }
84
+ // Necessary grid styles for every column to make them appear next to each other horizontally
85
+ @mixin gridColumn() {
86
+ display: inline;
87
+ float: left;
88
+ margin-left: $gridGutterWidth;
89
+ }
90
+ // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
91
+ @mixin makeColumn($columnSpan: 1) {
92
+ @include gridColumn();
93
+ @include columns($columnSpan);
94
+ }
95
+
96
+ // Border Radius
97
+ @mixin border-radius($radius: 5px) {
98
+ -webkit-border-radius: $radius;
99
+ -moz-border-radius: $radius;
100
+ border-radius: $radius;
101
+ }
102
+
103
+ // Drop shadows
104
+ @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
105
+ -webkit-box-shadow: $shadow;
106
+ -moz-box-shadow: $shadow;
107
+ box-shadow: $shadow;
108
+ }
109
+
110
+ // Transitions
111
+ @mixin transition($transition) {
112
+ -webkit-transition: $transition;
113
+ -moz-transition: $transition;
114
+ -ms-transition: $transition;
115
+ -o-transition: $transition;
116
+ transition: $transition;
117
+ }
118
+
119
+ // Background clipping
120
+ @mixin background-clip($clip) {
121
+ -webkit-background-clip: $clip;
122
+ -moz-background-clip: $clip;
123
+ background-clip: $clip;
124
+ }
125
+
126
+ // CSS3 Content Columns
127
+ @mixin content-columns($columnCount, $columnGap: 20px) {
128
+ -webkit-column-count: $columnCount;
129
+ -moz-column-count: $columnCount;
130
+ column-count: $columnCount;
131
+ -webkit-column-gap: $columnGap;
132
+ -moz-column-gap: $columnGap;
133
+ column-gap: $columnGap;
134
+ }
135
+
136
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
137
+ @mixin translucent-background($color: $white, $alpha: 1) {
138
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
139
+ }
140
+ @mixin translucent-border($color: $white, $alpha: 1) {
141
+ border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
142
+ background-clip: padding-box;
143
+ }
144
+
145
+ // Gradient Bar Colors for buttons and allerts
146
+ @mixin gradientBar($primaryColor, $secondaryColor) {
147
+ @include gradient-vertical($primaryColor, $secondaryColor);
148
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
149
+ border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
150
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
151
+ }
152
+
153
+ // Gradients
154
+ @mixin gradient-horizontal ($startColor: #555, $endColor: #333) {
155
+ background-color: $endColor;
156
+ background-repeat: repeat-x;
157
+ background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
158
+ background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
159
+ background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
160
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
161
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
162
+ background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
163
+ background-image: linear-gradient(left, $startColor, $endColor); // Le standard
164
+ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
165
+ }
166
+ @mixin gradient-vertical ($startColor: #555, $endColor: #333) {
167
+ background-color: $endColor;
168
+ background-repeat: repeat-x;
169
+ background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
170
+ background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
171
+ background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
172
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
173
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
174
+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
175
+ background-image: linear-gradient(top, $startColor, $endColor); // The standard
176
+ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
177
+ }
178
+ @mixin gradient-directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
179
+ background-color: $endColor;
180
+ background-repeat: repeat-x;
181
+ background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
182
+ background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
183
+ background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
184
+ background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
185
+ background-image: linear-gradient($deg, $startColor, $endColor); // The standard
186
+ }
187
+ @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
188
+ background-color: $endColor;
189
+ background-repeat: no-repeat;
190
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
191
+ background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
192
+ background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
193
+ background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
194
+ background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
195
+ background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
196
+ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
197
+ }
198
+
199
+ // Reset filters for IE
200
+ @mixin reset-filter() {
201
+ filter: progid:DXImageTransform.Microsoft.Gradient(enabled = false);
202
+ }
203
+
204
+ // Opacity
205
+ @mixin opacity($opacity: 100) {
206
+ filter: alpha(opacity='#{$opacity}');
207
+ -khtml-opacity: $opacity / 100;
208
+ -moz-opacity: $opacity / 100;
209
+ opacity: $opacity / 100;
210
+ }