shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delete animation added

Browse Source
This commit is contained in:
batuhanbas 2019-12-02 15:32:11 +03:00
parent eabf28e79e
commit bbeb7b5dfa
1 changed files with 3 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
resources/assets/js/components/AkauntingModal.vue
View File

@ -30,7 +30,7 @@
<button :disabled="form.loading" type="button" class="btn btn-icon btn-danger button-submit" @click="onConfirm"> <button :disabled="form.loading" type="button" class="btn btn-icon btn-danger button-submit" @click="onConfirm">
<div v-if="form.loading" class="aka-loader-frame"><div class="aka-loader"></div></div> <div v-if="form.loading" class="aka-loader-frame"><div class="aka-loader"></div></div>
<span v-if="!form.loading" class="btn-inner--icon"><i class="fas fa-save"></i></span> <span v-if="!form.loading" class="btn-inner--icon"><i class="fas fa-trash"></i></span>
<span v-if="!form.loading" class="btn-inner--text">{{ button_delete }}</span> <span v-if="!form.loading" class="btn-inner--text">{{ button_delete }}</span>
</button> </button>
</div> </div>
@ -110,6 +110,8 @@ export default {
}, },
onConfirm() { onConfirm() {
this.form.loading = true;
this.$emit("confirm"); this.$emit("confirm");
}, },
@ -136,44 +138,4 @@ export default {
.modal.show { .modal.show {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.loader10 {
width: 28px;
height: 28px;
border-radius: 50%;
position: relative;
animation: loader10 0.9s ease alternate infinite;
animation-delay: 0.36s;
top: 50%;
margin: -42px auto 0;
}
.loader10::after, .loader10::before {
content: '';
position: absolute;
width: 28px;
height: 28px;
border-radius: 50%;
animation: loader10 0.9s ease alternate infinite;
}
.loader10::before {
left: -40px;
animation-delay: 0.18s;
}
.loader10::after {
right: -40px;
animation-delay: 0.54s;
}
@keyframes loader10 {
0% {
box-shadow: 0 28px 0 -28px #0052ec;
}
100% {
box-shadow: 0 28px 0 #0052ec;
}
}
</style> </style>