occheung
/
web2019
forked from M-Labs/web2019
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(mobile/landscape/lowres): Hides aside menu

This commit is contained in:
sovanna 2020-01-15 10:40:53 +01:00
parent 4ebe4f253c
commit 475eb92d82
1 changed files with 56 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
static/css/order-hardware.css
View File

@ -249,16 +249,21 @@
margin-bottom: 1em; margin-bottom: 1em;
} }
#root-shop .mobileBtnDisplaySideMenu, #root-shop .mobileBtnDisplaySideMenu {
#root-shop .mobileCloseMenu { background-color: #0d3547;
display: none !important; border-bottom-right-radius: 30px;
border-top-right-radius: 30px;
width: 80px;
padding: 5px 0 5px 10px;
margin-bottom: 15px;
margin-left: -1.3rem;
} }
#root-shop .mobileBtnDisplaySideMenu button, #root-shop .mobileBtnDisplaySideMenu button,
#root-shop .mobileCloseMenu button { #root-shop .mobileCloseMenu button {
-webkit-appearance: none !important; -webkit-appearance: none;
background: none !important; background: none;
border: none !important; border: none;
} }
#root-shop table { #root-shop table {
@ -271,6 +276,51 @@
display: flex !important; display: flex !important;
justify-content: space-between; justify-content: space-between;
} }
#root-shop .layout>aside.aside.menu-opened {
transform: translate3d(0, 0, 0);
transition: transform .3s;
width: 310px;
}
#root-shop .layout>aside.aside.menu-opened + section.main {
transform: translate3d(310px, 0, 0);
transition: transform .3s;
}
#root-shop .layout>aside.aside.menu-opened + section.main:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .8);
top: 0;
bottom: 0;
}
#root-shop .layout>aside.aside {
transform: translate3d(-310px, 0px, 0px);
transition: transform .3s;
position: fixed;
z-index: 1;
left: 0;
width: 310px;
height: 100%;
}
#root-shop .layout>aside.aside:after {
width: 0;
}
#root-shop .layout>aside.aside + section.main {
transform: translate3d(0, 0, 0);
transition: transform .3s;
}
#root-shop .layout>section.main {
flex: 1;
max-width: 100%;
}
} }
/* /*
##Device = Most of the Smartphones Mobiles (Portrait) ##Device = Most of the Smartphones Mobiles (Portrait)