bootstrap-sass 1.4.4 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

Files changed (71) hide show
  1. data/README.md +52 -19
  2. data/lib/bootstrap-sass.rb +24 -6
  3. data/lib/bootstrap-sass/compass_extensions.rb +10 -0
  4. data/lib/bootstrap-sass/config/sass_extentions.rb +14 -0
  5. data/lib/bootstrap-sass/engine.rb +9 -0
  6. data/templates/project/manifest.rb +18 -0
  7. data/templates/project/styles.scss +5 -0
  8. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  9. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  10. data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
  11. data/vendor/assets/javascripts/bootstrap-button.js +98 -0
  12. data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
  13. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  14. data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
  15. data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
  16. data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
  17. data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
  18. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  19. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  20. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  21. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  22. data/vendor/assets/javascripts/bootstrap.js +9 -6
  23. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +314 -0
  24. data/vendor/assets/stylesheets/_bootstrap.scss +63 -0
  25. data/vendor/assets/stylesheets/bootstrap/_accordion.scss +28 -0
  26. data/vendor/assets/stylesheets/bootstrap/_alerts.scss +62 -0
  27. data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +22 -0
  28. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +136 -0
  29. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +149 -0
  30. data/vendor/assets/stylesheets/bootstrap/_carousel.scss +116 -0
  31. data/vendor/assets/stylesheets/bootstrap/_close.scss +18 -0
  32. data/vendor/assets/stylesheets/bootstrap/_code.scss +43 -0
  33. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +18 -0
  34. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +127 -0
  35. data/vendor/assets/stylesheets/bootstrap/_forms.scss +458 -0
  36. data/vendor/assets/stylesheets/bootstrap/_grid.scss +8 -0
  37. data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +20 -0
  38. data/vendor/assets/stylesheets/bootstrap/_labels.scss +16 -0
  39. data/vendor/assets/stylesheets/bootstrap/_layouts.scss +17 -0
  40. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +479 -0
  41. data/vendor/assets/stylesheets/bootstrap/_modals.scss +72 -0
  42. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +282 -0
  43. data/vendor/assets/stylesheets/bootstrap/_navs.scss +320 -0
  44. data/vendor/assets/stylesheets/bootstrap/_pager.scss +30 -0
  45. data/vendor/assets/stylesheets/bootstrap/_pagination.scss +53 -0
  46. data/vendor/assets/stylesheets/bootstrap/_popovers.scss +49 -0
  47. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +95 -0
  48. data/vendor/assets/stylesheets/bootstrap/_reset.scss +105 -0
  49. data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +29 -0
  50. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +156 -0
  51. data/vendor/assets/stylesheets/bootstrap/_tables.scss +117 -0
  52. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +35 -0
  53. data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +35 -0
  54. data/vendor/assets/stylesheets/bootstrap/_type.scss +209 -0
  55. data/vendor/assets/stylesheets/bootstrap/_utilities.scss +23 -0
  56. data/vendor/assets/stylesheets/bootstrap/_variables.scss +99 -0
  57. data/vendor/assets/stylesheets/bootstrap/_wells.scss +17 -0
  58. metadata +68 -20
  59. data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
  60. data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
  61. data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
  62. data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
  63. data/vendor/assets/stylesheets/bootstrap.css.scss +0 -25
  64. data/vendor/assets/stylesheets/bootstrap/forms.css.scss +0 -427
  65. data/vendor/assets/stylesheets/bootstrap/mixins.css.scss +0 -216
  66. data/vendor/assets/stylesheets/bootstrap/patterns.css.scss +0 -994
  67. data/vendor/assets/stylesheets/bootstrap/reset.css.scss +0 -142
  68. data/vendor/assets/stylesheets/bootstrap/scaffolding.css.scss +0 -129
  69. data/vendor/assets/stylesheets/bootstrap/tables.css.scss +0 -212
  70. data/vendor/assets/stylesheets/bootstrap/type.css.scss +0 -186
  71. data/vendor/assets/stylesheets/bootstrap/variables.css.scss +0 -51
