1
0
mirror of https://github.com/ascribe/wp-theme synced 2024-12-22 17:23:55 +01:00

mobile menu refactor & tweaks

- transition between open/close
- clean up font sizes, spacing
This commit is contained in:
Matthias Kretschmann 2016-02-02 23:10:02 +01:00
parent d3ce8295cb
commit 62ea0e3b97

View File

@ -177,22 +177,32 @@
} }
.mobile-nav { .mobile-nav {
display: none; background-color: @blueDeep;
background-color: black;
position: absolute; position: absolute;
width: 120%; width: 120%;
left: -10%; left: -10%;
top: 0; top: 0;
text-align:center; text-align: center;
z-index:4; z-index: 4;
// open/close transition, slide in from top
transition: transform .2s ease-out;
transform: translate3d(0,-100%,0);
&.active {
transform: translate3d(0,0,0);
}
@media (min-width: @phoneWidth) {
display: none;
}
ul { ul {
padding: 40px 0 20px; padding: 30px 0 20px;
} }
li { li {
font-weight: 400; font-weight: @font-weight-normal;
padding-bottom: 15px; padding-bottom: 5px;
font-size: 13px;
a { a {
color: @white; color: @white;
@ -202,20 +212,12 @@
} }
} }
&:nth-child(-n+3) { &:nth-child(-n+3) {
font-size: 16px; &:extend(.large);
padding-bottom: 35px;
} }
&:nth-child(3) { &:nth-child(3) {
border-bottom:1px solid @white; border-bottom: 1px solid @white;
margin-bottom:25px; margin-bottom: 20px;
} padding-bottom: 20px;
}
@media screen and (max-width: @phoneWidth) {
display:none;
&.active {
display: block;
} }
} }
} }