.citizen-toc { --citizen-toc-toggle-size: ~'calc( var( --font-size-small ) * var( --line-height-xs ) + var( --space-xs ) * 2 )'; font-size: var( --font-size-small ); line-height: var( --line-height-xs ); &-top { .citizen-ui-icon { transform: rotate( 90deg ); } } &-contents, &-list { margin: 0 0 0 var( --space-xs ); list-style: none; border-left: var( --border-width-thick ) solid var( --border-color-base ); .citizen-toc-link { border-top-left-radius: 0; border-bottom-left-radius: 0; } } &-link { position: relative; display: flex; gap: var( --space-xs ); padding: var( --space-xs ); font-weight: var( --font-weight-medium ); color: var( --color-emphasized ); &.citizen-toc-top { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0 !important; transition-property: opacity, height, padding !important; } &:has( + .citizen-toc-toggle ) { /* Make space for toggle */ padding-right: ~'calc( var( --space-xs ) + var( --citizen-toc-toggle-size ) )'; } &:hover { background-color: var( --background-color-button-quiet--hover ); } &:active { background-color: var( --background-color-button-quiet--active ); } &:hover, &:focus { text-decoration: none; } } &-toggle { position: absolute; top: 0; right: 0; display: none; width: var( --citizen-toc-toggle-size ); height: var( --citizen-toc-toggle-size ); padding: 0; background: transparent; } &-indicator { position: absolute; top: 0; bottom: 0; left: 0; flex-shrink: 0; width: var( --border-width-thick ); margin-top: var( --space-xs ); margin-bottom: var( --space-xs ); margin-left: ~'calc( var( --border-width-thick ) * -1 )'; } &-text { display: flex; gap: var( --space-xs ); } &-numb { display: none; color: var( --color-subtle ); } &-list-item { position: relative; &--active { > .citizen-toc-link { color: var( --color-progressive ); .citizen-toc-indicator { background-color: var( --color-progressive ); } } } } } // Collapse ToC sections by default, excluding no-js .client-js .citizen-toc { .citizen-toc-level-1 .citizen-toc-list-item { display: none; } .citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-list-item { display: block; } .citizen-toc-toggle { --size-icon: var( --font-size-small ); display: grid; place-content: center; cursor: pointer; border-radius: var( --border-radius--small ); .citizen-ui-icon { &::before { transition: var( --transition-hover ); transition-property: transform; transform: rotate3d( 1, 0, 0, 180deg ); } } &:hover { background-color: var( --background-color-button-quiet--hover ); } &:active { background-color: var( --background-color-button-quiet--active ); } } .citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-toggle .citizen-ui-icon::before { transform: none; } } // Sticky header styles .citizen-page-header--sticky { .citizen-toc-top.citizen-toc-link { height: 2rem; // 1rem text + 1rem padding padding-top: var( --space-xs ); padding-bottom: var( --space-xs ); opacity: 1 !important; } } @media ( max-width: ( @max-width-breakpoint-tablet ) ) { .citizen-toc { position: fixed; bottom: ~'calc( var( --header-size ) + var( --space-xs ) )'; left: 0; z-index: @z-index-sticky; // Keep ToC above sticky header and page action, but below site header display: flex; flex-direction: column-reverse; // HACK: Place button below ToC pointer-events: none; // HACK: Make background clickable transition: var( --transition-menu ); transition-property: bottom; // Transform won't work with the backdrop &-card { // This is not bulletproof since it will get covered by page header // in extremely short height. but it should be good for now max-height: ~'calc( var( --header-card-maxheight ) - 8rem )'; padding: var( --space-xs ); transform-origin: var( --transform-origin-offset-start ) var( --transform-origin-offset-end ); } .citizen-dropdown { &-summary { position: absolute; bottom: 0; left: 0; display: grid; place-content: center; width: var( --toolbar-size ); height: var( --toolbar-size ); margin: var( --space-xs ); pointer-events: auto; // HACK: Make button clickable background-color: var( --color-surface-1 ); border-radius: var( --border-radius-medium ); box-shadow: var( --box-shadow-drop-xx-large ); // The hover state colors are not great but it will do for now &:hover { background: ~'linear-gradient( var( --background-color-button-quiet--hover ), var( --background-color-button-quiet--hover ) ) var( --color-surface-1 )'; } &:active { background: ~'linear-gradient( var( --background-color-button-quiet--active ), var( --background-color-button-quiet--active ) ) var( --color-surface-1 )'; } } &-details[ open ] { + .citizen-menu__card { pointer-events: auto; // HACK: Make ToC clickable after ToC is expanded } > .citizen-dropdown-summary { background: ~'linear-gradient( var( --background-color-button-quiet--active ), var( --background-color-button-quiet--active ) ) var( --color-surface-1 )'; } } } } } @media ( min-width: @min-width-breakpoint-desktop ) { .citizen-toc { position: -webkit-sticky; position: sticky; top: var( --height-sticky-header ); max-height: ~'calc( 100vh - var( --height-sticky-header ) )'; padding: var( --space-xs ) 0; overflow-y: auto; overscroll-behavior: contain; .citizen-menu__card { margin: 0; background: transparent; border: 0; box-shadow: none; transform: none; > * { opacity: 1; } } // Hide button in desktop viewport .citizen-dropdown-summary { display: none; } } }