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

chore: fix the TOC colors for the arrow and dot

Browse Source
This commit is contained in:
Corbin Crutchley
2023-06-27 19:35:12 -07:00
parent d18efbfde1
commit 74ae522b5f
3 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/icons/arrow.svg
View File

@@ -1,5 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Arrow">
<path id="Vector 31" d="M5 8H15M15 8L11 4M15 8L11 12" stroke="#006590" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 260 B

3
public/icons/dot.svg
View File

@@ -1,3 +0,0 @@
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle id="Dot" cx="2" cy="2" r="2" fill="#006590"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 153 B

25
src/views/blog-post/table-of-contents/table-of-contents.module.scss
View File

@@ -16,7 +16,7 @@
--toc_sub-item_padding-start: var(--spc-3x);
--toc_sub-item_dot_margin-end: var(--spc-3x);
--toc_sub-item_dot_size: 16px;
--toc_sub-item_dot_size: 1rem;
--toc_label_color: var(--foreground_emphasis-medium);
--toc_label_color_selected: var(--foreground_emphasis-high);
@@ -27,7 +27,6 @@
--toc_item_background-color_focused: var(--background_focus);
--toc_subheading-dot_color: var(--primary_default);
--toc_subheading-dot_color_focused: var(--foreground_emphasis-high);
--toc_focus-outline_color: var(--focus-outline_primary);
--toc_focus-outline_width: var(--border-width_focus);
@@ -166,7 +165,16 @@
/* Arrow */
.depth2:global(.toc-is-active):not(:hover) > a > *::before {
content: " ";
background-image: url("/icons/arrow.svg");
/* Mask applied to use the background color on */
background-color: var(--toc_subheading-dot_color);
-webkit-mask: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Arrow"><path id="Vector 31" d="M5 8H15M15 8L11 4M15 8L11 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
mask: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Arrow"><path id="Vector 31" d="M5 8H15M15 8L11 4M15 8L11 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: var(--toc_sub-item_dot_size);
mask-size: var(--toc_sub-item_dot_size);
background-repeat: no-repeat;
background-position: center center;
height: 100%;
@@ -179,7 +187,16 @@
/* Dot */
.depth2:hover > a > *::before {
content: " ";
background-image: url("/icons/dot.svg");
/* Mask applied to use the background color on */
background-color: var(--toc_subheading-dot_color);
-webkit-mask: url('data:image/svg+xml;utf8,<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"><circle id="Dot" cx="2" cy="2" r="2" fill="black"/></svg>');
mask: url('data:image/svg+xml;utf8,<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"><circle id="Dot" cx="2" cy="2" r="2" fill="black"/></svg>');
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 0.25rem;
mask-size: 0.25rem;
background-repeat: no-repeat;
background-position: center center;
height: 100%;