zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-07 10:38:54 +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

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;