portfolio-jekyll-theme 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (123) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.md +21 -0
  3. data/README.md +243 -0
  4. data/_includes/analytics.html +11 -0
  5. data/_includes/disqus.html +14 -0
  6. data/_includes/footer.html +14 -0
  7. data/_includes/header.html +10 -0
  8. data/_includes/image.html +14 -0
  9. data/_includes/projects.html +13 -0
  10. data/_layouts/blog.html +23 -0
  11. data/_layouts/default.html +41 -0
  12. data/_layouts/home.html +5 -0
  13. data/_layouts/page.html +9 -0
  14. data/_layouts/post.html +13 -0
  15. data/_sass/1-tools/_-tools-dir.sass +6 -0
  16. data/_sass/1-tools/_fonts.scss +18 -0
  17. data/_sass/1-tools/_icon-font.scss +32 -0
  18. data/_sass/1-tools/_normalize.scss +1 -0
  19. data/_sass/1-tools/_spinner.scss +53 -0
  20. data/_sass/1-tools/animations/_animations-dir.sass +10 -0
  21. data/_sass/1-tools/animations/_bottomDoor.sass +15 -0
  22. data/_sass/1-tools/animations/_bottomUp.sass +14 -0
  23. data/_sass/1-tools/animations/_bounceOut.scss +86 -0
  24. data/_sass/1-tools/animations/_fadeIn.sass +14 -0
  25. data/_sass/1-tools/animations/_leftRight.sass +14 -0
  26. data/_sass/1-tools/animations/_none.sass +13 -0
  27. data/_sass/1-tools/animations/_rightLeft.sass +14 -0
  28. data/_sass/1-tools/animations/_textSlide.sass +24 -0
  29. data/_sass/1-tools/animations/_topDoor.sass +15 -0
  30. data/_sass/1-tools/animations/_topDown.sass +12 -0
  31. data/_sass/1-tools/bourbon/_bourbon-deprecated-upcoming.scss +8 -0
  32. data/_sass/1-tools/bourbon/_bourbon.scss +78 -0
  33. data/_sass/1-tools/bourbon/addons/_button.scss +374 -0
  34. data/_sass/1-tools/bourbon/addons/_clearfix.scss +23 -0
  35. data/_sass/1-tools/bourbon/addons/_directional-values.scss +111 -0
  36. data/_sass/1-tools/bourbon/addons/_ellipsis.scss +7 -0
  37. data/_sass/1-tools/bourbon/addons/_font-family.scss +5 -0
  38. data/_sass/1-tools/bourbon/addons/_hide-text.scss +10 -0
  39. data/_sass/1-tools/bourbon/addons/_html5-input-types.scss +86 -0
  40. data/_sass/1-tools/bourbon/addons/_position.scss +32 -0
  41. data/_sass/1-tools/bourbon/addons/_prefixer.scss +45 -0
  42. data/_sass/1-tools/bourbon/addons/_retina-image.scss +31 -0
  43. data/_sass/1-tools/bourbon/addons/_size.scss +16 -0
  44. data/_sass/1-tools/bourbon/addons/_timing-functions.scss +32 -0
  45. data/_sass/1-tools/bourbon/addons/_triangle.scss +83 -0
  46. data/_sass/1-tools/bourbon/addons/_word-wrap.scss +8 -0
  47. data/_sass/1-tools/bourbon/css3/_animation.scss +52 -0
  48. data/_sass/1-tools/bourbon/css3/_appearance.scss +3 -0
  49. data/_sass/1-tools/bourbon/css3/_backface-visibility.scss +6 -0
  50. data/_sass/1-tools/bourbon/css3/_background-image.scss +42 -0
  51. data/_sass/1-tools/bourbon/css3/_background.scss +55 -0
  52. data/_sass/1-tools/bourbon/css3/_border-image.scss +59 -0
  53. data/_sass/1-tools/bourbon/css3/_border-radius.scss +22 -0
  54. data/_sass/1-tools/bourbon/css3/_box-sizing.scss +4 -0
  55. data/_sass/1-tools/bourbon/css3/_calc.scss +4 -0
  56. data/_sass/1-tools/bourbon/css3/_columns.scss +47 -0
  57. data/_sass/1-tools/bourbon/css3/_filter.scss +5 -0
  58. data/_sass/1-tools/bourbon/css3/_flex-box.scss +321 -0
  59. data/_sass/1-tools/bourbon/css3/_font-face.scss +23 -0
  60. data/_sass/1-tools/bourbon/css3/_font-feature-settings.scss +10 -0
  61. data/_sass/1-tools/bourbon/css3/_hidpi-media-query.scss +10 -0
  62. data/_sass/1-tools/bourbon/css3/_hyphens.scss +4 -0
  63. data/_sass/1-tools/bourbon/css3/_image-rendering.scss +14 -0
  64. data/_sass/1-tools/bourbon/css3/_keyframes.scss +35 -0
  65. data/_sass/1-tools/bourbon/css3/_linear-gradient.scss +38 -0
  66. data/_sass/1-tools/bourbon/css3/_perspective.scss +8 -0
  67. data/_sass/1-tools/bourbon/css3/_placeholder.scss +8 -0
  68. data/_sass/1-tools/bourbon/css3/_radial-gradient.scss +39 -0
  69. data/_sass/1-tools/bourbon/css3/_transform.scss +15 -0
  70. data/_sass/1-tools/bourbon/css3/_transition.scss +77 -0
  71. data/_sass/1-tools/bourbon/css3/_user-select.scss +3 -0
  72. data/_sass/1-tools/bourbon/functions/_assign.scss +11 -0
  73. data/_sass/1-tools/bourbon/functions/_color-lightness.scss +13 -0
  74. data/_sass/1-tools/bourbon/functions/_flex-grid.scss +39 -0
  75. data/_sass/1-tools/bourbon/functions/_golden-ratio.scss +3 -0
  76. data/_sass/1-tools/bourbon/functions/_grid-width.scss +13 -0
  77. data/_sass/1-tools/bourbon/functions/_modular-scale.scss +66 -0
  78. data/_sass/1-tools/bourbon/functions/_px-to-em.scss +13 -0
  79. data/_sass/1-tools/bourbon/functions/_px-to-rem.scss +15 -0
  80. data/_sass/1-tools/bourbon/functions/_strip-units.scss +5 -0
  81. data/_sass/1-tools/bourbon/functions/_tint-shade.scss +9 -0
  82. data/_sass/1-tools/bourbon/functions/_transition-property-name.scss +22 -0
  83. data/_sass/1-tools/bourbon/functions/_unpack.scss +17 -0
  84. data/_sass/1-tools/bourbon/helpers/_convert-units.scss +15 -0
  85. data/_sass/1-tools/bourbon/helpers/_gradient-positions-parser.scss +13 -0
  86. data/_sass/1-tools/bourbon/helpers/_is-num.scss +8 -0
  87. data/_sass/1-tools/bourbon/helpers/_linear-angle-parser.scss +25 -0
  88. data/_sass/1-tools/bourbon/helpers/_linear-gradient-parser.scss +41 -0
  89. data/_sass/1-tools/bourbon/helpers/_linear-positions-parser.scss +61 -0
  90. data/_sass/1-tools/bourbon/helpers/_linear-side-corner-parser.scss +31 -0
  91. data/_sass/1-tools/bourbon/helpers/_radial-arg-parser.scss +69 -0
  92. data/_sass/1-tools/bourbon/helpers/_radial-gradient-parser.scss +50 -0
  93. data/_sass/1-tools/bourbon/helpers/_radial-positions-parser.scss +18 -0
  94. data/_sass/1-tools/bourbon/helpers/_render-gradients.scss +26 -0
  95. data/_sass/1-tools/bourbon/helpers/_shape-size-stripper.scss +10 -0
  96. data/_sass/1-tools/bourbon/helpers/_str-to-num.scss +50 -0
  97. data/_sass/1-tools/bourbon/settings/_prefixer.scss +6 -0
  98. data/_sass/1-tools/bourbon/settings/_px-to-em.scss +1 -0
  99. data/_sass/2-base/_-base-dir.sass +2 -0
  100. data/_sass/2-base/_base.sass +121 -0
  101. data/_sass/2-base/_placeholders.sass +12 -0
  102. data/_sass/3-sections/_-sections-dir.sass +8 -0
  103. data/_sass/3-sections/_blog.sass +20 -0
  104. data/_sass/3-sections/_default.sass +11 -0
  105. data/_sass/3-sections/_footer.sass +25 -0
  106. data/_sass/3-sections/_header.sass +39 -0
  107. data/_sass/3-sections/_image.sass +31 -0
  108. data/_sass/3-sections/_page.sass +17 -0
  109. data/_sass/3-sections/_post.sass +24 -0
  110. data/_sass/3-sections/_projects.sass +44 -0
  111. data/assets/css/all.sass +19 -0
  112. data/assets/img/projects/proj-1/dog.jpg +0 -0
  113. data/assets/img/projects/proj-1/thumbnail.jpg +0 -0
  114. data/assets/img/projects/proj-1/wall.jpg +0 -0
  115. data/assets/img/projects/proj-2/stretch.jpg +0 -0
  116. data/assets/img/projects/proj-2/thumbnail.jpg +0 -0
  117. data/assets/img/projects/proj-3/clothes.jpg +0 -0
  118. data/assets/img/projects/proj-3/thumbnail.jpg +0 -0
  119. data/assets/img/projects/proj-4/bike.jpg +0 -0
  120. data/assets/img/projects/proj-4/thumbnail.jpg +0 -0
  121. data/assets/img/projects/proj-5/gun-pants.jpg +0 -0
  122. data/assets/img/projects/proj-5/thumbnail.jpg +0 -0
  123. metadata +235 -0
