rojo-rbx/rojo
1
0
Fork 1
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-04-20 12:45:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve tree explorer UI

Browse Source
This commit is contained in:
Lucien Greathouse
2019-10-18 16:49:03 -07:00
parent 457ed05174
commit d54a5f647e
2 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
assets/index.css
View File

@@ -94,10 +94,6 @@ img {
}
.instance {
border: 1px solid #666;
border-right-style: none;
border-bottom-style: none;
background-color: #fff;
margin-bottom: 0.5rem;
}
@@ -106,16 +102,12 @@ img {
padding: 0.5rem;
}
.instance-metadata {
padding: 0.5rem;
.expandable-section {
margin: 0.25rem 0.5rem;
}
.instance-properties {
padding: 0.5rem;
}
.instance-children {
padding: 0.5rem 0 0.5rem 1rem;
.expandable-items {
padding: 0.5rem 1rem;
}
.expandable-input {
@@ -124,30 +116,36 @@ img {
.expandable-label > label {
cursor: pointer;
display: flex;
align-items: center;
align-content: center;
}
.expandable-input ~ .expandable-label .expandable-visualizer {
font-family: monospace;
display: inline-flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
width: 1rem;
height: 1rem;
border: 1px solid #666;
font-size: 2rem;
margin: 0 0.5rem;
transition: transform 100ms ease-in-out;
transform-origin: 60% 60%;
}
.expandable-visualizer::before {
content: "";
content: "›";
font-weight: bold;
}
.expandable-input:checked ~ .expandable-label .expandable-visualizer::before {
content: "-";
.expandable-input:checked ~ .expandable-label {
border-bottom: 1px solid #bbb;
}
.expandable-input:not(:checked) ~ .expandable-label .expandable-visualizer::before {
content: "+";
.expandable-input:checked ~ .expandable-label .expandable-visualizer {
transform: rotate(90deg);
}
.expandable-input:not(:checked) ~ .expandable-items {