primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-09 12:22:47 +03:00
Code Issues Projects Releases Wiki Activity

Move .details-reset

Browse Source 
Plus update the docs
This commit is contained in:
simurai 2019-10-24 11:29:06 +09:00
parent 03f5ac445d
commit 6013909199
4 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/content/components/buttons.md
View File

@ -207,21 +207,3 @@ Use `.hidden-text-expander` to indicate and toggle hidden text.
```
You can also make the expander appear inline by adding `.inline`.
## Using button styles with the details summary element
You can add `.btn` and `.btn-*` classes to any
[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
element so that it gains the appearance of a button, and
selected/active styles when the parent
[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
element is open.
```html live
<details>
<summary class="btn btn-block btn-primary">Toggle the content</summary>
<p class="mt-2">
This content will be toggled.
</p>
</details>
```

38
docs/content/utilities/details.md
View File

@ -8,8 +8,6 @@ bundle: utilities
Details classes are created to enhance the native behaviors of `<details>`.
## Fullscreen click area
Use `.details-overlay` to expand the click area of `<summary>` to cover the full screen, so user can click anywhere on a page to close `<details>`.
@ -17,7 +15,7 @@ Use `.details-overlay` to expand the click area of `<summary>` to cover the full
```html live
<details class="details-overlay">
<summary class="btn">More</summary>
<div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
<div class="border p-3 mt-2">Hidden text</div>
</details>
```
@ -28,6 +26,38 @@ Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
```html live
<details class="details-overlay details-overlay-dark">
<summary class="btn">More</summary>
<div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
<div class="border p-3 mt-2">Hidden text</div>
</details>
```
## Custom caret
Use `.details-reset` to remove the default caret (that little triangle on the left). You then can add the `.dropdown-caret` on the right of the text.
```html live
<details class="details-reset">
<summary class="btn">More <span class="dropdown-caret"></summary>
<div class="border p-3 mt-2">Hidden text</div>
</details>
```
## Using button styles with the details summary element
You can add `.btn` and `.btn-*` classes to any
[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
element so that it gains the appearance of a button, and
selected/active styles when the parent
[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
element is open.
```html live
<details>
<summary class="btn btn-primary">More</summary>
<div class="border p-3 mt-2">Hidden text</div>
</details>
<details class="details-reset mt-3">
<summary class="btn-link">More <span class="dropdown-caret"></summary>
<div class="border p-3 mt-2">Hidden text</div>
</details>
```

9
src/buttons/button.scss
View File

@ -200,12 +200,3 @@
}
}
}
.details-reset {
// Remove marker added by the display: list-item browser default
> summary { list-style: none; }
// Remove marker added by details polyfill
> summary::before { display: none; }
// Remove marker added by Chrome
> summary::-webkit-details-marker { display: none; }
}

9
src/utilities/details.scss
View File

@ -17,3 +17,12 @@
z-index: 99;
background: $black-fade-50;
}
.details-reset {
// Remove marker added by the display: list-item browser default
> summary { list-style: none; }
// Remove marker added by details polyfill
> summary::before { display: none; }
// Remove marker added by Chrome
> summary::-webkit-details-marker { display: none; }
}