From 6900263c525350b03fbda3601754cb99e71befb0 Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Fri, 7 Dec 2018 01:07:26 +0400 Subject: feat(css): Added navigation bar animation Signed-off-by: Valentin Popov --- _scss/components/_navigation.scss | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/_scss/components/_navigation.scss b/_scss/components/_navigation.scss index 652da46..3943f51 100644 --- a/_scss/components/_navigation.scss +++ b/_scss/components/_navigation.scss @@ -23,6 +23,7 @@ text-align: center; text-decoration: none; + &:active, &:focus, &:hover { border: 0; @@ -34,6 +35,25 @@ float: right; } +@media(min-width: 382px) { + .nav-pills { + li { + display: inline-block; + transform: perspective(1px) translateZ(0); + transition-duration: .3s; + transition-property: transform; + transition-timing-function: ease-out; + vertical-align: middle; + + &:active, + &:focus, + &:hover { + transform: translateY(8px); + } + } + } +} + @media (max-width: 382px) { .nav-right, .nav-pills li { -- cgit v1.2.3