sammy 0.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.
- checksums.yaml +7 -0
- data/README.md +4 -0
- data/lib/sammy.rb +9 -0
- data/stylesheets/_sammy.sass +3 -0
- data/stylesheets/sammy/_animations.scss +35 -0
- data/stylesheets/sammy/_css3.scss +3 -0
- data/stylesheets/sammy/_shared.scss +2 -0
- data/stylesheets/sammy/_utilities.scss +1 -0
- data/stylesheets/sammy/animations/_attention-seekers.scss +7 -0
- data/stylesheets/sammy/animations/_bouncing-entrances.scss +5 -0
- data/stylesheets/sammy/animations/_bouncing-exits.scss +5 -0
- data/stylesheets/sammy/animations/_fading-entrances.scss +12 -0
- data/stylesheets/sammy/animations/_fading-exits.scss +12 -0
- data/stylesheets/sammy/animations/_flippers.scss +5 -0
- data/stylesheets/sammy/animations/_rotating-entrances.scss +5 -0
- data/stylesheets/sammy/animations/_rotating-exits.scss +5 -0
- data/stylesheets/sammy/animations/_specials.scss +3 -0
- data/stylesheets/sammy/animations/attention-seekers/_bounce.scss +30 -0
- data/stylesheets/sammy/animations/attention-seekers/_flash.scss +28 -0
- data/stylesheets/sammy/animations/attention-seekers/_pulse.scss +28 -0
- data/stylesheets/sammy/animations/attention-seekers/_shake.scss +34 -0
- data/stylesheets/sammy/animations/attention-seekers/_swing.scss +30 -0
- data/stylesheets/sammy/animations/attention-seekers/_tada.scss +34 -0
- data/stylesheets/sammy/animations/attention-seekers/_wobble.scss +32 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceIn.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInDown.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInLeft.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInRight.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInUp.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOut.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutDown.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutLeft.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutRight.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutUp.scss +34 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeIn.scss +25 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInDown.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInDownBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInLeft.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInLeftBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInRight.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInRightBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInUp.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInUpBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOut.scss +25 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutDown.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutDownBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutLeft.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutLeftBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutRight.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutRightBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutUp.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutUpBig.scss +31 -0
- data/stylesheets/sammy/animations/flippers/_flip.scss +44 -0
- data/stylesheets/sammy/animations/flippers/_flipInX.scss +38 -0
- data/stylesheets/sammy/animations/flippers/_flipInY.scss +38 -0
- data/stylesheets/sammy/animations/flippers/_flipOutX.scss +32 -0
- data/stylesheets/sammy/animations/flippers/_flipOutY.scss +32 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateIn.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOut.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpRight.scss +33 -0
- data/stylesheets/sammy/animations/specials/_hinge.scss +48 -0
- data/stylesheets/sammy/animations/specials/_rollIn.scss +33 -0
- data/stylesheets/sammy/animations/specials/_rollOut.scss +33 -0
- data/stylesheets/sammy/css3/_animation.scss +75 -0
- data/stylesheets/sammy/css3/_backface-visibility.scss +14 -0
- data/stylesheets/sammy/css3/_transform.scss +27 -0
- data/stylesheets/sammy/css3/animation/_animation-delay.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-direction.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-duration.scss +17 -0
- data/stylesheets/sammy/css3/animation/_animation-fill-mode.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-iteration-count.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-name.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-play-state.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-timing-function.scss +18 -0
- data/stylesheets/sammy/utilities/_mixins.scss +12 -0
- data/templates/sammy/manifest.rb +2 -0
- data/templates/sammy/screen.scss +2 -0
- metadata +140 -0
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateOutUpRight($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(right bottom, $prefix);
|
4
|
+
@include transform(rotate(0), $prefix);
|
5
|
+
opacity: 1;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(right bottom, $prefix);
|
9
|
+
@include transform(rotate(90deg), $prefix);
|
10
|
+
opacity: 0;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateOutUpRight { @include rotateOutUpRight(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateOutUpRight { @include rotateOutUpRight(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateOutUpRight { @include rotateOutUpRight(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateOutUpRight { @include rotateOutUpRight(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateOutUpRight { @include rotateOutUpRight(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateOutUpRight { @include rotateOutUpRight(none); }
|
30
|
+
|
31
|
+
.rotateOutUpRight {
|
32
|
+
@include animation-name(rotateOutUpRight);
|
33
|
+
}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
@mixin hinge($prefix) {
|
2
|
+
0% {
|
3
|
+
@include animation-timing-function(ease-in-out, $prefix);
|
4
|
+
@include transform(rotate(0), $prefix);
|
5
|
+
@include transform-origin(top left, $prefix);
|
6
|
+
}
|
7
|
+
20%, 60% {
|
8
|
+
@include animation-timing-function(ease-in-out, $prefix);
|
9
|
+
@include transform(rotate(80deg), $prefix);
|
10
|
+
@include transform-origin(top left, $prefix);
|
11
|
+
}
|
12
|
+
40% {
|
13
|
+
@include transform(rotate(60deg), $prefix);
|
14
|
+
@include transform-origin(top left, $prefix);
|
15
|
+
@include animation-timing-function(ease-in-out, $prefix);
|
16
|
+
}
|
17
|
+
80% {
|
18
|
+
opacity: 1;
|
19
|
+
@include animation-timing-function(ease-in-out, $prefix);
|
20
|
+
@include transform(rotate(60deg) translateY(0), $prefix);
|
21
|
+
@include transform-origin(top left, $prefix);
|
22
|
+
}
|
23
|
+
100% {
|
24
|
+
@include transform(translateY(700px), $prefix);
|
25
|
+
opacity: 0;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
@if $experimental-support-for-webkit {
|
30
|
+
@-webkit-keyframes hinge { @include hinge(webkit); }
|
31
|
+
}
|
32
|
+
@if $experimental-support-for-khtml {
|
33
|
+
@-khtml-keyframes hinge { @include hinge(khtml); }
|
34
|
+
}
|
35
|
+
@if $experimental-support-for-mozilla {
|
36
|
+
@-moz-keyframes hinge { @include hinge(moz); }
|
37
|
+
}
|
38
|
+
@if $experimental-support-for-microsoft {
|
39
|
+
@-ms-keyframes hinge { @include hinge(ms); }
|
40
|
+
}
|
41
|
+
@if $experimental-support-for-opera {
|
42
|
+
@-o-keyframes hinge { @include hinge(o); }
|
43
|
+
}
|
44
|
+
@keyframes hinge { @include hinge(none); }
|
45
|
+
|
46
|
+
.hinge {
|
47
|
+
@include animation-name(hinge);
|
48
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
2
|
+
|
3
|
+
@mixin rollIn($prefix) {
|
4
|
+
0% {
|
5
|
+
opacity: 0;
|
6
|
+
@include transform(translateX(-100%) rotate(-120deg), $prefix);
|
7
|
+
}
|
8
|
+
100% {
|
9
|
+
opacity: 1;
|
10
|
+
@include transform(translateX(0px) rotate(0deg), $prefix);
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rollIn { @include rollIn(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rollIn { @include rollIn(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rollIn { @include rollIn(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rollIn { @include rollIn(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rollIn { @include rollIn(o); }
|
28
|
+
}
|
29
|
+
@keyframes rollIn { @include rollIn(none); }
|
30
|
+
|
31
|
+
.rollIn {
|
32
|
+
@include animation-name(rollIn);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
2
|
+
|
3
|
+
@mixin rollOut($prefix) {
|
4
|
+
0% {
|
5
|
+
opacity: 1;
|
6
|
+
@include transform(translateX(0px) rotate(0deg), $prefix);
|
7
|
+
}
|
8
|
+
100% {
|
9
|
+
opacity: 0;
|
10
|
+
@include transform(translateX(100%) rotate(120deg), $prefix);
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rollOut { @include rollOut(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rollOut { @include rollOut(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rollOut { @include rollOut(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rollOut { @include rollOut(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rollOut { @include rollOut(o); }
|
28
|
+
}
|
29
|
+
@keyframes rollOut { @include rollOut(none); }
|
30
|
+
|
31
|
+
.rollOut {
|
32
|
+
@include animation-name(rollOut);
|
33
|
+
}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
// Pulled from Bourbon ~ SHA: 93beb25236
|
2
|
+
// Bourbon ~ https://github.com/thoughtbot/bourbon
|
3
|
+
|
4
|
+
// CSS3 Animations - http://www.w3.org/TR/css3-animations/
|
5
|
+
//
|
6
|
+
// Each of these mixins support comma separated lists of values, which
|
7
|
+
// allows different transitions for individual properties to be described
|
8
|
+
// in a single style rule. Each value in the list corresponds to the value
|
9
|
+
// at that same position in the other properties.
|
10
|
+
|
11
|
+
@import "animation/animation-name";
|
12
|
+
@import "animation/animation-duration";
|
13
|
+
@import "animation/animation-timing-function";
|
14
|
+
@import "animation/animation-iteration-count";
|
15
|
+
@import "animation/animation-direction";
|
16
|
+
@import "animation/animation-play-state";
|
17
|
+
@import "animation/animation-delay";
|
18
|
+
@import "animation/animation-fill-mode";
|
19
|
+
|
20
|
+
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
|
21
|
+
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
|
22
|
+
@mixin animation-basic(
|
23
|
+
$name,
|
24
|
+
$time: 0,
|
25
|
+
$motion: ease
|
26
|
+
) {
|
27
|
+
|
28
|
+
$length-of-name: length($name);
|
29
|
+
$length-of-time: length($time);
|
30
|
+
$length-of-motion: length($motion);
|
31
|
+
|
32
|
+
@if $length-of-name > 1 {
|
33
|
+
@include animation-name(zip($name));
|
34
|
+
} @else {
|
35
|
+
@include animation-name($name);
|
36
|
+
}
|
37
|
+
|
38
|
+
@if $length-of-time > 1 {
|
39
|
+
@include animation-duration(zip($time));
|
40
|
+
} @else {
|
41
|
+
@include animation-duration($time);
|
42
|
+
}
|
43
|
+
|
44
|
+
@if $length-of-motion > 1 {
|
45
|
+
@include animation-timing-function(zip($motion));
|
46
|
+
} @else {
|
47
|
+
@include animation-timing-function($motion);
|
48
|
+
}
|
49
|
+
|
50
|
+
}
|
51
|
+
|
52
|
+
// Official animation shorthand property. Needs more work to actually be useful.
|
53
|
+
// Spec - http://www.w3.org/TR/css3-animations/#animation
|
54
|
+
// Values: name duration timing-function delay iteration-count direction
|
55
|
+
|
56
|
+
@mixin animation(
|
57
|
+
|
58
|
+
$name: fadeIn, // none | keyframe at-rule name
|
59
|
+
$duration: 1s, // <time>
|
60
|
+
$timing-function: ease, // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
|
61
|
+
$delay: 0.2s, // <time>
|
62
|
+
$iteration-count: 1, // infinite | number
|
63
|
+
$direction: normal, // normal | alternate
|
64
|
+
$prefix: false
|
65
|
+
) {
|
66
|
+
|
67
|
+
$value: $name $duration $timing-function $delay $iteration-count $direction;
|
68
|
+
|
69
|
+
@if $prefix {
|
70
|
+
@include declaration(animation, $value, $prefix);
|
71
|
+
} @else {
|
72
|
+
@include experimental(animation, $value);
|
73
|
+
}
|
74
|
+
|
75
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
|
2
|
+
@mixin backface-visibility(
|
3
|
+
$value: visible,
|
4
|
+
$prefix: false
|
5
|
+
) {
|
6
|
+
|
7
|
+
// <time>
|
8
|
+
@if $prefix {
|
9
|
+
@include declaration(backface-visibility, $value, $prefix);
|
10
|
+
} @else {
|
11
|
+
@include experimental(backface-visibility, $value);
|
12
|
+
}
|
13
|
+
|
14
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// transform - https://developer.mozilla.org/en/CSS/transform
|
2
|
+
// none | <transform-function>
|
3
|
+
|
4
|
+
@mixin transform($value: none, $prefix: false) {
|
5
|
+
|
6
|
+
@if $prefix {
|
7
|
+
@include declaration(transform, $value, $prefix);
|
8
|
+
} @else {
|
9
|
+
@include experimental(transform, $value);
|
10
|
+
}
|
11
|
+
|
12
|
+
}
|
13
|
+
|
14
|
+
// transform-origin - https://developer.mozilla.org/en/CSS/transform-origin
|
15
|
+
// x-axis - left | center | right | length | %
|
16
|
+
// y-axis - top | center | bottom | length | %
|
17
|
+
// z-axis - length
|
18
|
+
|
19
|
+
@mixin transform-origin($value: 50%, $prefix: false) {
|
20
|
+
|
21
|
+
@if $prefix {
|
22
|
+
@include declaration(transform-origin, $value, $prefix);
|
23
|
+
} @else {
|
24
|
+
@include experimental(transform-origin, $value);
|
25
|
+
}
|
26
|
+
|
27
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
|
2
|
+
@mixin animation-delay(
|
3
|
+
$time-1: 0,
|
4
|
+
$time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// <time>
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-delay, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-delay, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-direction - http://www.w3.org/TR/css3-animations/#the-animation-direction-property-
|
2
|
+
@mixin animation-direction(
|
3
|
+
$direction-1: normal,
|
4
|
+
$direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// normal | alternate
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-direction, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-direction, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
// animation-duration - http://www.w3.org/TR/css3-animations/#the-animation-duration-property-
|
2
|
+
@mixin animation-duration(
|
3
|
+
$time-1: 0,
|
4
|
+
$time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// <time>
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-duration, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-duration, $value);
|
16
|
+
}
|
17
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-fill-mode - http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
|
2
|
+
@mixin animation-fill-mode(
|
3
|
+
$mode-1: none,
|
4
|
+
$mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// none | forwards | backwards | both
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-fill-mode, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-fill-mode, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-iteration-count - http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-
|
2
|
+
@mixin animation-iteration-count(
|
3
|
+
$value-1: 1,
|
4
|
+
$value-2: false, $value-3: false, $value-4: false, $value-5: false, $value-6: false, $value-7: false, $value-8: false, $value-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($value-1, $value-2, $value-3, $value-4, $value-5, $value-6, $value-7, $value-8, $value-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// infinite | <number>
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-iteration-count, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-iteration-count, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-name - http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
2
|
+
@mixin animation-name(
|
3
|
+
$name-1,
|
4
|
+
$name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// none | animation-name
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-name, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-name, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-play-state - http://www.w3.org/TR/css3-animations/#the-animation-play-state-property-
|
2
|
+
@mixin animation-play-state(
|
3
|
+
$state-1: running,
|
4
|
+
$state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// running | paused
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-play-state, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-play-state, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-timing-function - http://www.w3.org/TR/css3-animations/#animation-timing-function_tag
|
2
|
+
@mixin animation-timing-function(
|
3
|
+
$motion-1: ease,
|
4
|
+
$motion-2: false, $motion-3: false, $motion-4: false, $motion-5: false, $motion-6: false, $motion-7: false, $motion-8: false, $motion-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// ease | linear | ease-in | ease-out | ease-in-out
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-timing-function, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-timing-function, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
// Declariation mixin to make it easy to write a declaration with or without a prefix
|
2
|
+
@mixin declaration($property, $value, $prefix: none) {
|
3
|
+
|
4
|
+
$prefix: unquote($prefix);
|
5
|
+
|
6
|
+
@if $prefix == none {
|
7
|
+
#{$property}: $value;
|
8
|
+
} @else {
|
9
|
+
#{-$prefix}-#{$property}: $value;
|
10
|
+
}
|
11
|
+
|
12
|
+
}
|