.op3-element[data-op3-element-type="tableofcontentslistitem"] {
.op3-element-tableofcontentslistitem__container {
display: flex;
overflow: visible;
}
// Background to the back.
.op3-element-tableofcontentslistitem__canvas {
z-index: -1;
}
// Link.
.table-of-contents__link {
position: relative;
display: flex;
overflow: hidden;
border: 1px none currentColor;
align-items: flex-start;
&:has(.table-of-contents__label:empty) {
display: none;
}
}
// Inherit link color on inactive state.
&:not(.table-of-contents__item--active) > .op3-element-tableofcontentslistitem__container .table-of-contents__link:not(:hover) {
color: inherit;
}
// Markers.
.op3-element-tableofcontentslistitem__marker {
margin-right: 0.25em;
}
.op3-element-tableofcontentslistitem__marker--media {
display: flex;
align-items: center;
line-height: inherit;
// Line height does not work if there is no text in element (there is
// only svg in our case), so adding zero width space to force height to
// fit line height.
&::before {
content: "\200b";
}
}
}
// Hide non-top-level markers (if set so).
//
// SCSS preprocessor will remove multiple selectors inside is() and not()
// methods. We can prevent that by not using amperstand character.
[data-op3-table-of-contents-marker-placement="top"] .op3-element[data-op3-element-type="tableofcontentslistitem"]:not(.table-of-contents > .table-of-contents__item) .op3-element-tableofcontentslistitem__marker {
display: none;
}
// Default indent and item spacing.
.op3-element[data-op3-element-type="tableofcontentslistitem"]:is(.table-of-contents__children .table-of-contents__item) { margin-left: 1.5em; }
.op3-element[data-op3-element-type="tableofcontentslistitem"]:not(.op3-element-tableofcontentslist__children > :first-child) { margin-top: 0.25em; }
.op3-element[data-op3-element-type="tableofcontentslistitem"]:has( > .op3-element-tableofcontentslistitem__container > .table-of-contents__link .table-of-contents__label:empty) { margin-top: 0 !important; }
// Auto Collapse.
[data-op3-table-of-contents-auto-collapse-items="1"] .op3-element[data-op3-element-type="tableofcontentslistitem"] .op3-element__collapser:not(:has(.table-of-contents__item--active), .table-of-contents__item--active > .op3-element__collapser) {
grid-template-rows: 0fr;
}
[data-op3-table-of-contents-auto-collapse-items="1"] .op3-element[data-op3-element-type="tableofcontentslistitem"] .op3-element__collapser:not(:has(.table-of-contents__item--active), .table-of-contents__item--active > .op3-element__collapser) > :first-child {
clip-path: rect(0 100% 0 0);
}
@supports (interpolate-size: allow-keywords) {
[data-op3-table-of-contents-auto-collapse-items="1"] .op3-element[data-op3-element-type="tableofcontentslistitem"] .op3-element__collapser:not(:has(.table-of-contents__item--active), .table-of-contents__item--active > .op3-element__collapser) > :first-child {
height: 0;
}
}
@supports not (interpolate-size: allow-keywords) {
[data-op3-table-of-contents-auto-collapse-items="1"] .op3-element[data-op3-element-type="tableofcontentslistitem"] .op3-element__collapser:not(:has(.table-of-contents__item--active), .table-of-contents__item--active > .op3-element__collapser) > :first-child {
overflow: hidden;
}
}
Projects -
Ir al contenido
