mirror of
https://github.com/primer/css.git
synced 2024-11-26 12:14:22 +03:00
Merge pull request #953 from primer/issue-label
Add IssueLabel component
This commit is contained in:
commit
435abad2ab
@ -62,6 +62,25 @@ Use `Label--outline-green` in combination with `Label--outline` to communicate a
|
||||
<span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
|
||||
```
|
||||
|
||||
## Issue Labels
|
||||
|
||||
Issue Labels are used for adding labels to issues and pull requests. They also come with emoji support.
|
||||
|
||||
```html live
|
||||
<span class="IssueLabel bg-blue text-white mr-1" title="Label: good first issue">good first issue</span>
|
||||
<span class="IssueLabel bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
|
||||
<span class="IssueLabel bg-green text-white" title="Label: bug">help wanted</span>
|
||||
```
|
||||
|
||||
If an Issue Label needs to be bigger, add the `.IssueLabel--big` modifier.
|
||||
|
||||
```html live
|
||||
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-1" title="Label: good first issue">good first issue</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-green text-white" title="Label: bug">help wanted</span>
|
||||
```
|
||||
|
||||
|
||||
## States
|
||||
|
||||
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
|
||||
|
@ -1,4 +1,5 @@
|
||||
@import "../support/index.scss";
|
||||
@import "./issue-labels.scss";
|
||||
@import "./labels.scss";
|
||||
@import "./states.scss";
|
||||
@import "./counters.scss";
|
||||
|
40
src/labels/issue-labels.scss
Normal file
40
src/labels/issue-labels.scss
Normal file
@ -0,0 +1,40 @@
|
||||
// Issue Labels
|
||||
|
||||
.IssueLabel {
|
||||
height: 20px;
|
||||
padding: 0.15em $spacer-1;
|
||||
font-size: $h6-size;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 15px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 -1px 0 rgba($black, 0.12);
|
||||
|
||||
.g-emoji {
|
||||
position: relative;
|
||||
top: -0.05em;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
line-height: $lh-condensed-ultra;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.IssueLabel--big {
|
||||
padding: $spacer-1 $spacer-2;
|
||||
font-size: $h5-size;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius: $border-radius;
|
||||
transition: opacity 0.2s linear;
|
||||
|
||||
.g-emoji {
|
||||
display: inline-block;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user