mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-27 09:09:44 +02:00
Table of content (#199)
* Create nodemon.json
* Add table of content
* update view
* remove logs
* update tags var
* update layout
* Revert "update layout"
This reverts commit 18aad62257
.
* update layout
* Update layout.pcss
* update from master
* Update sidebar.twig
* remove non valued changes
* Update table-of-content.js
* Update table-of-content.pcss
* Update table-of-content.pcss
* Update layout.pcss
* Update table-of-content.js
* remove unused styles
* not module
* rename var
* remove log
* update structure
* Update table-of-content.js
* Update table-of-content.js
* Update layout.pcss
* Update table-of-content.js
* try not to use intersection observer
* Update table-of-content.js
* fix scroll padding
* fix header component layout
* update logic
* fix click area
* Update table-of-content.js
* Update table-of-content.js
* small fixes
* remove unused
* Update table-of-content.js
* Update decorators.js
* Update table-of-content.js
* Update table-of-content.js
* Update table-of-content.js
* Update table-of-content.js
* Update table-of-content.js
* fix scroll issues, resolve eslit ts/js conflicts
* add some todos
* handle up-direction scroll as well
* optimization
* update offsets
* Update header.pcss
Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
This commit is contained in:
parent
13cc53e4ae
commit
213f9d89a3
16 changed files with 630 additions and 999 deletions
|
@ -1,3 +1,7 @@
|
|||
html {
|
||||
scroll-padding-top: calc(var(--layout-height-header) + 50px);
|
||||
}
|
||||
|
||||
.docs-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -6,7 +10,6 @@
|
|||
border-bottom: 1px solid var(--color-line-gray);
|
||||
font-size: 18px;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
height: var(--layout-height-header);
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.docs-sidebar {
|
||||
width: 100vw;
|
||||
|
||||
|
||||
@media (--desktop) {
|
||||
width: var(--layout-sidebar-width);
|
||||
}
|
||||
|
@ -14,7 +14,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
|
||||
|
||||
@media (--desktop) {
|
||||
height: calc(100vh - var(--layout-height-header));
|
||||
border-right: 1px solid var(--color-line-gray);
|
||||
|
@ -157,7 +157,7 @@
|
|||
height: 24px;
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.1s;
|
||||
|
||||
|
||||
@apply --squircle;
|
||||
|
||||
@media (--can-hover) {
|
||||
|
@ -178,7 +178,7 @@
|
|||
color: var(--color-text-second);
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid var(--color-line-gray);
|
||||
|
||||
|
||||
@media (--desktop) {
|
||||
display: none;
|
||||
}
|
||||
|
@ -217,4 +217,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
58
src/frontend/styles/components/table-of-content.pcss
Normal file
58
src/frontend/styles/components/table-of-content.pcss
Normal file
|
@ -0,0 +1,58 @@
|
|||
.table-of-content {
|
||||
border-left: 1px solid var(--color-line-gray);
|
||||
padding-left: var(--layout-padding-horizontal);
|
||||
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
|
||||
box-sizing: border-box;
|
||||
|
||||
&__header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 21px;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
margin-bottom: 12px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
gap: 6px;
|
||||
|
||||
&-item {
|
||||
@apply --squircle;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-link-hover);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
&--indent-1x { margin-left: 6px; }
|
||||
&--indent-2x { margin-left: 12px; }
|
||||
&--indent-3x { margin-left: 18px; }
|
||||
&--indent-4x { margin-left: 24px; }
|
||||
|
||||
& > a {
|
||||
padding: 4px 8px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 150%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue