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>