From add121dbf6aec2c5e61eaaa65bae0f2e69da2284 Mon Sep 17 00:00:00 2001 From: Anne-Greeth van Herwijnen Date: Fri, 20 Oct 2023 14:27:50 +0200 Subject: [PATCH 1/3] Move table of contents styling into concepts --- .stylelintrc.js | 2 - addon/styles/addon.css | 1 + addon/styles/table-of-contents.css | 62 ++++++++++++++++++++++++++++++ docs/concepts/table-of-contents.md | 43 +++++++++++++++++++++ 4 files changed, 106 insertions(+), 2 deletions(-) create mode 100644 addon/styles/table-of-contents.css create mode 100644 docs/concepts/table-of-contents.md diff --git a/.stylelintrc.js b/.stylelintrc.js index fef3f5d2..0692a8a7 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -12,8 +12,6 @@ module.exports = { 'color-hex-length': 'long', // Disallow ids 'selector-max-id': 0, - // Enforce alphabetical ordering of properties - 'order/properties-alphabetical-order': true, // Require that color, background-color, etc use variables for colors, instead of direct values 'scale-unlimited/declaration-strict-value': [ ['/color/'] // We can enforce variables for font-size, margin, etc as well by adding here diff --git a/addon/styles/addon.css b/addon/styles/addon.css index eb1a76df..0febda9d 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -14,6 +14,7 @@ @import 'icon.css'; @import 'sidebar-container.css'; @import 'well.css'; +@import 'table-of-contents.css'; /* Helpers */ @import 'helpers/index.css'; diff --git a/addon/styles/table-of-contents.css b/addon/styles/table-of-contents.css new file mode 100644 index 00000000..9b284112 --- /dev/null +++ b/addon/styles/table-of-contents.css @@ -0,0 +1,62 @@ +.table-of-contents { + list-style-type: none; + padding-left: 0; + font-size: var(--font-size-base); + font-weight: var(--font-weight-3); +} + +.sub-table-of-contents { + padding-left: var(--spacing-1); + font-size: var(--font-size-base); + font-weight: var(--font-weight-2); +} + +.sub-table-of-contents .sub-table-of-contents { + padding-left: var(--spacing-3); + margin-bottom: 0; +} + +li.toc-heading { + margin-top: var(--spacing-4); + color: var(--color-gray-600); +} + +li.toc-heading:first-child { + margin-top: 0; +} + +.table-of-contents li { + margin: 3px 0; + list-style-type: none; +} + +.table-of-contents a:link { + background: none; +} + +.sub-table-of-contents .toc-item a { + display: block; + padding: var(--spacing-1); + border-radius: var(--radius); + line-height: var(--line-height-xs); + color: var(--color-gray-700); + border-left: 0 solid transparent; + transition: border-width 0.3s; +} + +.sub-table-of-contents .toc-item a:hover { + border-left: 4px solid var(--color-gray-400); + border-radius: 0; +} + +.sub-table-of-contents .toc-item.selected > a, +.sub-table-of-contents .toc-item > a.active { + border-left: 4px solid var(--color-brand-hc-dark); + border-radius: 0; +} + +@media (max-width: 844px) { + .table-of-contents { + font-size: var(--font-size-lg); + } +} diff --git a/docs/concepts/table-of-contents.md b/docs/concepts/table-of-contents.md new file mode 100644 index 00000000..24373380 --- /dev/null +++ b/docs/concepts/table-of-contents.md @@ -0,0 +1,43 @@ +# Table of Contents + +Instead of providing a component we provide this concept for our table of contents. You can see the concept below. +Every item in the list is either a `toc-heading`, giving it heading styling, or an `toc-item`. The `anchor`-tags wrapped in a `toc-item` will get specific styling. On the main level, not wrapped in a `sub-table-of contents`, they will be the brand-color. When they are wrapped in a `sub-table-of-contents`, they will have an "active" indicator and a hover state, this will also indent them from the main level. + +```html + +``` From b189a73536f3456a3102b4ddd7e7e5bae5ddf92f Mon Sep 17 00:00:00 2001 From: Anne-Greeth Schot-van Herwijnen Date: Mon, 23 Oct 2023 10:59:58 +0200 Subject: [PATCH 2/3] Update docs/concepts/table-of-contents.md Co-authored-by: Chris Manson --- docs/concepts/table-of-contents.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/concepts/table-of-contents.md b/docs/concepts/table-of-contents.md index 24373380..3fe34888 100644 --- a/docs/concepts/table-of-contents.md +++ b/docs/concepts/table-of-contents.md @@ -1,7 +1,7 @@ # Table of Contents Instead of providing a component we provide this concept for our table of contents. You can see the concept below. -Every item in the list is either a `toc-heading`, giving it heading styling, or an `toc-item`. The `anchor`-tags wrapped in a `toc-item` will get specific styling. On the main level, not wrapped in a `sub-table-of contents`, they will be the brand-color. When they are wrapped in a `sub-table-of-contents`, they will have an "active" indicator and a hover state, this will also indent them from the main level. +Every item in the list is either a `toc-heading`, giving it heading styling, or an `toc-item`. The `anchor`-tags wrapped in a `toc-item` will get specific styling. On the main level, not wrapped in a `sub-table-of-contents`, they will be the brand-color. When they are wrapped in a `sub-table-of-contents`, they will have an "active" indicator and a hover state, this will also indent them from the main level. ```html
    From 1a7cba508fa79b1f2b4b9af0da1966c4c10cf471 Mon Sep 17 00:00:00 2001 From: Anne-Greeth van Herwijnen Date: Thu, 26 Oct 2023 13:59:41 +0200 Subject: [PATCH 3/3] Fix margin for heading, because of css specificity --- addon/styles/table-of-contents.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/styles/table-of-contents.css b/addon/styles/table-of-contents.css index 9b284112..eecf8345 100644 --- a/addon/styles/table-of-contents.css +++ b/addon/styles/table-of-contents.css @@ -16,12 +16,12 @@ margin-bottom: 0; } -li.toc-heading { +.table-of-contents li.toc-heading { margin-top: var(--spacing-4); color: var(--color-gray-600); } -li.toc-heading:first-child { +.table-of-contents li.toc-heading:first-child { margin-top: 0; }