Merge branch 'caffinatedmonkey-styles't push origin master

resources/assets/js/components/main-wrapper/extra/index.vue

@@ -110,7 +110,6 @@
         padding: 24px 16px $footerHeight;
         background: $colorExtraBgr;
         max-height: calc(100vh - #{$headerHeight + $footerHeight});
-        display: none;
         color: $color2ndText;
         overflow: auto;
         -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -176,16 +175,18 @@
 
         @media only screen and (max-width : 1024px) {
             position: fixed;
-            height: calc(100vh - #{$headerHeight + $footerHeight});
-            padding-bottom: $footerHeight; // make sure the footer can never overlap the content
-            width: $extraPanelWidth;
-            z-index: 5;
             top: $headerHeight;
-            right: -100%;
+            right: 0;
-            transition: right .3s ease-in;
+            height: calc(100vh - #{$headerHeight + $footerHeight});
+            width: $extraPanelWidth;
+            padding-bottom: $footerHeight; // make sure the footer can never overlap the content
+            z-index: 5;
+
+            transform: translateX(100%);
+            transition: transform .3s $slideAnimation;
 
             &.showing {
-                right: 0;
+                transform: translateX(0);
             }
         }
 

resources/assets/js/components/main-wrapper/main-content/index.vue

@@ -105,6 +105,7 @@
             align-items: center;
             align-content: stretch;
             display: flex;
+            line-height: 1em;
 
             span:first-child {
                 flex: 1;

resources/assets/js/components/main-wrapper/sidebar/index.vue

@@ -263,16 +263,17 @@
 
         @media only screen and (max-width : 667px) {
             position: fixed;
-            height: calc(100vh - #{$headerHeight + $footerHeight});
-            padding-bottom: $footerHeight; // make sure the footer can never overlap the content
-            width: 100%;
-            z-index: 99;
             top: $headerHeight;
-            left: -100%;
+            height: calc(100vh - #{$headerHeight + $footerHeight});
-            transition: left .3s ease-in;
+            width: 100%;
+            padding-bottom: $footerHeight; // make sure the footer can never overlap the content
+            z-index: 99;
+
+            transform: translateX(-100%);
+            transition: transform .3s $slideAnimation;
 
             &.showing {
-                left: 0;
+                transform: translateX(0);
             }
         }
     }

resources/assets/sass/partials/_vars.scss

@@ -35,3 +35,4 @@ $footerHeight: 64px;
 $mainHeadingHeight: 64px;
 
 $extraPanelWidth: 334px;
+$slideAnimation: cubic-bezier(0,0,0.3,1);