blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better style for dropdown items.

Browse source 
- Larger icon div to prevent text overlapping with icons
- Support for `selected` class
This commit is contained in:
Fabio Manganiello 2022-11-25 23:14:28 +01:00
parent c0dd91838b
commit 292ed2abff
Signed by: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div class="row item" :class="itemClass" @click="clicked"> <div class="row item" :class="itemClass" @click="clicked">
<div class="col-1 icon" v-if="iconClass?.length || iconUrl?.length"> <div class="col-2 icon" v-if="iconClass?.length || iconUrl?.length">
<Icon :class="iconClass" :url="iconUrl" /> <Icon :class="iconClass" :url="iconUrl" />
</div> </div>
<div class="text" :class="{'col-11': iconClass != null}" v-text="text" /> <div class="text" :class="{'col-10': iconClass != null}" v-text="text" />
</div> </div>
</template> </template>
@ -60,6 +60,10 @@ export default {
background: $hover-bg; background: $hover-bg;
} }
&.selected {
font-weight: bold;
}
&.disabled { &.disabled {
color: $dropdown-disabled-color; color: $dropdown-disabled-color;
cursor: initial; cursor: initial;
@ -68,6 +72,7 @@ export default {
.icon { .icon {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
max-width: 2em;
} }
::v-deep(.icon-container) { ::v-deep(.icon-container) {