Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-19 20:41:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

start improvement over huge dialog content

Browse source
This commit is contained in:
Marcos Moura 2016-12-07 20:07:19 -02:00
parent 6a55297883
commit 9cff66ae9b
2 changed files with 51 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
docs/src/pages/components/Dialog.vue
View file

@ -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>

9
src/components/mdDialog/mdDialog.scss
View file

@ -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;