summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/css/_/_fountain.scss77
-rw-r--r--www/css/_/_slidein-spring.scss67
-rw-r--r--www/css/_/_slidein.scss53
-rw-r--r--www/css/_/_zoomin.scss78
-rw-r--r--www/css/custommfb.css216
-rw-r--r--www/css/custommfb.scss12
6 files changed, 389 insertions, 114 deletions
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%;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 14:49:38 +0000