Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: Adjust styling of back top top button #5469

Merged
merged 10 commits into from
Sep 11, 2021
Merged

refactor: Adjust styling of back top top button #5469

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
178619f
refactor: css variables for back to top button
dsmmcken Sep 1, 2021
deea405
refactor: adjust back to top button styling
dsmmcken Sep 2, 2021
2581182
Update from PR feedback
dsmmcken Sep 8, 2021
3326e2f
err... darker.
dsmmcken Sep 8, 2021
f573dcd
swap secondary color for emphasis scale
dsmmcken Sep 8, 2021
fb3d5a1
reduce contrast further
dsmmcken Sep 8, 2021
c04b120
Merge remote-tracking branch 'origin/main' into HEAD
lex111 Sep 11, 2021
5d2a210
Add new translations
lex111 Sep 11, 2021
12524bc
Cleanup CSS
lex111 Sep 11, 2021
1ac9a36
Remove active state
lex111 Sep 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/docusaurus-theme-classic/codeTranslations/base.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,5 +112,7 @@
"theme.tags.tagsPageLink": "View All Tags",
"theme.tags.tagsPageLink___DESCRIPTION": "The label of the link targeting the tag list page",
"theme.tags.tagsPageTitle": "Tags",
"theme.tags.tagsPageTitle___DESCRIPTION": "The title of the tag list page"
"theme.tags.tagsPageTitle___DESCRIPTION": "The title of the tag list page",
"theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
"theme.BackToTopButton.buttonAriaLabel___DESCRIPTION": "The ARIA label for the back to top button"
}
16 changes: 8 additions & 8 deletions packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import React, {useRef, useState} from 'react';
import clsx from 'clsx';
import {useLocation} from '@docusaurus/router';
import {translate} from '@docusaurus/Translate';
import useScrollPosition from '@theme/hooks/useScrollPosition';

import styles from './styles.module.css';
Expand Down Expand Up @@ -106,18 +107,17 @@ function BackToTopButton(): JSX.Element {

return (
<button
aria-label={translate({
id: 'theme.BackToTopButton.buttonAriaLabel',
message: 'Scroll back to top',
description: 'The ARIA label for the back to top button',
})}
className={clsx('clean-btn', styles.backToTopButton, {
[styles.backToTopButtonShow]: show,
})}
type="button"
onClick={() => smoothScrollTop()}>
<svg viewBox="0 0 24 24" width="28">
<path
d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
fill="currentColor"
/>
</svg>
</button>
onClick={() => smoothScrollTop()}
/>
);
}

Expand Down
31 changes: 22 additions & 9 deletions packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,44 @@
*/

:root {
--docusaurus-btt-background: var(--ifm-color-primary);
--docusaurus-btt-color: #fff;
--docusaurus-btt-color: var(--ifm-color-gray-900);
--docusaurus-btt-background-color: var(--ifm-color-secondary);
--docusaurus-btt-hover-background-color: var(--ifm-color-secondary-dark);
--docusaurus-btt-position-right: 1.3rem;
--docusaurus-btt-position-bottom: 1.3rem;
--docusaurus-btt-icon: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem
no-repeat;
}

.backToTopButton {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 1.3rem;
bottom: 1.3rem;
right: var(--docusaurus-btt-position-right);
bottom: var(--docusaurus-btt-position-bottom);
border-radius: 50%;
background: var(--docusaurus-btt-background);
color: var(--docusaurus-btt-color);
background-color: var(--docusaurus-btt-background-color);
width: 3rem;
height: 3rem;
z-index: var(--ifm-z-index-fixed);
box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.3);
transition: all var(--ifm-transition-fast) ease-in-out;
box-shadow: var(--ifm-global-shadow-lw);
transition: all var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
opacity: 0;
transform: scale(0);
}

.backToTopButton:after {
content: ' ';
mask: var(--docusaurus-btt-icon);
background-color: var(--docusaurus-btt-color);
width: 100%;
height: 100%;
}

.backToTopButton:not(:focus):hover {
opacity: 0.8;
background-color: var(--docusaurus-btt-hover-background-color);
}

.backToTopButtonShow {
Expand Down