github.com/Theta-Dev/Talon@v0.0.0-20211018130634-ff179e19fa9a/ui/menu/src/components/MenuItem.svelte (about)

     1  <script lang="ts">
     2  	export let link: string = null
     3  	export let text = ""
     4  	export let active = false
     5  	export let newTab = false
     6  	export let privacy = false
     7  
     8  </script>
     9  
    10  <style lang="sass">
    11  	@use "../style/values"
    12  
    13  	a
    14  		all: unset
    15  
    16  		display: flex
    17  		flex-direction: row-reverse
    18  		align-items: center
    19  
    20  		text-align: right
    21  		margin-bottom: 0.2em
    22  
    23  		border-radius: 20px
    24  
    25  		cursor: pointer
    26  
    27  		> span
    28  			font-size: 1.1em
    29  			font-weight: bold
    30  
    31  			margin-left: auto
    32  			padding: 0 0.5em
    33  
    34  			display: none
    35  			pointer-events: none
    36  
    37  		&:hover, &.active
    38  			pointer-events: auto
    39  			background-color: values.$var-primary
    40  
    41  			> span, > :global(*)
    42  				display: flex
    43  </style>
    44  
    45  <a
    46  	class:active
    47  	href={link}
    48  	target={newTab ? '_blank' : null}
    49  	rel={privacy ? 'noopener noreferrer' : null}
    50  	on:click>
    51  	<span>{text}</span>
    52  	<slot />
    53  </a>