example/src/components/Workspace.css
.flex-container {
display: flex;
border: 5px solid yellow;
flex-direction: row;
justify-content: space-between;
height: 95vh;
}
.right{
display: flex;
border: 5px solid gray;
flex-direction: column;
justify-content: space-between;
width: 55vw;
}
.file-tree {
border: 5px solid red;
width: 45vw;
padding: 10px;
}
.file-tree ul {
list-style-type:none;
padding:0;
margin:10px;
}
.file-tree ul li {
list-style:none;
}
.file-tree_item {
padding: 5px 0;
border: 1px solid #fff
}
.file-tree_item.selected {
background-color: #ccf;
border: 1px solid #ccf
}
.file-tree_item:hover {
cursor: pointer;
border: 1px solid #889
}
.file-contents {
border: 5px solid green;
height: 100vw;
padding: 10px;
}
.file-details {
border: 5px solid blue;
height: 25vw;
padding: 10px;
}
.file-details ul {
list-style-type:none;
padding:0;
margin:10px;
}
.file-details ul li {
list-style:none;
}
.overlay {
display: flex;
position: absolute;
top: 10px;
left: 10px;
bottom: 0;
right: 0;
width: 45vw;
height: 100%;
background-color: white;
opacity: 0.6;
align-items: center;
justify-content: center;
text-align: center;
font-size: 40px;
}