chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: selectorList color and space

Browse source
This commit is contained in:
puriphatt 2024-04-18 18:23:20 +07:00
parent dfe9a55bdb
commit f019c62351
1 changed files with 27 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/SelectorList.vue
View file

@ -16,7 +16,8 @@ defineProps<{
<q-item
v-for="v in list"
:key="v.label"
clickable
:class="v.count === 0 ? 'disable-item' : ''"
:clickable="v.count > 0"
:active="selector === v.label"
:active-class="
selector === v.label
@ -27,8 +28,12 @@ defineProps<{
"
@click="selector = v.label"
>
<q-item-section>{{ $t(v.label) }}</q-item-section>
<div class="dot text-weight-bold">{{ v.count }}</div>
<div class="row full-width justify-between">
<div>
{{ $t(v.label) }}
</div>
<div class="dot text-weight-bold">{{ v.count }}</div>
</div>
</q-item>
</q-list>
</AppBox>
@ -41,8 +46,9 @@ defineProps<{
border-radius: var(--radius-3);
.dot {
color: var(--blue-6);
background-color: white;
background-color: hsla(var(--info-bg));
border: 1px solid hsl(var(--info-bg));
color: white;
}
&.dark {
@ -54,15 +60,28 @@ defineProps<{
.q-item {
align-items: center;
border-radius: var(--radius-3);
color: hsl(var(--stone-4-hsl));
border: 1px solid transparent;
padding: 6px 16px;
min-height: 0;
margin-bottom: 8px;
}
.disable-item {
color: hsl(var(--text-mute));
.dot {
color: hsl(var(--text-mute));
border: 1px solid transparent;
background-color: hsla(var(--text-mute) / 0.1);
}
}
.dot {
height: 25px;
width: 25px;
background-color: hsl(var(--stone-4-hsl));
color: white;
background-color: hsla(var(--info-bg) / 0.1);
border: 1px solid transparent;
color: hsl(var(--info-bg));
border-radius: 50%;
display: inline-flex;
justify-content: center;