From b02b8832da1337edf3c5c20852e236196138bd07 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 23 Nov 2016 01:45:28 -0200
Subject: [PATCH] Improve template for mobile

---
 docs/src/components/DocsComponent.vue   | 11 +++++++++--
 docs/src/components/ExampleBox.vue      |  5 +++++
 src/components/mdSidenav/mdSidenav.scss |  8 +++++---
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/DocsComponent.vue b/docs/src/components/DocsComponent.vue
index 42b5138..281e0fc 100644
--- a/docs/src/components/DocsComponent.vue
+++ b/docs/src/components/DocsComponent.vue
@@ -2,13 +2,13 @@
   <div class="main-content component-docs">
     <div class="usage-content">
       <section class="component-description">
-        <h2 class="md-headline"># Component:</h2>
+        <h2 class="md-headline">Description</h2>
 
         <slot name="description"></slot>
       </section>
 
       <section class="api-documentation">
-        <h2 class="md-headline"># API Options:</h2>
+        <h2 class="md-headline">API Options</h2>
 
         <slot name="api"></slot>
       </section>
@@ -43,6 +43,8 @@
     flex: 1 1 45%;
 
     @media (max-width: 1024px) {
+      padding: 0;
+      flex: none;
       order: 2;
     }
   }
@@ -58,5 +60,10 @@
   .example-content {
     padding-left: 8px;
     flex: 1 1 55%;
+
+    @media (max-width: 1024px) {
+      padding: 0;
+      flex: none;
+    }
   }
 </style>
diff --git a/docs/src/components/ExampleBox.vue b/docs/src/components/ExampleBox.vue
index 5d16569..70277d4 100644
--- a/docs/src/components/ExampleBox.vue
+++ b/docs/src/components/ExampleBox.vue
@@ -32,6 +32,11 @@
 
   .example-tabs {
     margin-top: -48px;
+
+    @media (max-width: 480px) {
+      margin-top: -1px;
+      background-color: #fff;
+    }
   }
 </style>
 
diff --git a/src/components/mdSidenav/mdSidenav.scss b/src/components/mdSidenav/mdSidenav.scss
index f7aa741..9563c2e 100644
--- a/src/components/mdSidenav/mdSidenav.scss
+++ b/src/components/mdSidenav/mdSidenav.scss
@@ -27,9 +27,9 @@
     pointer-events: none;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    box-shadow: $material-shadow-16dp;
-    will-change: transform;
     transition: $swift-ease-out;
+    transition-property: transform;
+    will-change: transform;
   }
 
   .md-backdrop {
@@ -42,13 +42,15 @@
     pointer-events: none;
     background-color: rgba(#000, .54);
     opacity: 0;
-    will-change: opacity;
     transition: $swift-ease-in-out;
+    transition-property: opacity;
+    will-change: opacity;
   }
 }
 
 .md-sidenav.md-active {
   .md-sidenav-content {
+    box-shadow: $material-shadow-16dp;
     pointer-events: auto;
     transform: translate3D(0, 0, 0);
   }