primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 12:42:32 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #522 from muan/btn-form

Browse Source 
Add .BtnGroup-parent, deprecate .BtnGroup-form
This commit is contained in:
Emily 2018-07-03 11:34:47 -07:00 committed by GitHub
commit 30c31f907c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/primer-buttons/README.md
View File

@ -223,12 +223,12 @@ Have a hankering for a series of buttons that are attached to one another? Wrap
</div> </div>
``` ```
Add `.BtnGroup-form` to `<form>`s within `.BtnGroup`s for proper spacing and rounded corners. Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
```html ```html
<div class="BtnGroup"> <div class="BtnGroup">
<button class="btn BtnGroup-item" type="button">Button</button> <button class="btn BtnGroup-item" type="button">Button</button>
<form class="BtnGroup-form"> <form class="BtnGroup-parent">
<button class="btn BtnGroup-item" type="button">Button in a form</button> <button class="btn BtnGroup-item" type="button">Button in a form</button>
</form> </form>
<button class="btn BtnGroup-item" type="button">Button</button> <button class="btn BtnGroup-item" type="button">Button</button>

5
modules/primer-buttons/lib/button-group.scss
View File

@ -2,6 +2,8 @@
// //
// A button group is a series of buttons laid out next to each other, all part // A button group is a series of buttons laid out next to each other, all part
// of one visual button, but separated by rules to be separate. // of one visual button, but separated by rules to be separate.
@warn ".BtnGroup-form will be deprecated in version 11. Use .BtnGroup-parent instead.";
.BtnGroup { .BtnGroup {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -38,12 +40,14 @@
border-right-width: 1px; border-right-width: 1px;
+ .BtnGroup-item, + .BtnGroup-item,
+ .BtnGroup-parent .BtnGroup-item,
+ .BtnGroup-form .BtnGroup-item { + .BtnGroup-form .BtnGroup-item {
border-left-width: 0; border-left-width: 0;
} }
} }
} }
.BtnGroup-parent,
.BtnGroup-form { .BtnGroup-form {
float: left; float: left;
@ -72,6 +76,7 @@
} }
+ .BtnGroup-item, + .BtnGroup-item,
+ .BtnGroup-parent .BtnGroup-item,
+ .BtnGroup-form .BtnGroup-item { + .BtnGroup-form .BtnGroup-item {
border-left-width: 0; border-left-width: 0;
} }