cmaitchison-bootstrap-rails 2.0.1.1

Sign up to get free protection for your applications and to get access to all the features.
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
+ }