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

     1  <script lang="ts">
     2  	export let key = ""
     3  	export let value = ""
     4  	export let href: string = null
     5  
     6  </script>
     7  
     8  <style lang="sass">
     9  	@use "../style/values"
    10  
    11  	p
    12  		margin: 0.3em 0
    13  		display: flex
    14  
    15  		a
    16  			filter: none
    17  			display: flex
    18  
    19  		a:hover
    20  			text-decoration: none
    21  			filter: brightness(130%)
    22  
    23  		span
    24  			padding: 0.4em
    25  			background-color: values.$color-base-1
    26  
    27  		span:first-child
    28  			font-weight: bold
    29  			background-color: var(--talon-color)
    30  </style>
    31  
    32  <p>
    33  	{#if href}
    34  		<a {href}> <span>{key}</span> <span>{value}</span> </a>
    35  	{:else}<span>{key}</span> <span>{value}</span>{/if}
    36  </p>