.citizen-toc { 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-base ) 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 ); border-radius: var( --border-radius-base ); &.citizen-toc__top { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0 !important; transition-property: opacity, height, padding !important; } &:hover { background-color: var( --background-color-button-quiet--hover ); } &:active { background-color: var( --background-color-button-quiet--active ); } &:hover, &:focus { text-decoration: none; } } &__indicator { position: absolute; top: 0; bottom: 0; left: 0; flex-shrink: 0; width: 3px; margin-top: var( --space-xs ); margin-bottom: var( --space-xs ); margin-left: -2px; border-radius: var( --border-radius-pill ); } &__text { display: flex; gap: var( --space-xs ); } &__numb { display: none; color: var( --color-subtle ); } &__listItem { &--active { > .citizen-toc__link { color: var( --color-progressive ); .citizen-toc__indicator { background-color: var( --color-progressive ); } } } } } // 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-md ); 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-dialog ); // 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 { --toc-margin-top: var( --space-xs ); position: -webkit-sticky; position: sticky; top: var( --toc-margin-top ); max-height: ~'calc( 100vh - var( --toc-margin-top ) - var( --space-md ) )'; overflow-y: auto; overscroll-behavior: contain; .citizen-menu__card { margin: 0; background: transparent; border: 0; box-shadow: none; transform: none; > * { opacity: 1; } } // Sticky header styles .citizen-page-header--sticky & { --toc-margin-top: ~'calc( var( --header-size ) + var( --space-xxl ) )'; // Sticky header is shorter without buttons @media ( max-height: 800px ) { --toc-margin-top: ~'calc( var( --header-size ) + var( --space-md ) )'; } } // Hide button in desktop viewport .citizen-dropdown-summary { display: none; } } }