Skip to content

Commit

Permalink
Move table of contents styling into concepts
Browse files Browse the repository at this point in the history
  • Loading branch information
MinThaMie committed Oct 20, 2023
1 parent b15f6a9 commit ad6b4ad
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 2 deletions.
2 changes: 0 additions & 2 deletions .stylelintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions addon/styles/addon.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
@import 'icon.css';
@import 'sidebar-container.css';
@import 'well.css';
@import 'table-of-contents.css';

/* Helpers */
@import 'helpers/index.css';
Expand Down
62 changes: 62 additions & 0 deletions addon/styles/table-of-contents.css
Original file line number Diff line number Diff line change
@@ -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);
}
}
43 changes: 43 additions & 0 deletions docs/concepts/table-of-contents.md
Original file line number Diff line number Diff line change
@@ -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
<ul class="table-of-contents">
<li class="toc-heading">Introduction</li>
<li class="toc-item">
<a href="#">Getting Started</a>
</li>
<li class="toc-item">
<a href="#">Tutorial</a>
</li>
<li class="toc-heading">Core Concepts</li>
<li class="toc-item">
<a href="#">Components</a>
</li>
<li class="toc-item">
<a href="#"> Routing </a>
<ul class="table-of-contents sub-table-of-contents">
<li class="toc-item">
<a href="#">Introduction</a>
</li>
<li class="toc-item">
<a href="#">Defining Your Routes</a>
</li>
<li class="toc-item selected">
<a href="#">Linking Between Routes</a>
</li>
</ul>
</li>
<li class="toc-item">
<a href="#">Services</a>
</li>
<li class="toc-item">
<a href="#">EmberData</a>
</li>
<li class="toc-item">
<a href="#">In-Depth Topics</a>
</li>
</ul>
```

0 comments on commit ad6b4ad

Please sign in to comment.