noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust chipsinput styling

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-21 15:47:31 +02:00
parent efeef80c02
commit 25e16870b9
2 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/scss/main.scss
View File

@ -8,7 +8,7 @@
//Globals
body {
@apply bg-black m-0 select-none;
@apply bg-black m-0 select-none overscroll-none;
-ms-overflow-style: none;
scrollbar-width: none;
@ -16,8 +16,6 @@ body {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
overscroll-behavior: none;
}
h1,

10
src/components/forms/ChipsInput.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="flex flex-wrap items-center border-0 border-b border-solid border-gray-50">
<div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1.5 px-2.5 m-1">
<span>{{ chip }}</span>
<i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
<div class="flex flex-wrap items-center input-cyan ">
<div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
<span class="text-xs">{{ chip }}</span>
<i class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
</div>
<input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
<input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
</div>
</template>