cmaitchison-bootstrap-rails 2.0.1.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 (63) hide show
  1. data/.gitignore +17 -0
  2. data/Gemfile +4 -0
  3. data/README.md +97 -0
  4. data/Rakefile +45 -0
  5. data/bootstrap-rails.gemspec +23 -0
  6. data/lib/bootstrap-rails.rb +13 -0
  7. data/lib/bootstrap-rails/engine.rb +6 -0
  8. data/lib/bootstrap-rails/ie_hex_str.rb +16 -0
  9. data/lib/bootstrap-rails/railtie.rb +5 -0
  10. data/lib/bootstrap-rails/version.rb +5 -0
  11. data/test/ie_hex_str_test.rb +26 -0
  12. data/test/test_helper.rb +2 -0
  13. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  14. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  15. data/vendor/assets/javascripts/bootstrap-alert.js +94 -0
  16. data/vendor/assets/javascripts/bootstrap-button.js +100 -0
  17. data/vendor/assets/javascripts/bootstrap-carousel.js +157 -0
  18. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  19. data/vendor/assets/javascripts/bootstrap-dropdown.js +92 -0
  20. data/vendor/assets/javascripts/bootstrap-modal.js +210 -0
  21. data/vendor/assets/javascripts/bootstrap-popover.js +95 -0
  22. data/vendor/assets/javascripts/bootstrap-scrollspy.js +125 -0
  23. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  24. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  25. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  26. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  27. data/vendor/assets/javascripts/bootstrap.js +12 -0
  28. data/vendor/assets/stylesheets/accordion.scss +28 -0
  29. data/vendor/assets/stylesheets/alerts.scss +70 -0
  30. data/vendor/assets/stylesheets/bootstrap.scss +62 -0
  31. data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
  32. data/vendor/assets/stylesheets/button-groups.scss +148 -0
  33. data/vendor/assets/stylesheets/buttons.scss +183 -0
  34. data/vendor/assets/stylesheets/carousel.scss +121 -0
  35. data/vendor/assets/stylesheets/close.scss +18 -0
  36. data/vendor/assets/stylesheets/code.scss +57 -0
  37. data/vendor/assets/stylesheets/component-animations.scss +18 -0
  38. data/vendor/assets/stylesheets/dropdowns.scss +130 -0
  39. data/vendor/assets/stylesheets/forms.scss +523 -0
  40. data/vendor/assets/stylesheets/grid.scss +8 -0
  41. data/vendor/assets/stylesheets/hero-unit.scss +20 -0
  42. data/vendor/assets/stylesheets/labels.scss +32 -0
  43. data/vendor/assets/stylesheets/layouts.scss +17 -0
  44. data/vendor/assets/stylesheets/mixins.scss +560 -0
  45. data/vendor/assets/stylesheets/modals.scss +83 -0
  46. data/vendor/assets/stylesheets/navbar.scss +299 -0
  47. data/vendor/assets/stylesheets/navs.scss +353 -0
  48. data/vendor/assets/stylesheets/pager.scss +30 -0
  49. data/vendor/assets/stylesheets/pagination.scss +55 -0
  50. data/vendor/assets/stylesheets/popovers.scss +49 -0
  51. data/vendor/assets/stylesheets/progress-bars.scss +95 -0
  52. data/vendor/assets/stylesheets/reset.scss +126 -0
  53. data/vendor/assets/stylesheets/responsive.scss +327 -0
  54. data/vendor/assets/stylesheets/scaffolding.scss +29 -0
  55. data/vendor/assets/stylesheets/sprites.scss +158 -0
  56. data/vendor/assets/stylesheets/tables.scss +141 -0
  57. data/vendor/assets/stylesheets/thumbnails.scss +35 -0
  58. data/vendor/assets/stylesheets/tooltip.scss +35 -0
  59. data/vendor/assets/stylesheets/type.scss +218 -0
  60. data/vendor/assets/stylesheets/utilities.scss +23 -0
  61. data/vendor/assets/stylesheets/variables.scss +107 -0
  62. data/vendor/assets/stylesheets/wells.scss +17 -0
  63. metadata +154 -0
