From 48173b6eb86a909206f2520b0a118923e1f54e77 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Wed, 19 Oct 2022 15:55:28 -0400 Subject: [PATCH] =?UTF-8?q?feat(core):=20=E2=9C=A8=20add=20icon=20to=20bac?= =?UTF-8?q?k=20to=20top=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/skins.citizen.icons/backToTop.svg | 5 ++++ .../skins.citizen.styles/TableOfContents.less | 25 ++++++++++++++++++- skin.json | 1 + 3 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 resources/skins.citizen.icons/backToTop.svg diff --git a/resources/skins.citizen.icons/backToTop.svg b/resources/skins.citizen.icons/backToTop.svg new file mode 100644 index 00000000..b5d2de89 --- /dev/null +++ b/resources/skins.citizen.icons/backToTop.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/resources/skins.citizen.styles/TableOfContents.less b/resources/skins.citizen.styles/TableOfContents.less index bb8d4c4e..3fe649c4 100644 --- a/resources/skins.citizen.styles/TableOfContents.less +++ b/resources/skins.citizen.styles/TableOfContents.less @@ -8,6 +8,23 @@ gap: var( --space-sm ); } + &__top { + &:before { + content: ""; + width: 0.875rem; + height: 0.875rem; + opacity: var( --opacity-icon-base ); + } + + &:hover:before { + opacity: var( --opacity-icon-base--hover ); + } + + &:active:before { + opacity: var( --opacity-icon-base--hover ); + } + } + &__header { color: var( --color-base--subtle ); letter-spacing: 0.75px; @@ -35,6 +52,7 @@ &__link { display: flex; + gap: var( --space-sm ); padding-top: var( --space-sm ); padding-bottom: var( --space-sm ); border-radius: var( --border-radius--small ); @@ -61,7 +79,6 @@ width: 3px; flex-shrink: 0; border-radius: 1000px; - margin-right: var( --space-sm ); margin-left: -2px; } @@ -91,6 +108,12 @@ } } +.skin-citizen-dark { + .citizen-toc__top:before { + filter: invert( 1 ); + } +} + @media ( min-width: @width-breakpoint-desktop ) { .citizen-toc { grid-area: toc; diff --git a/skin.json b/skin.json index 5d4f54fc..72bc397a 100644 --- a/skin.json +++ b/skin.json @@ -276,6 +276,7 @@ "selector": "{name}", "defaultColor": "#000", "images": { + ".citizen-toc__top:before": "resources/skins.citizen.icons/backToTop.svg", ".toctogglelabel:before": { "file": { "ltr": "resources/skins.citizen.icons/toc-ltr.svg",