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

chore: add dropdown- prefix to button class and switch colors to using existing color variables in Dropdown component

Browse source
This commit is contained in:
SauceyRed 2025-07-13 04:14:39 +02:00
parent 4adba889e4
commit 11e46049a0
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

14
components/Dropdown.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="dropdown-body"> <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" tabindex="0">{{ option.name }}</button> <button class="dropdown-button" :data-value="option.value" @click.prevent="option.callback" tabindex="0">{{ option.name }}</button>
</div> </div>
</div> </div>
</template> </template>
@ -19,8 +19,8 @@ const props = defineProps<{ options: DropdownOption[] }>();
position: absolute; position: absolute;
z-index: 100; z-index: 100;
left: 4dvw; left: 4dvw;
bottom: 2dvh; bottom: 4dvh;
background-color: var(--background-color); background-color: var(--chat-background-color);
width: 8rem; width: 8rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -30,17 +30,17 @@ const props = defineProps<{ options: DropdownOption[] }>();
border: .09rem solid rgb(70, 70, 70); border: .09rem solid rgb(70, 70, 70);
} }
.button { .dropdown-button {
padding-top: .5dvh; padding-top: .5dvh;
padding-bottom: .5dvh; padding-bottom: .5dvh;
color: var(--main-text-color); color: var(--text-color);
background-color: transparent; background-color: transparent;
width: 100%; width: 100%;
border: none; border: none;
} }
.button:hover { .dropdown-button:hover {
background-color: rgb(70, 70, 70); background-color: var(--padding-color);
} }
</style> </style>