aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/modal/modal.js21
-rw-r--r--src/components/modal/modal.vue101
2 files changed, 0 insertions, 122 deletions
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
deleted file mode 100644
index 963f4bcd..00000000
--- a/src/components/modal/modal.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const Modal = {
- props: ['show', 'title'],
- methods: {
- close: function () {
- this.$emit('close')
- },
- handleKeydown: function (e) {
- if (this.show && e.keyCode === 27) {
- this.close()
- }
- }
- },
- mounted: function () {
- document.addEventListener('keydown', this.handleKeydown)
- },
- destroyed: function () {
- document.removeEventListener('keydown', this.handleKeydown)
- }
-}
-
-export default Modal
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
deleted file mode 100644
index 2e3cbe75..00000000
--- a/src/components/modal/modal.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
- <transition name="modal">
- <div class="modal-mask" @click="close" v-if="show">
- <div class="modal-container" @click.stop>
- <div class="modal-header">
- <h3 class="modal-title">{{title}}</h3>
- </div>
- <slot></slot>
- <a class="modal-close" @click="close"><i class="icon-cancel"></i></a>
- </div>
- </div>
- </transition>
-</template>
-
-<script src="./modal.js"></script>
-
-<style lang="scss">
-.modal-mask {
- position: fixed;
- z-index: 9998;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(27,31,35,.5);
- transition: opacity .3s ease;
-}
-
-.modal-container {
- position: relative;
- display: flex;
- flex-direction: column;
- width: 450px;
- margin: 10vh auto;
- max-height: 80vh;
- max-width: 90vw;
- background-color: #fff;
- border: 1px solid #444d56;
- border-radius: 3px;
- box-shadow: 0 0 18px rgba(0,0,0,.4);
- transition: all .3s ease;
-}
-
-.modal-header {
- flex: none;
- background-color: #f6f8fa;
- border-bottom: 1px solid #d1d5da;
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
- padding: 16px;
- margin: 0;
-}
-
-h3.modal-title {
- font-size: 14px;
- font-weight: 600;
- color: #24292e;
- margin: 0;
-}
-
-.modal-close {
- position: absolute;
- top: 0;
- right: 0;
- padding: 16px;
- cursor: pointer;
-}
-
-.modal-body {
- border-bottom: 1px solid #e1e4e8;
- padding: 16px;
- overflow-y: auto;
-}
-
-.modal-footer {
- flex: none;
- border-top: 1px solid #e1e4e8;
- margin-top: -1px;
- padding: 16px;
-}
-
-/*
- * The following styles are auto-applied to elements with
- * transition="modal" when their visibility is toggled
- * by Vue.js.
- */
-
-.modal-enter {
- opacity: 0;
-}
-
-.modal-leave-active {
- opacity: 0;
-}
-
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
- -webkit-transform: scale(1.1);
- transform: scale(1.1);
-}
-</style>