@@ -0,0 +1,8 @@
1
+ // GRID SYSTEM
2
+ // -----------
3
+
4
+ // Fixed (940px)
5
+ @include gridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth);
6
+
7
+ // Fluid (940px)
8
+ @include fluidGridSystemGenerate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
@@ -0,0 +1,20 @@
1
+ // HERO UNIT
2
+ // ---------
3
+
4
+ .hero-unit {
5
+ padding: 60px;
6
+ margin-bottom: 30px;
7
+ background-color: #f5f5f5;
8
+ @include border-radius(6px);
9
+ h1 {
10
+ margin-bottom: 0;
11
+ font-size: 60px;
12
+ line-height: 1;
13
+ letter-spacing: -1px;
14
+ }
15
+ p {
16
+ font-size: 18px;
17
+ font-weight: 200;
18
+ line-height: $baseLineHeight * 1.5;
19
+ }
20
+ }
@@ -0,0 +1,16 @@
1
+ // LABELS
2
+ // ------
3
+
4
+ .label {
5
+ padding: 1px 3px 2px;
6
+ font-size: $baseFontSize * .75;
7
+ font-weight: bold;
8
+ color: $white;
9
+ text-transform: uppercase;
10
+ background-color: $grayLight;
11
+ @include border-radius(3px);
12
+ }
13
+ .label-important { background-color: $errorText; }
14
+ .label-warning { background-color: $orange; }
15
+ .label-success { background-color: $successText; }
16
+ .label-info { background-color: $infoText; }
@@ -0,0 +1,17 @@
1
+ //
2
+ // Layouts
3
+ // Fixed-width and fluid (with sidebar) layouts
4
+ // --------------------------------------------
5
+
6
+
7
+ // Container (centered, fixed-width layouts)
8
+ .container {
9
+ @include container-fixed();
10
+ }
11
+
12
+ // Fluid layouts (left aligned, with sidebar, min- & max-width content)
13
+ .container-fluid {
14
+ padding-left: $gridGutterWidth;
15
+ padding-right: $gridGutterWidth;
16
+ @include clearfix();
17
+ }
@@ -0,0 +1,479 @@
1
+ // Mixins.less
2
+ // Snippets of reusable CSS to develop faster and keep code readable
3
+ // -----------------------------------------------------------------
4
+
5
+
6
+ // UTILITY MIXINS
7
+ // --------------------------------------------------
8
+
9
+ // Clearfix
10
+ // --------
11
+ // For clearing floats like a boss h5bp.com/q
12
+ @mixin clearfix() {
13
+ *zoom: 1;
14
+ &:before,
15
+ &:after {
16
+ display: table;
17
+ content: "";
18
+ }
19
+ &:after {
20
+ clear: both;
21
+ }
22
+ }
23
+
24
+ // Webkit-style focus
25
+ // ------------------
26
+ @mixin tab-focus() {
27
+ // Default
28
+ outline: thin dotted;
29
+ // Webkit
30
+ outline: 5px auto -webkit-focus-ring-color;
31
+ outline-offset: -2px;
32
+ }
33
+
34
+ // Center-align a block level element
35
+ // ----------------------------------
36
+ @mixin center-block() {
37
+ display: block;
38
+ margin-left: auto;
39
+ margin-right: auto;
40
+ }
41
+
42
+ // IE7 inline-block
43
+ // ----------------
44
+ @mixin ie7-inline-block() {
45
+ *display: inline; /* IE7 inline-block hack */
46
+ *zoom: 1;
47
+ }
48
+
49
+ // IE7 likes to collapse whitespace on either side of the inline-block elements.
50
+ // Ems because we're attempting to match the width of a space character. Left
51
+ // version is for form buttons, which typically come after other elements, and
52
+ // right version is for icons, which come before. Applying both is ok, but it will
53
+ // mean that space between those elements will be .6em (~2 space characters) in IE7,
54
+ // instead of the 1 space in other browsers.
55
+ @mixin ie7-restore-left-whitespace() {
56
+ *margin-left: .3em;
57
+
58
+ &:first-child {
59
+ *margin-left: 0;
60
+ }
61
+ }
62
+
63
+ @mixin ie7-restore-right-whitespace() {
64
+ *margin-right: .3em;
65
+
66
+ &:last-child {
67
+ *margin-left: 0;
68
+ }
69
+ }
70
+
71
+ // Sizing shortcuts
72
+ // -------------------------
73
+ @mixin size($height: 5px, $width: 5px) {
74
+ width: $width;
75
+ height: $height;
76
+ }
77
+ @mixin square($size: 5px) {
78
+ @include size($size, $size);
79
+ }
80
+
81
+ // Placeholder text
82
+ // -------------------------
83
+ @mixin placeholder($color: $placeholderText) {
84
+ :-moz-placeholder {
85
+ color: $color;
86
+ }
87
+ ::-webkit-input-placeholder {
88
+ color: $color;
89
+ }
90
+ }
91
+
92
+
93
+
94
+ // FONTS
95
+ // --------------------------------------------------
96
+ @mixin font-family-serif() {
97
+ font-family: Georgia, "Times New Roman", Times, serif;
98
+ }
99
+ @mixin font-family-sans-serif() {
100
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
101
+ }
102
+ @mixin font-family-monospace() {
103
+ font-family: Menlo, Monaco, "Courier New", monospace;
104
+ }
105
+ @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
106
+ font-size: $size;
107
+ font-weight: $weight;
108
+ line-height: $lineHeight;
109
+ }
110
+ @mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
111
+ @include font-family-serif();
112
+ @include font-shorthand($size, $weight, $lineHeight);
113
+ }
114
+ @mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
115
+ @include font-family-sans-serif();
116
+ @include font-shorthand($size, $weight, $lineHeight);
117
+ }
118
+ @mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
119
+ @include font-family-monospace();
120
+ @include font-shorthand($size, $weight, $lineHeight);
121
+ }
122
+
123
+
124
+
125
+ // GRID SYSTEM
126
+ // --------------------------------------------------
127
+
128
+ // Site container
129
+ // -------------------------
130
+ @mixin container-fixed() {
131
+ width: $gridRowWidth;
132
+ margin-left: auto;
133
+ margin-right: auto;
134
+ @include clearfix();
135
+ }
136
+
137
+ // Le grid system
138
+ // -------------------------
139
+
140
+ // Setup the mixins to be used
141
+ @mixin gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
142
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
143
+ }
144
+ @mixin gridSystemOffset($gridColumnWidth, $gridGutterWidth, $columns) {
145
+ margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
146
+ }
147
+ @mixin gridSystemGridColumn($gridGutterWidth) {
148
+ float: left;
149
+ margin-left: $gridGutterWidth;
150
+ }
151
+ // Take these values and mixins, and make 'em do their thang
152
+ @mixin gridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
153
+ // Row surrounds the columns
154
+ .row {
155
+ margin-left: $gridGutterWidth * -1;
156
+ @include clearfix();
157
+ }
158
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
159
+ [class*="span"] {
160
+ @include gridSystemGridColumn($gridGutterWidth);
161
+ }
162
+ // Default columns
163
+ @for $i from 1 through $gridColumns {
164
+ .span#{$i} { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i) }
165
+ }
166
+ .container { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $gridColumns) }
167
+
168
+ // Offset column options
169
+ @for $i from 1 through $gridColumns - 1 {
170
+ .offset#{$i} { @include gridSystemOffset($gridColumnWidth, $gridGutterWidth, $i) }
171
+ }
172
+ }
173
+
174
+ // Fluid grid system
175
+ // -------------------------
176
+ @mixin fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
177
+ width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
178
+ }
179
+ @mixin fluidGridSystemGridColumn($fluidGridGutterWidth) {
180
+ float: left;
181
+ margin-left: $fluidGridGutterWidth;
182
+ }
183
+ // Take these values and mixins, and make 'em do their thang
184
+ @mixin fluidGridSystemGenerate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
185
+ // Row surrounds the columns
186
+ .row-fluid {
187
+ width: 100%;
188
+ @include clearfix();
189
+
190
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
191
+ > [class*="span"] {
192
+ @include fluidGridSystemGridColumn($fluidGridGutterWidth);
193
+ }
194
+ > [class*="span"]:first-child {
195
+ margin-left: 0;
196
+ }
197
+ // Default columns
198
+ @for $i from 1 through $gridColumns {
199
+ .span#{$i} { @include fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
200
+ }
201
+ }
202
+ }
203
+
204
+
205
+
206
+ // Input grid system
207
+ // -------------------------
208
+ @mixin inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
209
+ width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
210
+ }
211
+ @mixin inputGridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
212
+ input, textarea, .uneditable-input {
213
+ @for $i from 1 through $gridColumns {
214
+ &.span#{$i} { @include inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
215
+ }
216
+ }
217
+ }
218
+
219
+
220
+
221
+ // CSS3 PROPERTIES
222
+ // --------------------------------------------------
223
+
224
+ // Border Radius
225
+ @mixin border-radius($radius: 5px) {
226
+ -webkit-border-radius: $radius;
227
+ -moz-border-radius: $radius;
228
+ border-radius: $radius;
229
+ }
230
+
231
+ // Drop shadows
232
+ @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
233
+ -webkit-box-shadow: $shadow;
234
+ -moz-box-shadow: $shadow;
235
+ box-shadow: $shadow;
236
+ }
237
+
238
+ // Transitions
239
+ @mixin transition($transition) {
240
+ -webkit-transition: $transition;
241
+ -moz-transition: $transition;
242
+ -ms-transition: $transition;
243
+ -o-transition: $transition;
244
+ transition: $transition;
245
+ }
246
+
247
+ // Transformations
248
+ @mixin rotate($degrees) {
249
+ -webkit-transform: rotate($degrees);
250
+ -moz-transform: rotate($degrees);
251
+ -ms-transform: rotate($degrees);
252
+ -o-transform: rotate($degrees);
253
+ transform: rotate($degrees);
254
+ }
255
+ @mixin scale($ratio) {
256
+ -webkit-transform: scale($ratio);
257
+ -moz-transform: scale($ratio);
258
+ -ms-transform: scale($ratio);
259
+ -o-transform: scale($ratio);
260
+ transform: scale($ratio);
261
+ }
262
+ @mixin translate($x: 0, $y: 0) {
263
+ -webkit-transform: translate($x, $y);
264
+ -moz-transform: translate($x, $y);
265
+ -ms-transform: translate($x, $y);
266
+ -o-transform: translate($x, $y);
267
+ transform: translate($x, $y);
268
+ }
269
+
270
+ // Removed duplicate mixin # TM.
271
+
272
+ @mixin skew($x: 0, $y: 0) {
273
+ -webkit-transform: skew($x, $y);
274
+ -moz-transform: skew($x, $y);
275
+ -ms-transform: skew($x, $y);
276
+ -o-transform: skew($x, $y);
277
+ transform: skew($x, $y);
278
+ }
279
+
280
+ // Background clipping
281
+ // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
282
+ @mixin background-clip($clip) {
283
+ -webkit-background-clip: $clip;
284
+ -moz-background-clip: $clip;
285
+ background-clip: $clip;
286
+ }
287
+
288
+ // Background sizing
289
+ @mixin background-size($size){
290
+ -webkit-background-size: $size;
291
+ -moz-background-size: $size;
292
+ -o-background-size: $size;
293
+ background-size: $size;
294
+ }
295
+
296
+
297
+ // Box sizing
298
+ @mixin box-sizing($boxmodel) {
299
+ -webkit-box-sizing: $boxmodel;
300
+ -moz-box-sizing: $boxmodel;
301
+ box-sizing: $boxmodel;
302
+ }
303
+
304
+ // User select
305
+ // For selecting text on the page
306
+ @mixin user-select($select) {
307
+ -webkit-user-select: $select;
308
+ -moz-user-select: $select;
309
+ -o-user-select: $select;
310
+ user-select: $select;
311
+ }
312
+
313
+ // Resize anything
314
+ @mixin resizable($direction: both) {
315
+ resize: $direction; // Options: horizontal, vertical, both
316
+ overflow: auto; // Safari fix
317
+ }
318
+
319
+ // CSS3 Content Columns
320
+ @mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
321
+ -webkit-column-count: $columnCount;
322
+ -moz-column-count: $columnCount;
323
+ column-count: $columnCount;
324
+ -webkit-column-gap: $columnGap;
325
+ -moz-column-gap: $columnGap;
326
+ column-gap: $columnGap;
327
+ }
328
+
329
+ // Opacity
330
+ @mixin opacity($opacity: 100) {
331
+ opacity: $opacity / 100;
332
+ filter: alpha(opacity=$opacity);
333
+ }
334
+
335
+
336
+
337
+ // BACKGROUNDS
338
+ // --------------------------------------------------
339
+
340
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
341
+ @mixin translucent-background($color: $white, $alpha: 1) {
342
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
343
+ }
344
+ @mixin translucent-border($color: $white, $alpha: 1) {
345
+ border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
346
+ @include background-clip(padding-box);
347
+ }
348
+
349
+ // Gradient Bar Colors for buttons and alerts
350
+ @mixin gradientBar($primaryColor, $secondaryColor) {
351
+ @include gradient-vertical($primaryColor, $secondaryColor);
352
+ border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
353
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
354
+ }
355
+
356
+ // Gradients
357
+ @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
358
+ background-color: $endColor;
359
+ background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
360
+ background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
361
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
362
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
363
+ background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
364
+ background-image: linear-gradient(left, $startColor, $endColor); // Le standard
365
+ background-repeat: repeat-x;
366
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
367
+ }
368
+ @mixin gradient-vertical($startColor: #555, $endColor: #333) {
369
+ background-color: mix($startColor, $endColor, 60%);
370
+ background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
371
+ background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
372
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
373
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
374
+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
375
+ background-image: linear-gradient(top, $startColor, $endColor); // The standard
376
+ background-repeat: repeat-x;
377
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
378
+ }
379
+ @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
380
+ background-color: $endColor;
381
+ background-repeat: repeat-x;
382
+ background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
383
+ background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
384
+ background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
385
+ background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
386
+ background-image: linear-gradient($deg, $startColor, $endColor); // The standard
387
+ }
388
+ @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
389
+ background-color: mix($midColor, $endColor, 80%);
390
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
391
+ background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
392
+ background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
393
+ background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
394
+ background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
395
+ background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
396
+ background-repeat: no-repeat;
397
+ 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
398
+ }
399
+ @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
400
+ background-color: $outerColor;
401
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
402
+ background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
403
+ background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
404
+ background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
405
+ background-repeat: no-repeat;
406
+ // Opera cannot do radial gradients yet
407
+ }
408
+ @mixin gradient-striped($color, $angle: -45deg) {
409
+ background-color: $color;
410
+ 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));
411
+ 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);
412
+ 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);
413
+ 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);
414
+ 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);
415
+ background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
416
+ }
417
+ // Reset filters for IE
418
+ @mixin reset-filter() {
419
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
420
+ }
421
+
422
+
423
+ // Mixin for generating button backgrounds
424
+ // ---------------------------------------
425
+ @mixin buttonBackground($startColor, $endColor) {
426
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
427
+ @include gradientBar($startColor, $endColor);
428
+ @include reset-filter();
429
+
430
+ // in these cases the gradient won't cover the background, so we override
431
+ &:hover, &:active, &.active, &.disabled, &[disabled] {
432
+ background-color: $endColor;
433
+ }
434
+
435
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
436
+ &:active, &.active {
437
+ background-color: darken($endColor, 10%) \9;
438
+ }
439
+ }
440
+
441
+
442
+ // COMPONENT MIXINS
443
+ // --------------------------------------------------
444
+
445
+ // POPOVER ARROWS
446
+ // -------------------------
447
+ // For tipsies and popovers
448
+ @mixin popoverArrowTop($arrowWidth: 5px) {
449
+ bottom: 0;
450
+ left: 50%;
451
+ margin-left: -$arrowWidth;
452
+ border-left: $arrowWidth solid transparent;
453
+ border-right: $arrowWidth solid transparent;
454
+ border-top: $arrowWidth solid $black;
455
+ }
456
+ @mixin popoverArrowLeft($arrowWidth: 5px) {
457
+ top: 50%;
458
+ right: 0;
459
+ margin-top: -$arrowWidth;
460
+ border-top: $arrowWidth solid transparent;
461
+ border-bottom: $arrowWidth solid transparent;
462
+ border-left: $arrowWidth solid $black;
463
+ }
464
+ @mixin popoverArrowBottom($arrowWidth: 5px) {
465
+ top: 0;
466
+ left: 50%;
467
+ margin-left: -$arrowWidth;
468
+ border-left: $arrowWidth solid transparent;
469
+ border-right: $arrowWidth solid transparent;
470
+ border-bottom: $arrowWidth solid $black;
471
+ }
472
+ @mixin popoverArrowRight($arrowWidth: 5px) {
473
+ top: 50%;
474
+ left: 0;
475
+ margin-top: -$arrowWidth;
476
+ border-top: $arrowWidth solid transparent;
477
+ border-bottom: $arrowWidth solid transparent;
478
+ border-right: $arrowWidth solid $black;
479
+ }