zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

fade out in schema

Browse Source
This commit is contained in:
lana-k
2020-11-05 13:48:02 +01:00
parent 5dc80751c4
commit e7d3da8869
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Schema.vue
View File

@@ -1,6 +1,8 @@
<template> <template>
<div id="schema-container"> <div id="schema-container">
<div id="schema-filter">
<text-field placeholder="Search table" width="100%"/> <text-field placeholder="Search table" width="100%"/>
</div>
<div id="db"> <div id="db">
<div @click="schemaVisible = !schemaVisible" class="db-name"> <div @click="schemaVisible = !schemaVisible" class="db-name">
<svg <svg
@@ -78,11 +80,24 @@ export default {
<style scoped> <style scoped>
#schema-container { #schema-container {
padding: 24px 12px; position: relative;
padding-bottom: 24px;
} }
.schema { .schema {
margin-left: 12px; 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 { .schema, .db-name {
color: var(--color-text-base); color: var(--color-text-base);
@@ -92,7 +107,8 @@ export default {
#db { #db {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 24px; margin-top: -5px;
padding: 0 12px;
} }
.db-name { .db-name {