From 349eee042b40a11fbbe64dc94110da417a0bce4a Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sun, 5 Apr 2020 13:01:07 +0300 Subject: [PATCH] refactor(v2): make better code blocks (#2534) * refactor(v2): make better code blocks * Update styles.module.css Co-authored-by: Yangshun Tay --- .../src/theme/CodeBlock/styles.module.css | 12 +----------- .../src/theme/CodeBlock/styles.module.css | 14 ++------------ 2 files changed, 3 insertions(+), 23 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css index c699e1d0d2..dda21803f3 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css @@ -40,16 +40,12 @@ padding: 0.4rem 0.5rem; position: absolute; right: var(--ifm-pre-padding); - top: var(--ifm-pre-padding); + top: calc(var(--ifm-pre-padding) / 2); visibility: hidden; transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out, bottom 200ms ease-in-out; } -.copyButtonWithTitle { - top: calc(var(--ifm-pre-padding)); -} - .codeBlockTitle:hover + .codeBlockContent .copyButton, .codeBlockContent:hover > .copyButton { visibility: visible; @@ -65,9 +61,3 @@ min-width: 100%; padding: var(--ifm-pre-padding); } - -/* Disable top border radius when title is present. */ -.codeBlockTitle + .codeBlockContent .codeBlockLines { - border-top-left-radius: 0; - border-top-right-radius: 0; -} diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css index c699e1d0d2..9d5e4ad962 100644 --- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css +++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css @@ -39,17 +39,13 @@ outline: none; padding: 0.4rem 0.5rem; position: absolute; - right: var(--ifm-pre-padding); - top: var(--ifm-pre-padding); + right: calc(var(--ifm-pre-padding) / 2); + top: calc(var(--ifm-pre-padding) / 2); visibility: hidden; transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out, bottom 200ms ease-in-out; } -.copyButtonWithTitle { - top: calc(var(--ifm-pre-padding)); -} - .codeBlockTitle:hover + .codeBlockContent .copyButton, .codeBlockContent:hover > .copyButton { visibility: visible; @@ -65,9 +61,3 @@ min-width: 100%; padding: var(--ifm-pre-padding); } - -/* Disable top border radius when title is present. */ -.codeBlockTitle + .codeBlockContent .codeBlockLines { - border-top-left-radius: 0; - border-top-right-radius: 0; -}