@jupyterlab/toc 6.3.0-alpha.2 → 6.3.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/tocitem.d.ts +1 -1
- package/lib/tocitem.js +27 -14
- package/lib/tocitem.js.map +1 -1
- package/lib/toctree.js +2 -1
- package/lib/toctree.js.map +1 -1
- package/package.json +11 -10
- package/src/tocitem.tsx +39 -31
- package/src/toctree.tsx +4 -3
- package/style/base.css +1 -54
package/lib/tocitem.d.ts
CHANGED
package/lib/tocitem.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright (c) Jupyter Development Team.
|
|
2
2
|
// Distributed under the terms of the Modified BSD License.
|
|
3
|
-
import { caretDownIcon, caretRightIcon } from '@jupyterlab/ui-components';
|
|
4
3
|
import * as React from 'react';
|
|
4
|
+
import { TreeItem } from '@jupyter/react-components';
|
|
5
5
|
/**
|
|
6
6
|
* React component for a table of contents entry.
|
|
7
7
|
*/
|
|
@@ -13,22 +13,35 @@ export class TableOfContentsItem extends React.PureComponent {
|
|
|
13
13
|
*/
|
|
14
14
|
render() {
|
|
15
15
|
const { children, isActive, heading, onCollapse, onMouseDown } = this.props;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
// Handling toggle of collapse and expand
|
|
17
|
+
const handleToggle = (event) => {
|
|
18
|
+
// This will toggle the state and call the appropriate collapse or expand function
|
|
19
|
+
if (!event.defaultPrevented &&
|
|
20
|
+
event.target.expanded !== !heading.collapsed) {
|
|
21
|
+
event.preventDefault();
|
|
22
|
+
onCollapse(heading);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
return (React.createElement(TreeItem, { className: 'jp-tocItem jp-TreeItem nested', selected: isActive, expanded: !heading.collapsed, onExpand: handleToggle, onMouseDown: (event) => {
|
|
26
|
+
// React only on deepest item
|
|
27
|
+
if (!event.defaultPrevented) {
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
onMouseDown(heading);
|
|
30
|
+
}
|
|
31
|
+
}, onKeyUp: event => {
|
|
32
|
+
// React on key up because key down is used for tree view navigation
|
|
33
|
+
// and therefore key-down on Enter is default prevented to change the
|
|
34
|
+
// selection state
|
|
35
|
+
if (!event.defaultPrevented && event.key === 'Enter' && !isActive) {
|
|
36
|
+
event.preventDefault();
|
|
37
|
+
onMouseDown(heading);
|
|
38
|
+
}
|
|
39
|
+
} },
|
|
40
|
+
React.createElement("div", { className: "jp-tocItem-heading" },
|
|
28
41
|
React.createElement("span", { className: "jp-tocItem-content", title: heading.text, ...heading.dataset },
|
|
29
42
|
heading.prefix,
|
|
30
43
|
heading.text)),
|
|
31
|
-
children
|
|
44
|
+
children));
|
|
32
45
|
}
|
|
33
46
|
}
|
|
34
47
|
//# sourceMappingURL=tocitem.js.map
|
package/lib/tocitem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tocitem.js","sourceRoot":"","sources":["../src/tocitem.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAE3D,OAAO,
|
|
1
|
+
{"version":3,"file":"tocitem.js","sourceRoot":"","sources":["../src/tocitem.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAmB,MAAM,2BAA2B,CAAC;AA0BtE;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,aAE9C;IACC;;;;OAIG;IACH,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5E,yCAAyC;QACzC,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE;YAC1C,kFAAkF;YAClF,IACE,CAAC,KAAK,CAAC,gBAAgB;gBACtB,KAAK,CAAC,MAA0B,CAAC,QAAQ,KAAK,CAAC,OAAO,CAAC,SAAS,EACjE;gBACA,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,UAAU,CAAC,OAAO,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QAEF,OAAO,CACL,oBAAC,QAAQ,IACP,SAAS,EAAE,+BAA+B,EAC1C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,OAAO,CAAC,SAAS,EAC5B,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,CAAC,KAAwC,EAAE,EAAE;gBACxD,6BAA6B;gBAC7B,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;oBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,WAAW,CAAC,OAAO,CAAC,CAAC;iBACtB;YACH,CAAC,EACD,OAAO,EAAE,KAAK,CAAC,EAAE;gBACf,oEAAoE;gBACpE,qEAAqE;gBACrE,kBAAkB;gBAClB,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,QAAQ,EAAE;oBACjE,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,WAAW,CAAC,OAAO,CAAC,CAAC;iBACtB;YACH,CAAC;YAED,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,8BACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,OAAO,CAAC,IAAI,KACf,OAAO,CAAC,OAAO;oBAElB,OAAO,CAAC,MAAM;oBACd,OAAO,CAAC,IAAI,CACR,CACH;YACL,QAAQ,CACA,CACZ,CAAC;IACJ,CAAC;CACF"}
|
package/lib/toctree.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// Copyright (c) Jupyter Development Team.
|
|
2
2
|
// Distributed under the terms of the Modified BSD License.
|
|
3
|
+
import { TreeView } from '@jupyter/react-components';
|
|
3
4
|
import * as React from 'react';
|
|
4
5
|
import { TableOfContentsItem } from './tocitem';
|
|
5
6
|
/**
|
|
@@ -11,7 +12,7 @@ export class TableOfContentsTree extends React.PureComponent {
|
|
|
11
12
|
*/
|
|
12
13
|
render() {
|
|
13
14
|
const { documentType } = this.props;
|
|
14
|
-
return (React.createElement(
|
|
15
|
+
return (React.createElement(TreeView, { className: 'jp-TableOfContents-content jp-TreeView', 'data-document-type': documentType }, this.buildTree()));
|
|
15
16
|
}
|
|
16
17
|
/**
|
|
17
18
|
* Convert the flat headings list to a nested tree list
|
package/lib/toctree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toctree.js","sourceRoot":"","sources":["../src/toctree.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AA6BhD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,aAAwC;IACrF;;OAEG;IACH,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACpC,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"toctree.js","sourceRoot":"","sources":["../src/toctree.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AA6BhD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,aAAwC;IACrF;;OAEG;IACH,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACpC,OAAO,CACL,oBAAC,QAAQ,IACP,SAAS,EAAE,wCAAwC,EAC7C,oBAAoB,EAAE,YAAY,IAEvC,IAAI,CAAC,SAAS,EAAE,CACR,CACZ,CAAC;IACJ,CAAC;IAED;;OAEG;IACO,SAAS;QACjB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YACpC,OAAO,EAAE,CAAC;SACX;QAED,MAAM,YAAY,GAAG,CAAC,YAAoB,EAAyB,EAAE;YACnE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YAClC,MAAM,QAAQ,GAAG,IAAI,KAAK,EAAe,CAAC;YAC1C,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;YACpC,IAAI,kBAAkB,GAAG,YAAY,GAAG,CAAC,CAAC;YAE1C,OAAO,kBAAkB,GAAG,KAAK,CAAC,MAAM,EAAE;gBACxC,MAAM,aAAa,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBAChD,IAAI,aAAa,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,EAAE;oBACxC,MAAM;iBACP;gBACD,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,YAAY,CAAC,kBAAkB,CAAC,CAAC;gBAC5D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACrB,kBAAkB,GAAG,SAAS,CAAC;aAChC;YACD,MAAM,WAAW,GAAG,CAClB,oBAAC,mBAAmB,IAClB,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,IAAI,YAAY,IAAI,OAAO,CAAC,IAAI,EAAE,EACvD,QAAQ,EACN,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,OAAO,KAAK,IAAI,CAAC,KAAK,CAAC,aAAa,EAEpE,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,EACxC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAEtC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACd,CACvB,CAAC;YACF,OAAO,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEF,MAAM,KAAK,GAAG,IAAI,KAAK,EAAe,CAAC;QACvC,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,OAAO,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;YAChD,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;YACrD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACjB,YAAY,GAAG,SAAS,CAAC;SAC1B;QAED,OAAO,KAAK,CAAC;IACf,CAAC;CACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jupyterlab/toc",
|
|
3
|
-
"version": "6.3.0-
|
|
3
|
+
"version": "6.3.0-beta.0",
|
|
4
4
|
"description": "JupyterLab - Table of Contents widget",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jupyterlab"
|
|
@@ -40,14 +40,15 @@
|
|
|
40
40
|
"watch": "tsc -b --watch"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@
|
|
44
|
-
"@jupyterlab/
|
|
45
|
-
"@jupyterlab/
|
|
46
|
-
"@jupyterlab/
|
|
47
|
-
"@jupyterlab/
|
|
48
|
-
"@jupyterlab/rendermime
|
|
49
|
-
"@jupyterlab/
|
|
50
|
-
"@jupyterlab/
|
|
43
|
+
"@jupyter/react-components": "^0.16.6",
|
|
44
|
+
"@jupyterlab/apputils": "^4.4.0-beta.0",
|
|
45
|
+
"@jupyterlab/coreutils": "^6.3.0-beta.0",
|
|
46
|
+
"@jupyterlab/docregistry": "^4.3.0-beta.0",
|
|
47
|
+
"@jupyterlab/observables": "^5.3.0-beta.0",
|
|
48
|
+
"@jupyterlab/rendermime": "^4.3.0-beta.0",
|
|
49
|
+
"@jupyterlab/rendermime-interfaces": "^3.11.0-beta.0",
|
|
50
|
+
"@jupyterlab/translation": "^4.3.0-beta.0",
|
|
51
|
+
"@jupyterlab/ui-components": "^4.3.0-beta.0",
|
|
51
52
|
"@lumino/coreutils": "^2.1.2",
|
|
52
53
|
"@lumino/disposable": "^2.1.2",
|
|
53
54
|
"@lumino/messaging": "^2.0.1",
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
"react": "^18.2.0"
|
|
57
58
|
},
|
|
58
59
|
"devDependencies": {
|
|
59
|
-
"@jupyterlab/testing": "^4.3.0-
|
|
60
|
+
"@jupyterlab/testing": "^4.3.0-beta.0",
|
|
60
61
|
"@types/jest": "^29.2.0",
|
|
61
62
|
"@types/react": "^18.0.26",
|
|
62
63
|
"jest": "^29.2.0",
|
package/src/tocitem.tsx
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Copyright (c) Jupyter Development Team.
|
|
2
2
|
// Distributed under the terms of the Modified BSD License.
|
|
3
3
|
|
|
4
|
-
import { caretDownIcon, caretRightIcon } from '@jupyterlab/ui-components';
|
|
5
4
|
import * as React from 'react';
|
|
6
5
|
import { TableOfContents } from './tokens';
|
|
6
|
+
import { TreeItem, TreeItemElement } from '@jupyter/react-components';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Interface describing component properties.
|
|
@@ -24,7 +24,7 @@ export interface ITableOfContentsItemsProps {
|
|
|
24
24
|
onMouseDown: (heading: TableOfContents.IHeading) => void;
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
|
-
* Collapse event callback.
|
|
27
|
+
* Collapse/Expand event callback.
|
|
28
28
|
*/
|
|
29
29
|
onCollapse: (heading: TableOfContents.IHeading) => void;
|
|
30
30
|
}
|
|
@@ -43,34 +43,42 @@ export class TableOfContentsItem extends React.PureComponent<
|
|
|
43
43
|
render(): JSX.Element | null {
|
|
44
44
|
const { children, isActive, heading, onCollapse, onMouseDown } = this.props;
|
|
45
45
|
|
|
46
|
+
// Handling toggle of collapse and expand
|
|
47
|
+
const handleToggle = (event: CustomEvent) => {
|
|
48
|
+
// This will toggle the state and call the appropriate collapse or expand function
|
|
49
|
+
if (
|
|
50
|
+
!event.defaultPrevented &&
|
|
51
|
+
(event.target as TreeItemElement).expanded !== !heading.collapsed
|
|
52
|
+
) {
|
|
53
|
+
event.preventDefault();
|
|
54
|
+
onCollapse(heading);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
46
58
|
return (
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
) : (
|
|
71
|
-
<caretDownIcon.react tag="span" width="20px" />
|
|
72
|
-
)}
|
|
73
|
-
</button>
|
|
59
|
+
<TreeItem
|
|
60
|
+
className={'jp-tocItem jp-TreeItem nested'}
|
|
61
|
+
selected={isActive}
|
|
62
|
+
expanded={!heading.collapsed}
|
|
63
|
+
onExpand={handleToggle}
|
|
64
|
+
onMouseDown={(event: React.SyntheticEvent<HTMLElement>) => {
|
|
65
|
+
// React only on deepest item
|
|
66
|
+
if (!event.defaultPrevented) {
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
onMouseDown(heading);
|
|
69
|
+
}
|
|
70
|
+
}}
|
|
71
|
+
onKeyUp={event => {
|
|
72
|
+
// React on key up because key down is used for tree view navigation
|
|
73
|
+
// and therefore key-down on Enter is default prevented to change the
|
|
74
|
+
// selection state
|
|
75
|
+
if (!event.defaultPrevented && event.key === 'Enter' && !isActive) {
|
|
76
|
+
event.preventDefault();
|
|
77
|
+
onMouseDown(heading);
|
|
78
|
+
}
|
|
79
|
+
}}
|
|
80
|
+
>
|
|
81
|
+
<div className="jp-tocItem-heading">
|
|
74
82
|
<span
|
|
75
83
|
className="jp-tocItem-content"
|
|
76
84
|
title={heading.text}
|
|
@@ -80,8 +88,8 @@ export class TableOfContentsItem extends React.PureComponent<
|
|
|
80
88
|
{heading.text}
|
|
81
89
|
</span>
|
|
82
90
|
</div>
|
|
83
|
-
{children
|
|
84
|
-
</
|
|
91
|
+
{children}
|
|
92
|
+
</TreeItem>
|
|
85
93
|
);
|
|
86
94
|
}
|
|
87
95
|
}
|
package/src/toctree.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// Copyright (c) Jupyter Development Team.
|
|
2
2
|
// Distributed under the terms of the Modified BSD License.
|
|
3
3
|
|
|
4
|
+
import { TreeView } from '@jupyter/react-components';
|
|
4
5
|
import * as React from 'react';
|
|
5
6
|
import { TableOfContentsItem } from './tocitem';
|
|
6
7
|
import { TableOfContents } from './tokens';
|
|
@@ -41,12 +42,12 @@ export class TableOfContentsTree extends React.PureComponent<ITableOfContentsTre
|
|
|
41
42
|
render(): JSX.Element {
|
|
42
43
|
const { documentType } = this.props;
|
|
43
44
|
return (
|
|
44
|
-
<
|
|
45
|
-
className=
|
|
45
|
+
<TreeView
|
|
46
|
+
className={'jp-TableOfContents-content jp-TreeView'}
|
|
46
47
|
{...{ 'data-document-type': documentType }}
|
|
47
48
|
>
|
|
48
49
|
{this.buildTree()}
|
|
49
|
-
</
|
|
50
|
+
</TreeView>
|
|
50
51
|
);
|
|
51
52
|
}
|
|
52
53
|
|
package/style/base.css
CHANGED
|
@@ -7,10 +7,6 @@
|
|
|
7
7
|
| Table of Contents
|
|
8
8
|
|----------------------------------------------------------------------------*/
|
|
9
9
|
|
|
10
|
-
:root {
|
|
11
|
-
--jp-private-toc-active-width: 4px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
10
|
.jp-TableOfContents {
|
|
15
11
|
display: flex;
|
|
16
12
|
flex-direction: column;
|
|
@@ -41,19 +37,7 @@
|
|
|
41
37
|
margin: 4px;
|
|
42
38
|
}
|
|
43
39
|
|
|
44
|
-
.jp-TableOfContents ol {
|
|
45
|
-
list-style-type: none;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/* stylelint-disable-next-line selector-max-type */
|
|
49
|
-
.jp-TableOfContents li > ol {
|
|
50
|
-
/* Align left border with triangle icon center */
|
|
51
|
-
padding-left: 11px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
40
|
.jp-TableOfContents-content {
|
|
55
|
-
/* left margin for the active heading indicator */
|
|
56
|
-
margin: 0 0 0 var(--jp-private-toc-active-width);
|
|
57
41
|
padding: 0;
|
|
58
42
|
background-color: var(--jp-layout-color1);
|
|
59
43
|
}
|
|
@@ -68,10 +52,7 @@
|
|
|
68
52
|
.jp-tocItem-heading {
|
|
69
53
|
display: flex;
|
|
70
54
|
cursor: pointer;
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
.jp-tocItem-heading:hover {
|
|
74
|
-
background-color: var(--jp-layout-color2);
|
|
55
|
+
width: 100%;
|
|
75
56
|
}
|
|
76
57
|
|
|
77
58
|
.jp-tocItem-content {
|
|
@@ -81,37 +62,3 @@
|
|
|
81
62
|
text-overflow: ellipsis;
|
|
82
63
|
overflow-x: hidden;
|
|
83
64
|
}
|
|
84
|
-
|
|
85
|
-
.jp-tocItem-collapser {
|
|
86
|
-
height: 20px;
|
|
87
|
-
margin: 2px 2px 0;
|
|
88
|
-
padding: 0;
|
|
89
|
-
background: none;
|
|
90
|
-
border: none;
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.jp-tocItem-collapser:hover {
|
|
95
|
-
background-color: var(--jp-layout-color3);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/* Active heading indicator */
|
|
99
|
-
|
|
100
|
-
.jp-tocItem-heading::before {
|
|
101
|
-
content: ' ';
|
|
102
|
-
background: transparent;
|
|
103
|
-
width: var(--jp-private-toc-active-width);
|
|
104
|
-
height: 24px;
|
|
105
|
-
position: absolute;
|
|
106
|
-
left: 0;
|
|
107
|
-
border-radius: var(--jp-border-radius);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.jp-tocItem-heading.jp-tocItem-active::before {
|
|
111
|
-
background-color: var(--jp-brand-color1);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.jp-tocItem-heading:hover.jp-tocItem-active::before {
|
|
115
|
-
background: var(--jp-brand-color0);
|
|
116
|
-
opacity: 1;
|
|
117
|
-
}
|