LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-10 04:22:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add lines and such to lists

Browse Source
This commit is contained in:
Corbin Crutchley
2023-07-09 13:53:00 -07:00
parent 11fe99fa15
commit 06b210e474
2 changed files with 44 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/styles/markdown/file-list.scss
View File

@@ -1,7 +1,7 @@
:root {
// Utility tokens
--half-icon: calc(var(--filesystem_icon_size) / 2);
--half-divider: calc(var(--filesystem_inset_divider_width) / 2);
--half-icon: calc(var(--filesystem_item_icon_size) / 2);
--half-divider: calc(var(--filesystem_item_inset_divider_width) / 2);
// Main container
--filesystem_outer_background-color: var(--background_primary);
@@ -62,11 +62,11 @@
// Tokens for the level inset dividers
--filesystem_item_inset_margin-start: calc(
var(--half-icon) + var(--filesystem_container_padding-start) -
var(--half-icon) + var(--filesystem_item_container_padding-start) -
max(1px, var(--half-divider))
);
--filesystem_item_inset_margin-end: calc(
var(--half-icon) - var(--filesystem_container_padding-start) -
var(--half-icon) - var(--filesystem_item_container_padding-start) -
max(1px, var(--half-divider))
);
--filesystem_item_inset_divider_width: var(--border-width_s);
@@ -86,10 +86,37 @@
background-color: var(--filesystem_inner_background-color);
}
.docs-file-tree > .docs-file-tree-list::before {
display: none !important;
}
.docs-file-tree > .docs-file-tree-list {
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.docs-file-tree-list {
list-style: none;
margin: 0;
padding: 0;
margin: 0 !important;
padding: 0 !important;
margin-left: calc(
var(--filesystem_item_inset_margin-end) +
var(--filesystem_item_inset_margin-start) +
var(--filesystem_item_inset_divider_width)
) !important;
position: relative;
}
.docs-file-tree-list::before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: calc(0px - var(--filesystem_item_inset_margin-end));
width: var(--filesystem_item_inset_divider_width);
background-color: var(--filesystem_item_inset_divider_color);
height: 100%;
}
.docs-file-tree-directory-summary {
@@ -175,3 +202,8 @@
.docs-file-tree-directory-name-and-icon {
background-color: var(--filesystem_item_folder_container_color_pressed);
}
.docs-file-tree-comment {
width: 1px;
flex-grow: 1;
}

8
src/utils/markdown/file-tree/file-list.tsx
View File

@@ -67,7 +67,9 @@ function File({ item }: FileProps) {
{item.name}
</span>
{item.comment && item.comment.length ? (
<span class="comment">{item.comment}</span>
<span class="docs-file-tree-comment text-style-body-small">
{item.comment}
</span>
) : null}
</>
) as never;
@@ -93,7 +95,9 @@ function Directory({ item }: DirectoryProps) {
{item.name}
</span>
{item.comment && item.comment.length ? (
<span class="comment">{item.comment}</span>
<span class="docs-file-tree-comment text-style-body-small">
{item.comment}
</span>
) : null}
</summary>
{FileListList({ items: item.items })}