@docusaurus/theme-classic 0.0.0-4955 → 0.0.0-4962

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.
Files changed (33) hide show
  1. package/lib/theme-classic.d.ts +1 -0
  2. package/lib-next/theme/BlogListPaginator/index.js +25 -28
  3. package/lib-next/theme/BlogPostAuthor/index.js +3 -6
  4. package/lib-next/theme/BlogPostPaginator/index.js +25 -28
  5. package/lib-next/theme/BlogSidebar/Desktop/index.js +1 -1
  6. package/lib-next/theme/BlogSidebar/Desktop/styles.module.css +0 -2
  7. package/lib-next/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css +2 -6
  8. package/lib-next/theme/DocPaginator/index.js +25 -28
  9. package/lib-next/theme/DocSidebar/Desktop/CollapseButton/styles.module.css +11 -9
  10. package/lib-next/theme/Footer/Links/MultiColumn/index.js +1 -1
  11. package/lib-next/theme/MDXComponents/Ul.js +2 -4
  12. package/lib-next/theme/Navbar/Logo/index.js +1 -1
  13. package/lib-next/theme/NavbarItem/LocaleDropdownNavbarItem/index.js +2 -2
  14. package/lib-next/theme/PaginatorNavLink/index.js +8 -2
  15. package/package.json +14 -14
  16. package/src/theme/BlogListPaginator/index.tsx +25 -28
  17. package/src/theme/BlogPostAuthor/index.tsx +3 -7
  18. package/src/theme/BlogPostPaginator/index.tsx +25 -28
  19. package/src/theme/BlogSidebar/Desktop/index.tsx +1 -1
  20. package/src/theme/BlogSidebar/Desktop/styles.module.css +0 -2
  21. package/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css +2 -6
  22. package/src/theme/DocPaginator/index.tsx +25 -28
  23. package/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css +11 -9
  24. package/src/theme/Footer/Links/MultiColumn/index.tsx +1 -1
  25. package/src/theme/MDXComponents/Ul.tsx +2 -6
  26. package/src/theme/Navbar/Logo/index.tsx +1 -1
  27. package/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +2 -2
  28. package/src/theme/PaginatorNavLink/index.tsx +8 -2
  29. package/src/theme-classic.d.ts +1 -0
  30. package/lib-next/theme/BlogPostAuthor/styles.module.css +0 -12
  31. package/lib-next/theme/MDXComponents/Ul.module.css +0 -11
  32. package/src/theme/BlogPostAuthor/styles.module.css +0 -12
  33. package/src/theme/MDXComponents/Ul.module.css +0 -11
@@ -997,6 +997,7 @@ declare module '@theme/PaginatorNavLink' {
997
997
  export interface Props extends Omit<PropNavigationLink, 'title'> {
998
998
  readonly title: ReactNode;
999
999
  readonly subLabel?: JSX.Element;
1000
+ readonly isNext?: boolean;
1000
1001
  }
1001
1002
 
1002
1003
  export default function PaginatorNavLink(props: Props): JSX.Element;
@@ -18,34 +18,31 @@ export default function BlogListPaginator(props) {
18
18
  message: 'Blog list page navigation',
19
19
  description: 'The ARIA label for the blog pagination',
20
20
  })}>
