3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-12 07:42:34 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: make code block shadows consistent with new admonitions (#5215)

Browse source
This commit is contained in:
Sébastien Lorber 2021-07-23 18:11:40 +02:00 • committed by GitHub
parent 083037d7a5
commit a7a5ea3466
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
View file

@ -210,9 +210,7 @@ export default function CodeBlock({
<pre <pre
/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */ /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
tabIndex={0} tabIndex={0}
className={clsx(className, styles.codeBlock, 'thin-scrollbar', { className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
[styles.codeBlockWithTitle]: codeBlockTitle,
})}
style={style}> style={style}>
<code className={styles.codeBlockLines}> <code className={styles.codeBlockLines}>
{tokens.map((line, i) => { {tokens.map((line, i) => {

12
packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
View file

@ -7,6 +7,9 @@
.codeBlockContainer { .codeBlockContainer {
margin-bottom: var(--ifm-leading); margin-bottom: var(--ifm-leading);
border-radius: var(--ifm-global-radius);
box-shadow: var(--ifm-global-shadow-lw);
overflow: hidden;
} }
.codeBlockContent { .codeBlockContent {
@ -16,8 +19,6 @@
} }
.codeBlockTitle { .codeBlockTitle {
border-top-left-radius: var(--ifm-global-radius);
border-top-right-radius: var(--ifm-global-radius);
border-bottom: 1px solid var(--ifm-color-emphasis-300); border-bottom: 1px solid var(--ifm-color-emphasis-300);
font-size: var(--ifm-code-font-size); font-size: var(--ifm-code-font-size);
font-weight: 500; font-weight: 500;
@ -25,12 +26,9 @@
} }
.codeBlock { .codeBlock {
margin: 0;
padding: 0; padding: 0;
} border-radius: 0;
.codeBlockWithTitle {
border-top-left-radius: 0;
border-top-right-radius: 0;
} }
.copyButton { .copyButton {

12
packages/docusaurus-theme-live-codeblock/src/theme/Playground/styles.module.css
View file

@ -7,6 +7,9 @@
.playgroundContainer { .playgroundContainer {
margin-bottom: var(--ifm-leading); margin-bottom: var(--ifm-leading);
border-radius: var(--ifm-global-radius);
box-shadow: var(--ifm-global-shadow-lw);
overflow: hidden;
} }
.playgroundHeader { .playgroundHeader {
@ -22,8 +25,6 @@
.playgroundHeader:first-of-type { .playgroundHeader:first-of-type {
background: var(--ifm-color-emphasis-600); background: var(--ifm-color-emphasis-600);
color: var(--ifm-color-content-inverse); color: var(--ifm-color-content-inverse);
border-top-left-radius: var(--ifm-global-radius);
border-top-right-radius: var(--ifm-global-radius);
} }
.playgroundEditor { .playgroundEditor {
@ -34,11 +35,6 @@
} }
.playgroundPreview { .playgroundPreview {
border: 1px solid var(--ifm-color-emphasis-200);
padding: 1rem; padding: 1rem;
} background-color: var(--ifm-pre-background);
.playgroundPreview:last-of-type, .playgroundEditor:last-of-type {
border-bottom-left-radius: var(--ifm-global-radius);
border-bottom-right-radius: var(--ifm-global-radius);
} }