From 475eb92d82247dc09a84eaa4e5a0f9db7f809639 Mon Sep 17 00:00:00 2001 From: sovanna Date: Wed, 15 Jan 2020 10:40:53 +0100 Subject: [PATCH] fix(mobile/landscape/lowres): Hides aside menu --- static/css/order-hardware.css | 62 +++++++++++++++++++++++++++++++---- 1 file changed, 56 insertions(+), 6 deletions(-) diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css index 2a3ac43..52d6725 100644 --- a/static/css/order-hardware.css +++ b/static/css/order-hardware.css @@ -249,16 +249,21 @@ margin-bottom: 1em; } - #root-shop .mobileBtnDisplaySideMenu, - #root-shop .mobileCloseMenu { - display: none !important; + #root-shop .mobileBtnDisplaySideMenu { + background-color: #0d3547; + 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 .mobileCloseMenu button { - -webkit-appearance: none !important; - background: none !important; - border: none !important; + -webkit-appearance: none; + background: none; + border: none; } #root-shop table { @@ -271,6 +276,51 @@ display: flex !important; 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)