Events navigation not works with a cool full screen mode and floating buttons

4 files changed, 275 insertions, 0 deletions

diff --git a/www/lib/ng-mfb/mfb/src/_/_fountain.scss b/www/lib/ng-mfb/mfb/src/_/_fountain.scss
new file mode 100644
index 00000000..cd5a2933
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_fountain.scss
@@ -0,0 +1,77 @@
+@mixin effects-fountain{
+
+/**
+ * FOUNTAIN
+ * When hovering the main button the child buttons
+ * jump into view from outside the viewport
+ */
+
+  .mfb-component--tl.mfb-fountain,
+  .mfb-component--tr.mfb-fountain{
+    .mfb-component__list{
+      li{
+        -webkit-transform: scale(0);
+        transform: scale(0);
+      }
+      @for $i from 1 through $number-of-child-buttons {
+        $distance: -1 * $button-space * $i;
+        li:nth-child( #{$i} ) {
+          -webkit-transform: translateY($distance) scale(0);
+                  transform: translateY($distance) scale(0);
+          transition: all $slide-speed;
+          // this is the delay at which the buttons start disappearing
+          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
+        }
+      }
+    }
+    &[data-mfb-toggle="hover"]:hover,
+    &[data-mfb-state="open"]{
+      .mfb-component__list{
+        @for $i from 1 through $number-of-child-buttons {
+          $distance: $button-space * $i;
+          li:nth-child( #{$i} ) {
+            -webkit-transform: translateY($distance) scale(1);
+                    transform: translateY($distance) scale(1);
+            // this is the delay at which the buttons appear
+            transition-delay: $i * 0.05s;
+          }
+        }
+      }
+    }
+  }
+
+  .mfb-component--bl.mfb-fountain,
+  .mfb-component--br.mfb-fountain{
+    .mfb-component__list{
+      li{
+        -webkit-transform: scale(0);
+                transform: scale(0);
+      }
+      @for $i from 1 through $number-of-child-buttons {
+        $distance: $button-space * $i;
+        li:nth-child( #{$i} ) {
+          -webkit-transform: translateY($distance) scale(0);
+                  transform: translateY($distance) scale(0);
+          transition: all $slide-speed;
+          // this is the delay at which the buttons start disappearing
+          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
+        }
+      }
+    }
+    &[data-mfb-toggle="hover"]:hover,
+    &[data-mfb-state="open"]{
+      .mfb-component__list{
+        @for $i from 1 through $number-of-child-buttons {
+          $distance: -1 * $button-space * $i;
+          li:nth-child( #{$i} ) {
+            -webkit-transform: translateY($distance) scale(1);
+                    transform: translateY($distance) scale(1);
+            // this is the delay at which the buttons appear
+            transition-delay: $i * 0.05s;
+          }
+        }
+      }
+    }
+  }
+
+}
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 ); }
+        }
+      }
+    }
+  }
+
+}
diff --git a/www/lib/ng-mfb/mfb/src/_/_slidein.scss b/www/lib/ng-mfb/mfb/src/_/_slidein.scss
new file mode 100644
index 00000000..f2735124
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_slidein.scss
@@ -0,0 +1,53 @@
+@mixin effects-slidein{
+
+/**
+ * SLIDE IN + FADE
+ * When hovering the main button, the child buttons slide out from beneath
+ * the main button while transitioning from transparent to opaque.
+ *
+ */
+
+  .mfb-component--tl.mfb-slidein,
+  .mfb-component--tr.mfb-slidein{
+    .mfb-component__list li{
+      opacity: 0;
+      transition: all $slide-speed;
+    }
+    &[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} ) {
+            -webkit-transform: translateY( $distance );
+                    transform: translateY( $distance ); }
+        }
+      }
+    }
+  }
+
+  .mfb-component--bl.mfb-slidein,
+  .mfb-component--br.mfb-slidein{
+    .mfb-component__list li{
+      opacity: 0;
+      transition: all $slide-speed;
+    }
+    &[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} ) { -webkit-transform: translateY( $distance );
+                                         transform: translateY( $distance ); }
+        }
+      }
+    }
+  }
+
+}
diff --git a/www/lib/ng-mfb/mfb/src/_/_zoomin.scss b/www/lib/ng-mfb/mfb/src/_/_zoomin.scss
new file mode 100644
index 00000000..df0ee0ff
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_zoomin.scss
@@ -0,0 +1,78 @@
+@mixin effects-zoomin{
+
+/**
+ * ZOOM-IN
+ * When hovering the main button, the child buttons grow
+ * from zero to normal size.
+ *
+ */
+
+  .mfb-component--tl.mfb-zoomin,
+  .mfb-component--tr.mfb-zoomin{
+    .mfb-component__list{
+      li{
+        -webkit-transform: scale(0);
+                transform: scale(0);
+      }
+      @for $i from 1 through $number-of-child-buttons {
+        $distance: $button-space * $i;
+        li:nth-child( #{$i} ) {
+          -webkit-transform: translateY($distance) scale(0);
+                  transform: translateY($distance) scale(0);
+          transition: all $slide-speed;
+          // this is the delay at which the buttons *disappear*
+          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
+        }
+      }
+    }
+    &[data-mfb-toggle="hover"]:hover,
+    &[data-mfb-state="open"]{
+      .mfb-component__list{
+        @for $i from 1 through $number-of-child-buttons {
+          $distance: $button-space * $i;
+          li:nth-child( #{$i} ) {
+            -webkit-transform: translateY($distance) scale(1);
+                    transform: translateY($distance) scale(1);
+            // this is the delay at which the buttons *appear*
+            transition-delay: $i * 0.05s;
+          }
+        }
+      }
+    }
+  }
+
+  .mfb-component--bl.mfb-zoomin,
+  .mfb-component--br.mfb-zoomin{
+    .mfb-component__list{
+      li{
+        -webkit-transform: scale(0);
+                transform: scale(0);
+      }
+      @for $i from 1 through $number-of-child-buttons {
+        $distance: -1 * $button-space * $i;
+        li:nth-child( #{$i} ) {
+          -webkit-transform: translateY($distance) scale(0);
+                  transform: translateY($distance) scale(0);
+          transition: all $slide-speed;
+          // this is the delay at which the buttons start disappearing
+          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
+        }
+      }
+    }
+    &[data-mfb-toggle="hover"]:hover,
+    &[data-mfb-state="open"]{
+      .mfb-component__list{
+        @for $i from 1 through $number-of-child-buttons {
+          $distance: -1 * $button-space * $i;
+          li:nth-child( #{$i} ) {
+            -webkit-transform: translateY($distance) scale(1);
+                    transform: translateY($distance) scale(1);
+            // this is the delay at which the buttons appear
+            transition-delay: $i * 0.05s;
+          }
+        }
+      }
+    }
+  }
+
+}