compass_twitter_bootstrap 0.1.4 → 0.1.5

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.
data/.gitignore CHANGED
@@ -16,3 +16,4 @@ spec/reports
16
16
  test/tmp
17
17
  test/version_tmp
18
18
  tmp
19
+ .sass-cache
data/README.md CHANGED
@@ -24,6 +24,29 @@ Compass Twitter Bootstrap is Twitter's toolkit converted for Compass.
24
24
 
25
25
  @import "compass_twitter_bootstrap";
26
26
 
27
+ ## Usage with asset pipeline(Rails 3.1)
28
+
29
+ **Add it to your Gemfile**
30
+
31
+ gem 'compass_twitter_bootstrap'
32
+
33
+ **Bundle install**
34
+
35
+ bundle install
36
+
37
+ **Add it to your Application.rb**
38
+
39
+ # Enable the asset pipeline
40
+ config.assets.enabled = true
41
+
42
+ # Compass integration
43
+ config.sass.load_paths << Compass::Frameworks['compass'].stylesheets_directory
44
+ config.sass.load_paths << Compass::Frameworks['twitter_bootstrap'].stylesheets_directory
45
+
46
+ **Import it into your SCSS file**
47
+
48
+ @import "compass_twitter_bootstrap"
49
+
27
50
 
28
51
  ## TWITTER BOOTSTRAP
29
52
 
@@ -1,3 +1,3 @@
1
1
  module CompassTwitterBootstrap
2
- VERSION = "0.1.4"
2
+ VERSION = "0.1.5"
3
3
  end
@@ -1,6 +1,6 @@
1
1
  require "compass_twitter_bootstrap/version"
2
2
  require 'compass'
3
- Compass::Frameworks.register("afadf", :path => "#{File.dirname(__FILE__)}/..")
3
+ Compass::Frameworks.register("twitter_bootstrap", :path => "#{File.dirname(__FILE__)}/..")
4
4
 
5
5
  module CompassTwitterBootstrap
6
6
  STYLESHEETS = File.expand_path("../stylesheets", __FILE__)
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Bootstrap v1.1.1
2
+ * Bootstrap v1.3.0
3
3
  *
4
4
  * Copyright 2011 Twitter, Inc
5
5
  * Licensed under the Apache License v2.0
@@ -10,11 +10,15 @@
10
10
  */
11
11
 
12
12
  @import "compass";
13
+
13
14
  // CSS Reset
14
15
  @import "compass_twitter_bootstrap/reset";
15
16
 
16
- // Core
17
- @import "compass_twitter_bootstrap/preboot";
17
+ // Core variables and mixins
18
+ @import "compass_twitter_bootstrap/variables";
19
+ @import "compass_twitter_bootstrap/mixins";
20
+
21
+ // Grid system and page structure
18
22
  @import "compass_twitter_bootstrap/scaffolding";
19
23
 
20
24
  // Styled patterns and elements
@@ -16,18 +16,19 @@ fieldset {
16
16
  padding-top: $baseline;
17
17
  legend {
18
18
  display: block;
19
- margin-left: 150px;
20
- font-size: 20px;
19
+ padding-left: 150px;
20
+ font-size: $basefont * 1.5;
21
21
  line-height: 1;
22
- *margin: 0 0 5px 145px; /* IE6-7 */
23
- *line-height: 1.5; /* IE6-7 */
24
22
  color: $grayDark;
23
+ *padding: 0 0 5px 145px; /* IE6-7 */
24
+ *line-height: 1.5; /* IE6-7 */
25
25
  }
26
26
  }
27
27
 
28
28
  // Parent element that clears floats and wraps labels and fields together
