Merge pull request #2694 from matiu/anims

State Anims

src/css/main.css

@@ -140,7 +140,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
 
 .main {
   background-color: #fff;
-  padding: 45px 0 58px 0;
+  padding: 0 0 58px 0;
   position: relative;
 }
 

src/css/mobile.css

@@ -378,51 +378,69 @@ a, button, .button, input, textarea, select {
   z-index: 1002;
 }
 
-/*******************************************/
+/* === */
 
-.pin {
-  margin: 0 auto;
-  width: 25%;
-  text-align: center;
-  overflow: hidden;
+
+/* Have to set height explicity on ui-view 
+to prevent collapsing during animation*/
+.main[ui-view]{
+ height: 100%; /* TODO */
 }
 
-.pin-box {
-  color: #fff;
-  font-size: 14px;
-  width: 25%;
-  float: left;
+.ui-view-container {
+  position: relative;
+  height: 100%;
 }
 
-.pin-numbers {
+[ui-view].slideDown,
+[ui-view].slideRight,
+[ui-view].slideLeft {
+  z-index:100;
+}
+
+#mainSection, #mainSectionDup {
+  height:100%;
   position: absolute;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  height: 72%;
+  left: 0;
+  right: 0;
+
+  animation-timing-function: linear;
+  animation-duration: .3s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-duration: .3s;
+  -webkit-animation-iteration-count: 1;
+  -webkit-animation-fill-mode: both;
 }
 
-.pin-button-bar {
-  height: 25%;
+.CslideInUp {
+  transform: translate3d(0, 100%, 0);
+  -webkit-transform: translate3d(0, 100%, 0);
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+  z-index: 1003;
+}
+.CslideOutDown {
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
+  z-index: 1003;
+}
+.CslideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+  z-index: 1003;
+}
+.CslideInRight {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+  z-index: 1003;
 }
 
-a.pin-button {
-  margin: 2.5%;
-  display: inline-block;
-  color: #CED5DC;
-  font-size: 210%;
-  font-weight: 100;
-  border: 1px solid #4B6178;
-  border-radius: 100%;
-  width: 70px;
-  padding-top: 0.5rem;
-  height: 70px;
-}
-
-a.pin-button:active {
-  color: #fff;
-  background-color: #3E5367;
-}
+/* == */
 
 .icon-circle, .icon-circle-active {
   color:  #1ABC9C;
@@ -688,95 +706,6 @@ textarea:focus
   color: #B7C2CD;
 }
 
-.animation-slide {
-  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-slide.ng-enter, 
-.animation-slide.ng-leave {
-  -webkit-transition: 0.25s ease all;
-  transition: 0.25s ease all;
-}
-
-.animation-slide.ng-enter.ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  visibility: visible;
-}
-
-.animation-slide.ng-leave {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  visibility: hidden;
-}
-
-.animation-left.ng-enter {
-  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-right.ng-enter {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
-.animation-up.ng-enter {
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-}
-.animation-down.ng-enter {
-  -webkit-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-}
-
-.animation-left.ng-leave.animation-left.ng-leave-active {
-  -webkit-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-right.ng-leave.animation-right.ng-leave-active {
-  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
-.animation-up.ng-leave.animation-up.ng-leave-active {
-  -webkit-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-.animation-down.ng-leave.animation-down.ng-leave-active {
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.1s;
-  visibility: hidden;
-}
-
 .tab-view {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
@@ -798,14 +727,6 @@ textarea:focus
   transform: translate3d(-100%, 0, 0) !important;
 }
 
-.animated.slideInRight, 
-.animated.slideInLeft, 
-.animated.slideInUp, 
-.animated.slideInDown {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-}
-
 /* removes 300ms in IE */
 -ms-touch-action: manipulation; /* IE10 /
 touch-action: manipulation; /* IE11+ */