fix(MdApp): fix styles after ssr support

Author: marcosmoura

src/components/MdApp/MdApp.vue

@@ -70,6 +70,7 @@
   @import "~components/MdLayout/mixins";
 
   .md-app {
+    display: flex;
     overflow: hidden;
     position: relative;
 
@@ -122,9 +123,17 @@
       }
 
       .md-app-content {
-        margin-top: -64px;
+        margin: -64px 24px 24px;
         position: relative;
         z-index: 2;
+
+        @include md-layout-small {
+          margin: -64px 16px 16px;
+        }
+
+        @include md-layout-xsmall {
+          margin: -64px 8px 8px;
+        }
       }
     }
   }
@@ -157,9 +166,15 @@
   }
 
   .md-app-container {
+    flex: 1;
+    display: flex;
     overflow: auto;
     transform: translate3D(0, 0, 0);
     transition: padding-left .4s $md-transition-default-timing;
     will-change: padding-left;
   }
+
+  .md-app-scroller {
+    flex: 1;
+  }
 </style>

src/components/MdApp/MdAppContent.vue

@@ -21,9 +21,13 @@
 </script>
 
 <style lang="scss">
-  .md-app-content.md-card {
-    margin-right: 16px;
-    margin-left: 16px;
-    overflow: visible;
+  .md-app-content {
+    height: 100%;
+
+    .md-card {
+      margin-right: 16px;
+      margin-left: 16px;
+      overflow: visible;
+    }
   }
 </style>

src/components/MdApp/MdAppInternalDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-app md-app-internal-drawer md-layout-column" :class="appClasses">
+  <div class="md-app md-app-internal-drawer md-layout-column" :class="[appClasses, $mdActiveTheme]">
     <slot name="md-app-toolbar"></slot>
 
     <main class="md-app-container md-flex md-layout-row" :style="[containerStyles, contentStyles]" :class="[$mdActiveTheme, scrollerClasses]">
@@ -25,6 +25,8 @@
   @import "~components/MdAnimation/variables";
 
   .md-app-internal-drawer {
+    flex-direction: column;
+
     .md-app-scroller {
       overflow: auto;
     }

src/components/MdApp/MdAppSideDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-app md-app-side-drawer md-layout-row" :class="appClasses">
+  <div class="md-app md-app-side-drawer md-layout-row" :class="[appClasses, $mdActiveTheme]">
     <slot name="md-app-drawer"></slot>
 
     <main class="md-app-container md-flex md-layout-column" :class="[$mdActiveTheme, scrollerClasses]" :style="contentStyles" @scroll.passive="handleScroll">
@@ -20,3 +20,13 @@
     mixins: [MdAppMixin]
   })
 </script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+
+  .md-app-side-drawer {
+    .md-app-container {
+      flex-direction: column;
+    }
+  }
+</style>

src/components/MdApp/theme.scss

@@ -0,0 +1,5 @@
+.md-app:not(.md-overlap) {
+  @include md-theme-component() {
+    @include md-theme-property(background-color, background);
+  }
+}

src/theme/all.scss

@@ -1,3 +1,4 @@
+@import "../components/MdApp/theme";
 @import "../components/MdAutocomplete/theme";
 @import "../components/MdAvatar/theme";
 @import "../components/MdBottomBar/theme";