From 5b957961602dba2a7c1f3dcd0f3aaf88f4fc4087 Mon Sep 17 00:00:00 2001
From: sovanna <sovanna.hing@gmail.com>
Date: Sun, 19 Jan 2020 15:07:41 +0100
Subject: [PATCH] fix(mobile/shop): Corrects drag/drop because of transform3d

---
 static/css/order-hardware.css | 52 ++++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css
index 94b05b7..66c915e 100644
--- a/static/css/order-hardware.css
+++ b/static/css/order-hardware.css
@@ -281,17 +281,20 @@
   }
 
   #root-shop .layout>aside.aside.menu-opened {
-    transform: translate3d(0, 0, 0);
-    transition: transform .3s;
+    /*transform: translate3d(0, 0, 0);*/
+    transition: left .3s;
     width: 310px;
+    left: 0;
   }
 
   #root-shop .layout>aside.aside.menu-opened + section.main {
-    transform: translate3d(310px, 0, 0);
-    transition: transform .3s;
+    /*transform: translate3d(310px, 0, 0);*/
+    transition: left .3s;
+    left: 310px;
+    position: relative;
   }
 
-  #root-shop .layout>aside.aside.menu-opened + section.main:after {
+  /*#root-shop .layout>aside.aside.menu-opened + section.main:after {
     content: '';
     position: absolute;
     height: 100%;
@@ -300,14 +303,14 @@
     top: 0;
     bottom: 0;
     z-index: 10;
-  }
+  }*/
 
   #root-shop .layout>aside.aside {
-    transform: translate3d(-310px, 0px, 0px);
-    transition: transform .3s;
+    /*transform: translate3d(-310px, 0px, 0px);*/
+    transition: left .3s;
     position: fixed;
     z-index: 1;
-    left: 0;
+    left: -310px;
     width: 310px;
     height: 100%;
   }
@@ -317,8 +320,9 @@
   }
 
   #root-shop .layout>aside.aside + section.main {
-    transform: translate3d(0, 0, 0);
-    transition: transform .3s;
+    /*transform: translate3d(0, 0, 0);*/
+    transition: left .3s;
+    left: 0;
   }
 
   #root-shop .layout>section.main {
@@ -364,17 +368,20 @@
   }
 
   #root-shop .layout>aside.aside.menu-opened {
-    transform: translate3d(0, 0, 0);
-    transition: transform .3s;
+    /*transform: translate3d(0, 0, 0);*/
+    transition: left .3s;
     width: 310px;
+    left: 0;
   }
 
   #root-shop .layout>aside.aside.menu-opened + section.main {
-    transform: translate3d(310px, 0, 0);
-    transition: transform .3s;
+    /*transform: translate3d(310px, 0, 0);*/
+    transition: left .3s;
+    left: 310px;
+    position: relative;
   }
 
-  #root-shop .layout>aside.aside.menu-opened + section.main:after {
+  /*#root-shop .layout>aside.aside.menu-opened + section.main:after {
     content: '';
     position: absolute;
     height: 100%;
@@ -382,14 +389,14 @@
     background-color: rgba(0, 0, 0, .8);
     top: 0;
     bottom: 0;
-  }
+  }*/
 
   #root-shop .layout>aside.aside {
-    transform: translate3d(-310px, 0px, 0px);
-    transition: transform .3s;
+    /*transform: translate3d(-310px, 0px, 0px);*/
+    transition: left .3s;
     position: fixed;
     z-index: 1;
-    left: 0;
+    left: -310px;
     width: 310px;
     height: 100%;
   }
@@ -399,8 +406,9 @@
   }
 
   #root-shop .layout>aside.aside + section.main {
-    transform: translate3d(0, 0, 0);
-    transition: transform .3s;
+    /*transform: translate3d(0, 0, 0);*/
+    transition: left .3s;
+    left: 0;
   }
 
   #root-shop .layout>section.main {