Merge pull request #2645 from cmgustavo/bug/ux-animation-03

Fix scroll after animation. Removes unused attributes

src/css/main.css

@@ -123,7 +123,6 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
 .page, .main {
   height:100%;
   background-color: #fff;
-  -webkit-backface-visibility: hidden;
 }
 
 .button.small.side-bar {
@@ -505,21 +504,17 @@ ul.pagination li.current a {
 input {
   border-radius: 2px;
   background: #EDEDED;
-  -moz-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
-  box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 1px 1px 0px 0px rgba(0,0,0,0.05);
   color: #2C3E42;
   padding: 1.2rem 0.7rem;
   margin-bottom: 1.5rem;
   border: 0;
 }
 
-input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
+input[type="color"], input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], textarea {
   color: #B7C2CD;
   margin-bottom: 1.5rem;
   height: 35px;
   background: transparent;
-  -moz-box-shadow: none;
-  box-shadow: none;
   border: none;
   padding-left: 0.1rem;
   font-size: 13px;
@@ -530,14 +525,13 @@ input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus
   color: #4B6178;
   border-color: #CED5DC;
   background: transparent;
-  transition: none !important;
-  -webkit-transition: none !important;
 }
 
 input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"], input[type="password"][disabled], input[type="password"][readonly], fieldset[disabled] input[type="password"], input[type="date"][disabled], input[type="date"][readonly], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], input[type="datetime"][readonly], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], input[type="datetime-local"][readonly], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], input[type="month"][readonly], fieldset[disabled] input[type="month"], input[type="week"][disabled], input[type="week"][readonly], fieldset[disabled] input[type="week"], input[type="email"][disabled], input[type="email"][readonly], fieldset[disabled] input[type="email"], input[type="number"][disabled], input[type="number"][readonly], fieldset[disabled] input[type="number"], input[type="search"][disabled], input[type="search"][readonly], fieldset[disabled] input[type="search"], input[type="tel"][disabled], input[type="tel"][readonly], fieldset[disabled] input[type="tel"], input[type="time"][disabled], input[type="time"][readonly], fieldset[disabled] input[type="time"], input[type="url"][disabled], input[type="url"][readonly], fieldset[disabled] input[type="url"], input[type="color"][disabled], input[type="color"][readonly], fieldset[disabled] input[type="color"], textarea[disabled], textarea[readonly], fieldset[disabled] textarea {
   background-color: #E4E8EC;
   color: #2C3E50;
   padding-left: 0.5rem;
+  opacity: 1;
 }
 
 select {

src/css/mobile.css

@@ -573,26 +573,61 @@ a.pin-button:active {
 .reveal-modal .fade .in, 
 .reveal-modal.fade.full.in,
 .reveal-modal.fade.full.out,
-.reveal-modal.fade.full {
+.reveal-modal.fade.full,
-/*CSS transitions*/
+input[type="color"], 
- -o-transition-property: none !important;
+input[type="date"], 
- -moz-transition-property: none !important;
+input[type="datetime-local"], 
- -ms-transition-property: none !important;
+input[type="datetime"], 
- -webkit-transition-property: none !important;
+input[type="email"], 
- transition-property: none !important;
+input[type="month"], 
- /*CSS transforms*/
+input[type="number"], 
- -o-transform: none !important;
+input[type="password"], 
- -moz-transform: none !important;
+input[type="search"], 
- -ms-transform: none !important;
+input[type="tel"], 
- -webkit-transform: none !important;
+input[type="text"], 
- transform: none !important;
+input[type="time"], 
- /*CSS animations*/
+input[type="url"], 
- -webkit-animation: none !important;
+input[type="week"], 
- -moz-animation: none !important;
+textarea,
- -o-animation: none !important;
+input[type="text"]:focus, 
- -ms-animation: none !important;
+input[type="password"]:focus, 
- animation: none !important;
+input[type="date"]:focus, 
-  
+input[type="datetime"]:focus, 
+input[type="datetime-local"]:focus, 
+input[type="month"]:focus, 
+input[type="week"]:focus, 
+input[type="email"]:focus, 
+input[type="number"]:focus, 
+input[type="search"]:focus, 
+input[type="tel"]:focus, 
+input[type="time"]:focus, 
+input[type="url"]:focus, 
+input[type="color"]:focus, 
+textarea:focus
+{
+  opacity: 1;
+  /*CSS transitions*/
+  -o-transition-property: none !important;
+  -moz-transition-property: none !important;
+  -ms-transition-property: none !important;
+  -webkit-transition-property: none !important;
+  transition-property: none !important;
+  /*CSS transforms*/
+  -o-transform: none !important;
+  -moz-transform: none !important;
+  -ms-transform: none !important;
+  -webkit-transform: none !important;
+  transform: none !important;
+  /*CSS animations*/
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  -o-animation: none !important;
+  -ms-animation: none !important;
+  animation: none !important;
+  /*CSS box-shadow*/
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .popup-tx-status {
@@ -658,46 +693,65 @@ a.pin-button:active {
   color: #B7C2CD;
 }
 
+.animation-left, .animation-right {
+  position: absolute; 
+  background: #fff; 
+  display: block; 
+  width: 100%; 
+  height: 100%;
+  top: 0;
+  left: 0;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
 .animation-left.ng-enter, .animation-left.ng-leave,
 .animation-right.ng-enter, .animation-right.ng-leave {
-  -webkit-transition: all ease-in-out 250ms;
+  -webkit-transition: all ease 300ms;
-  transition: all ease-in-out 250ms;
+  transition: all ease 300ms;
 }
 
 .animation-left.ng-enter {
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.001s;
+  -webkit-transition-delay: 0.01s;
-  transition-delay: 0.001s;
+  transition-delay: 0.01s;
+  opacity: 0;
 }
 .animation-right.ng-enter {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.001s;
+  -webkit-transition-delay: 0.01s;
-  transition-delay: 0.001s;
+  transition-delay: 0.01s;
+  opacity: 0;
 }
 .animation-left.ng-enter.ng-enter-active,
 .animation-right.ng-enter.ng-enter-active {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
+  opacity: 1;
 }
 
 .animation-left.ng-leave,
 .animation-right.ng-leave {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
+  opacity: 0;
 }
 .animation-left.ng-leave.animation-left.ng-leave-active {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.001s;
+  -webkit-transition-delay: 0.01s;
-  transition-delay: 0.001s;
+  transition-delay: 0.01s;
+  opacity: 0;
 }
 .animation-right.ng-leave.animation-right.ng-leave-active {
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.001s;
+  -webkit-transition-delay: 0.01s;
-  transition-delay: 0.001s;
+  transition-delay: 0.01s;
+  opacity: 0;
 }
 
 .tab-view {