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;
cursor: pointer;
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 {
display: none;
}
@ -28,15 +29,13 @@ CSS variables, meant to be overriden by final theme
.details > summary:before {
position: absolute;
top: 0.45rem;
left: -1.2rem;
left: 0;
/* CSS-only Arrow */
content: '';
width: 0;
height: 0;
border-top: var(--docusaurus-details-summary-arrow-size) solid transparent;
border-bottom: var(--docusaurus-details-summary-arrow-size) solid transparent;
border-left: var(--docusaurus-details-summary-arrow-size) solid
border-width: var(--docusaurus-details-summary-arrow-size);
border-style: solid;
border-color: transparent transparent transparent
var(--docusaurus-details-decoration-color);
/* 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>
<div>
<div>This is the detailed content</div>
<br/>
<details>
<summary>
<div>Nested toggle!</div>
<div>Some surprise inside...</div>
Nested toggle! Some surprise inside...
</summary>
<div>
😲😲😲😲😲
@ -91,10 +91,10 @@ Markdown can embed HTML elements, and [`details`](https://developer.mozilla.org/
<summary>Toggle me!</summary>
<div>
<div>This is the detailed content</div>
<br/>
<details>
<summary>
<div>Nested toggle!</div>
<div>Some surprise inside...</div>
Nested toggle! Some surprise inside...
</summary>
<div>
😲😲😲😲😲