mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
Style tree view
This commit is contained in:
Misode
1
src/styles/images/plus.svg
Normal file
1
src/styles/images/plus.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>
|
||||
|
After Width: | Height: | Size: 314 B |
1
src/styles/images/trash.svg
Normal file
1
src/styles/images/trash.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -1,30 +1,158 @@
|
||||
|
||||
.list-entry:not(:last-child),
|
||||
.map-entry:not(:last-child),
|
||||
.object-node:not(:last-child) > .object-fields {
|
||||
margin-bottom: 0.3rem;
|
||||
.tree > .object-node > .node-body {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.list-entry,
|
||||
.map-entry,
|
||||
.object-fields {
|
||||
.node {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.node-body > .node:first-child {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.list-node:last-child,
|
||||
.map-node:last-child,
|
||||
.object-node:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-node > .node-body,
|
||||
.map-node > .node-body,
|
||||
.object-node > .node-body {
|
||||
border-left: 3px solid;
|
||||
}
|
||||
|
||||
.node-header > label,
|
||||
.node-header > button {
|
||||
user-select: none;
|
||||
}
|
||||
.object-node > .node-header > label.collapse {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node input,
|
||||
.node select {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.node-header {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.node-header > * {
|
||||
height: 24px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.node-header > button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node-header > input {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.node-header > label,
|
||||
.node-header > button {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.node-header > *:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.node-header > *:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.node-header > *:not(:last-child) {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.object-node > .node-header > *:first-child,
|
||||
.map-node > .node-header > *:first-child,
|
||||
.list-node > .node-header > *:first-child {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.node-header > label.collapse.closed {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
label.collapse::before {
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
label.collapse.closed::before,
|
||||
button.add::after {
|
||||
content: url('./images/plus.svg')
|
||||
}
|
||||
|
||||
label.collapse.open::before,
|
||||
button.remove::before {
|
||||
content: url('./images/trash.svg');
|
||||
}
|
||||
|
||||
.node-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0.7rem;
|
||||
}
|
||||
|
||||
.list-entry {
|
||||
border-left: 2px solid #0b552a;
|
||||
.node-entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.map-fields {
|
||||
border-left: 2px solid #066fb4;
|
||||
/* COLORS */
|
||||
|
||||
.node-header > * {
|
||||
border-color: #bcbfc3;
|
||||
}
|
||||
|
||||
.object-fields {
|
||||
border-left: 2px solid #b9b9b9;
|
||||
.node-header > label {
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
.object-node > label {
|
||||
user-select: none;
|
||||
|
||||
.node-header > button.add {
|
||||
border-color: #54911b;
|
||||
background-color: #add38a;
|
||||
}
|
||||
.object-node > label.collapse {
|
||||
cursor: pointer;
|
||||
|
||||
.node-header > button.selected {
|
||||
background-color: #f0e65e;
|
||||
border-color: #b9a327
|
||||
}
|
||||
|
||||
.node-header > label.collapse.closed {
|
||||
border-color: #54911b;
|
||||
background-color: #add38a;
|
||||
}
|
||||
|
||||
.node-header > label.collapse.open,
|
||||
button.remove {
|
||||
border-color: #be4b2e;
|
||||
background-color: #e2917c;
|
||||
}
|
||||
|
||||
.list-node > .node-body {
|
||||
border-color: #72a543;
|
||||
}
|
||||
|
||||
.map-node > .node-body {
|
||||
border-color: #066fb4;
|
||||
}
|
||||
|
||||
.object-node > .node-body {
|
||||
border-color: #b9b9b9;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user