KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor demo updates

Browse Source
This commit is contained in:
euvl
2017-04-10 12:07:22 +01:00
parent fb02b6be93
commit ad6a20b944
2 changed files with 66 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
demo/src/App.vue
View File

@@ -16,7 +16,10 @@
</div> </div>
</modal> </modal>
<h2>Vue.js Modal</h2> <h2>Vue.js Modal
<a href="https://github.com/euvl/vue-js-modal/blob/master/README.md" target="readme">Readme</a>
<a href="https://github.com/euvl/vue-js-modal/issues" target="issues">Issues</a>
</h2>
<pre style="line-height: 1.5;"> <pre style="line-height: 1.5;">
npm install --save vue-js-modal npm install --save vue-js-modal
@@ -48,21 +51,20 @@
<tr> <tr>
<td><b>Mixed</b></td> <td><b>Mixed</b></td>
<td> <td>
Is resizable, but if the size of the screen is changed modal will return to its initial size as well as it will try to adapt to the page size Is resizable, but if the size of the screen is changed - modal will return to its initial size as well as it will try to adapt to the page size
</td> </td>
</tr> </tr>
</table> </table>
<div style="margin-top: 20px; margin-bottom: 20px;"> <div style="margin-top: 20px; margin-bottom: 20px;">
<button @click="show()">Simple</button> <button @click="show(false, false, false)">Simple</button>
<button @click="show(true)">Resizable</button> <button @click="show(true, false, false)">Resizable</button>
<button @click="show(false, true)">Adaptive</button> <button @click="show(false, true, false)">Adaptive</button>
<button @click="show(true, true)">Mixed</button> <button @click="show(true, true, false)">Mixed</button>
<button @click="show(false, false, true)">Draggable (under development)</button> <button @click="show(false, false, true)">Draggable</button>
</div> </div>
<props-table /> <props-table />
</div> </div>
</template> </template>
@@ -100,45 +102,53 @@ export default {
<style lang="scss"> <style lang="scss">
body { body {
margin: 0; margin: 0;
padding: 50px; padding: 50px;
cursor: default; cursor: default;
box-sizing: border-box; box-sizing: border-box;
} }
pre { pre {
color: #595959; color: #595959;
background-color: #f3f3f3; background-color: #f3f3f3;
border: 1px solid #eee; border: 1px solid #eee;
} }
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: #2c3e50; color: #2c3e50;
} }
h1, h1,
h2 { h2 {
font-weight: normal; font-weight: normal;
a {
font-size: 12px;
}
}
a {
color: inherit;
} }
button { button {
outline: none; outline: none;
background: white; background: white;
border: 0; border: 0;
padding: 6px 18px; padding: 6px 18px;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
background: white; background: white;
color: #4db3ff; color: #4db3ff;
border: 1px solid #4db3ff; border: 1px solid #4db3ff;
&:hover { &:hover {
color: #20a0ff; color: #20a0ff;
border: 1px solid #20a0ff; border: 1px solid #20a0ff;
} }
} }
</style> </style>

46
src/Resizer.vue
View File

@@ -78,32 +78,32 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.vue-modal-resizer { .vue-modal-resizer {
display: block;
overflow: hidden;
position: absolute;
width: 12px;
height: 12px;
right: 0;
bottom: 0;
z-index: 9999999;
background: transparent;
cursor: se-resize;
&:after {
display: block; display: block;
overflow: hidden;
position: absolute; position: absolute;
width: 12px; content: '';
height: 12px;
right: 0;
bottom: 0;
z-index: 9999999;
background: transparent; background: transparent;
cursor: se-resize; left: 0;
top: 0;
width: 0;
height: 0;
border-bottom: 10px solid #ddd;
border-left: 10px solid transparent;
}
&:after { &.clicked:after {
display: block; border-bottom: 10px solid #369BE9;
position: absolute; }
content: '';
background: transparent;
left: 0;
top: 0;
width: 0;
height: 0;
border-bottom: 10px solid #ddd;
border-left: 10px solid transparent;
}
&.clicked:after {
border-bottom: 10px solid #369BE9;
}
} }
</style> </style>