soffes-blog-jekyll 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (108) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +5 -0
  3. data/.ruby-version +1 -0
  4. data/Gemfile +6 -0
  5. data/LICENSE.txt +21 -0
  6. data/README.md +68 -0
  7. data/Rakefile +2 -0
  8. data/_includes/footer.html +4 -0
  9. data/_includes/head.html +13 -0
  10. data/_includes/header.html +5 -0
  11. data/_layouts/default.html +13 -0
  12. data/_layouts/home.html +21 -0
  13. data/_layouts/page.html +5 -0
  14. data/_layouts/post.html +22 -0
  15. data/_sass/application.scss +271 -0
  16. data/_sass/bourbon/_bourbon-deprecated-upcoming.scss +411 -0
  17. data/_sass/bourbon/_bourbon.scss +87 -0
  18. data/_sass/bourbon/addons/_border-color.scss +26 -0
  19. data/_sass/bourbon/addons/_border-radius.scss +48 -0
  20. data/_sass/bourbon/addons/_border-style.scss +25 -0
  21. data/_sass/bourbon/addons/_border-width.scss +25 -0
  22. data/_sass/bourbon/addons/_buttons.scss +64 -0
  23. data/_sass/bourbon/addons/_clearfix.scss +25 -0
  24. data/_sass/bourbon/addons/_ellipsis.scss +30 -0
  25. data/_sass/bourbon/addons/_font-stacks.scss +31 -0
  26. data/_sass/bourbon/addons/_hide-text.scss +27 -0
  27. data/_sass/bourbon/addons/_margin.scss +26 -0
  28. data/_sass/bourbon/addons/_padding.scss +26 -0
  29. data/_sass/bourbon/addons/_position.scss +48 -0
  30. data/_sass/bourbon/addons/_prefixer.scss +66 -0
  31. data/_sass/bourbon/addons/_retina-image.scss +25 -0
  32. data/_sass/bourbon/addons/_size.scss +51 -0
  33. data/_sass/bourbon/addons/_text-inputs.scss +112 -0
  34. data/_sass/bourbon/addons/_timing-functions.scss +34 -0
  35. data/_sass/bourbon/addons/_triangle.scss +63 -0
  36. data/_sass/bourbon/addons/_word-wrap.scss +29 -0
  37. data/_sass/bourbon/css3/_animation.scss +43 -0
  38. data/_sass/bourbon/css3/_appearance.scss +3 -0
  39. data/_sass/bourbon/css3/_backface-visibility.scss +3 -0
  40. data/_sass/bourbon/css3/_background-image.scss +42 -0
  41. data/_sass/bourbon/css3/_background.scss +55 -0
  42. data/_sass/bourbon/css3/_border-image.scss +59 -0
  43. data/_sass/bourbon/css3/_calc.scss +4 -0
  44. data/_sass/bourbon/css3/_columns.scss +47 -0
  45. data/_sass/bourbon/css3/_filter.scss +4 -0
  46. data/_sass/bourbon/css3/_flex-box.scss +289 -0
  47. data/_sass/bourbon/css3/_font-face.scss +24 -0
  48. data/_sass/bourbon/css3/_font-feature-settings.scss +4 -0
  49. data/_sass/bourbon/css3/_hidpi-media-query.scss +10 -0
  50. data/_sass/bourbon/css3/_hyphens.scss +4 -0
  51. data/_sass/bourbon/css3/_image-rendering.scss +14 -0
  52. data/_sass/bourbon/css3/_keyframes.scss +36 -0
  53. data/_sass/bourbon/css3/_linear-gradient.scss +38 -0
  54. data/_sass/bourbon/css3/_perspective.scss +8 -0
  55. data/_sass/bourbon/css3/_placeholder.scss +8 -0
  56. data/_sass/bourbon/css3/_radial-gradient.scss +39 -0
  57. data/_sass/bourbon/css3/_selection.scss +42 -0
  58. data/_sass/bourbon/css3/_text-decoration.scss +19 -0
  59. data/_sass/bourbon/css3/_transform.scss +15 -0
  60. data/_sass/bourbon/css3/_transition.scss +71 -0
  61. data/_sass/bourbon/css3/_user-select.scss +3 -0
  62. data/_sass/bourbon/functions/_assign-inputs.scss +11 -0
  63. data/_sass/bourbon/functions/_contains-falsy.scss +20 -0
  64. data/_sass/bourbon/functions/_contains.scss +26 -0
  65. data/_sass/bourbon/functions/_is-length.scss +11 -0
  66. data/_sass/bourbon/functions/_is-light.scss +21 -0
  67. data/_sass/bourbon/functions/_is-number.scss +11 -0
  68. data/_sass/bourbon/functions/_is-size.scss +13 -0
  69. data/_sass/bourbon/functions/_modular-scale.scss +69 -0
  70. data/_sass/bourbon/functions/_px-to-em.scss +13 -0
  71. data/_sass/bourbon/functions/_px-to-rem.scss +15 -0
  72. data/_sass/bourbon/functions/_shade.scss +24 -0
  73. data/_sass/bourbon/functions/_strip-units.scss +17 -0
  74. data/_sass/bourbon/functions/_tint.scss +24 -0
  75. data/_sass/bourbon/functions/_transition-property-name.scss +22 -0
  76. data/_sass/bourbon/functions/_unpack.scss +27 -0
  77. data/_sass/bourbon/helpers/_convert-units.scss +15 -0
  78. data/_sass/bourbon/helpers/_directional-values.scss +96 -0
  79. data/_sass/bourbon/helpers/_font-source-declaration.scss +43 -0
  80. data/_sass/bourbon/helpers/_gradient-positions-parser.scss +13 -0
  81. data/_sass/bourbon/helpers/_linear-angle-parser.scss +25 -0
  82. data/_sass/bourbon/helpers/_linear-gradient-parser.scss +41 -0
  83. data/_sass/bourbon/helpers/_linear-positions-parser.scss +61 -0
  84. data/_sass/bourbon/helpers/_linear-side-corner-parser.scss +31 -0
  85. data/_sass/bourbon/helpers/_radial-arg-parser.scss +69 -0
  86. data/_sass/bourbon/helpers/_radial-gradient-parser.scss +50 -0
  87. data/_sass/bourbon/helpers/_radial-positions-parser.scss +18 -0
  88. data/_sass/bourbon/helpers/_render-gradients.scss +26 -0
  89. data/_sass/bourbon/helpers/_shape-size-stripper.scss +10 -0
  90. data/_sass/bourbon/helpers/_str-to-num.scss +50 -0
  91. data/_sass/bourbon/settings/_asset-pipeline.scss +7 -0
  92. data/_sass/bourbon/settings/_prefixer.scss +9 -0
  93. data/_sass/bourbon/settings/_px-to-em.scss +1 -0
  94. data/_sass/components/code.scss +89 -0
  95. data/_sass/components/pagination.scss +50 -0
  96. data/_sass/components/reset.scss +54 -0
  97. data/_sass/globals/variables.scss +25 -0
  98. data/_sass/sections/blog.scss +186 -0
  99. data/_sass/sections/error.scss +6 -0
  100. data/assets/application.js +38 -0
  101. data/assets/fonts.css +22 -0
  102. data/assets/main.scss +5 -0
  103. data/bin/console +14 -0
  104. data/bin/setup +8 -0
  105. data/lib/soffes/blog/jekyll.rb +9 -0
  106. data/lib/soffes/blog/jekyll/version.rb +7 -0
  107. data/soffes-blog-jekyll.gemspec +34 -0
  108. metadata +180 -0
