diff --git a/css/src/main.css b/css/src/main.css index 14a80ce5a..d3c20ac28 100644 --- a/css/src/main.css +++ b/css/src/main.css @@ -1116,7 +1116,7 @@ button.gray:focus, transition: height 250ms ease-in; } -.side-nav.wallets.open { +.side-nav.wallets.pullDown { height: 100%; } @@ -1417,6 +1417,69 @@ a.text-warning:hover {color: #FD7262;} /* Animation popup */ +.pullDown { + animation-name: pullDown; + -webkit-animation-name: pullDown; + + animation-duration: 1.1s; + -webkit-animation-duration: 1.1s; + + animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; + + transform-origin: 50% 0%; + -ms-transform-origin: 50% 0%; + -webkit-transform-origin: 50% 0%; +} + +@keyframes pullDown { + 0% { + transform: scaleY(0.1); + } + 40% { + transform: scaleY(1.02); + } + 60% { + transform: scaleY(0.98); + } + 80% { + transform: scaleY(1.01); + } + 100% { + transform: scaleY(0.98); + } + 80% { + transform: scaleY(1.01); + } + 100% { + transform: scaleY(1); + } +} + +@-webkit-keyframes pullDown { + 0% { + -webkit-transform: scaleY(0.1); + } + 40% { + -webkit-transform: scaleY(1.02); + } + 60% { + -webkit-transform: scaleY(0.98); + } + 80% { + -webkit-transform: scaleY(1.01); + } + 100% { + -webkit-transform: scaleY(0.98); + } + 80% { + -webkit-transform: scaleY(1.01); + } + 100% { + -webkit-transform: scaleY(1); + } +} + /*-----------------------------------------------------------------*/ .w-popup-menu{ diff --git a/views/includes/sidebar.html b/views/includes/sidebar.html index f3ecef8b6..ef5cafda5 100644 --- a/views/includes/sidebar.html +++ b/views/includes/sidebar.html @@ -46,7 +46,7 @@