openflexure-microscope-server/webapp/src/components/labThingsComponents/syncPropertyButton.vue
2025-10-28 15:44:17 +00:00

36 lines
686 B
Vue

<template>
<a class="sync-button" @click.prevent="$emit('click')">
<span
class="material-symbols-outlined sync-icon"
title="Reread value from microscope. Required if microscope is updated externally"
>
sync
</span>
</a>
</template>
<script>
export default {
name: "SyncPropertyButton",
};
</script>
<style scoped>
.sync-button {
flex-grow: 0;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
cursor: pointer;
}
.material-symbols-outlined.sync-icon {
color: #888;
transition: transform 0.3s ease, color 0.3s ease;
}
.material-symbols-outlined.sync-icon:hover {
transform: rotate(-90deg);
color: #c5247f;
}
</style>