ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[users] Design: Scroll area of roles should look like input elements

This commit is contained in:
Ferdinand Thiessen 2021-04-03 14:42:09 +02:00
parent ee3cb0ba40
commit 6a6afcb2d4
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/plugins/user/components/settings/RoleSettings.vue
View File

@ -22,9 +22,9 @@
/>
</q-card-section>
<q-separator />
<q-card-section v-if="role" class="fit row justify-start content-center items-center">
<q-scroll-area style="height: 20em; width: 100%">
<q-input v-if="role.id != -1" v-model="newRoleName" filled label="neuer Name" />
<q-card-section v-if="role">
<q-input v-if="role.id !== -1" v-model="newRoleName" filled label="neuer Name" />
<q-scroll-area style="height: 40vh; width: 100%" class="background-like-input">
<q-option-group
:model-value="role.permissions"
:options="permissions"
@ -143,3 +143,18 @@ export default defineComponent({
},
});
</script>
<style lang="sass" scoped>
// Same colors like qinput with filled attribute set
.body--light .background-like-input
background-color: rgba(0, 0, 0, 0.05)
&:hover
background: rgba(0,0,0,.1)
border-bottom: 1px solid rgba(0, 0, 0, 0.42)
.body--dark .background-like-input
background-color: rgba(255, 255, 255, 0.07)
&:hover
background: rgba(255, 255, 255, 0.14)
border-bottom: 1px solid #fff
</style>