aleabodo/react-animated-menus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug fixes and performance improvements

Browse Source
This commit is contained in:
Alexander Bell
2018-06-05 22:28:54 -07:00
parent e22e5d1915
commit 3215375309
4 changed files with 91 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/styles/Menu.css
View File

@ -3,7 +3,6 @@
background-color: transparent;
overflow: visible;
transition: opacity 0.5s;
border-radius: 20%;
cursor: pointer;
}
@ -11,61 +10,60 @@
opacity: 0.7;
}
.Menu_dots {
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.Menu_dotBox {
position: relative;
width: 100%;
height: 33.33%;
height: 33.3333%;
background-color: transparent;
}
.Menu_dot {
position: absolute;
width: 70%;
height: 70%;
width: 600%;
height: 500%;
border-radius: 100%;
top: 15%;
left: 15%;
transition: opacity 0.4s;
}
/*.Menu_dotA {
transform: translateY(0%) scale(1,1);
}
.Menu_dotB {
transform: translateY(79%) scale(1,1);
}
.Menu_dotC {
transform: translateY(157%) scale(1,1);
}*/
.Menu_dotA {
transform: translate(-44.5%, -44%) scale(0.1,0.14);
}
.Menu_dotB {
transform: translate(-44.5%, -44%) scale(0.1,0.14);
}
.Menu_dotC {
transform: translate(-44.5%, -44%) scale(0.1,0.14);
}
.Menu:hover .Menu_dot {
opacity: 1;
}
.Menu_elements {
position: absolute;
top: -6.5%;
left: -265%;
width: 644%;
height: 306%;
background-color: transparent;
display: none;
overflow: visible;
}
.Menu_element {
position: relative;
width: 100%;
height: 33.33%;
font-size: 0.8em;
text-align: center;
padding-top: 15%;
box-sizing: border-box;
}
.Menu_button {
position: relative;
display: none;
width: 100%;
height: 100%;
text-align: center;
text-align: center;
box-sizing: border-box;
background-color: white;
transition: background-color 0.5s, padding 0.5s;
opacity: 0;
z-index: 1;
padding-top: 25%;
color: rgb(60, 60, 60);
}
.Menu_button:hover {
background-color: rgb(227, 227, 227);
@ -74,5 +72,4 @@
.Menu_button:active {
transition: background-color 0.1s;
background-color: rgb(207, 207, 207);
padding-left: 5%;
}