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>