21
- <div className="pagination-nav__item">
22
- {previousPage && (
23
- <PaginatorNavLink
24
- permalink={previousPage}
25
- title={
26
- <Translate
27
- id="theme.blog.paginator.newerEntries"
28
- description="The label used to navigate to the newer blog posts page (previous page)">
29
- Newer Entries
30
- </Translate>
31
- }
32
- />
33
- )}
34
- </div>
35
- <div className="pagination-nav__item pagination-nav__item--next">
36
- {nextPage && (
37
- <PaginatorNavLink
38
- permalink={nextPage}
39
- title={
40
- <Translate
41
- id="theme.blog.paginator.olderEntries"
42
- description="The label used to navigate to the older blog posts page (next page)">
43
- Older Entries
44
- </Translate>
45
- }
46
- />
47
- )}
48
- </div>
21
+ {previousPage && (
22
+ <PaginatorNavLink
23
+ permalink={previousPage}
24
+ title={
25
+ <Translate
26
+ id="theme.blog.paginator.newerEntries"
27
+ description="The label used to navigate to the newer blog posts page (previous page)">
28
+ Newer Entries
29
+ </Translate>
30
+ }
31
+ />
32
+ )}
33
+ {nextPage && (
34
+ <PaginatorNavLink
35
+ permalink={nextPage}
36
+ title={
37
+ <Translate
38
+ id="theme.blog.paginator.olderEntries"
39
+ description="The label used to navigate to the older blog posts page (next page)">
40
+ Older Entries
41
+ </Translate>
42
+ }
43
+ isNext
44
+ />
45
+ )}
49
46
  </nav>
50
47
  );
51
48
  }
@@ -6,7 +6,6 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import Link from '@docusaurus/Link';
9
- import styles from './styles.module.css';
10
9
 
