adjust for browser 'feature' in Firefox/IE/Edge ignoring padding in sidebar

Author: chrisvfritz

themes/vue/layout/partials/sidebar.ejs

@@ -1,28 +1,30 @@
 <div class="sidebar">
-    <ul class="main-menu">
-        <%- partial('partials/main_menu', { context: 'sidebar' }) %>
-    </ul>
-    <div class="list">
-        <div class="main-sponsor">
-            <span>Platinum Sponsor</span><br>
-            <a href="https://stdlib.com" target="_blank" class="logo">
-                <img src="<%- url_for("/images/stdlib.png") %>">
+    <div class="sidebar-inner">
+        <ul class="main-menu">
+            <%- partial('partials/main_menu', { context: 'sidebar' }) %>
+        </ul>
+        <div class="list">
+            <div class="main-sponsor">
+                <span>Platinum Sponsor</span><br>
+                <a href="https://stdlib.com" target="_blank" class="logo">
+                    <img src="<%- url_for("/images/stdlib.png") %>">
+                </a>
+            </div>
+            <a class="become-backer" href="<%- url_for("/support-vuejs") %>">
+                Become a Sponsor
             </a>
+            <h2>
+                <%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %>
+                <% if (type !== 'cookbook') { %>
+                    <select class="version-select">
+                        <option value="SELF" selected>2.x</option>
+                        <option value="v1">1.0</option>
+                        <option value="012">0.12</option>
+                        <option value="011">0.11</option>
+                    </select>
+                <% } %>
+            </h2>
+            <%- partial('partials/toc', { type: type }) %>
         </div>
-        <a class="become-backer" href="<%- url_for("/support-vuejs") %>">
-            Become a Sponsor
-        </a>
-        <h2>
-            <%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %>
-            <% if (type !== 'cookbook') { %>
-                <select class="version-select">
-                    <option value="SELF" selected>2.x</option>
-                    <option value="v1">1.0</option>
-                    <option value="012">0.12</option>
-                    <option value="011">0.11</option>
-                </select>
-            <% } %>
-        </h2>
-        <%- partial('partials/toc', { type: type }) %>
     </div>
 </div>

themes/vue/source/css/_sidebar.styl

@@ -6,9 +6,6 @@
     top $header-height
     left 0
     bottom 0
-    padding $content-padding-top + 10px 0 60px 60px
-    width 260px
-    margin-right 20px
     overflow-x hidden
     overflow-y auto
     -webkit-overflow-scrolling touch
@@ -22,6 +19,9 @@
         padding-left 1em
     li
         margin-top .5em
+    .sidebar-inner
+        width 260px
+        padding $content-padding-top + 10px 20px 60px 60px
     .version-select
         vertical-align middle
         margin-left 5px
@@ -95,12 +95,13 @@
         height 100%
         top 0
         left 0
-        padding 60px 30px 20px
         box-shadow 0 0 10px rgba(0,0,0,.2)
-        box-sizing border-box
         transition all .4s cubic-bezier(0.4, 0, 0, 1)
         -webkit-transform translate(-280px, 0)
         transform translate(-280px, 0)
+        .sidebar-inner
+            padding 60px 30px 30px
+            box-sizing border-box
         .search-query
             width 200px
             margin-bottom 10px