camerin
/
portfolio
mirror of https://github.com/RaspberryProgramming/portfolio.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Changed navigation css to properly animate.

This commit is contained in:
Camerin Figueroa 2021-09-20 15:12:55 -04:00
parent 659aff38d0
commit 2142310d8d
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/css/Navigation.css
View File

@ -1,5 +1,6 @@
.Navigation { .Navigation {
height: 75px;
height: 70px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: #3F3F4A; background-color: #3F3F4A;
@ -15,17 +16,20 @@
flex-direction: column; flex-direction: column;
align-items:center; align-items:center;
justify-content: space-around; justify-content: space-around;
transition: height 4s ease-in-out;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
height:70px; height:70px;
transition: height 250ms ease-in-out; transition: background-color 250ms ease-in, height 250ms ease-in;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 10;
background-color: inherit;
} }
.Navigation a:hover { .Navigation a:hover {
background-color: #2F2F32; background-color: #2F2F32;
height: 90px; height: 90px;
z-index: 10; transition: background-color 300ms ease-out, height 300ms ease-out;
transition: height 300ms ease-in-out; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
} }