31 lines
591 B
Vue
31 lines
591 B
Vue
<template>
|
|
<span class="chip">
|
|
<span><slot></slot></span>
|
|
<button class="p-2 icon" @click="$emit('chip-delete')">
|
|
<i class="material-icons close-button"> close </i>
|
|
</button>
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.chip {
|
|
@apply inline-flex;
|
|
@apply items-center;
|
|
@apply justify-center;
|
|
@apply rounded-lg;
|
|
@apply m-1;
|
|
@apply pl-4;
|
|
@apply bg-primaryDark;
|
|
@apply text-secondary;
|
|
@apply font-mono;
|
|
@apply transition;
|
|
@apply ease-in-out;
|
|
@apply duration-150;
|
|
@apply border border-divider;
|
|
}
|
|
|
|
.close-button {
|
|
@apply text-base;
|
|
}
|
|
</style>
|