refactor: move individual css into global css for sharing use
This commit is contained in:
@@ -49,55 +49,35 @@ const cancelUpdateItem = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="item card">
|
||||
<div class="item-words">
|
||||
<div class="paperbox-item card">
|
||||
<div class="paperbox-item-words">
|
||||
<p v-show="!isEditing">{{ name }}</p>
|
||||
<div v-show="isEditing" class="control">
|
||||
<input v-model="editingName" class="input" type="text"></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-icon control" v-show="!isEditing" @click="editItem">
|
||||
<div class="paperbox-item-icon control" v-show="!isEditing" @click="editItem">
|
||||
<a class="button"><span class="icon is-small"><font-awesome-icon icon="fas fa-pen"></font-awesome-icon></span></a>
|
||||
</div>
|
||||
<div class="item-icon control" v-show="!isEditing" @click="shareItem">
|
||||
<div class="paperbox-item-icon control" v-show="!isEditing" @click="shareItem">
|
||||
<a class="button"><span class="icon is-small"><font-awesome-icon
|
||||
icon="fas fa-share"></font-awesome-icon></span></a>
|
||||
</div>
|
||||
<div class="item-icon control" v-show="!isEditing" @click="deleteItem">
|
||||
<div class="paperbox-item-icon control" v-show="!isEditing" @click="deleteItem">
|
||||
<a class="button"><span class="icon is-small"><font-awesome-icon
|
||||
icon="fas fa-trash"></font-awesome-icon></span></a>
|
||||
</div>
|
||||
|
||||
<div class="item-icon control" v-show="isEditing" @click="updateItem">
|
||||
<div class="paperbox-item-icon control" v-show="isEditing" @click="updateItem">
|
||||
<button class="button"><span class="icon is-small"><font-awesome-icon
|
||||
icon="fas fa-check"></font-awesome-icon></span></button>
|
||||
</div>
|
||||
<div class="item-icon control" v-show="isEditing" @click="cancelUpdateItem">
|
||||
<div class="paperbox-item-icon control" v-show="isEditing" @click="cancelUpdateItem">
|
||||
<button class="button"><span class="icon is-small"><font-awesome-icon
|
||||
icon="fas fa-times"></font-awesome-icon></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
div.item {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: flex-start;
|
||||
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
div.item-words {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
div.item-icon {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user