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

Update .IssueLabel

Browse Source
This commit is contained in:
simurai 2020-02-21 15:21:23 +09:00
parent 6799c69fca
commit ffdc86bdfa
2 changed files with 14 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/content/components/labels.md
View File

@ -75,17 +75,19 @@ Use `Label--outline` in combination with any of the `text-` color utilities to c
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-blue text-white mr-1" title="Label: Primer">Primer</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>
<span class="IssueLabel bg-pink text-white mr-1" title="Label: help wanted">help wanted</span>
<span class="IssueLabel bg-yellow text-gray-dark mr-1" title="Label: deploy: train">🚂 deploy: train</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-blue text-white mr-1" title="Label: Primer">Primer</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>
<span class="IssueLabel IssueLabel--big bg-pink text-white mr-1" title="Label: help wanted">help wanted</span>
<span class="IssueLabel IssueLabel--big bg-yellow text-gray-dark mr-1" title="Label: deploy: train">🚂 deploy: train</span>
```

32
src/labels/issue-labels.scss
View File

@ -1,17 +1,14 @@
// Issue Labels
.IssueLabel {
height: 20px;
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 0.15em $spacer-1;
font-size: $h6-size;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 15px;
padding: 2px $spacer-2;
font-size: $font-size-small;
font-weight: 500;
line-height: 16px;
// stylelint-disable-next-line primer/borders
border-radius: 2px;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 rgba($black, 0.12);
border-radius: 2em;
.g-emoji {
position: relative;
@ -27,19 +24,6 @@
}
.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;
// stylelint-disable-next-line primer/spacing
margin-top: -1px;
}
&:hover {
opacity: 0.85;
}
// stylelint-disable-next-line primer/spacing
padding: $spacer-1 12px;
}