gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

style: improve style of Dropdown component

Browse source
This commit is contained in:
SauceyRed 2025-07-13 00:58:11 +02:00
parent 8695221950
commit 58518876bf
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
components/Dropdown.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="dropdown"> <div class="dropdown-body">
<div v-for="option of props.options" class="dropdown-option"> <div v-for="option of props.options" class="dropdown-option">
<button class="button" :data-value="option.value" @click.prevent="option.callback">{{ option.name }}</button> <button class="button" :data-value="option.value" @click.prevent="option.callback" tabindex="0">{{ option.name }}</button>
</div> </div>
</div> </div>
</template> </template>
@ -15,19 +15,19 @@ const props = defineProps<{ options: DropdownOption[] }>();
<style scoped> <style scoped>
.dropdown { .dropdown-body {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
left: 4dvw; left: 4dvw;
bottom: 2dvh; bottom: 2dvh;
background-color: var(--background-color); background-color: var(--background-color);
width: 10dvw; width: 8rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.dropdown-option { .dropdown-option {
border: .09rem solid brown; border: .09rem solid rgb(70, 70, 70);
} }
.button { .button {