@@ -0,0 +1,7 @@
1
+ @mixin ellipsis($width: 100%) {
2
+ display: inline-block;
3
+ max-width: $width;
4
+ overflow: hidden;
5
+ text-overflow: ellipsis;
6
+ white-space: nowrap;
7
+ }
@@ -0,0 +1,5 @@
1
+ $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2
+ $helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
3
+ $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4
+ $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
5
+ $verdana: Verdana, Geneva, sans-serif;
@@ -0,0 +1,10 @@
1
+ @mixin hide-text {
2
+ overflow: hidden;
3
+
4
+ &:before {
5
+ content: "";
6
+ display: block;
7
+ width: 0;
8
+ height: 100%;
9
+ }
10
+ }
@@ -0,0 +1,86 @@
1
+ //************************************************************************//
2
+ // Generate a variable ($all-text-inputs) with a list of all html5
3
+ // input types that have a text-based input, excluding textarea.
4
+ // http://diveintohtml5.org/forms.html
5
+ //************************************************************************//
6
+ $inputs-list: 'input[type="email"]',
7
+ 'input[type="number"]',
8
+ 'input[type="password"]',
9
+ 'input[type="search"]',
10
+ 'input[type="tel"]',
11
+ 'input[type="text"]',
12
+ 'input[type="url"]',
13
+
14
+ // Webkit & Gecko may change the display of these in the future
15
+ 'input[type="color"]',
16
+ 'input[type="date"]',
17
+ 'input[type="datetime"]',
18
+ 'input[type="datetime-local"]',
19
+ 'input[type="month"]',
20
+ 'input[type="time"]',
21
+ 'input[type="week"]';
22
+
23
+ // Bare inputs
24
+ //************************************************************************//
25
+ $all-text-inputs: assign-inputs($inputs-list);
26
+
27
+ // Hover Pseudo-class
28
+ //************************************************************************//
29
+ $all-text-inputs-hover: assign-inputs($inputs-list, hover);
30
+
31
+ // Focus Pseudo-class
32
+ //************************************************************************//
33
+ $all-text-inputs-focus: assign-inputs($inputs-list, focus);
34
+
35
+
36
+
37
+ // You must use interpolation on the variable:
38
+ // #{$all-text-inputs}
39
+ // #{$all-text-inputs-hover}
40
+ // #{$all-text-inputs-focus}
41
+
42
+ // Example
43
+ //************************************************************************//
44
+ // #{$all-text-inputs}, textarea {
45
+ // border: 1px solid red;
46
+ // }
47
+
48
+
49
+
50
+ //************************************************************************//
51
+ // Generate a variable ($all-button-inputs) with a list of all html5
52
+ // input types that have a button-based input, excluding button.
53
+ //************************************************************************//
54
+ $inputs-button-list: 'input[type="button"]',
55
+ 'input[type="reset"]',
56
+ 'input[type="submit"]';
57
+
58
+ // Bare inputs
59
+ //************************************************************************//
60
+ $all-button-inputs: assign-inputs($inputs-button-list);
61
+
62
+ // Hover Pseudo-class
63
+ //************************************************************************//
64
+ $all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
65
+
66
+ // Focus Pseudo-class
67
+ //************************************************************************//
68
+ $all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
69
+
70
+ // Active Pseudo-class
71
+ //************************************************************************//
72
+ $all-button-inputs-active: assign-inputs($inputs-button-list, active);
73
+
74
+
75
+
76
+ // You must use interpolation on the variable:
77
+ // #{$all-button-inputs}
78
+ // #{$all-button-inputs-hover}
79
+ // #{$all-button-inputs-focus}
80
+ // #{$all-button-inputs-active}
81
+
82
+ // Example
83
+ //************************************************************************//
84
+ // #{$all-button-inputs}, button {
85
+ // border: 1px solid red;
86
+ // }
@@ -0,0 +1,32 @@
1
+ @mixin position ($position: relative, $coordinates: null null null null) {
2
+
3
+ @if type-of($position) == list {
4
+ $coordinates: $position;
5
+ $position: relative;
6
+ }
7
+
8
+ $coordinates: unpack($coordinates);
9
+
10
+ $top: nth($coordinates, 1);
11
+ $right: nth($coordinates, 2);
12
+ $bottom: nth($coordinates, 3);
13
+ $left: nth($coordinates, 4);
14
+
15
+ position: $position;
16
+
17
+ @if ($top and $top == auto) or (type-of($top) == number) {
18
+ top: $top;
19
+ }
20
+
21
+ @if ($right and $right == auto) or (type-of($right) == number) {
22
+ right: $right;
23
+ }
24
+
25
+ @if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
26
+ bottom: $bottom;
27
+ }
28
+
29
+ @if ($left and $left == auto) or (type-of($left) == number) {
30
+ left: $left;
31
+ }
32
+ }
@@ -0,0 +1,45 @@
1
+ //************************************************************************//
2
+ // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3
+ //************************************************************************//
4
+ // Variables located in /settings/_prefixer.scss
5
+
6
+ @mixin prefixer ($property, $value, $prefixes) {
7
+ @each $prefix in $prefixes {
8
+ @if $prefix == webkit {
9
+ @if $prefix-for-webkit {
10
+ -webkit-#{$property}: $value;
11
+ }
12
+ }
13
+ @else if $prefix == moz {
14
+ @if $prefix-for-mozilla {
15
+ -moz-#{$property}: $value;
16
+ }
17
+ }
18
+ @else if $prefix == ms {
19
+ @if $prefix-for-microsoft {
20
+ -ms-#{$property}: $value;
21
+ }
22
+ }
23
+ @else if $prefix == o {
24
+ @if $prefix-for-opera {
25
+ -o-#{$property}: $value;
26
+ }
27
+ }
28
+ @else if $prefix == spec {
29
+ @if $prefix-for-spec {
30
+ #{$property}: $value;
31
+ }
32
+ }
33
+ @else {
34
+ @warn "Unrecognized prefix: #{$prefix}";
35
+ }
36
+ }
37
+ }
38
+
39
+ @mixin disable-prefix-for-all() {
40
+ $prefix-for-webkit: false !global;
41
+ $prefix-for-mozilla: false !global;
42
+ $prefix-for-microsoft: false !global;
43
+ $prefix-for-opera: false !global;
44
+ $prefix-for-spec: false !global;
45
+ }
@@ -0,0 +1,31 @@
1
+ @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) {
2
+ @if $asset-pipeline {
3
+ background-image: image-url("#{$filename}.#{$extension}");
4
+ }
5
+ @else {
6
+ background-image: url("#{$filename}.#{$extension}");
7
+ }
8
+
9
+ @include hidpi {
10
+ @if $asset-pipeline {
11
+ @if $retina-filename {
12
+ background-image: image-url("#{$retina-filename}.#{$extension}");
13
+ }
14
+ @else {
15
+ background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
16
+ }
17
+ }
18
+
19
+ @else {
20
+ @if $retina-filename {
21
+ background-image: url("#{$retina-filename}.#{$extension}");
22
+ }
23
+ @else {
24
+ background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
25
+ }
26
+ }
27
+
28
+ background-size: $background-size;
29
+
30
+ }
31
+ }
@@ -0,0 +1,16 @@
1
+ @mixin size($size) {
2
+ $height: nth($size, 1);
3
+ $width: $height;
4
+
5
+ @if length($size) > 1 {
6
+ $height: nth($size, 2);
7
+ }
8
+
9
+ @if $height == auto or (type-of($height) == number and not unitless($height)) {
10
+ height: $height;
11
+ }
12
+
13
+ @if $width == auto or (type-of($height) == number and not unitless($width)) {
14
+ width: $width;
15
+ }
16
+ }
@@ -0,0 +1,32 @@
1
+ // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2
+ // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
3
+
4
+ // EASE IN
5
+ $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
6
+ $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
7
+ $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
8
+ $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
9
+ $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
10
+ $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
11
+ $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
12
+ $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
13
+
14
+ // EASE OUT
15
+ $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
16
+ $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
17
+ $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
18
+ $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
19
+ $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
20
+ $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
21
+ $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
22
+ $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
23
+
24
+ // EASE IN OUT
25
+ $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
26
+ $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
27
+ $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
28
+ $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
29
+ $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
30
+ $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
31
+ $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
32
+ $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
@@ -0,0 +1,83 @@
1
+ @mixin triangle ($size, $color, $direction) {
2
+ height: 0;
3
+ width: 0;
4
+
5
+ $width: nth($size, 1);
6
+ $height: nth($size, length($size));
7
+
8
+ $foreground-color: nth($color, 1);
9
+ $background-color: if(length($color) == 2, nth($color, 2), transparent);
10
+
11
+ @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
12
+
13
+ $width: $width / 2;
14
+ $height: if(length($size) > 1, $height, $height/2);
15
+
16
+ @if $direction == up {
17
+ border-left: $width solid $background-color;
18
+ border-right: $width solid $background-color;
19
+ border-bottom: $height solid $foreground-color;
20
+
21
+ } @else if $direction == right {
22
+ border-top: $width solid $background-color;
23
+ border-bottom: $width solid $background-color;
24
+ border-left: $height solid $foreground-color;
25
+
26
+ } @else if $direction == down {
27
+ border-left: $width solid $background-color;
28
+ border-right: $width solid $background-color;
29
+ border-top: $height solid $foreground-color;
30
+
31
+ } @else if $direction == left {
32
+ border-top: $width solid $background-color;
33
+ border-bottom: $width solid $background-color;
34
+ border-right: $height solid $foreground-color;
35
+ }
36
+ }
37
+
38
+ @else if ($direction == up-right) or ($direction == up-left) {
39
+ border-top: $height solid $foreground-color;
40
+
41
+ @if $direction == up-right {
42
+ border-left: $width solid $background-color;
43
+
44
+ } @else if $direction == up-left {
45
+ border-right: $width solid $background-color;
46
+ }
47
+ }
48
+
49
+ @else if ($direction == down-right) or ($direction == down-left) {
50
+ border-bottom: $height solid $foreground-color;
51
+
52
+ @if $direction == down-right {
53
+ border-left: $width solid $background-color;
54
+
55
+ } @else if $direction == down-left {
56
+ border-right: $width solid $background-color;
57
+ }
58
+ }
59
+
60
+ @else if ($direction == inset-up) {
61
+ border-width: $height $width;
62
+ border-style: solid;
63
+ border-color: $background-color $background-color $foreground-color;
64
+ }
65
+
66
+ @else if ($direction == inset-down) {
67
+ border-width: $height $width;
68
+ border-style: solid;
69
+ border-color: $foreground-color $background-color $background-color;
70
+ }
71
+
72
+ @else if ($direction == inset-right) {
73
+ border-width: $width $height;
74
+ border-style: solid;
75
+ border-color: $background-color $background-color $background-color $foreground-color;
76
+ }
77
+
78
+ @else if ($direction == inset-left) {
79
+ border-width: $width $height;
80
+ border-style: solid;
81
+ border-color: $background-color $foreground-color $background-color $background-color;
82
+ }
83
+ }
@@ -0,0 +1,8 @@
1
+ @mixin word-wrap($wrap: break-word) {
2
+ word-wrap: $wrap;
3
+
4
+ @if $wrap == break-word {
5
+ overflow-wrap: break-word;
6
+ word-break: break-all;
7
+ }
8
+ }
@@ -0,0 +1,52 @@
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
+ // Official animation shorthand property.
5
+ @mixin animation ($animations...) {
6
+ @include prefixer(animation, $animations, webkit moz spec);
7
+ }
8
+
9
+ // Individual Animation Properties
10
+ @mixin animation-name ($names...) {
11
+ @include prefixer(animation-name, $names, webkit moz spec);
12
+ }
13
+
14
+
15
+ @mixin animation-duration ($times...) {
16
+ @include prefixer(animation-duration, $times, webkit moz spec);
17
+ }
18
+
19
+
20
+ @mixin animation-timing-function ($motions...) {
21
+ // ease | linear | ease-in | ease-out | ease-in-out
22
+ @include prefixer(animation-timing-function, $motions, webkit moz spec);
23
+ }
24
+
25
+
26
+ @mixin animation-iteration-count ($values...) {
27
+ // infinite | <number>
28
+ @include prefixer(animation-iteration-count, $values, webkit moz spec);
29
+ }
30
+
31
+
32
+ @mixin animation-direction ($directions...) {
33
+ // normal | alternate
34
+ @include prefixer(animation-direction, $directions, webkit moz spec);
35
+ }
36
+
37
+
38
+ @mixin animation-play-state ($states...) {
39
+ // running | paused
40
+ @include prefixer(animation-play-state, $states, webkit moz spec);
41
+ }
42
+
43
+
44
+ @mixin animation-delay ($times...) {
45
+ @include prefixer(animation-delay, $times, webkit moz spec);
46
+ }
47
+
48
+
49
+ @mixin animation-fill-mode ($modes...) {
50
+ // none | forwards | backwards | both
51
+ @include prefixer(animation-fill-mode, $modes, webkit moz spec);
52
+ }
@@ -0,0 +1,3 @@
1
+ @mixin appearance ($value) {
2
+ @include prefixer(appearance, $value, webkit moz ms o spec);
3
+ }
@@ -0,0 +1,6 @@
1
+ //************************************************************************//
2
+ // Backface-visibility mixin
3
+ //************************************************************************//
4
+ @mixin backface-visibility($visibility) {
5
+ @include prefixer(backface-visibility, $visibility, webkit spec);
6
+ }
@@ -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
+ }