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

new splitter style

Browse Source
This commit is contained in:
lana-k
2020-11-13 23:21:04 +01:00
parent 05243ec991
commit d4c233e1ef
3 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/images/chevron.svg
View File

@@ -1,3 +1,3 @@
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z" fill="#506784"/>
<svg width="4" height="9" viewBox="0 0 4 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0.98056V4.5L4.00004 7.71428L4 9L1.10694e-07 4.5L4 0V0.98056Z" fill="#506784"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 243 B

After

Width:  |  Height:  |  Size: 190 B

32
src/components/Splitpanes.vue
View File

@@ -88,11 +88,11 @@ export default {
const translation = 'translate(-50%, -50%)'
if (this.horizontal) {
return {
transform: `${translation} ${this.expanded ? 'rotate(-90deg)' : 'rotate(90deg)'}`
transform: `${translation} ${this.expanded ? 'rotate(90deg)' : 'rotate(-90deg)'}`
}
} else {
return {
transform: `${translation} ${this.expanded ? 'rotate(180deg)' : ''}`
transform: `${translation} ${this.expanded ? 'rotate(0deg)' : 'rotate(180deg)'}`
}
}
}
@@ -248,13 +248,23 @@ export default {
.splitpanes__splitter {
touch-action: none;
background-color: var(--color-bg-light-2);
background-color: var(--color-bg-light);
box-sizing: border-box;
position: relative;
flex-shrink: 0;
z-index: 1;
}
.splitpanes--horizontal > .splitpanes__splitter {
border-top: 1px solid var(--color-border-light);
border-bottom: 1px solid var(--color-border-light);
}
.splitpanes--vertical > .splitpanes__splitter {
border-left: 1px solid var(--color-border-light);
border-right: 1px solid var(--color-border-light);
}
.movable-splitter {
position: absolute;
background-color:rgba(162, 177, 198, 0.5);
@@ -262,23 +272,25 @@ export default {
.splitpanes--vertical > .splitpanes__splitter,
.splitpanes--vertical .movable-splitter {
width: 3px;
width: 8px;
z-index: 5;
height: 100%
}
.splitpanes--horizontal > .splitpanes__splitter,
.splitpanes--horizontal .movable-splitter {
height: 3px;
height: 8px;
width: 100%;
}
.splitpanes__splitter .toggle-btn {
background-color: var(--color-bg-light-2);
background-color: var(--color-border-light);
border-radius: var(--border-radius-small);
border: 1px solid var(--color-border);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.splitpanes__splitter .toggle-btn:hover {
@@ -286,12 +298,12 @@ export default {
}
.splitpanes--vertical .toggle-btn {
height: 68px;
width: 15px;
height: 49px;
width: 8px;
}
.splitpanes--horizontal .toggle-btn {
width: 68px;
height: 15px;
width: 49px;
height: 8px;
}
.splitpanes__splitter .toggle-btn .direction-icon {
position: absolute;

1
src/components/Tab.vue
View File

@@ -147,7 +147,6 @@ export default {
<style scoped>
.tab-content-container {
padding-top: 6px;
background-color: var(--color-white);
border-top: 1px solid var(--color-border-light);
margin-top: -1px;