btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

✨ Added show/hide button for password input

Browse Source 
⚡ Updated vector icons
This commit is contained in:
Liyas Thomas
2019-09-13 10:32:49 +05:30
parent d67e22e57b
commit 2f39f7f68b
3 changed files with 144 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
components/modal.vue
View File

@@ -1,60 +1,58 @@
<template>
<div label="import_modal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
<transition name="modal-fade">
<div class="modal-backdrop">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</transition>
</div>
</div>
</transition>
</template>
<style scoped>
.modal-mask {
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-backdrop {
position: fixed;
z-index: 998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
max-width: 800px;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
max-width: 800px;
}
.modal-container {
display: flex;
flex-grow: 1;
flex-direction: column;
margin: 8px;
padding: 12px;
transition: all 0.2s ease;
background-color: var(--bg-color);
border: 2px solid var(--ac-color);
border-radius: 4px;
}
.modal-container {
display: flex;
flex-grow: 1;
flex-direction: column;
margin: 8px;
padding: 12px;
transition: all 0.2s ease;
background-color: var(--bg-color);
border: 2px solid var(--ac-color);
border-radius: 4px;
}
/*
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
@@ -63,17 +61,14 @@
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-fade-enter,
.modal-fade-leave-active {
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);
}
.modal-fade-enter .modal-container,
.modal-fade-leave-active .modal-container {
transform: scale(0.9);
transition: all .2s ease;
}
</style>