summaryrefslogtreecommitdiff
path: root/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss
diff options
context:
space:
mode:
authorARC <arjunrc@gmail.com>2015-04-28 11:26:57 -0400
committerARC <arjunrc@gmail.com>2015-04-28 11:26:57 -0400
commit6fa29c170159e7bfbcaf7681cdfb52ba7f98cac0 (patch)
tree0039de6ab6324d0d91cb63383a290a9205541043 /www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss
parent6e83957c0231d48eb9f29d1270806cadef3a3c6d (diff)
Events navigation not works with a cool full screen mode and floating buttons
Diffstat (limited to 'www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss')
-rw-r--r--www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss67
1 files changed, 67 insertions, 0 deletions
diff --git a/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss b/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss
new file mode 100644
index 00000000..7a08d72d
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss
@@ -0,0 +1,67 @@
+@mixin effects-slidein-spring{
+
+/**
+ * SLIDE IN SPRING
+ * Same as slide-in but with a springy animation.
+ *
+ */
+
+ .mfb-component--tl.mfb-slidein-spring,
+ .mfb-component--tr.mfb-slidein-spring{
+ .mfb-component__list li{
+ opacity: 0;
+ transition: all $slide-speed;
+ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ }
+ @for $i from 1 through $number-of-child-buttons {
+ .mfb-component__list li:nth-child( #{$i} ) {
+ transition-delay: #{$i * 0.05}s;
+ }
+ }
+ &[data-mfb-toggle="hover"]:hover,
+ &[data-mfb-state="open"]{
+ .mfb-component__list{
+ li{
+ opacity: 1;
+ }
+ @for $i from 1 through $number-of-child-buttons {
+ $distance: $button-space * $i;
+ li:nth-child( #{$i} ) {
+ transition-delay: #{$i * 0.05}s;
+ -webkit-transform: translateY( $distance );
+ transform: translateY( $distance ); }
+ }
+ }
+ }
+ }
+
+ .mfb-component--bl.mfb-slidein-spring,
+ .mfb-component--br.mfb-slidein-spring{
+ .mfb-component__list li{
+ opacity: 0;
+ transition: all $slide-speed;
+ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ }
+ @for $i from 1 through $number-of-child-buttons {
+ .mfb-component__list li:nth-child( #{$i} ) {
+ transition-delay: #{$i * 0.05}s;
+ }
+ }
+ &[data-mfb-toggle="hover"]:hover,
+ &[data-mfb-state="open"]{
+ .mfb-component__list{
+ li{
+ opacity: 1;
+ }
+ @for $i from 1 through $number-of-child-buttons {
+ $distance: -1 * $button-space * $i;
+ li:nth-child( #{$i} ) {
+ transition-delay: #{$i * 0.05}s;
+ -webkit-transform: translateY( $distance );
+ transform: translateY( $distance ); }
+ }
+ }
+ }
+ }
+
+}