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

Refactored style for UI dropdowns.

Browse source
This commit is contained in:
Fabio Manganiello 2023-05-04 02:19:09 +02:00
parent 9fd7f7db04
commit 394e27eaf2
Signed by: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 43 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
platypush/backend/http/webapp/src/components/elements/Dropdown.vue
View file

@ -26,7 +26,6 @@ export default {
},
iconClass: {
type: String,
default: 'fa fa-ellipsis-h',
},
@ -105,6 +104,16 @@ export default {
display: inline-flex;
flex-direction: column;
button {
background: $default-bg-2;
border: 0;
padding: 0.5em;
&:hover {
color: $default-hover-fg;
}
}
.dropdown {
position: absolute;
width: max-content;
@ -117,4 +126,27 @@ export default {
z-index: 1;
}
}
:deep(.dropdown-container) {
button {
width: 100%;
height: 100%;
color: $default-fg-2;
background: $dropdown-bg;
border: 0;
padding: 0.75em 0.5em;
text-align: left;
letter-spacing: 0.01em;
&:hover {
background: $hover-bg;
color: $default-fg-2;
}
.text {
padding-left: 0.25em;
}
}
}
</style>

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

@ -50,9 +50,12 @@ export default {
<style lang="scss" scoped>
.item {
display: flex;
padding: .5em .25em;
padding: 0.75em 0.5em;
cursor: pointer;
align-items: center;
color: $default-fg-2;
border: 0;
box-shadow: none;
&:hover {
background: $hover-bg;
@ -67,10 +70,15 @@ export default {
cursor: initial;
}
.text {
text-align: left;
margin-left: 0.5em;
}
.icon {
width: 1.5em;
display: inline-flex;
align-items: center;
max-width: 2em;
}
::v-deep(.icon-container) {