github.com/Theta-Dev/Talon@v0.0.0-20211018130634-ff179e19fa9a/ui/menu/src/components/FloatingButton.svelte (about) 1 <script lang="ts"> 2 import Icon from "./Icon.svelte" 3 4 export let hide = false 5 6 </script> 7 8 <style lang="sass"> 9 @use "../style/values" 10 11 button 12 position: fixed 13 bottom: 25px 14 right: 25px 15 16 height: 56px 17 width: 56px 18 19 display: flex 20 align-items: center 21 justify-content: center 22 23 border-radius: 50% 24 background: values.$var-primary 25 border: none 26 27 opacity: 1 28 transition: bottom 0.5s, opacity 0.5s 29 30 &.hide 31 bottom: -56px 32 opacity: 0 33 </style> 34 35 <button class:hide on:click> 36 <Icon iconName="menu" size={25} /> 37 </button>