29
- .clearfix {
29
+ form .clearfix {
30
30
  margin-bottom: $baseline;
31
+ @include clearfix();
31
32
  }
32
33
 
33
34
  // Set font for forms
@@ -41,8 +42,8 @@ textarea {
41
42
  // Float labels left
42
43
  label {
43
44
  padding-top: 6px;
44
- font-size: 13px;
45
- line-height: 18px;
45
+ font-size: $basefont;
46
+ line-height: $baseline;
46
47
  float: left;
47
48
  width: 130px;
48
49
  text-align: right;
@@ -50,7 +51,7 @@ label {
50
51
  }
51
52
 
52
53
  // Shift over the inside div to align all label's relevant content
53
- div.input {
54
+ form .input {
54
55
  margin-left: 150px;
55
56
  }
56
57
 
@@ -69,7 +70,7 @@ select,
69
70
  width: 210px;
70
71
  height: $baseline;
71
72
  padding: 4px;
72
- font-size: 13px;
73
+ font-size: $basefont;
73
74
  line-height: $baseline;
74
75
  color: $gray;
75
76
  border: 1px solid #ccc;
@@ -89,7 +90,7 @@ input[type=radio] {
89
90
  }
90
91
 
91
92
  input[type=file] {
92
- background-color: #fff;
93
+ background-color: $white;
93
94
  padding: initial;
94
95
  border: initial;
95
96
  line-height: initial;
@@ -105,19 +106,27 @@ input[type=submit] {
105
106
 
106
107
  select,
107
108
  input[type=file] {
108
- height: $baseline * 1.5;
109
+ height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
109
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;
110
117
  }
111
118
 
112
119
  textarea {
113
120
  height: auto;
114
121
  }
115
122
 
123
+ // For text that needs to appear as an input but should not be an input
116
124
  .uneditable-input {
117
- background-color: #eee;
125
+ background-color: $white;
118
126
  display: block;
119
- border-color: #ccc;
120
- @include box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
127
+ border-color: #eee;
128
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
129
+ cursor: not-allowed;
121
130
  }
122
131
 
123
132
  // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -130,21 +139,27 @@ textarea {
130
139
 
131
140
  // Focus states
132
141
  input,
133
- select, textarea {
142
+ textarea {
134
143
  $transition: border linear .2s, box-shadow linear .2s;
135
144
  @include transition($transition);
136
145
  @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
137
146
  }
138
147
  input:focus,
139
148
  textarea:focus {
140
- outline: none;
149
+ outline: 0;
141
150
  border-color: rgba(82,168,236,.8);
142
151
  $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
143
152
  @include box-shadow($shadow);
144
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
+ }
145
160
 
146
161
  // Error styles
147
- form div.error {
162
+ form div.clearfix.error {
148
163
  background: lighten($red, 57%);
149
164
  padding: 10px 0;
150
165
  margin: -10px 0 10px;
@@ -175,35 +190,87 @@ form div.error {
175
190
  }
176
191
 
177
192
  // Form element sizes
178
- .input-mini, input.mini, textarea.mini, select.mini {
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 {
179
198
  width: 60px;
180
199
  }
181
- .input-small, input.small, textarea.small, select.small {
200
+ .input-small,
201
+ input.small,
202
+ textarea.small,
203
+ select.small {
182
204
  width: 90px;
183
205
  }
184
- .input-medium, input.medium, textarea.medium, select.medium {
206
+ .input-medium,
207
+ input.medium,
208
+ textarea.medium,
209
+ select.medium {
185
210
  width: 150px;
186
211
  }
187
- .input-large, input.large, textarea.large, select.large {
212
+ .input-large,
213
+ input.large,
214
+ textarea.large,
215
+ select.large {
188
216
  width: 210px;
189
217
  }
190
- .input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
218
+ .input-xlarge,
219
+ input.xlarge,
220
+ textarea.xlarge,
221
+ select.xlarge {
191
222
  width: 270px;
192
223
  }
193
- .input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
224
+ .input-xxlarge,
225
+ input.xxlarge,
226
+ textarea.xxlarge,
227
+ select.xxlarge {
194
228
  width: 530px;
195
229
  }
196
230
  textarea.xxlarge {
197
- overflow-y: scroll;
231
+ overflow-y: auto;
198
232
  }
199
233
 
200
- // Turn off focus for disabled (read-only) form elements
201
- input[readonly]:focus,
202
- textarea[readonly]:focus,
203
- input.disabled {
204
- background: #f5f5f5;
234
+ // Grid style input sizes
235
+ // This is a duplication of the main grid @include 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;
205
272
  border-color: #ddd;
206
- @include box-shadow(none);
273
+ cursor: not-allowed;
207
274
  }
208
275
 
209
276
  // Actions (the buttons)
@@ -228,7 +295,7 @@ input.disabled {
228
295
  // Help Text
229
296
  .help-inline,
230
297
  .help-block {
231
- font-size: 12px;
298
+ font-size: $basefont - 2;
232
299
  line-height: $baseline;
233
300
  color: $grayLight;
234
301
  }
@@ -268,20 +335,22 @@ input.disabled {
268
335
  @include border-radius(0 3px 3px 0);
269
336
  }
270
337
  .add-on {
338
+ position: relative;
271
339
  background: #f5f5f5;
340
+ border: 1px solid #ccc;
341
+ z-index: 2;
272
342
  float: left;
273
343
  display: block;
274
344
  width: auto;
275
345
  min-width: 16px;
346
+ height: 18px;
276
347
  padding: 4px 4px 4px 5px;
277
- color: $grayLight;
348
+ margin-right: -1px;
278
349
  font-weight: normal;
279
350
  line-height: 18px;
280
- height: 18px;
351
+ color: $grayLight;
281
352
  text-align: center;
282
- text-shadow: 0 1px 0 #fff;
283
- border: 1px solid #ccc;
284
- border-right-width: 0;
353
+ text-shadow: 0 1px 0 $white;
285
354
  @include border-radius(3px 0 0 3px);
286
355
  }
287
356
  .active {
@@ -301,8 +370,8 @@ input.disabled {
301
370
  }
302
371
  .add-on {
303
372
  @include border-radius(0 3px 3px 0);
304
- border-right-width: 1px;
305
- border-left-width: 0;
373
+ margin-right: 0;
374
+ margin-left: -1px;
306
375
  }
307
376
  }
308
377
 
@@ -314,31 +383,34 @@ input.disabled {
314
383
  display: block;
315
384
  padding: 0;
316
385
  width: 100%;
317
- label {
318
- display: block;
319
- float: none;
320
- width: auto;
321
- padding: 0;
322
- line-height: $baseline;
323
- text-align: left;
324
- white-space: normal;
325
- strong {
326
- color: $gray;
327
- }
328
- small {
329
- font-size: 12px;
330
- font-weight: normal;
331
- }
332
- }
333
- ul.inputs-list {
334
- margin-left: 25px;
335
- margin-bottom: 10px;
336
- padding-top: 0;
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;
337
397
  }
338
- &:first-child {
339
- padding-top: 5px;
398
+ small {
399
+ font-size: $basefont - 2;
400
+ font-weight: normal;
340
401
  }
341
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
+ }
342
414
  input[type=radio],
343
415
  input[type=checkbox] {
344
416
  margin-bottom: 0;
@@ -352,7 +424,7 @@ input.disabled {
352
424
  padding-top: $baseline / 2;
353
425
  }
354
426
  legend {
355
- margin-left: 0;
427
+ padding-left: 0;
356
428
  }
357
429
  label {
358
430
  display: block;
@@ -379,7 +451,7 @@ input.disabled {
379
451
  }
380
452
  }
381
453
  }
382
- div.error {
454
+ div.clearfix.error {
383
455
  padding-top: 10px;
384
456
  padding-bottom: 10px;
385
457
  padding-left: 10px;
@@ -390,4 +462,4 @@ input.disabled {
390
462
  margin-left: -20px;
391
463
  padding-left: 20px;
392
464
  }
393
- }
465
+ }
@@ -1,62 +1,10 @@
1
- /* Preboot.less
2
- * Variables and mixins to pre-ignite any new web development project
3
- * ------------------------------------------------------------------ */
4
-
5
-
6
- // VARIABLES
7
- // ---------
8
-
9
- // Links
10
- $linkColor: #0069d6;
11
- $linkColorHover: darken($linkColor, 10);
12
-
13
- // Grays
14
- $black: #000;
15
- $grayDark: lighten($black, 25%);
16
- $gray: lighten($black, 50%);
17
- $grayLight: lighten($black, 75%);
18
- $grayLighter: lighten($black, 90%);
19
- $white: #fff;
20
-
21
- // Accent Colors
22
- $blue: #049CDB;
23
- $blueDark: #0064CD;
24
- $green: #46a546;
25
- $red: #9d261d;
26
- $yellow: #ffc40d;
27
- $orange: #f89406;
28
- $pink: #c3325f;
29
- $purple: #7a43b6;
30
-
31
- // Baseline grid
32
- $basefont: 13px;
33
- $baseline: 18px;
34
-
35
- // Griditude
36
- $gridColumns: 16;
37
- $gridColumnWidth: 40px;
38
- $gridGutterWidth: 20px;
39
- $extraSpace: ($gridGutterWidth * 2); // For our grid calculations
40
- $siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
41
-
42
- // Color Scheme
43
- $baseColor: $blue; // Set a base color
44
- $complement: spin($baseColor, 180); // Determine a complementary color
45
- $split1: spin($baseColor, 158); // Split complements
46
- $split2: spin($baseColor, -158);
47
- $triad1: spin($baseColor, 135); // Triads colors
48
- $triad2: spin($baseColor, -135);
49
- $tetra1: spin($baseColor, 90); // Tetra colors
50
- $tetra2: spin($baseColor, -90);
51
- $analog1: spin($baseColor, 22); // Analogs colors
52
- $analog2: spin($baseColor, -22);
53
-
54
-
55
- // MIXINS
56
- // ------
1
+ /* Mixins.scss
2
+ * Snippets of reusable CSS to develop faster and keep code readable
3
+ * ----------------------------------------------------------------- */
4
+
57
5
 
58
6
  // Clearfix for clearing floats like a boss h5bp.com/q
59
- @mixin cft {
7
+ @mixin clearfix {
60
8
  zoom: 1;
61
9
  &:before, &:after {
62
10
  display: table;
@@ -98,18 +46,21 @@ $analog2: spin($baseColor, -22);
98
46
  font-weight: $weight;
99
47
  line-height: $lineHeight;
100
48
  }
49
+
101
50
  @mixin sans-serif($weight: normal, $size: 14px, $lineHeight: 20px) {
102
51
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
103
52
  font-size: $size;
104
53
  font-weight: $weight;
105
54
  line-height: $lineHeight;
106
55
  }
56
+
107
57
  @mixin serif($weight: normal, $size: 14px, $lineHeight: 20px) {
108
58
  font-family: "Georgia", Times New Roman, Times, serif;
109
59
  font-size: $size;
110
60
  font-weight: $weight;
111
61
  line-height: $lineHeight;
112
62
  }
63
+
113
64
  @mixin monospace($weight: normal, $size: 12px, $lineHeight: 20px) {
114
65
  font-family: "Monaco", Courier New, monospace;
115
66
  font-size: $size;
@@ -118,28 +69,77 @@ $analog2: spin($baseColor, -22);
118
69
  }
119
70
 
120
71
  // Grid System
121
- @mixin container {
72
+ @mixin fixed-container() {
122
73
  width: $siteWidth;
123
- margin: 0 auto;
124
- @include cft();
74
+ margin-left: auto;
75
+ margin-right: auto;
76
+ @include clearfix();
125
77
  }
78
+
126
79
  @mixin columns($columnSpan: 1) {
127
80
  width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
128
81
  }
82
+
129
83
  @mixin offset($columnOffset: 1) {
130
84
  margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
131
85
  }
132
86
 
87
+ // Necessary grid styles for every column to make them appear next to each other horizontally
88
+ @mixin gridColumn() {
89
+ display: inline;
90
+ float: left;
91
+ margin-left: $gridGutterWidth;
92
+ }
93
+
94
+ // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
95
+ @mixin makeColumn($columnSpan: 1) {
96
+ @include gridColumn();
97
+ @include columns($columnSpan);
98
+ }
99
+
100
+ // Border Radius (Will use compass version)
101
+
102
+ // Drop shadows (Will use compass version)
103
+
133
104
  // Transitions
134
105
  @mixin transition($transition) {
135
106
  -webkit-transition: $transition;
136
107
  -moz-transition: $transition;
108
+ -ms-transition: $transition;
109
+ -o-transition: $transition;
137
110
  transition: $transition;
138
111
  }
139
112
 
113
+ // Background clipping
114
+ @mixin background-clip($clip) {
115
+ -webkit-background-clip: $clip;
116
+ -moz-background-clip: $clip;
117
+ background-clip: $clip;
118
+ }
119
+
120
+ // CSS3 Content Columns
121
+ @mixin content-columns($columnCount, $columnGap: 20px) {
122
+ -webkit-column-count: $columnCount;
123
+ -moz-column-count: $columnCount;
124
+ column-count: $columnCount;
125
+ -webkit-column-gap: $columnGap;
126
+ -moz-column-gap: $columnGap;
127
+ column-gap: $columnGap;
128
+ }
129
+
130
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
131
+ @mixin translucent-background($color: $white, $alpha: 1) {
132
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
133
+ }
134
+
135
+ @mixin translucent-border($color: $white, $alpha: 1) {
136
+ border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
137
+ background-clip: padding-box;
138
+ }
139
+
140
140
 
141
141
  // Gradients
142
- @mixin horizontal($startColor: #555, $endColor: #333) {
142
+ @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
143
143
  background-color: $endColor;
144
144
  background-repeat: repeat-x;
145
145
  @include filter-gradient($startColor, $endColor, horizontal);
@@ -147,7 +147,7 @@ $analog2: spin($baseColor, -22);
147
147
  @include background-image(linear-gradient(left, $startColor, $endColor));
148
148
  }
149
149
 
150
- @mixin vertical ($startColor: #555, $endColor: #333) {
150
+ @mixin gradient-vertical ($startColor: #555, $endColor: #333) {
151
151
  background-color: $endColor;
152
152
  background-repeat: repeat-x;
153
153
  @include filter-gradient($startColor, $endColor);
@@ -155,72 +155,32 @@ $analog2: spin($baseColor, -22);
155
155
  @include background-image(linear-gradient($startColor, $endColor));
156
156
  }
157
157
 
158
- @mixin directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
158
+ @mixin gradient-directional ($startColor: #555, $endColor: #333, $deg: 45deg) {
159
159
  background-color: $endColor;
160
160
  background-repeat: repeat-x;
161
161
  @include background-image(linear-gradient(left top, $startColor, $endColor));
162
162
  }
163
163
 
164
- @mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
164
+ @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
165
165
  background-color: $endColor;
166
166
  background-repeat: no-repeat;
167
167
  @include filter-gradient($startColor, $endColor);
168
168
  @include background-image(linear-gradient($startColor, $midColor $colorStop, $endColor));
169
169
  }
170
170
 
171
- // CSS3 Content Columns
172
- @mixin content-columns($columnCount, $columnGap: 20px) {
173
- @include column-count($columnCount);
174
- @include column-count($columnGap);
175
- }
176
-
177
- // Add an alphatransparency value to any background or border color (via Elyse Holladay)
178
- @mixin background($color: $white, $alpha: 1) {
179
- background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
180
- }
181
-
182
- @mixin border($color: $white, $alpha: 1) {
183
- border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
184
- background-clip: padding-box;
185
- }
186
171
 
187
172
  // Gradient Bar Colors for buttons and allerts
188
173
  @mixin gradientBar($primaryColor, $secondaryColor) {
189
- @include vertical($primaryColor, $secondaryColor);
174
+ @include gradient-vertical($primaryColor, $secondaryColor);
190
175
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
191
176
  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
192
177
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
193
178
  }
194
- // Shared colors for buttons and alerts
195
- .btn,
196
- .alert-message {
197
- // Set text color
198
- &.danger,
199
- &.danger:hover,
200
- &.error,
201
- &.error:hover,
202
- &.success,
203
- &.success:hover,
204
- &.info,
205
- &.info:hover {
206
- color: $white
207
- }
208
- // Danger and error appear as red
209
- &.danger,
210
- &.error {
211
- @include gradientBar(#ee5f5b, #c43c35);
212
- }
213
- // Success appears as green
214
- &.success {
215
- @include gradientBar(#62c462, #57a957);
216
- }
217
- // Info appears as a neutral blue
218
- &.info {
219
- @include gradientBar(#5bc0de, #339bb9);
220
- }
221
- }
179
+
222
180
 
223
181
  // Reset filters for IE
224
182
  @mixin reset-filter() {
225
183
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
226
- }
184
+ }
185
+
186
+ // Opacity (Will use compass version)