From b2dffc60134a1d3a3d7e6aa272633e02a268dfb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 15 Oct 2021 18:38:14 +0200
Subject: [PATCH] demos: update suggestions styling

---
 .../src/Examples/Community/React/MentionList.scss | 15 ++++++++-------
 demos/src/Examples/Community/Vue/MentionList.vue  | 15 ++++++++-------
 .../src/Experiments/Commands/Vue/CommandsList.vue | 15 ++++++++-------
 .../GuideNodeViews/DragHandle/Vue/Component.vue   |  2 +-
 demos/src/Nodes/Mention/Vue/MentionList.vue       | 15 ++++++++-------
 5 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/demos/src/Examples/Community/React/MentionList.scss b/demos/src/Examples/Community/React/MentionList.scss
index e909db98..89d6e650 100644
--- a/demos/src/Examples/Community/React/MentionList.scss
+++ b/demos/src/Examples/Community/React/MentionList.scss
@@ -1,12 +1,13 @@
 .items {
+  padding: 0.2rem;
   position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
+  border-radius: 0.5rem;
+  background: #FFF;
+  color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
@@ -17,11 +18,11 @@
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.4rem;
 
   &.is-selected,
   &:hover {
-    color: #A975FF;
-    background: rgba(#A975FF, 0.1);
+    border-radius: 0.4rem;
+    background: rgba(0, 0, 0, 0.05);
   }
 }
diff --git a/demos/src/Examples/Community/Vue/MentionList.vue b/demos/src/Examples/Community/Vue/MentionList.vue
index 26437b84..0dedfc3b 100644
--- a/demos/src/Examples/Community/Vue/MentionList.vue
+++ b/demos/src/Examples/Community/Vue/MentionList.vue
@@ -83,14 +83,15 @@ export default {
 
 <style lang="scss">
 .items {
+  padding: 0.2rem;
   position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
+  border-radius: 0.5rem;
+  background: #FFF;
+  color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
@@ -101,12 +102,12 @@ export default {
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.4rem;
 
   &.is-selected,
   &:hover {
-    color: #A975FF;
-    background: rgba(#A975FF, 0.1);
+    border-radius: 0.4rem;
+    background: rgba(0, 0, 0, 0.05);
   }
 }
 </style>
diff --git a/demos/src/Experiments/Commands/Vue/CommandsList.vue b/demos/src/Experiments/Commands/Vue/CommandsList.vue
index 8465d2dc..e9989c43 100644
--- a/demos/src/Experiments/Commands/Vue/CommandsList.vue
+++ b/demos/src/Experiments/Commands/Vue/CommandsList.vue
@@ -83,14 +83,15 @@ export default {
 
 <style lang="scss">
 .items {
+  padding: 0.2rem;
   position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
+  border-radius: 0.5rem;
+  background: #FFF;
+  color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
@@ -101,12 +102,12 @@ export default {
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.4rem;
 
   &.is-selected,
   &:hover {
-    color: #A975FF;
-    background: rgba(#A975FF, 0.1);
+    border-radius: 0.4rem;
+    background: rgba(0, 0, 0, 0.05);
   }
 }
 </style>
diff --git a/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue b/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
index 111826c2..35b5c7cb 100644
--- a/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
+++ b/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
@@ -31,7 +31,7 @@ export default {
   border-radius: 0.5rem;
   background: white;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 
diff --git a/demos/src/Nodes/Mention/Vue/MentionList.vue b/demos/src/Nodes/Mention/Vue/MentionList.vue
index 26437b84..0dedfc3b 100644
--- a/demos/src/Nodes/Mention/Vue/MentionList.vue
+++ b/demos/src/Nodes/Mention/Vue/MentionList.vue
@@ -83,14 +83,15 @@ export default {
 
 <style lang="scss">
 .items {
+  padding: 0.2rem;
   position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
+  border-radius: 0.5rem;
+  background: #FFF;
+  color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
@@ -101,12 +102,12 @@ export default {
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.4rem;
 
   &.is-selected,
   &:hover {
-    color: #A975FF;
-    background: rgba(#A975FF, 0.1);
+    border-radius: 0.4rem;
+    background: rgba(0, 0, 0, 0.05);
   }
 }
 </style>