diff options
| author | Valentin Popov <info@valentineus.link> | 2018-12-07 00:07:26 +0300 |
|---|---|---|
| committer | Valentin Popov <info@valentineus.link> | 2018-12-07 00:07:26 +0300 |
| commit | 6900263c525350b03fbda3601754cb99e71befb0 (patch) | |
| tree | 707c20281440782560f18dd4ca5dc9515102a0f3 | |
| parent | d280eb17cb1ee463fd5e807cb71f7ee26846b554 (diff) | |
| download | popov.link-6900263c525350b03fbda3601754cb99e71befb0.tar.xz popov.link-6900263c525350b03fbda3601754cb99e71befb0.zip | |
feat(css): Added navigation bar animation
Signed-off-by: Valentin Popov <info@valentineus.link>
| -rw-r--r-- | _scss/components/_navigation.scss | 20 |
1 files changed, 20 insertions, 0 deletions
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 { |