@@ -0,0 +1,25 @@
1
+ @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
2
+ @if $asset-pipeline {
3
+ background-image: image-url("#{$filename}.#{$extension}");
4
+ } @else {
5
+ background-image: url("#{$filename}.#{$extension}");
6
+ }
7
+
8
+ @include hidpi {
9
+ @if $asset-pipeline {
10
+ @if $retina-filename {
11
+ background-image: image-url("#{$retina-filename}.#{$extension}");
12
+ } @else {
13
+ background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
14
+ }
15
+ } @else {
16
+ @if $retina-filename {
17
+ background-image: url("#{$retina-filename}.#{$extension}");
18
+ } @else {
19
+ background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
20
+ }
21
+ }
22
+
23
+ background-size: $background-size;
24
+ }
25
+ }
@@ -0,0 +1,51 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Sets the `width` and `height` of the element.
4
+ ///
5
+ /// @param {List} $size
6
+ /// A list of at most 2 size values.
7
+ ///
8
+ /// If there is only a single value in `$size` it is used for both width and height. All units are supported.
9
+ ///
10
+ /// @example scss - Usage
11
+ /// .first-element {
12
+ /// @include size(2em);
13
+ /// }
14
+ ///
15
+ /// .second-element {
16
+ /// @include size(auto 10em);
17
+ /// }
18
+ ///
19
+ /// @example css - CSS Output
20
+ /// .first-element {
21
+ /// width: 2em;
22
+ /// height: 2em;
23
+ /// }
24
+ ///
25
+ /// .second-element {
26
+ /// width: auto;
27
+ /// height: 10em;
28
+ /// }
29
+ ///
30
+ /// @todo Refactor in 5.0.0 to use a comma-separated argument
31
+
32
+ @mixin size($value) {
33
+ $width: nth($value, 1);
34
+ $height: $width;
35
+
36
+ @if length($value) > 1 {
37
+ $height: nth($value, 2);
38
+ }
39
+
40
+ @if is-size($height) {
41
+ height: $height;
42
+ } @else {
43
+ @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
44
+ }
45
+
46
+ @if is-size($width) {
47
+ width: $width;
48
+ } @else {
49
+ @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
50
+ }
51
+ }
@@ -0,0 +1,112 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
4
+ ///
5
+ /// @example scss - Usage
6
+ /// #{$all-text-inputs} {
7
+ /// border: 1px solid #f00;
8
+ /// }
9
+ ///
10
+ /// #{$all-text-inputs-focus},
11
+ /// #{$all-text-inputs-hover} {
12
+ /// border: 1px solid #0f0;
13
+ /// }
14
+ ///
15
+ /// #{$all-text-inputs-active} {
16
+ /// border: 1px solid #00f;
17
+ /// }
18
+ ///
19
+ /// @example css - CSS Output
20
+ /// input[type="color"],
21
+ /// input[type="date"],
22
+ /// input[type="datetime"],
23
+ /// input[type="datetime-local"],
24
+ /// input[type="email"],
25
+ /// input[type="month"],
26
+ /// input[type="number"],
27
+ /// input[type="password"],
28
+ /// input[type="search"],
29
+ /// input[type="tel"],
30
+ /// input[type="text"],
31
+ /// input[type="time"],
32
+ /// input[type="url"],
33
+ /// input[type="week"],
34
+ /// textarea {
35
+ /// border: 1px solid #f00;
36
+ /// }
37
+ ///
38
+ /// input[type="color"]:focus,
39
+ /// input[type="date"]:focus,
40
+ /// input[type="datetime"]:focus,
41
+ /// input[type="datetime-local"]:focus,
42
+ /// input[type="email"]:focus,
43
+ /// input[type="month"]:focus,
44
+ /// input[type="number"]:focus,
45
+ /// input[type="password"]:focus,
46
+ /// input[type="search"]:focus,
47
+ /// input[type="tel"]:focus,
48
+ /// input[type="text"]:focus,
49
+ /// input[type="time"]:focus,
50
+ /// input[type="url"]:focus,
51
+ /// input[type="week"]:focus,
52
+ /// textarea:focus,
53
+ /// input[type="color"]:hover,
54
+ /// input[type="date"]:hover,
55
+ /// input[type="datetime"]:hover,
56
+ /// input[type="datetime-local"]:hover,
57
+ /// input[type="email"]:hover,
58
+ /// input[type="month"]:hover,
59
+ /// input[type="number"]:hover,
60
+ /// input[type="password"]:hover,
61
+ /// input[type="search"]:hover,
62
+ /// input[type="tel"]:hover,
63
+ /// input[type="text"]:hover,
64
+ /// input[type="time"]:hover,
65
+ /// input[type="url"]:hover,
66
+ /// input[type="week"]:hover,
67
+ /// textarea:hover {
68
+ /// border: 1px solid #0f0;
69
+ /// }
70
+ ///
71
+ /// input[type="color"]:active,
72
+ /// input[type="date"]:active,
73
+ /// input[type="datetime"]:active,
74
+ /// input[type="datetime-local"]:active,
75
+ /// input[type="email"]:active,
76
+ /// input[type="month"]:active,
77
+ /// input[type="number"]:active,
78
+ /// input[type="password"]:active,
79
+ /// input[type="search"]:active,
80
+ /// input[type="tel"]:active,
81
+ /// input[type="text"]:active,
82
+ /// input[type="time"]:active,
83
+ /// input[type="url"]:active,
84
+ /// input[type="week"]:active,
85
+ /// textarea:active {
86
+ /// border: 1px solid #00f;
87
+ /// }
88
+ ///
89
+ /// @require assign-inputs
90
+ ///
91
+ /// @type List
92
+
93
+ $text-inputs-list: 'input[type="color"]',
94
+ 'input[type="date"]',
95
+ 'input[type="datetime"]',
96
+ 'input[type="datetime-local"]',
97
+ 'input[type="email"]',
98
+ 'input[type="month"]',
99
+ 'input[type="number"]',
100
+ 'input[type="password"]',
101
+ 'input[type="search"]',
102
+ 'input[type="tel"]',
103
+ 'input[type="text"]',
104
+ 'input[type="time"]',
105
+ 'input[type="url"]',
106
+ 'input[type="week"]',
107
+ 'textarea';
108
+
109
+ $all-text-inputs: assign-inputs($text-inputs-list);
110
+ $all-text-inputs-active: assign-inputs($text-inputs-list, active);
111
+ $all-text-inputs-focus: assign-inputs($text-inputs-list, focus);
112
+ $all-text-inputs-hover: assign-inputs($text-inputs-list, hover);
@@ -0,0 +1,34 @@
1
+ @charset "UTF-8";
2
+
3
+ /// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
4
+ ///
5
+ /// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
6
+ ///
7
+ /// @type cubic-bezier
8
+
9
+ $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
10
+ $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
11
+ $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
12
+ $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
13
+ $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
14
+ $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
15
+ $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
16
+ $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
17
+
18
+ $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
19
+ $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
20
+ $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
21
+ $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
22
+ $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
23
+ $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
24
+ $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
25
+ $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
26
+
27
+ $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
28
+ $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
29
+ $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
30
+ $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
31
+ $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
32
+ $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
33
+ $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
34
+ $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
@@ -0,0 +1,63 @@
1
+ @mixin triangle($size, $color, $direction) {
2
+ $width: nth($size, 1);
3
+ $height: nth($size, length($size));
4
+ $foreground-color: nth($color, 1);
5
+ $background-color: if(length($color) == 2, nth($color, 2), transparent);
6
+ height: 0;
7
+ width: 0;
8
+
9
+ @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
10
+ $width: $width / 2;
11
+ $height: if(length($size) > 1, $height, $height/2);
12
+
13
+ @if $direction == up {
14
+ border-bottom: $height solid $foreground-color;
15
+ border-left: $width solid $background-color;
16
+ border-right: $width solid $background-color;
17
+ } @else if $direction == right {
18
+ border-bottom: $width solid $background-color;
19
+ border-left: $height solid $foreground-color;
20
+ border-top: $width solid $background-color;
21
+ } @else if $direction == down {
22
+ border-left: $width solid $background-color;
23
+ border-right: $width solid $background-color;
24
+ border-top: $height solid $foreground-color;
25
+ } @else if $direction == left {
26
+ border-bottom: $width solid $background-color;
27
+ border-right: $height solid $foreground-color;
28
+ border-top: $width solid $background-color;
29
+ }
30
+ } @else if ($direction == up-right) or ($direction == up-left) {
31
+ border-top: $height solid $foreground-color;
32
+
33
+ @if $direction == up-right {
34
+ border-left: $width solid $background-color;
35
+ } @else if $direction == up-left {
36
+ border-right: $width solid $background-color;
37
+ }
38
+ } @else if ($direction == down-right) or ($direction == down-left) {
39
+ border-bottom: $height solid $foreground-color;
40
+
41
+ @if $direction == down-right {
42
+ border-left: $width solid $background-color;
43
+ } @else if $direction == down-left {
44
+ border-right: $width solid $background-color;
45
+ }
46
+ } @else if ($direction == inset-up) {
47
+ border-color: $background-color $background-color $foreground-color;
48
+ border-style: solid;
49
+ border-width: $height $width;
50
+ } @else if ($direction == inset-down) {
51
+ border-color: $foreground-color $background-color $background-color;
52
+ border-style: solid;
53
+ border-width: $height $width;
54
+ } @else if ($direction == inset-right) {
55
+ border-color: $background-color $background-color $background-color $foreground-color;
56
+ border-style: solid;
57
+ border-width: $width $height;
58
+ } @else if ($direction == inset-left) {
59
+ border-color: $background-color $foreground-color $background-color $background-color;
60
+ border-style: solid;
61
+ border-width: $width $height;
62
+ }
63
+ }
@@ -0,0 +1,29 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides an easy way to change the `word-wrap` property.
4
+ ///
5
+ /// @param {String} $wrap [break-word]
6
+ /// Value for the `word-break` property.
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .wrapper {
10
+ /// @include word-wrap(break-word);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .wrapper {
15
+ /// overflow-wrap: break-word;
16
+ /// word-break: break-all;
17
+ /// word-wrap: break-word;
18
+ /// }
19
+
20
+ @mixin word-wrap($wrap: break-word) {
21
+ overflow-wrap: $wrap;
22
+ word-wrap: $wrap;
23
+
24
+ @if $wrap == break-word {
25
+ word-break: break-all;
26
+ } @else {
27
+ word-break: $wrap;
28
+ }
29
+ }
@@ -0,0 +1,43 @@
1
+ // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2
+ // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3
+
4
+ @mixin animation($animations...) {
5
+ @include prefixer(animation, $animations, webkit moz spec);
6
+ }
7
+
8
+ @mixin animation-name($names...) {
9
+ @include prefixer(animation-name, $names, webkit moz spec);
10
+ }
11
+
12
+ @mixin animation-duration($times...) {
13
+ @include prefixer(animation-duration, $times, webkit moz spec);
14
+ }
15
+
16
+ @mixin animation-timing-function($motions...) {
17
+ // ease | linear | ease-in | ease-out | ease-in-out
18
+ @include prefixer(animation-timing-function, $motions, webkit moz spec);
19
+ }
20
+
21
+ @mixin animation-iteration-count($values...) {
22
+ // infinite | <number>
23
+ @include prefixer(animation-iteration-count, $values, webkit moz spec);
24
+ }
25
+
26
+ @mixin animation-direction($directions...) {
27
+ // normal | alternate
28
+ @include prefixer(animation-direction, $directions, webkit moz spec);
29
+ }
30
+
31
+ @mixin animation-play-state($states...) {
32
+ // running | paused
33
+ @include prefixer(animation-play-state, $states, webkit moz spec);
34
+ }
35
+
36
+ @mixin animation-delay($times...) {
37
+ @include prefixer(animation-delay, $times, webkit moz spec);
38
+ }
39
+
40
+ @mixin animation-fill-mode($modes...) {
41
+ // none | forwards | backwards | both
42
+ @include prefixer(animation-fill-mode, $modes, webkit moz spec);
43
+ }
@@ -0,0 +1,3 @@
1
+ @mixin appearance($value) {
2
+ @include prefixer(appearance, $value, webkit moz ms o spec);
3
+ }
@@ -0,0 +1,3 @@
1
+ @mixin backface-visibility($visibility) {
2
+ @include prefixer(backface-visibility, $visibility, webkit spec);
3
+ }
@@ -0,0 +1,42 @@
1
+ //************************************************************************//
2
+ // Background-image property for adding multiple background images with
3
+ // gradients, or for stringing multiple gradients together.
4
+ //************************************************************************//
5
+
6
+ @mixin background-image($images...) {
7
+ $webkit-images: ();
8
+ $spec-images: ();
9
+
10
+ @each $image in $images {
11
+ $webkit-image: ();
12
+ $spec-image: ();
13
+
14
+ @if (type-of($image) == string) {
15
+ $url-str: str-slice($image, 0, 3);
16
+ $gradient-type: str-slice($image, 0, 6);
17
+
18
+ @if $url-str == "url" {
19
+ $webkit-image: $image;
20
+ $spec-image: $image;
21
+ }
22
+
23
+ @else if $gradient-type == "linear" {
24
+ $gradients: _linear-gradient-parser($image);
25
+ $webkit-image: map-get($gradients, webkit-image);
26
+ $spec-image: map-get($gradients, spec-image);
27
+ }
28
+
29
+ @else if $gradient-type == "radial" {
30
+ $gradients: _radial-gradient-parser($image);
31
+ $webkit-image: map-get($gradients, webkit-image);
32
+ $spec-image: map-get($gradients, spec-image);
33
+ }
34
+ }
35
+
36
+ $webkit-images: append($webkit-images, $webkit-image, comma);
37
+ $spec-images: append($spec-images, $spec-image, comma);
38
+ }
39
+
40
+ background-image: $webkit-images;
41
+ background-image: $spec-images;
42
+ }
@@ -0,0 +1,55 @@
1
+ //************************************************************************//
2
+ // Background property for adding multiple backgrounds using shorthand
3
+ // notation.
4
+ //************************************************************************//
5
+
6
+ @mixin background($backgrounds...) {
7
+ $webkit-backgrounds: ();
8
+ $spec-backgrounds: ();
9
+
10
+ @each $background in $backgrounds {
11
+ $webkit-background: ();
12
+ $spec-background: ();
13
+ $background-type: type-of($background);
14
+
15
+ @if $background-type == string or $background-type == list {
16
+ $background-str: if($background-type == list, nth($background, 1), $background);
17
+
18
+ $url-str: str-slice($background-str, 0, 3);
19
+ $gradient-type: str-slice($background-str, 0, 6);
20
+
21
+ @if $url-str == "url" {
22
+ $webkit-background: $background;
23
+ $spec-background: $background;
24
+ }
25
+
26
+ @else if $gradient-type == "linear" {
27
+ $gradients: _linear-gradient-parser("#{$background}");
28
+ $webkit-background: map-get($gradients, webkit-image);
29
+ $spec-background: map-get($gradients, spec-image);
30
+ }
31
+
32
+ @else if $gradient-type == "radial" {
33
+ $gradients: _radial-gradient-parser("#{$background}");
34
+ $webkit-background: map-get($gradients, webkit-image);
35
+ $spec-background: map-get($gradients, spec-image);
36
+ }
37
+
38
+ @else {
39
+ $webkit-background: $background;
40
+ $spec-background: $background;
41
+ }
42
+ }
43
+
44
+ @else {
45
+ $webkit-background: $background;
46
+ $spec-background: $background;
47
+ }
48
+
49
+ $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
50
+ $spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
51
+ }
52
+
53
+ background: $webkit-backgrounds;
54
+ background: $spec-backgrounds;
55
+ }