3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-01 10:22:30 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: improve styles of Details component (#5402)

Browse source 
* refactor: improve styles of Details component

* Use vendor prefix for ::marker

* Wording
This commit is contained in:
Alexey Pyltsyn 2021-08-26 17:46:35 +03:00 • committed by GitHub
parent 20fc4f6c7e
commit 0dd4892b0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

13
packages/docusaurus-theme-common/src/components/Details/styles.module.css
View file

@ -18,9 +18,10 @@ CSS variables, meant to be overriden by final theme
position: relative; position: relative;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
margin-left: 1.8rem; padding-left: 1rem;
} }
/* TODO: deprecation, need to remove this after Safari will support `::marker` */
.details > summary::-webkit-details-marker { .details > summary::-webkit-details-marker {
display: none; display: none;
} }
@ -28,15 +29,13 @@ CSS variables, meant to be overriden by final theme
.details > summary:before { .details > summary:before {
position: absolute; position: absolute;
top: 0.45rem; top: 0.45rem;
left: -1.2rem; left: 0;
/* CSS-only Arrow */ /* CSS-only Arrow */
content: ''; content: '';
width: 0; border-width: var(--docusaurus-details-summary-arrow-size);
height: 0; border-style: solid;
border-top: var(--docusaurus-details-summary-arrow-size) solid transparent; border-color: transparent transparent transparent
border-bottom: var(--docusaurus-details-summary-arrow-size) solid transparent;
border-left: var(--docusaurus-details-summary-arrow-size) solid
var(--docusaurus-details-decoration-color); var(--docusaurus-details-decoration-color);
/* Arrow rotation anim */ /* Arrow rotation anim */

8
website/docs/guides/markdown-features/markdown-features-intro.mdx
View file

@ -69,10 +69,10 @@ Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/
<summary>Toggle me!</summary> <summary>Toggle me!</summary>
<div> <div>
<div>This is the detailed content</div> <div>This is the detailed content</div>
<br/>
<details> <details>
<summary> <summary>
<div>Nested toggle!</div> Nested toggle! Some surprise inside...
<div>Some surprise inside...</div>
</summary> </summary>
<div> <div>
😲😲😲😲😲 😲😲😲😲😲
@ -91,10 +91,10 @@ Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/
<summary>Toggle me!</summary> <summary>Toggle me!</summary>
<div> <div>
<div>This is the detailed content</div> <div>This is the detailed content</div>
<br/>
<details> <details>
<summary> <summary>
<div>Nested toggle!</div> Nested toggle! Some surprise inside...
<div>Some surprise inside...</div>
</summary> </summary>
<div> <div>
😲😲😲😲😲 😲😲😲😲😲