syn w/ upstream

demo/index.css

@@ -1,25 +1,37 @@
 html, body{
   height: 100%;
   min-height: 100%;
+  background: #E9EBEC;
+  -webkit-font-smoothing: initial;
+  text-rendering: initial;  
 }
 html{
-  background: #E9EBEC;
   font-family: 'Raleway', sans-serif;
   font-weight: 200;
   -ms-touch-action: manipulation;
-  touch-action: manipulation;  
+  touch-action: manipulation;
 }
 body{
-  display: -webkit-flex;  
+  display: -webkit-flex;
   -webkit-align-items: center;
   -webkit-justify-content: center;
-    
+
   display: flex;
   align-items: center;
   justify-content: center;
+
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+html p, body p{
+  line-height: inherit;
 }
 h1{
-  margin: 0.2em 0; 
+  margin: 0.2em 0;
   color: rgba(40, 33, 33, .7);
   color: rgba(124, 98, 152, 1);
   font-weight: 400;
@@ -52,16 +64,16 @@ header{
 .viewCode .showcode{
   -webkit-transform: rotateX(-180deg);
   transform: rotateX(-180deg);
-  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);      
-} 
+  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);
+}
 .icon-nocode, .icon-yepcode{
   transition: opacity .3s;
   position: absolute;
   left: 0;
   display: block;
   width: 100%;
-  line-height: 40px;      
-}    
+  line-height: 40px;
+}
 .icon-nocode{
   opacity: 0;
 }
@@ -70,15 +82,15 @@ header{
 }
 .viewCode .icon-yepcode{
   opacity: 0;
-}     
+}
 .panel{
   width: 90%;
   position: relative;
   max-width: 650px;
   box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
   background: #F5F5F5;
   border-radius: 3px;
-  overflow: hidden;      
+  overflow: hidden;
 }
 article{
   min-height: 180px;
@@ -98,12 +110,12 @@ footer a, footer a:active, footer a:visited{
   top: 0;
   top: 0;
   left: 0;
-  right: 0;      
+  right: 0;
   height: 100%;
   overflow: scroll;
   background: rgba(124, 98, 152, 0.94);
-  color: rgba(245, 247, 247, 0.92);    
-  padding: 0em 1em; 
+  color: rgba(245, 247, 247, 0.92);
+  padding: 0em 1em;
   transition: all .4s;
   -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
@@ -117,8 +129,8 @@ footer a, footer a:active, footer a:visited{
 .viewCode .code{
   -webkit-transform: translateY(0);
   transform: translateY(0);
-  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);      
-}   
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);
+}
 .actions{
   font-weight: 300;
   text-transform: uppercase;
@@ -131,7 +143,7 @@ footer a, footer a:active, footer a:visited{
 }
 .actions:hover{
   color: rgb(30, 30, 171);
-  background: #F5F5F5;      
+  background: #F5F5F5;
   box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
 }
 
@@ -141,8 +153,8 @@ code, pre {
   font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New",monospace;
   padding: 0.5em;
   border-radius: 3px;
-  margin: 1em 0;  
-}   
+  margin: 1em 0;
+}
 code{
   display: inline;
   vertical-align: middle;
@@ -152,24 +164,24 @@ pre{
   display: block;
 }
 .striked{
- text-decoration: line-through;  
-} 
+ text-decoration: line-through;
+}
 .mfb-component--tl{
   animation: fromTop 1s 1;
   -webkit-animation: fromTop 1s 1;
 }
 .mfb-component--tr{
   animation: fromTop 1.3s 1;
   -webkit-animation: fromTop 1.3s 1;
-} 
+}
 .mfb-component--br{
   animation: fromBottom 1.6s 1;
   -webkit-animation: fromBottom 1.6s 1;
 }
 .mfb-component--bl{
   animation: fromBottom 1.9s 1;
   -webkit-animation: fromBottom 1.9s 1;
-}        
+}
 @keyframes fromBottom {
   0% {
     transform: translateY(250px);
@@ -193,12 +205,32 @@ pre{
   100% {
     transform: translateY(0);
   }
-}    
+}
 @-webkit-keyframes fromTop {
   0% {
     transform: translateY(-250px);
   }
   100% {
     transform: translateY(0);
   }
-}   
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/mfb.scss

@@ -291,6 +291,8 @@ $number-of-child-buttons: 4 !default;
   }
   .mfb-component__main-icon--resting{
     opacity: 0;
+    // don't remove this, needed for ng-mfb downstream repo!
+    position: absolute !important;
   }
   .mfb-component__main-icon--active{
     opacity: 1;