81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<template>
|
|
<div class="modal-container">
|
|
<div class="title-container">
|
|
<p id="title">Remove File</p>
|
|
</div>
|
|
<hr>
|
|
<p id="modal-text" >Are you sure you want to remove "{{ nameFile }}"?</p>
|
|
<div class="reply">
|
|
<button @click="$emit('confirm')">Yes</button>
|
|
<button @click="$emit('cancel')">No</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
nameFile: {
|
|
type: String,
|
|
default: 'file_name'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
* {
|
|
color: white;
|
|
font-family: monospace;
|
|
box-sizing: border-box; /* Ensures padding doesn't expand height beyond 200px */
|
|
}
|
|
|
|
#title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.modal-container {
|
|
width: 400px;
|
|
height: 200px;
|
|
background-color: rgb(32, 59, 50);
|
|
border: none;
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
}
|
|
|
|
hr {
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
height: 4px;
|
|
}
|
|
|
|
#modal-text {
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.reply {
|
|
margin-top: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
button {
|
|
background-color: rgb(37, 110, 85);
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: rgb(58, 171, 133);
|
|
}
|
|
|
|
button:active {
|
|
background-color: rgb(54, 158, 123);
|
|
transform: translateY(3px);
|
|
}
|
|
</style> |