From 6a6afcb2d4580010fafdfed1f5028d717c29da89 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Sat, 3 Apr 2021 14:42:09 +0200
Subject: [PATCH] [users] Design: Scroll area of roles should look like input
 elements

---
 .../user/components/settings/RoleSettings.vue | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/plugins/user/components/settings/RoleSettings.vue b/src/plugins/user/components/settings/RoleSettings.vue
index 7e405f4..0b4c2d3 100644
--- a/src/plugins/user/components/settings/RoleSettings.vue
+++ b/src/plugins/user/components/settings/RoleSettings.vue
@@ -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>
\ No newline at end of file