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 { :root {
// Utility tokens // Utility tokens
--half-icon: calc(var(--filesystem_icon_size) / 2); --half-icon: calc(var(--filesystem_item_icon_size) / 2);
--half-divider: calc(var(--filesystem_inset_divider_width) / 2); --half-divider: calc(var(--filesystem_item_inset_divider_width) / 2);
// Main container // Main container
--filesystem_outer_background-color: var(--background_primary); --filesystem_outer_background-color: var(--background_primary);
@@ -62,11 +62,11 @@
// Tokens for the level inset dividers // Tokens for the level inset dividers
--filesystem_item_inset_margin-start: calc( --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)) max(1px, var(--half-divider))
); );
--filesystem_item_inset_margin-end: calc( --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)) max(1px, var(--half-divider))
); );
--filesystem_item_inset_divider_width: var(--border-width_s); --filesystem_item_inset_divider_width: var(--border-width_s);
@@ -86,10 +86,37 @@
background-color: var(--filesystem_inner_background-color); 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 { .docs-file-tree-list {
list-style: none; list-style: none;
margin: 0; margin: 0 !important;
padding: 0; 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 { .docs-file-tree-directory-summary {
@@ -175,3 +202,8 @@
.docs-file-tree-directory-name-and-icon { .docs-file-tree-directory-name-and-icon {
background-color: var(--filesystem_item_folder_container_color_pressed); 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} {item.name}
</span> </span>
{item.comment && item.comment.length ? ( {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} ) : null}
</> </>
) as never; ) as never;
@@ -93,7 +95,9 @@ function Directory({ item }: DirectoryProps) {
{item.name} {item.name}
</span> </span>
{item.comment && item.comment.length ? ( {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} ) : null}
</summary> </summary>
{FileListList({ items: item.items })} {FileListList({ items: item.items })}