From 422d1da283a133c6718e0b19dcad14b3adbf3e00 Mon Sep 17 00:00:00 2001
From: PliablePixels <pliablepixels@gmail.com>
Date: Fri, 3 Jul 2015 17:14:26 -0400
Subject: moved scss and dependencies of ng-mfb to my css directory so I can
 adhoc compile there.

---
 www/css/_/_fountain.scss       |  77 +++++++++++++++
 www/css/_/_slidein-spring.scss |  67 +++++++++++++
 www/css/_/_slidein.scss        |  53 ++++++++++
 www/css/_/_zoomin.scss         |  78 +++++++++++++++
 www/css/custommfb.css          | 216 ++++++++++++++++++++---------------------
 www/css/custommfb.scss         |  12 +--
 6 files changed, 389 insertions(+), 114 deletions(-)
 create mode 100644 www/css/_/_fountain.scss
 create mode 100644 www/css/_/_slidein-spring.scss
 create mode 100644 www/css/_/_slidein.scss
 create mode 100644 www/css/_/_zoomin.scss

(limited to 'www/css')

diff --git a/www/css/_/_fountain.scss b/www/css/_/_fountain.scss
new file mode 100644
index 00000000..cd5a2933
--- /dev/null
+++ b/www/css/_/_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/css/_/_slidein-spring.scss b/www/css/_/_slidein-spring.scss
new file mode 100644
index 00000000..7a08d72d
--- /dev/null
+++ b/www/css/_/_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/css/_/_slidein.scss b/www/css/_/_slidein.scss
new file mode 100644
index 00000000..f2735124
--- /dev/null
+++ b/www/css/_/_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/css/_/_zoomin.scss b/www/css/_/_zoomin.scss
new file mode 100644
index 00000000..df0ee0ff
--- /dev/null
+++ b/www/css/_/_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;
+          }
+        }
+      }
+    }
+  }
+
+}
diff --git a/www/css/custommfb.css b/www/css/custommfb.css
index 18d3ff6a..a793fa17 100644
--- a/www/css/custommfb.css
+++ b/www/css/custommfb.css
@@ -79,7 +79,7 @@
  */
 .mfb-component--tl, .mfb-component--tr, .mfb-component--bl, .mfb-component--br {
   box-sizing: border-box;
-  margin: 25px;
+  margin: 20px;
   position: fixed;
   white-space: nowrap;
   z-index: 30;
@@ -158,12 +158,12 @@
   position: absolute;
   font-size: 18px;
   text-align: center;
-  line-height: 40px;
+  line-height: 45px;
   width: 100%; }
 
 .mfb-component__wrap {
-  padding: 25px;
-  margin: -25px; }
+  padding: 20px;
+  margin: -20px; }
 
 [data-mfb-toggle="hover"]:hover .mfb-component__icon, [data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
 [data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, [data-mfb-toggle="hover"]:hover .mfb-component__child-icon,
@@ -178,13 +178,13 @@
     #BUTTONS | Modifiers
 \*------------------------------------*/
 .mfb-component__button--main {
-  height: 40px;
-  width: 40px;
+  height: 45px;
+  width: 45px;
   z-index: 20; }
 
 .mfb-component__button--child {
-  height: 40px;
-  width: 40px; }
+  height: 45px;
+  width: 45px; }
 
 .mfb-component__main-icon--active,
 .mfb-component__main-icon--resting {
@@ -195,8 +195,8 @@
 
 .mfb-component__child-icon,
 .mfb-component__child-icon {
-  line-height: 40px;
-  font-size: 12.85714px; }
+  line-height: 45px;
+  font-size: 14.46429px; }
 
 .mfb-component__main-icon--active {
   opacity: 0; }
@@ -233,23 +233,23 @@
 .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(46px);
-  transform: translateY(46px); }
+  -webkit-transform: translateY(50px);
+  transform: translateY(50px); }
 .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(92px);
-  transform: translateY(92px); }
+  -webkit-transform: translateY(100px);
+  transform: translateY(100px); }
 .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(138px);
-  transform: translateY(138px); }
+  -webkit-transform: translateY(150px);
+  transform: translateY(150px); }
 .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(184px);
