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

Stopped using sass (as far as css file are tiny as they are), release 1.0.19

Browse Source
This commit is contained in:
euvl
2017-04-27 19:22:39 +03:00
parent b0b33f95cd
commit 31d1a71a3a
5 changed files with 47 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/src/components/ModesTable.vue
View File

@@ -21,7 +21,7 @@
<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 try to adapt to the page size
</td> </td>
</tr> </tr>
</table> </table>

14
dist/index.js vendored
View File

@@ -906,7 +906,7 @@ exports = module.exports = __webpack_require__(1)();
// module // module
exports.push([module.i, ".v--modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.v--modal-overlay .modal[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}.v--modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.v--modal.v--modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}", ""]); exports.push([module.i, ".v--modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.v--modal-overlay .modal[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.v--modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.v--modal.v--modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}", ""]);
// exports // exports
@@ -1013,13 +1013,13 @@ var content = __webpack_require__(8);
if(typeof content === 'string') content = [[module.i, content, '']]; if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals; if(content.locals) module.exports = content.locals;
// add the styles to the DOM // add the styles to the DOM
var update = __webpack_require__(3)("3bb0039f", content, true); var update = __webpack_require__(3)("5c3a880f", content, true);
// Hot Module Replacement // Hot Module Replacement
if(false) { if(false) {
// When the styles change, update the <style> tags // When the styles change, update the <style> tags
if(!content.locals) { if(!content.locals) {
module.hot.accept("!!./../node_modules/css-loader/index.js!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-40dd3b1e&scoped=true!./../node_modules/sass-loader/lib/loader.js!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Modal.vue", function() { module.hot.accept("!!./../node_modules/css-loader/index.js?minimize!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-40dd3b1e&scoped=true!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Modal.vue", function() {
var newContent = require("!!./../node_modules/css-loader/index.js!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-40dd3b1e&scoped=true!./../node_modules/sass-loader/lib/loader.js!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Modal.vue"); var newContent = require("!!./../node_modules/css-loader/index.js?minimize!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-40dd3b1e&scoped=true!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Modal.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']]; if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent); update(newContent);
}); });
@@ -1039,13 +1039,13 @@ var content = __webpack_require__(9);
if(typeof content === 'string') content = [[module.i, content, '']]; if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals; if(content.locals) module.exports = content.locals;
// add the styles to the DOM // add the styles to the DOM
var update = __webpack_require__(3)("c392065e", content, true); var update = __webpack_require__(3)("da8e557e", content, true);
// Hot Module Replacement // Hot Module Replacement
if(false) { if(false) {
// When the styles change, update the <style> tags // When the styles change, update the <style> tags
if(!content.locals) { if(!content.locals) {
module.hot.accept("!!./../node_modules/css-loader/index.js!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-60fe12fc!./../node_modules/sass-loader/lib/loader.js!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Resizer.vue", function() { module.hot.accept("!!./../node_modules/css-loader/index.js?minimize!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-60fe12fc!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Resizer.vue", function() {
var newContent = require("!!./../node_modules/css-loader/index.js!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-60fe12fc!./../node_modules/sass-loader/lib/loader.js!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Resizer.vue"); var newContent = require("!!./../node_modules/css-loader/index.js?minimize!./../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-60fe12fc!./../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Resizer.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']]; if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent); update(newContent);
}); });

2
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "vue-js-modal", "name": "vue-js-modal",
"description": "Modal Component for Vue.js", "description": "Modal Component for Vue.js",
"version": "1.0.18", "version": "1.0.19",
"author": "euvl <yev.vlasenko@gmail.com>", "author": "euvl <yev.vlasenko@gmail.com>",
"main": "dist/index.js", "main": "dist/index.js",
"repository": { "repository": {

47
src/Modal.vue
View File

@@ -285,7 +285,7 @@
} }
}; };
</script> </script>
<style lang="scss" scoped> <style scoped>
.v--modal-overlay { .v--modal-overlay {
position: fixed; position: fixed;
left: 0; left: 0;
@@ -295,14 +295,29 @@
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
z-index: 999; z-index: 999;
opacity: 1; opacity: 1;
}
.modal { .v--modal-overlay .modal {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
background-color: white;
}
background-color: white; .v--modal {
} background: white;
text-align: left;
border-radius: 3px;
box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);
padding: 0;
}
.v--modal.v--modal-fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
left: 0;
top: 0;
} }
.overlay-fade-enter-active, .overlay-fade-leave-active { .overlay-fade-enter-active, .overlay-fade-leave-active {
@@ -321,22 +336,4 @@
opacity: 0; opacity: 0;
transform: translateY(-20px); transform: translateY(-20px);
} }
.v--modal {
background: white;
text-align: left;
border-radius: 3px;
box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);
padding: 0;
//background: yellow !important;
&.v--modal-fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
left: 0;
top: 0;
}
}
</style> </style>

32
src/Resizer.vue
View File

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