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

Add .close-button

Browse Source 
Unchanged from dotcom
This commit is contained in:
simurai 2019-10-24 13:25:29 +09:00
parent f61a726733
commit 0e55872a45
2 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -118,6 +118,17 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
<button class="btn-link" type="button">Link button</button>
```
## Close button
When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
```html live
<button class="close-button" type="button">
<!-- <%= octicon "x" %> -->
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" /></svg>
</button>
```
## Button with counts
You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.

8
src/buttons/misc.scss
View File

@ -1,5 +1,13 @@
// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors
// A button with an X to close stuff
.close-button {
padding: 0;
background: transparent;
border: 0;
outline: none;
}
// Hidden text button
//
// Use `.hidden-text-expander` to indicate and expand hidden text.