From 9cff66ae9bcf7a83bcdc6e3274dad0967c3f222c Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 7 Dec 2016 20:07:19 -0200
Subject: [PATCH] start improvement over huge dialog content

---
 docs/src/pages/components/Dialog.vue  | 43 ++++++++++++++++++++++++++-
 src/components/mdDialog/mdDialog.scss |  9 ++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue
index a65f878..22df957 100644
--- a/docs/src/pages/components/Dialog.vue
+++ b/docs/src/pages/components/Dialog.vue
@@ -280,11 +280,52 @@
       <div slot="example">
         <example-box card-title="Custom">
           <div class="dialog-fab" slot="demo">
-            <md-dialog md-open-from="#custom" md-close-to="#custom" ref="dialog1">
+            <!-- <md-dialog md-open-from="#custom" md-close-to="#custom" ref="dialog1">
               <md-dialog-title>Lorem ipsum dolor sit amet</md-dialog-title>
 
               <md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>
 
+              <md-dialog-actions>
+                <md-button class="md-primary" @click="closeDialog('dialog1')">Cancel</md-button>
+                <md-button class="md-primary" @click="closeDialog('dialog1')">Ok</md-button>
+              </md-dialog-actions>
+            </md-dialog> -->
+
+            <md-dialog md-open-from="#custom" md-close-to="#custom" ref="dialog1">
+              <md-dialog-title>Lorem ipsum dolor sit amet</md-dialog-title>
+
+              <md-dialog-content>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor adipisci quos consectetur eligendi deleniti, voluptatibus officia a, ut voluptas repudiandae recusandae commodi illum labore tempora ex quis quisquam doloremque sit.</p>
+              </md-dialog-content>
+
               <md-dialog-actions>
                 <md-button class="md-primary" @click="closeDialog('dialog1')">Cancel</md-button>
                 <md-button class="md-primary" @click="closeDialog('dialog1')">Ok</md-button>
diff --git a/src/components/mdDialog/mdDialog.scss b/src/components/mdDialog/mdDialog.scss
index 24449e4..cc05b22 100644
--- a/src/components/mdDialog/mdDialog.scss
+++ b/src/components/mdDialog/mdDialog.scss
@@ -34,6 +34,8 @@
   min-width: 280px;
   max-width: 80%;
   max-height: 80%;
+  display: flex;
+  flex-flow: column;
   overflow: hidden;
   position: relative;
   z-index: 110;
@@ -67,6 +69,13 @@
 
 .md-dialog-content {
   padding: 0 24px 24px;
+  flex: 1;
+  overflow: auto;
+  background: linear-gradient(to bottom, #fff 0, #fff 1px, transparent 1px),
+              linear-gradient(to bottom, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, .12) 1px, transparent 1px),
+              linear-gradient(to top, #fff 0, #fff 1px, transparent 1px),
+              linear-gradient(to top, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, .12) 1px, transparent 1px);
+  background-attachment: local, scroll, local, scroll;
 
   &:first-child {
     padding-top: 24px;