mirror of
https://github.com/smartyellow/status.git
synced 2024-11-28 23:12:04 +01:00
43 lines
1.8 KiB
Svelte
43 lines
1.8 KiB
Svelte
<script>
|
|
import Modal from './modal.svelte';
|
|
|
|
let open = false;
|
|
|
|
function toggle() {
|
|
open = !open;
|
|
}
|
|
</script>
|
|
|
|
{#if !open}
|
|
<button class="settings" on:click={toggle}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 262.39 262.39">
|
|
<path fill="currentColor" d="M245.63 103.39h-9.91a107.45 107.45 0 0 0-10.96-26.43l7.02-7.02a16.76 16.76 0 0 0 0-23.7l-15.62-15.62a16.76 16.76 0 0 0-23.7 0l-7.02 7.01A107.48 107.48 0 0 0 159 26.68v-9.92C159 7.5 151.5 0 142.24 0h-22.09c-9.26 0-16.76 7.5-16.76 16.76v9.92a107.47 107.47 0 0 0-26.43 10.95l-7.02-7.01a16.76 16.76 0 0 0-23.7 0L30.62 46.24a16.76 16.76 0 0 0 0 23.7l7.01 7.02a107.45 107.45 0 0 0-10.95 26.43h-9.92c-9.25 0-16.76 7.5-16.76 16.76v22.1C0 151.5 7.5 159 16.76 159h9.92a107.5 107.5 0 0 0 10.95 26.43l-7.01 7.01a16.76 16.76 0 0 0 0 23.7l15.62 15.63a16.76 16.76 0 0 0 23.7 0l7.02-7.02a107.44 107.44 0 0 0 26.43 10.96v9.91c0 9.26 7.5 16.77 16.76 16.77h22.1c9.25 0 16.76-7.51 16.76-16.77v-9.91c9.37-2.49 18.24-6.2 26.43-10.96l7.02 7.02a16.76 16.76 0 0 0 23.7 0l15.62-15.62a16.76 16.76 0 0 0 0-23.7l-7.01-7.02A107.48 107.48 0 0 0 235.72 159h9.91c9.26 0 16.76-7.51 16.76-16.77v-22.09c0-9.26-7.5-16.76-16.76-16.76zm-114.43 87.8c-33.08 0-60-26.91-60-60 0-33.08 26.92-60 60-60s60 26.92 60 60c0 33.09-26.92 60-60 60z"/><path d="M131.2 101.2c-16.54 0-30 13.46-30 30s13.46 30 30 30 30-13.46 30-30-13.46-30-30-30z"/>
|
|
</svg>
|
|
</button>
|
|
{/if}
|
|
|
|
<Modal title="Settings" bind:open>
|
|
hi
|
|
</Modal>
|
|
|
|
<style>
|
|
button.settings {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
opacity: 0.4;
|
|
color: #fff;
|
|
}
|
|
button.settings svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
transition: linear 0.4s;
|
|
}
|
|
button.settings:hover {
|
|
opacity: 0.9;
|
|
}
|
|
button.settings:hover svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
</style>
|