11
10
  function MaybeLink(props) {
12
11
  if (props.href) {
@@ -22,11 +21,9 @@ export default function BlogPostAuthor({author}) {
22
21
  return (
23
22
  <div className="avatar margin-bottom--sm">
24
23
  {imageURL && (
25
- <span className="avatar__photo-link avatar__photo">
26
- <MaybeLink href={link}>
27
- <img className={styles.image} src={imageURL} alt={name} />
28
- </MaybeLink>
29
- </span>
24
+ <MaybeLink href={link} className="avatar__photo-link">
25
+ <img className="avatar__photo" src={imageURL} alt={name} />
26
+ </MaybeLink>
30
27
  )}
31
28
 
32
29
  {name && (
@@ -17,34 +17,31 @@ export default function BlogPostPaginator(props) {
17
17
  message: 'Blog post page navigation',
18
18
  description: 'The ARIA label for the blog posts pagination',
19
19
  })}>
20
- <div className="pagination-nav__item">
21
- {prevItem && (
22
- <PaginatorNavLink
23
- {...prevItem}
24
- subLabel={
25
- <Translate
26
- id="theme.blog.post.paginator.newerPost"
27
- description="The blog post button label to navigate to the newer/previous post">
28
- Newer Post
29
- </Translate>
30
- }
31
- />
32
- )}
33
- </div>
34
- <div className="pagination-nav__item pagination-nav__item--next">
35
- {nextItem && (
36
- <PaginatorNavLink
37
- {...nextItem}
38
- subLabel={
39
- <Translate
40
- id="theme.blog.post.paginator.olderPost"
41
- description="The blog post button label to navigate to the older/next post">
42
- Older Post
43
- </Translate>
44
- }
45
- />
46
- )}
47
- </div>
20
+ {prevItem && (
21
+ <PaginatorNavLink
22
+ {...prevItem}
23
+ subLabel={
24
+ <Translate
25
+ id="theme.blog.post.paginator.newerPost"
26
+ description="The blog post button label to navigate to the newer/previous post">
27
+ Newer Post
28
+ </Translate>
29
+ }
30
+ />
31
+ )}
32
+ {nextItem && (
33
+ <PaginatorNavLink
34
+ {...nextItem}
35
+ subLabel={
36
+ <Translate
37
+ id="theme.blog.post.paginator.olderPost"
38
+ description="The blog post button label to navigate to the older/next post">
39
+ Older Post
40
+ </Translate>
41
+ }
42
+ isNext
43
+ />
44
+ )}
48
45
  </nav>
49
46
  );
50
47
  }
@@ -22,7 +22,7 @@ export default function BlogSidebarDesktop({sidebar}) {
22
22
  <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
23
23
  {sidebar.title}
24
24
  </div>
25
- <ul className={styles.sidebarItemList}>
25
+ <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
26
26
  {sidebar.items.map((item) => (
27
27
  <li key={item.permalink} className={styles.sidebarItem}>
28
28
  <Link
@@ -18,9 +18,7 @@
18
18
  }
19
19
 
20
20
  .sidebarItemList {
21
- list-style: none;
22
21
  font-size: 0.9rem;
23
- padding-left: 0;
24
22
  }
25
23
 
26
24
  .sidebarItem {
@@ -15,11 +15,12 @@
15
15
  align-items: center;
16
16
  justify-content: center;
17
17
  transition: background-color var(--ifm-transition-fast) ease;
18
+ background-color: var(--docusaurus-collapse-button-bg);
18
19
  }
19
20
 
20
21
  .expandButton:hover,
21
22
  .expandButton:focus {
22
- background-color: var(--ifm-color-emphasis-200);
23
+ background-color: var(--docusaurus-collapse-button-bg-hover);
23
24
  }
24
25
 
25
26
  .expandButtonIcon {
@@ -29,9 +30,4 @@
29
30
  [dir='rtl'] .expandButtonIcon {
30
31
  transform: rotate(180deg);
31
32
  }
32
-
33
- [data-theme='dark'] .expandButton:hover,
34
- [data-theme='dark'] .expandButton:focus {
35
- background-color: var(--collapse-button-bg-color-dark);
36
- }
37
33
  }
@@ -17,34 +17,31 @@ export default function DocPaginator(props) {
17
17
  message: 'Docs pages navigation',
18
18
  description: 'The ARIA label for the docs pagination',
19
19
  })}>
20
- <div className="pagination-nav__item">
21
- {previous && (
22
- <PaginatorNavLink
23
- {...previous}
24
- subLabel={
25
- <Translate
26
- id="theme.docs.paginator.previous"
27
- description="The label used to navigate to the previous doc">
28
- Previous
29
- </Translate>
30
- }
31
- />
32
- )}
33
- </div>
34
- <div className="pagination-nav__item pagination-nav__item--next">
35
- {next && (
36
- <PaginatorNavLink
37
- {...next}
38
- subLabel={
39
- <Translate
40
- id="theme.docs.paginator.next"
41
- description="The label used to navigate to the next doc">
42
- Next
43
- </Translate>
44
- }
45
- />
46
- )}
47
- </div>
20
+ {previous && (
21
+ <PaginatorNavLink
22
+ {...previous}
23
+ subLabel={
24
+ <Translate
25
+ id="theme.docs.paginator.previous"
26
+ description="The label used to navigate to the previous doc">
27
+ Previous
28
+ </Translate>
29
+ }
30
+ />
31
+ )}
32
+ {next && (
33
+ <PaginatorNavLink
34
+ {...next}
35
+ subLabel={
36
+ <Translate
37
+ id="theme.docs.paginator.next"
38
+ description="The label used to navigate to the next doc">
39
+ Next
40
+ </Translate>
41
+ }
42
+ isNext
43
+ />
44
+ )}
48
45
  </nav>
49
46
  );
50
47
  }
@@ -6,13 +6,19 @@
6
6
  */
7
7
 
8
8
  :root {
9
- --collapse-button-bg-color-dark: #2e333a;
9
+ --docusaurus-collapse-button-bg: transparent;
10
+ --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
11
+ }
12
+
13
+ [data-theme='dark']:root {
14
+ --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
15
+ --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
10
16
  }
11
17
 
12
18
  @media (min-width: 997px) {
13
19
  .collapseSidebarButton {
14
20
  display: block !important;
15
- background-color: var(--ifm-button-background-color);
21
+ background-color: var(--docusaurus-collapse-button-bg);
16
22
  height: 40px;
17
23
  position: sticky;
18
24
  bottom: 0;
@@ -29,13 +35,9 @@
29
35
  transform: rotate(0);
30
36
  }
31
37
 
32
- [data-theme='dark'] .collapseSidebarButton {
33
- background-color: var(--collapse-button-bg-color-dark);
34
- }
35
-
36
- [data-theme='dark'] .collapseSidebarButton:hover,
37
- [data-theme='dark'] .collapseSidebarButton:focus {
38
- background-color: var(--ifm-color-emphasis-200);
38
+ .collapseSidebarButton:hover,
39
+ .collapseSidebarButton:focus {
40
+ background-color: var(--docusaurus-collapse-button-bg-hover);
39
41
  }
40
42
  }
41
43
 
@@ -27,7 +27,7 @@ function Column({column}) {
27
27
  return (
28
28
  <div className="col footer__col">
29
29
  <div className="footer__title">{column.title}</div>
30
- <ul className="footer__items">
30
+ <ul className="footer__items clean-list">
31
31
  {column.items.map((item, i) => (
32
32
  <ColumnLinkItem key={i} item={item} />
33
33
  ))}
@@ -6,15 +6,13 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import clsx from 'clsx';
9
- import styles from './Ul.module.css';
10
- const containsClassListLocalClass = styles['contains-task-list'];
11
9
 
12
10
  function transformUlClassName(className) {
13
11
  return clsx(
14
12
  className, // This class is set globally by GitHub/MDX
15
- // We keep the global class, but apply scoped CSS
13
+ // We keep the global class, but add Infima class to get list without styling
16
14
  // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
17
- className?.includes('contains-task-list') && containsClassListLocalClass,
15
+ className?.includes('contains-task-list') && 'clean-list',
18
16
  );
19
17
  }
20
18
 
@@ -11,7 +11,7 @@ export default function NavbarLogo() {
11
11
  <Logo
12
12
  className="navbar__brand"
13
13
  imageClassName="navbar__logo"
14
- titleClassName="navbar__title"
14
+ titleClassName="navbar__title text--truncate"
15
15
  />
16
16
  );
17
17
  }
@@ -49,10 +49,10 @@ export default function LocaleDropdownNavbarItem({
49
49
  {...props}
50
50
  mobile={mobile}
51
51
  label={
52
- <span>
52
+ <>
53
53
  <IconLanguage className={styles.iconLanguage} />
54
54
  {dropdownLabel}
55
- </span>
55
+ </>
56
56
  }
57
57
  items={items}
58
58
  />
@@ -5,11 +5,17 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import React from 'react';
8
+ import clsx from 'clsx';
8
9
  import Link from '@docusaurus/Link';
9
10
  export default function PaginatorNavLink(props) {
10
- const {permalink, title, subLabel} = props;
11
+ const {permalink, title, subLabel, isNext} = props;
11
12
  return (
12
- <Link className="pagination-nav__link" to={permalink}>
13
+ <Link
14
+ className={clsx(
15
+ 'pagination-nav__link',
16
+ isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
17
+ )}
18
+ to={permalink}>
13
19
  {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
14
20
  <div className="pagination-nav__label">{title}</div>
15
21
  </Link>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-classic",
3
- "version": "0.0.0-4955",
3
+ "version": "0.0.0-4962",
4
4
  "description": "Classic theme for Docusaurus",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/theme-classic.d.ts",
@@ -21,19 +21,19 @@
21
21
  "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
22
22
  },
23
23
  "dependencies": {
24
- "@docusaurus/core": "0.0.0-4955",
25
- "@docusaurus/plugin-content-blog": "0.0.0-4955",
26
- "@docusaurus/plugin-content-docs": "0.0.0-4955",
27
- "@docusaurus/plugin-content-pages": "0.0.0-4955",
28
- "@docusaurus/theme-common": "0.0.0-4955",
29
- "@docusaurus/theme-translations": "0.0.0-4955",
30
- "@docusaurus/utils": "0.0.0-4955",
31
- "@docusaurus/utils-common": "0.0.0-4955",
32
- "@docusaurus/utils-validation": "0.0.0-4955",
24
+ "@docusaurus/core": "0.0.0-4962",
25
+ "@docusaurus/plugin-content-blog": "0.0.0-4962",
26
+ "@docusaurus/plugin-content-docs": "0.0.0-4962",
27
+ "@docusaurus/plugin-content-pages": "0.0.0-4962",
28
+ "@docusaurus/theme-common": "0.0.0-4962",
29
+ "@docusaurus/theme-translations": "0.0.0-4962",
30
+ "@docusaurus/utils": "0.0.0-4962",
31
+ "@docusaurus/utils-common": "0.0.0-4962",
32
+ "@docusaurus/utils-validation": "0.0.0-4962",
33
33
  "@mdx-js/react": "^1.6.22",
34
34
  "clsx": "^1.1.1",
35
35
  "copy-text-to-clipboard": "^3.0.1",
36
- "infima": "0.2.0-alpha.38",
36
+ "infima": "0.2.0-alpha.39",
37
37
  "lodash": "^4.17.21",
38
38
  "nprogress": "^0.2.0",
39
39
  "postcss": "^8.4.13",
@@ -46,8 +46,8 @@
46
46
  "@babel/cli": "^7.17.10",
47
47
  "@babel/core": "^7.17.10",
48
48
  "@babel/preset-typescript": "^7.16.7",
49
- "@docusaurus/module-type-aliases": "0.0.0-4955",
50
- "@docusaurus/types": "0.0.0-4955",
49
+ "@docusaurus/module-type-aliases": "0.0.0-4962",
50
+ "@docusaurus/types": "0.0.0-4962",
51
51
  "@types/mdx-js__react": "^1.5.5",
52
52
  "@types/nprogress": "^0.2.0",
53
53
  "@types/prismjs": "^1.26.0",
@@ -64,5 +64,5 @@
64
64
  "engines": {
65
65
  "node": ">=14"
66
66
  },
67
- "gitHead": "a3e35c960df0cc4fd2908ed8d49fe67c25da5b2f"
67
+ "gitHead": "09d93ecee8d2d83cd27166af3c6bf4fb12abf2e7"
68
68
  }
@@ -22,34 +22,31 @@ export default function BlogListPaginator(props: Props): JSX.Element {
22
22
  message: 'Blog list page navigation',
23
23
  description: 'The ARIA label for the blog pagination',
24
24
  })}>
25
- <div className="pagination-nav__item">
26
- {previousPage && (
27
- <PaginatorNavLink
28
- permalink={previousPage}
29
- title={
30
- <Translate
31
- id="theme.blog.paginator.newerEntries"
32
- description="The label used to navigate to the newer blog posts page (previous page)">
33
- Newer Entries
34
- </Translate>
35
- }
36
- />
37
- )}
38
- </div>
39
- <div className="pagination-nav__item pagination-nav__item--next">
40
- {nextPage && (
41
- <PaginatorNavLink
42
- permalink={nextPage}
43
- title={
44
- <Translate
45
- id="theme.blog.paginator.olderEntries"
46
- description="The label used to navigate to the older blog posts page (next page)">
47
- Older Entries
48
- </Translate>
49
- }
50
- />
51
- )}
52
- </div>
25
+ {previousPage && (
26
+ <PaginatorNavLink
27
+ permalink={previousPage}
28
+ title={
29
+ <Translate
30
+ id="theme.blog.paginator.newerEntries"
31
+ description="The label used to navigate to the newer blog posts page (previous page)">
32
+ Newer Entries
33
+ </Translate>
34
+ }
35
+ />
36
+ )}
37
+ {nextPage && (
38
+ <PaginatorNavLink
39
+ permalink={nextPage}
40
+ title={
41
+ <Translate
42
+ id="theme.blog.paginator.olderEntries"
43
+ description="The label used to navigate to the older blog posts page (next page)">
44
+ Older Entries
45
+ </Translate>
46
+ }
47
+ isNext
48
+ />
49
+ )}
53
50
  </nav>
54
51
  );
55
52
  }
@@ -9,8 +9,6 @@ import React from 'react';
9
9
  import Link, {type Props as LinkProps} from '@docusaurus/Link';
10
10
  import type {Props} from '@theme/BlogPostAuthor';
11
11
 
12
- import styles from './styles.module.css';
13
-
14
12
  function MaybeLink(props: LinkProps): JSX.Element {
15
13
  if (props.href) {
16
14
  return <Link {...props} />;
@@ -24,11 +22,9 @@ export default function BlogPostAuthor({author}: Props): JSX.Element {
24
22
  return (
25
23
  <div className="avatar margin-bottom--sm">
26
24
  {imageURL && (
27
- <span className="avatar__photo-link avatar__photo">
28
- <MaybeLink href={link}>
29
- <img className={styles.image} src={imageURL} alt={name} />
30
- </MaybeLink>
31
- </span>
25
+ <MaybeLink href={link} className="avatar__photo-link">
26
+ <img className="avatar__photo" src={imageURL} alt={name} />
27
+ </MaybeLink>
32
28
  )}
33
29
 
34
30
  {name && (
@@ -21,34 +21,31 @@ export default function BlogPostPaginator(props: Props): JSX.Element {
21
21
  message: 'Blog post page navigation',
22
22
  description: 'The ARIA label for the blog posts pagination',
23
23
  })}>
24
- <div className="pagination-nav__item">
25
- {prevItem && (
26
- <PaginatorNavLink
27
- {...prevItem}
28
- subLabel={
29
- <Translate
30
- id="theme.blog.post.paginator.newerPost"
31
- description="The blog post button label to navigate to the newer/previous post">
32
- Newer Post
33
- </Translate>
34
- }
35
- />
36
- )}
37
- </div>
38
- <div className="pagination-nav__item pagination-nav__item--next">
39
- {nextItem && (
40
- <PaginatorNavLink
41
- {...nextItem}
42
- subLabel={
43
- <Translate
44
- id="theme.blog.post.paginator.olderPost"
45
- description="The blog post button label to navigate to the older/next post">
46
- Older Post
47
- </Translate>
48
- }
49
- />
50
- )}
51
- </div>
24
+ {prevItem && (
25
+ <PaginatorNavLink
26
+ {...prevItem}
27
+ subLabel={
28
+ <Translate
29
+ id="theme.blog.post.paginator.newerPost"
30
+ description="The blog post button label to navigate to the newer/previous post">
31
+ Newer Post
32
+ </Translate>
33
+ }
34
+ />
35
+ )}
36
+ {nextItem && (
37
+ <PaginatorNavLink
38
+ {...nextItem}
39
+ subLabel={
40
+ <Translate
41
+ id="theme.blog.post.paginator.olderPost"
42
+ description="The blog post button label to navigate to the older/next post">
43
+ Older Post
44
+ </Translate>
45
+ }
46
+ isNext
47
+ />
48
+ )}
52
49
  </nav>
53
50
  );
54
51
  }
@@ -26,7 +26,7 @@ export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
26
26
  <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
27
27
  {sidebar.title}
28
28
  </div>
29
- <ul className={styles.sidebarItemList}>
29
+ <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
30
30
  {sidebar.items.map((item) => (
31
31
  <li key={item.permalink} className={styles.sidebarItem}>
32
32
  <Link
@@ -18,9 +18,7 @@
18
18
  }
19
19
 
20
20
  .sidebarItemList {
21
- list-style: none;
22
21
  font-size: 0.9rem;
23
- padding-left: 0;
24
22
  }
25
23
 
26
24
  .sidebarItem {
@@ -15,11 +15,12 @@
15
15
  align-items: center;
16
16
  justify-content: center;
17
17
  transition: background-color var(--ifm-transition-fast) ease;
18
+ background-color: var(--docusaurus-collapse-button-bg);
18
19
  }
19
20
 
20
21
  .expandButton:hover,
21
22
  .expandButton:focus {
22
- background-color: var(--ifm-color-emphasis-200);
23
+ background-color: var(--docusaurus-collapse-button-bg-hover);
23
24
  }
24
25
 
25
26
  .expandButtonIcon {
@@ -29,9 +30,4 @@
29
30
  [dir='rtl'] .expandButtonIcon {
30
31
  transform: rotate(180deg);
31
32
  }
32
-
33
- [data-theme='dark'] .expandButton:hover,
34
- [data-theme='dark'] .expandButton:focus {
35
- background-color: var(--collapse-button-bg-color-dark);
36
- }
37
33
  }
@@ -21,34 +21,31 @@ export default function DocPaginator(props: Props): JSX.Element {
21
21
  message: 'Docs pages navigation',
22
22
  description: 'The ARIA label for the docs pagination',
23
23
  })}>
24
- <div className="pagination-nav__item">
25
- {previous && (
26
- <PaginatorNavLink
27
- {...previous}
28
- subLabel={
29
- <Translate
30
- id="theme.docs.paginator.previous"
31
- description="The label used to navigate to the previous doc">
32
- Previous
33
- </Translate>
34
- }
35
- />
36
- )}
37
- </div>
38
- <div className="pagination-nav__item pagination-nav__item--next">
39
- {next && (
40
- <PaginatorNavLink
41
- {...next}
42
- subLabel={
43
- <Translate
44
- id="theme.docs.paginator.next"
45
- description="The label used to navigate to the next doc">
46
- Next
47
- </Translate>
48
- }
49
- />
50
- )}
51
- </div>
24
+ {previous && (
25
+ <PaginatorNavLink
26
+ {...previous}
27
+ subLabel={
28
+ <Translate
29
+ id="theme.docs.paginator.previous"
30
+ description="The label used to navigate to the previous doc">
31
+ Previous
32
+ </Translate>
33
+ }
34
+ />
35
+ )}
36
+ {next && (
37
+ <PaginatorNavLink
38
+ {...next}
39
+ subLabel={
40
+ <Translate
41
+ id="theme.docs.paginator.next"
42
+ description="The label used to navigate to the next doc">
43
+ Next
44
+ </Translate>
45
+ }
46
+ isNext
47
+ />
48
+ )}
52
49
  </nav>
53
50
  );
54
51
  }
@@ -6,13 +6,19 @@
6
6
  */
7
7
 
8
8
  :root {
9
- --collapse-button-bg-color-dark: #2e333a;
9
+ --docusaurus-collapse-button-bg: transparent;
10
+ --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
11
+ }
12
+
13
+ [data-theme='dark']:root {
14
+ --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
15
+ --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
10
16
  }
11
17
 
12
18
  @media (min-width: 997px) {
13
19
  .collapseSidebarButton {
14
20
  display: block !important;
15
- background-color: var(--ifm-button-background-color);
21
+ background-color: var(--docusaurus-collapse-button-bg);
16
22
  height: 40px;
17
23
  position: sticky;
18
24
  bottom: 0;
@@ -29,13 +35,9 @@
29
35
  transform: rotate(0);
30
36
  }
31
37
 
32
- [data-theme='dark'] .collapseSidebarButton {
33
- background-color: var(--collapse-button-bg-color-dark);
34
- }
35
-
36
- [data-theme='dark'] .collapseSidebarButton:hover,
37
- [data-theme='dark'] .collapseSidebarButton:focus {
38
- background-color: var(--ifm-color-emphasis-200);
38
+ .collapseSidebarButton:hover,
39
+ .collapseSidebarButton:focus {
40
+ background-color: var(--docusaurus-collapse-button-bg-hover);
39
41
  }
40
42
  }
41
43
 
@@ -31,7 +31,7 @@ function Column({column}: {column: ColumnType}) {
31
31
  return (
32
32
  <div className="col footer__col">
33
33
  <div className="footer__title">{column.title}</div>
34
- <ul className="footer__items">
34
+ <ul className="footer__items clean-list">
35
35
  {column.items.map((item, i) => (
36
36
  <ColumnLinkItem key={i} item={item} />
37
37
  ))}
@@ -9,17 +9,13 @@ import React from 'react';
9
9
  import clsx from 'clsx';
10
10
  import type {Props} from '@theme/MDXComponents/Ul';
11
11
 
12
- import styles from './Ul.module.css';
13
-
14
- const containsClassListLocalClass = styles['contains-task-list'];
15
-
16
12
  function transformUlClassName(className?: string): string {
17
13
  return clsx(
18
14
  className,
19
15
  // This class is set globally by GitHub/MDX
20
- // We keep the global class, but apply scoped CSS
16
+ // We keep the global class, but add Infima class to get list without styling
21
17
  // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
22
- className?.includes('contains-task-list') && containsClassListLocalClass,
18
+ className?.includes('contains-task-list') && 'clean-list',
23
19
  );
24
20
  }
25
21
 
@@ -13,7 +13,7 @@ export default function NavbarLogo(): JSX.Element {
13
13
  <Logo
14
14
  className="navbar__brand"
15
15
  imageClassName="navbar__logo"
16
- titleClassName="navbar__title"
16
+ titleClassName="navbar__title text--truncate"
17
17
  />
18
18
  );
19
19
  }
@@ -58,10 +58,10 @@ export default function LocaleDropdownNavbarItem({
58
58
  {...props}
59
59
  mobile={mobile}
60
60
  label={
61
- <span>
61
+ <>
62
62
  <IconLanguage className={styles.iconLanguage} />
63
63
  {dropdownLabel}
64
- </span>
64
+ </>
65
65
  }
66
66
  items={items}
67
67
  />
@@ -6,13 +6,19 @@
6
6
  */
7
7
 
8
8
  import React from 'react';
9
+ import clsx from 'clsx';
9
10
  import Link from '@docusaurus/Link';
10
11
  import type {Props} from '@theme/PaginatorNavLink';
11
12
 
12
13
  export default function PaginatorNavLink(props: Props): JSX.Element {
13
- const {permalink, title, subLabel} = props;
14
+ const {permalink, title, subLabel, isNext} = props;
14
15
  return (
15
- <Link className="pagination-nav__link" to={permalink}>
16
+ <Link
17
+ className={clsx(
18
+ 'pagination-nav__link',
19
+ isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
20
+ )}
21
+ to={permalink}>
16
22
  {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
17
23
  <div className="pagination-nav__label">{title}</div>
18
24
  </Link>
@@ -997,6 +997,7 @@ declare module '@theme/PaginatorNavLink' {
997
997
  export interface Props extends Omit<PropNavigationLink, 'title'> {
998
998
  readonly title: ReactNode;
999
999
  readonly subLabel?: JSX.Element;
1000
+ readonly isNext?: boolean;
1000
1001
  }
1001
1002
 
1002
1003
  export default function PaginatorNavLink(props: Props): JSX.Element;
@@ -1,12 +0,0 @@
1
- /**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- .image {
9
- width: 100%;
10
- height: 100%;
11
- object-fit: cover;
12
- }
@@ -1,11 +0,0 @@
1
- /**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- .contains-task-list {
9
- padding-left: 0;
10
- list-style: none;
11
- }
@@ -1,12 +0,0 @@
1
- /**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- .image {
9
- width: 100%;
10
- height: 100%;
11
- object-fit: cover;
12
- }
@@ -1,11 +0,0 @@
1
- /**
2
- * Copyright (c) Facebook, Inc. and its affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- .contains-task-list {
9
- padding-left: 0;
10
- list-style: none;
11
- }