42 lines
567 B
Vue
42 lines
567 B
Vue
<template>
|
|
<div :class="{btn: true, active: editMode}">
|
|
<font-awesome-icon icon="cogs" size="2x" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["editMode"],
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn {
|
|
transition: all 0.2s;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 40px;
|
|
text-align: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
opacity: 0.5;
|
|
}
|
|
.btn svg {
|
|
margin: auto auto;
|
|
color: #777;
|
|
}
|
|
.btn:hover {
|
|
transition: all 0.2s;
|
|
opacity: 1;
|
|
}
|
|
.btn:hover svg {
|
|
color: #ccc;
|
|
}
|
|
.active {
|
|
opacity: 1;
|
|
}
|
|
.btn.active svg {
|
|
color: #8844cc;
|
|
}
|
|
</style>
|