-  transform: translateY(184px); }
+  -webkit-transform: translateY(200px);
+  transform: translateY(200px); }
 
 .mfb-component--bl.mfb-slidein .mfb-component__list li,
 .mfb-component--br.mfb-slidein .mfb-component__list li {
@@ -262,23 +262,23 @@
 .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-46px);
-  transform: translateY(-46px); }
+  -webkit-transform: translateY(-50px);
+  transform: translateY(-50px); }
 .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-92px);
-  transform: translateY(-92px); }
+  -webkit-transform: translateY(-100px);
+  transform: translateY(-100px); }
 .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-138px);
-  transform: translateY(-138px); }
+  -webkit-transform: translateY(-150px);
+  transform: translateY(-150px); }
 .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-184px);
-  transform: translateY(-184px); }
+  -webkit-transform: translateY(-200px);
+  transform: translateY(-200px); }
 
 /**
  * SLIDE IN SPRING
@@ -310,26 +310,26 @@
 .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
   transition-delay: 0.05s;
-  -webkit-transform: translateY(46px);
-  transform: translateY(46px); }
+  -webkit-transform: translateY(50px);
+  transform: translateY(50px); }
 .mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
   transition-delay: 0.1s;
-  -webkit-transform: translateY(92px);
-  transform: translateY(92px); }
+  -webkit-transform: translateY(100px);
+  transform: translateY(100px); }
 .mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
   transition-delay: 0.15s;
-  -webkit-transform: translateY(138px);
-  transform: translateY(138px); }
+  -webkit-transform: translateY(150px);
+  transform: translateY(150px); }
 .mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
   transition-delay: 0.2s;
-  -webkit-transform: translateY(184px);
-  transform: translateY(184px); }
+  -webkit-transform: translateY(200px);
+  transform: translateY(200px); }
 
 .mfb-component--bl.mfb-slidein-spring .mfb-component__list li,
 .mfb-component--br.mfb-slidein-spring .mfb-component__list li {
@@ -356,26 +356,26 @@
 .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
   transition-delay: 0.05s;
-  -webkit-transform: translateY(-46px);
-  transform: translateY(-46px); }
+  -webkit-transform: translateY(-50px);
+  transform: translateY(-50px); }
 .mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
   transition-delay: 0.1s;
-  -webkit-transform: translateY(-92px);
-  transform: translateY(-92px); }
+  -webkit-transform: translateY(-100px);
+  transform: translateY(-100px); }
 .mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
   transition-delay: 0.15s;
-  -webkit-transform: translateY(-138px);
-  transform: translateY(-138px); }
+  -webkit-transform: translateY(-150px);
+  transform: translateY(-150px); }
 .mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
   transition-delay: 0.2s;
-  -webkit-transform: translateY(-184px);
-  transform: translateY(-184px); }
+  -webkit-transform: translateY(-200px);
+  transform: translateY(-200px); }
 
 /**
  * ZOOM-IN
@@ -389,51 +389,51 @@
   transform: scale(0); }
 .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(46px) scale(0);
-  transform: translateY(46px) scale(0);
+  -webkit-transform: translateY(50px) scale(0);
+  transform: translateY(50px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.15s; }
 .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(92px) scale(0);
-  transform: translateY(92px) scale(0);
+  -webkit-transform: translateY(100px) scale(0);
+  transform: translateY(100px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.1s; }
 .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(138px) scale(0);
-  transform: translateY(138px) scale(0);
+  -webkit-transform: translateY(150px) scale(0);
+  transform: translateY(150px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.05s; }
 .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(184px) scale(0);
-  transform: translateY(184px) scale(0);
+  -webkit-transform: translateY(200px) scale(0);
+  transform: translateY(200px) scale(0);
   transition: all 0.5s;
   transition-delay: 0s; }
 .mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(46px) scale(1);
-  transform: translateY(46px) scale(1);
+  -webkit-transform: translateY(50px) scale(1);
+  transform: translateY(50px) scale(1);
   transition-delay: 0.05s; }
 .mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(92px) scale(1);
-  transform: translateY(92px) scale(1);
+  -webkit-transform: translateY(100px) scale(1);
+  transform: translateY(100px) scale(1);
   transition-delay: 0.1s; }
 .mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(138px) scale(1);
-  transform: translateY(138px) scale(1);
+  -webkit-transform: translateY(150px) scale(1);
+  transform: translateY(150px) scale(1);
   transition-delay: 0.15s; }
 .mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(184px) scale(1);
-  transform: translateY(184px) scale(1);
+  -webkit-transform: translateY(200px) scale(1);
+  transform: translateY(200px) scale(1);
   transition-delay: 0.2s; }
 
 .mfb-component--bl.mfb-zoomin .mfb-component__list li,
@@ -442,51 +442,51 @@
   transform: scale(0); }
 .mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-46px) scale(0);
-  transform: translateY(-46px) scale(0);
+  -webkit-transform: translateY(-50px) scale(0);
+  transform: translateY(-50px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.15s; }
 .mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-92px) scale(0);
-  transform: translateY(-92px) scale(0);
+  -webkit-transform: translateY(-100px) scale(0);
+  transform: translateY(-100px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.1s; }
 .mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-138px) scale(0);
-  transform: translateY(-138px) scale(0);
+  -webkit-transform: translateY(-150px) scale(0);
+  transform: translateY(-150px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.05s; }
 .mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-184px) scale(0);
-  transform: translateY(-184px) scale(0);
+  -webkit-transform: translateY(-200px) scale(0);
+  transform: translateY(-200px) scale(0);
   transition: all 0.5s;
   transition-delay: 0s; }
 .mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-46px) scale(1);
-  transform: translateY(-46px) scale(1);
+  -webkit-transform: translateY(-50px) scale(1);
+  transform: translateY(-50px) scale(1);
   transition-delay: 0.05s; }
 .mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-92px) scale(1);
-  transform: translateY(-92px) scale(1);
+  -webkit-transform: translateY(-100px) scale(1);
+  transform: translateY(-100px) scale(1);
   transition-delay: 0.1s; }
 .mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-138px) scale(1);
-  transform: translateY(-138px) scale(1);
+  -webkit-transform: translateY(-150px) scale(1);
+  transform: translateY(-150px) scale(1);
   transition-delay: 0.15s; }
 .mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-184px) scale(1);
-  transform: translateY(-184px) scale(1);
+  -webkit-transform: translateY(-200px) scale(1);
+  transform: translateY(-200px) scale(1);
   transition-delay: 0.2s; }
 
 /**
@@ -500,51 +500,51 @@
   transform: scale(0); }
 .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-46px) scale(0);
-  transform: translateY(-46px) scale(0);
+  -webkit-transform: translateY(-50px) scale(0);
+  transform: translateY(-50px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.15s; }
 .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-92px) scale(0);
-  transform: translateY(-92px) scale(0);
+  -webkit-transform: translateY(-100px) scale(0);
+  transform: translateY(-100px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.1s; }
 .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-138px) scale(0);
-  transform: translateY(-138px) scale(0);
+  -webkit-transform: translateY(-150px) scale(0);
+  transform: translateY(-150px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.05s; }
 .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-184px) scale(0);
-  transform: translateY(-184px) scale(0);
+  -webkit-transform: translateY(-200px) scale(0);
+  transform: translateY(-200px) scale(0);
   transition: all 0.5s;
   transition-delay: 0s; }
 .mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
 .mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(46px) scale(1);
-  transform: translateY(46px) scale(1);
+  -webkit-transform: translateY(50px) scale(1);
+  transform: translateY(50px) scale(1);
   transition-delay: 0.05s; }
 .mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
 .mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(92px) scale(1);
-  transform: translateY(92px) scale(1);
+  -webkit-transform: translateY(100px) scale(1);
+  transform: translateY(100px) scale(1);
   transition-delay: 0.1s; }
 .mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
 .mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(138px) scale(1);
-  transform: translateY(138px) scale(1);
+  -webkit-transform: translateY(150px) scale(1);
+  transform: translateY(150px) scale(1);
   transition-delay: 0.15s; }
 .mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
 .mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(184px) scale(1);
-  transform: translateY(184px) scale(1);
+  -webkit-transform: translateY(200px) scale(1);
+  transform: translateY(200px) scale(1);
   transition-delay: 0.2s; }
 
 .mfb-component--bl.mfb-fountain .mfb-component__list li,
@@ -553,51 +553,51 @@
   transform: scale(0); }
 .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(46px) scale(0);
-  transform: translateY(46px) scale(0);
+  -webkit-transform: translateY(50px) scale(0);
+  transform: translateY(50px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.15s; }
 .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(92px) scale(0);
-  transform: translateY(92px) scale(0);
+  -webkit-transform: translateY(100px) scale(0);
+  transform: translateY(100px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.1s; }
 .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(138px) scale(0);
-  transform: translateY(138px) scale(0);
+  -webkit-transform: translateY(150px) scale(0);
+  transform: translateY(150px) scale(0);
   transition: all 0.5s;
   transition-delay: 0.05s; }
 .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(184px) scale(0);
-  transform: translateY(184px) scale(0);
+  -webkit-transform: translateY(200px) scale(0);
+  transform: translateY(200px) scale(0);
   transition: all 0.5s;
   transition-delay: 0s; }
 .mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
 .mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-46px) scale(1);
-  transform: translateY(-46px) scale(1);
+  -webkit-transform: translateY(-50px) scale(1);
+  transform: translateY(-50px) scale(1);
   transition-delay: 0.05s; }
 .mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
 .mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-92px) scale(1);
-  transform: translateY(-92px) scale(1);
+  -webkit-transform: translateY(-100px) scale(1);
+  transform: translateY(-100px) scale(1);
   transition-delay: 0.1s; }
 .mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
 .mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-138px) scale(1);
-  transform: translateY(-138px) scale(1);
+  -webkit-transform: translateY(-150px) scale(1);
+  transform: translateY(-150px) scale(1);
   transition-delay: 0.15s; }
 .mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
 .mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-184px) scale(1);
-  transform: translateY(-184px) scale(1);
+  -webkit-transform: translateY(-200px) scale(1);
+  transform: translateY(-200px) scale(1);
   transition-delay: 0.2s; }
 
 /*------------------------------------*\
@@ -617,11 +617,11 @@
   padding: 4px 10px;
   border-radius: 3px;
   color: rgba(255, 255, 255, 0.8);
-  font-size: 10px;
+  font-size: 12px;
   pointer-events: none;
   position: absolute;
   top: 50%;
-  margin-top: -9px;
+  margin-top: -10px;
   transition: all 0.5s; }
 
 [data-mfb-toggle="hover"] [data-mfb-label]:hover:after,
diff --git a/www/css/custommfb.scss b/www/css/custommfb.scss
index 009c7c64..861c8110 100644
--- a/www/css/custommfb.scss
+++ b/www/css/custommfb.scss
@@ -93,13 +93,13 @@ $label-hover-on: .3s !default;
 /* SIZES -----------------------------*/
 
 // main button diameter
-$main_button_size: 40px !default;
+$main_button_size: 45px !default;
 // main button diameter
-$child_button_size: 40px !default;
+$child_button_size: 45px !default;
 // the distance of the main button from the closest corners of the screen
-$border-distance: 25px !default;
+$border-distance: 20px !default;
 // font-size for labels
-$labels-font-size: 10px !default;
+$labels-font-size: 12px !default;
 // top & bottom padding for the labels
 $labels-padding-vertical: 4px !default;
 // left & right padding for the labels
@@ -108,7 +108,7 @@ $labels-padding-horizontal: 10px !default;
 /* SPACING ---------------------------*/
 
 // space between buttons
-$button-space: 46px !default;
+$button-space: 50px !default;
 
 // space between button and label
 $button-label-space: 50px !default;
@@ -224,7 +224,7 @@ $number-of-child-buttons: 4 !default;
   position: absolute;
   font-size: 18px;
   text-align: center;
-  line-height: 40px;
+  line-height: 45px;
   width: 100%;
 }
 
-- 
cgit v1.2.3