aboutsummaryrefslogtreecommitdiff
path: root/src/components/modal/modal.vue
diff options
context:
space:
mode:
authortaehoon <th.dev91@gmail.com>2019-02-08 22:00:03 -0500
committertaehoon <th.dev91@gmail.com>2019-02-15 13:34:33 -0500
commitb6d197ce1de0f0b49f3d01bff3030734f8c8113c (patch)
tree28d5bc1b90f11a1ee2f1ed421ca25ef9a7d672a0 /src/components/modal/modal.vue
parentb24db12e1cc318e862169355a22f051d3ea2e809 (diff)
Remove modal component
Diffstat (limited to 'src/components/modal/modal.vue')
-rw-r--r--src/components/modal/modal.vue101
1 files changed, 0 insertions, 101 deletions
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>