From e7d3da8869c08b35f8063afa7c03603abd0ab998 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Thu, 5 Nov 2020 13:48:02 +0100
Subject: [PATCH] fade out in schema

---
 src/components/Schema.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/Schema.vue b/src/components/Schema.vue
index 0da0d47..87e0a9f 100644
--- a/src/components/Schema.vue
+++ b/src/components/Schema.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="schema-container">
-    <text-field placeholder="Search table" width="100%"/>
+    <div id="schema-filter">
+      <text-field placeholder="Search table" width="100%"/>
+    </div>
     <div id="db">
       <div @click="schemaVisible = !schemaVisible" class="db-name">
         <svg
@@ -78,11 +80,24 @@ export default {
 
 <style scoped>
 #schema-container {
-  padding: 24px 12px;
+  position: relative;
+  padding-bottom: 24px;
 }
 
 .schema {
   margin-left: 12px;
+  padding: 0 12px;
+}
+#schema-filter {
+  padding: 32px 12px;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  width: 100%;
+  height: 100px;
+  box-sizing: border-box;
+  background-image: linear-gradient(white 73%, transparent);;
+  z-index: 2;
 }
 .schema, .db-name {
   color: var(--color-text-base);
@@ -92,7 +107,8 @@ export default {
 #db {
   display: flex;
   align-items: center;
-  margin-top: 24px;
+  margin-top: -5px;
+  padding: 0 12px;
 }
 
 .db-name {