bootstrap-sass 1.4.4 → 2.0.0

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.

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