@@ -0,0 +1,8 @@
1
+ // GRID SYSTEM
2
+ // -----------
3
+
4
+ // Fixed (940px)
5
+ @include grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth);
6
+
7
+ // Fluid (940px)
8
+ @include fluid-grid-system-generate($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,32 @@
1
+ // LABELS
2
+ // ------
3
+
4
+ // Base
5
+ .label {
6
+ padding: 2px 4px 3px;
7
+ font-size: $baseFontSize * .85;
8
+ font-weight: bold;
9
+ color: $white;
10
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
11
+ background-color: $grayLight;
12
+ @include border-radius(3px);
13
+ }
14
+
15
+ // Hover state
16
+ .label:hover {
17
+ color: $white;
18
+ text-decoration: none;
19
+ }
20
+
21
+ // Colors
22
+ .label-important { background-color: $errorText; }
23
+ .label-important:hover { background-color: darken($errorText, 10%); }
24
+
25
+ .label-warning { background-color: $orange; }
26
+ .label-warning:hover { background-color: darken($orange, 10%); }
27
+
28
+ .label-success { background-color: $successText; }
29
+ .label-success:hover { background-color: darken($successText, 10%); }
30
+
31
+ .label-info { background-color: $infoText; }
32
+ .label-info:hover { background-color: darken($infoText, 10%); }
@@ -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,560 @@
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 #333;
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
+ // Text overflow
93
+ // -------------------------
94
+ // Requires inline-block or block for proper styling
95
+ @mixin text-overflow() {
96
+ overflow: hidden;
97
+ text-overflow: ellipsis;
98
+ white-space: nowrap;
99
+ }
100
+
101
+
102
+
103
+ // FONTS
104
+ // --------------------------------------------------
105
+
106
+ @mixin font-family-serif() {
107
+ font-family: Georgia, "Times New Roman", Times, serif;
108
+ }
109
+
110
+ @mixin font-family-sans-serif() {
111
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
112
+ }
113
+
114
+ @mixin font-family-monospace() {
115
+ font-family: Menlo, Monaco, "Courier New", monospace;
116
+ }
117
+
118
+ @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
119
+ font-size: $size;
120
+ font-weight: $weight;
121
+ line-height: $lineHeight;
122
+ }
123
+
124
+ @mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
125
+ @include font-family-serif;
126
+ @include font-shorthand($size, $weight, $lineHeight);
127
+ }
128
+
129
+ @mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
130
+ @include font-family-sans-serif;
131
+ @include font-shorthand($size, $weight, $lineHeight);
132
+ }
133
+
134
+ @mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
135
+ @include font-family-monospace;
136
+ @include font-shorthand($size, $weight, $lineHeight);
137
+ }
138
+
139
+
140
+
141
+
142
+ // GRID SYSTEM
143
+ // --------------------------------------------------
144
+
145
+ // Site container
146
+ // -------------------------
147
+ @mixin container-fixed() {
148
+ width: $gridRowWidth;
149
+ margin-left: auto;
150
+ margin-right: auto;
151
+ @include clearfix();
152
+ }
153
+
154
+ // Le grid system
155
+ // -------------------------
156
+
157
+ // Setup the mixins to be used
158
+ @mixin grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
159
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
160
+ }
161
+
162
+ @mixin grid-system-offset($gridColumnWidth, $gridGutterWidth, $columns) {
163
+ margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
164
+ }
165
+
166
+ @mixin grid-system-grid-column($gridGutterWidth) {
167
+ float: left;
168
+ margin-left: $gridGutterWidth;
169
+ }
170
+
171
+ // Take these values and mixins, and make 'em do their thang
172
+ @mixin grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
173
+ // Row surrounds the columns
174
+ .row {
175
+ margin-left: $gridGutterWidth * -1;
176
+ @include clearfix();
177
+ }
178
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
179
+ [class*="span"] {
180
+ @include grid-system-grid-column($gridGutterWidth);
181
+ }
182
+ // Default columns
183
+ @for $i from 1 through 12 {
184
+ .span#{$i} { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
185
+ }
186
+ .container { @include grid-system-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
187
+ // Offset column options
188
+ @for $i from 1 through 11 {
189
+ .offset#{$i} { @include grid-system-offset($gridColumnWidth, $gridGutterWidth, $i); }
190
+ }
191
+ }
192
+
193
+ // Fluid grid system
194
+ // -------------------------
195
+
196
+ // Setup the mixins to be used
197
+ @mixin fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
198
+ //TODO: check floid
199
+ width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
200
+ }
201
+ @mixin fluid-grid-system-grid-column($fluidGridGutterWidth) {
202
+ float: left;
203
+ margin-left: $fluidGridGutterWidth;
204
+ }
205
+ // Take these values and mixins, and make 'em do their thang
206
+ @mixin fluid-grid-system-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
207
+ // Row surrounds the columns
208
+ .row-fluid {
209
+ width: 100%;
210
+ @include clearfix();
211
+
212
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
213
+ > [class*="span"] {
214
+ @include fluid-grid-system-grid-column($fluidGridGutterWidth);
215
+ }
216
+ > [class*="span"]:first-child {
217
+ margin-left: 0;
218
+ }
219
+ // Default columns
220
+ @for $i from 1 through 12 {
221
+ .span#{$i} { @include fluid-grid-system-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
222
+ }
223
+ }
224
+ }
225
+
226
+ // Input grid system
227
+ // -------------------------
228
+ @mixin input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
229
+ width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
230
+ }
231
+ @mixin input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
232
+ input,
233
+ textarea,
234
+ .uneditable-input {
235
+ @for $i from 1 through 12 {
236
+ &.span#{$i} { @include input-grid-system-input-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
237
+ }
238
+ }
239
+ }
240
+
241
+ // Make a Grid
242
+ // -------------------------
243
+ // Use .make-row and .make-column to assign semantic layouts grid system behavior
244
+ @mixin make-row() {
245
+ margin-left: $gridGutterWidth * -1;
246
+ @include clearfix();
247
+ }
248
+ @mixin make-column($columns: 1) {
249
+ float: left;
250
+ margin-left: $gridGutterWidth;
251
+ width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
252
+ }
253
+
254
+
255
+
256
+ // Form field states (used in forms.less)
257
+ // --------------------------------------------------
258
+
259
+ // Mixin for form field states
260
+ @mixin form-field-state($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
261
+ // Set the text color
262
+ > label,
263
+ .help-block,
264
+ .help-inline {
265
+ color: $textColor;
266
+ }
267
+ // Style inputs accordingly
268
+ input,
269
+ select,
270
+ textarea {
271
+ color: $textColor;
272
+ border-color: $borderColor;
273
+ &:focus {
274
+ border-color: darken($borderColor, 10%);
275
+ @include box-shadow(0 0 6px lighten($borderColor, 20%));
276
+ }
277
+ }
278
+ // Give a small background color for input-prepend/-append
279
+ .input-prepend .add-on,
280
+ .input-append .add-on {
281
+ color: $textColor;
282
+ background-color: $backgroundColor;
283
+ border-color: $textColor;
284
+ }
285
+ }
286
+
287
+
288
+
289
+ // CSS3 PROPERTIES
290
+ // --------------------------------------------------
291
+
292
+ // Border Radius
293
+ @mixin border-radius($radius: 5px) {
294
+ -webkit-border-radius: $radius;
295
+ -moz-border-radius: $radius;
296
+ border-radius: $radius;
297
+ }
298
+
299
+ // Drop shadows
300
+ @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
301
+ -webkit-box-shadow: $shadow;
302
+ -moz-box-shadow: $shadow;
303
+ box-shadow: $shadow;
304
+ }
305
+
306
+ // Transitions
307
+ @mixin transition($transition) {
308
+ -webkit-transition: $transition;
309
+ -moz-transition: $transition;
310
+ -ms-transition: $transition;
311
+ -o-transition: $transition;
312
+ transition: $transition;
313
+ }
314
+
315
+ // Transformations
316
+ @mixin rotate($degrees) {
317
+ -webkit-transform: rotate($degrees);
318
+ -moz-transform: rotate($degrees);
319
+ -ms-transform: rotate($degrees);
320
+ -o-transform: rotate($degrees);
321
+ transform: rotate($degrees);
322
+ }
323
+ @mixin scale($ratio) {
324
+ -webkit-transform: scale($ratio);
325
+ -moz-transform: scale($ratio);
326
+ -ms-transform: scale($ratio);
327
+ -o-transform: scale($ratio);
328
+ transform: scale($ratio);
329
+ }
330
+ @mixin translate($x: 0, $y: 0) {
331
+ -webkit-transform: translate($x, $y);
332
+ -moz-transform: translate($x, $y);
333
+ -ms-transform: translate($x, $y);
334
+ -o-transform: translate($x, $y);
335
+ transform: translate($x, $y);
336
+ }
337
+ @mixin skew($x: 0, $y: 0) {
338
+ -webkit-transform: skew($x, $y);
339
+ -moz-transform: skew($x, $y);
340
+ -ms-transform: skew($x, $y);
341
+ -o-transform: skew($x, $y);
342
+ transform: skew($x, $y);
343
+ }
344
+ @mixin translate3d($x: 0, $y: 0, $z: 0) {
345
+ -webkit-transform: translate($x, $y, $z);
346
+ -moz-transform: translate($x, $y, $z);
347
+ -ms-transform: translate($x, $y, $z);
348
+ -o-transform: translate($x, $y, $z);
349
+ transform: translate($x, $y, $z);
350
+ }
351
+
352
+ // Background clipping
353
+ // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
354
+ @mixin background-clip($clip) {
355
+ -webkit-background-clip: $clip;
356
+ -moz-background-clip: $clip;
357
+ background-clip: $clip;
358
+ }
359
+
360
+ // Background sizing
361
+ @mixin background-size($size){
362
+ -webkit-background-size: $size;
363
+ -moz-background-size: $size;
364
+ -o-background-size: $size;
365
+ background-size: $size;
366
+ }
367
+
368
+
369
+ // Box sizing
370
+ @mixin box-sizing($boxmodel) {
371
+ -webkit-box-sizing: $boxmodel;
372
+ -moz-box-sizing: $boxmodel;
373
+ box-sizing: $boxmodel;
374
+ }
375
+
376
+ // User select
377
+ // For selecting text on the page
378
+ @mixin user-select($select) {
379
+ -webkit-user-select: $select;
380
+ -moz-user-select: $select;
381
+ -o-user-select: $select;
382
+ user-select: $select;
383
+ }
384
+
385
+ // Resize anything
386
+ @mixin resizable($direction: both) {
387
+ resize: $direction; // Options: horizontal, vertical, both
388
+ overflow: auto; // Safari fix
389
+ }
390
+
391
+ // CSS3 Content Columns
392
+ @mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
393
+ -webkit-column-count: $columnCount;
394
+ -moz-column-count: $columnCount;
395
+ column-count: $columnCount;
396
+ -webkit-column-gap: $columnGap;
397
+ -moz-column-gap: $columnGap;
398
+ column-gap: $columnGap;
399
+ }
400
+
401
+ // Opacity
402
+ @mixin opacity($opacity: 100) {
403
+ opacity: $opacity / 100;
404
+ filter: alpha(opacity=#{$opacity});
405
+ }
406
+
407
+
408
+
409
+ // BACKGROUNDS
410
+ // --------------------------------------------------
411
+
412
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
413
+ @mixin translucent-background($color: $white, $alpha: 1) {
414
+ background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
415
+ }
416
+ @mixin translucent-border($color: $white, $alpha: 1) {
417
+ border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
418
+ @include background-clip(padding-box);
419
+ }
420
+
421
+ // Gradients
422
+ @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
423
+ background-color: $endColor;
424
+ background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
425
+ background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
426
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
427
+ background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
428
+ background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
429
+ background-image: linear-gradient(left, $startColor, $endColor); // Le standard
430
+ background-repeat: repeat-x;
431
+ $ieStartColor: ie_hex_str($startColor);
432
+ $ieEndColor: ie_hex_str($endColor);
433
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=1); // IE9 and down
434
+ }
435
+ @mixin gradient-vertical($startColor: #555, $endColor: #333) {
436
+ background-color: mix($startColor, $endColor, 60%);
437
+ background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
438
+ background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
439
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
440
+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
441
+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
442
+ background-image: linear-gradient(top, $startColor, $endColor); // The standard
443
+ background-repeat: repeat-x;
444
+ $ieStartColor: ie_hex_str($startColor);
445
+ $ieEndColor: ie_hex_str($endColor);
446
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=0); // IE9 and down
447
+ }
448
+ @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
449
+ background-color: $endColor;
450
+ background-repeat: repeat-x;
451
+ background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
452
+ background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
453
+ background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
454
+ background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
455
+ background-image: linear-gradient($deg, $startColor, $endColor); // The standard
456
+ }
457
+ @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
458
+ background-color: mix($midColor, $endColor, 80%);
459
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
460
+ background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
461
+ background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
462
+ background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
463
+ background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
464
+ background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
465
+ background-repeat: no-repeat;
466
+ $ieStartColor: ie_hex_str($startColor);
467
+ $ieEndColor: ie_hex_str($endColor);
468
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ieStartColor}', endColorstr='#{$ieEndColor}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
469
+ }
470
+ @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
471
+ background-color: $outerColor;
472
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
473
+ background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
474
+ background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
475
+ background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
476
+ background-repeat: no-repeat;
477
+ // Opera cannot do radial gradients yet
478
+ }
479
+ @mixin gradient-striped($color, $angle: -45deg) {
480
+ background-color: $color;
481
+ $transparent: rgba(0,0,0,0); // Workaround compass transparent color-stop bug https://github.com/chriseppstein/compass/issues/356
482
+ 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));
483
+ 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);
484
+ 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);
485
+ 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);
486
+ 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);
487
+ background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, $transparent 25%, $transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, $transparent 75%, $transparent);
488
+ }
489
+
490
+ // Gradient Bar Colors for buttons and alerts
491
+ @mixin gradient-bar($primaryColor, $secondaryColor) {
492
+ @include gradient-vertical($primaryColor, $secondaryColor);
493
+ border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
494
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
495
+ }
496
+
497
+ // Reset filters for IE
498
+ @mixin reset-filter() {
499
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
500
+ }
501
+
502
+
503
+ // Mixin for generating button backgrounds
504
+ // ---------------------------------------
505
+ @mixin button-background($startColor, $endColor) {
506
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
507
+ @include gradient-bar($startColor, $endColor);
508
+ @include reset-filter();
509
+
510
+ // in these cases the gradient won't cover the background, so we override
511
+ &:hover, &:active, &.active, &.disabled, &[disabled] {
512
+ background-color: $endColor;
513
+ }
514
+
515
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
516
+ &:active,
517
+ &.active {
518
+ background-color: darken($endColor, 10%) \9;
519
+ }
520
+ }
521
+
522
+
523
+ // COMPONENT MIXINS
524
+ // --------------------------------------------------
525
+
526
+ // POPOVER ARROWS
527
+ // -------------------------
528
+ // For tipsies and popovers
529
+ @mixin popover-arrow-top($arrowWidth: 5px) {
530
+ bottom: 0;
531
+ left: 50%;
532
+ margin-left: -$arrowWidth;
533
+ border-left: $arrowWidth solid transparent;
534
+ border-right: $arrowWidth solid transparent;
535
+ border-top: $arrowWidth solid $black;
536
+ }
537
+ @mixin popover-arrow-left($arrowWidth: 5px) {
538
+ top: 50%;
539
+ right: 0;
540
+ margin-top: -$arrowWidth;
541
+ border-top: $arrowWidth solid transparent;
542
+ border-bottom: $arrowWidth solid transparent;
543
+ border-left: $arrowWidth solid $black;
544
+ }
545
+ @mixin popover-arrow-bottom($arrowWidth: 5px) {
546
+ top: 0;
547
+ left: 50%;
548
+ margin-left: -$arrowWidth;
549
+ border-left: $arrowWidth solid transparent;
550
+ border-right: $arrowWidth solid transparent;
551
+ border-bottom: $arrowWidth solid $black;
552
+ }
553
+ @mixin popover-arrow-right($arrowWidth: 5px) {
554
+ top: 50%;
555
+ left: 0;
556
+ margin-top: -$arrowWidth;
557
+ border-top: $arrowWidth solid transparent;
558
+ border-bottom: $arrowWidth solid transparent;
559
+ border-right: $arrowWidth solid $black;
560
+ }