61 lines
995 B
CSS
61 lines
995 B
CSS
|
.noscroll {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-background {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu {
|
||
|
|
background: rgba(255, 255, 255, 1);
|
||
|
|
position: fixed;
|
||
|
|
z-index: 11;
|
||
|
|
padding: 8px 0;
|
||
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
|
||
|
|
overflow-y: auto;
|
||
|
|
max-height: 80vh;
|
||
|
|
|
||
|
|
transform-origin: top left;
|
||
|
|
-webkit-animation: new-menu-animation .08s ease-out forwards;
|
||
|
|
-moz-animation: new-menu-animation .08s ease-out forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes new-menu-animation {
|
||
|
|
from {
|
||
|
|
transform: scaleY(0);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: scaleY(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes new-menu-animation {
|
||
|
|
from {
|
||
|
|
transform: scaleY(0);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: scaleY(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu li {
|
||
|
|
cursor: pointer;
|
||
|
|
display: block;
|
||
|
|
font-size: 16px;
|
||
|
|
padding: 16px 32px 16px 16px;
|
||
|
|
color: rgba(0, 0, 0, 0.87);
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu li:hover {
|
||
|
|
background: rgba(0, 0, 0, 0.07);
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu li:active {
|
||
|
|
background: rgba(0, 0, 0, 0.07);
|
||
|
|
}
|