Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-24 12:21:09 +10:00
Code Issues Packages Projects Releases Wiki Activity

page tree - wip

Browse Source
This commit is contained in:
Philipinho
2023-10-01 01:25:04 +01:00
parent cfb553d63a
commit e4099ad4c5
12 changed files with 703 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/features/page/tree/tree.module.css Normal file
View File

@ -0,0 +1,99 @@
.tree {
border-radius: 0px;
}
.treeContainer {
display: flex;
height: 50vh;
flex: 1;
min-width: 0;
}
.node {
position: relative;
border-radius: 4px;
display: flex;
align-items: center;
height: 100%;
width: 100%;
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
&:hover {
background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
}
.actions {
visibility: hidden;
position: absolute;
height: 100%;
top: 0;
right: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
}
&:hover .actions {
visibility: visible;
}
}
.node:global(.willReceiveDrop) {
background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-gray-7));
}
.node:global(.isSelected) {
border-radius: 0;
background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
/*
color: white;
// background-color: light-dark(
// var(--mantine-color-gray-0),
// var(--mantine-color-dark-6)
//);
//background: rgb(20, 127, 250, 0.5);*/
}
.node:global(.isSelectedStart.isSelectedEnd) {
border-radius: 4px;
}
.row:focus .node:global(.isSelected) {
background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
}
.row {
white-space: nowrap;
cursor: pointer;
}
.row:focus {
outline: none;
}
.row:focus .node {
/** come back to this **/
background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
}
.icon {
margin: 0 rem(10px);
flex-shrink: 0;
}
.text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
font-size: rem(14px);
font-weight: 500;
}
.arrow {
display: flex;
}