diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue index b3cd2b6..d23a2c1 100644 --- a/src/components/forms/ChipsInput.vue +++ b/src/components/forms/ChipsInput.vue @@ -1,7 +1,7 @@ <template> <div class="chip-container"> <div v-for="(chip, i) in chips" :key="i" class="chip"> - {{ chip }} + <span>{{ chip }}</span> <i class="delete-icon" @click="deleteChip(i)">X</i> </div> <input @@ -43,41 +43,46 @@ const backspaceDelete = (event) => { } </script> -<style scoped> +<style scoped lang="scss"> +@import '@/assets/scss/main.scss'; + .chip-container { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #e0e0e0; + + .chip { + display: flex; + gap: 10px; + align-items: center; + background-color: $cyan; + border-radius: 5px; + padding: 5px 10px; + margin: 4px; + + .delete-icon { + cursor: pointer; + color: $white; + font-weight: 300; + font-family: $default; + font-style: normal; + &:hover { + color: $light-gray; + } + } + } + + input { + border: none; + outline: none; + padding: 4px; + margin: 4px; + color:white; + } + + } -.chip { - display: flex; - align-items: center; - background-color: #e0e0e0; - border-radius: 16px; - padding: 0 8px; - margin: 4px; -} -.chip i { - cursor: pointer; - font-size: 18px; - margin-left: 4px; -} - -input { - border: none; - outline: none; - padding: 4px; - margin: 4px; - color:white; -} - -.delete-icon { - cursor: pointer; - color: red; - font-weight: bold; - font-family: Arial, sans-serif; -} </style> \ No newline at end of file diff --git a/src/components/utilities/GmTools.vue b/src/components/utilities/GmTools.vue index 10b73d4..8c6f97c 100644 --- a/src/components/utilities/GmTools.vue +++ b/src/components/utilities/GmTools.vue @@ -5,7 +5,7 @@ </template> <template #modalBody> <div class="content"> - <button class="btn-cyan w-full" type="button" @click="gmPanelStore.toggle()">Tooggle GM panel</button> + <button class="btn-cyan w-full" type="button" @click="gmPanelStore.toggle()">Toggle GM panel</button> <button class="btn-cyan w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button> </div> </template>