primer-labels
Advanced tools
Comparing version 1.6.0-alpha.0dbe01ab to 1.6.0-alpha.0e91d9c4
@@ -1,1 +0,1 @@ | ||
module.exports = {"cssstats":{"size":1244,"gzipSize":496,"humanizedSize":"1kB","humanizedGzipSize":"496B","rules":{"total":17,"size":{"graph":[1,8,1,2,7,2,1,1,8,1,1,1,2,1,8,2,2],"max":8,"average":2.8823529411764706}},"selectors":{"total":20,"type":0,"class":20,"id":0,"pseudoClass":2,"pseudoElement":0,"values":[".labels",".label",".Label",".label:hover",".Label:hover",".Label--gray",".Label--outline",".Label--outline-green",".Label--gray-darker",".Label--orange",".state",".State",".State--green",".State--purple",".State--red",".State--small",".State--small .octicon",".Counter",".Counter--gray-light",".Counter--gray"],"specificity":{"max":20,"average":11.5}},"declarations":{"total":49,"unique":36,"properties":{"position":["relative"],"display":["inline-block","inline-block","inline-block"],"padding":["3px 4px","4px 8px","0.125em 4px","2px 5px"],"font-size":["12px","12px","12px"],"font-weight":["600","400","600","600"],"line-height":["1","20px","1"],"color":["#fff","#586069","#586069","#28a745","#fff","#586069","#24292e","#fff"],"border-radius":["2px","3px","20px"],"box-shadow":["inset 0 -1px 0 rgba(27,31,35,0.12)","none"],"text-decoration":["none"],"background-color":["#eaecef","transparent","#6a737d","#d15704","#6a737d","#2cbe4e","#6f42c1","#cb2431","rgba(27,31,35,0.08)","rgba(27,31,35,0.15)","#6a737d"],"margin-top":["-1px"],"margin-bottom":["-1px"],"border":["1px solid rgba(27,31,35,0.15)","1px solid #34d058"],"text-align":["center"],"width":["1em"]}},"mediaQueries":{"total":0,"unique":0,"values":[],"contents":[]}}} | ||
module.exports = {"cssstats":{"size":1276,"gzipSize":514,"humanizedSize":"1kB","humanizedGzipSize":"514B","rules":{"total":18,"size":{"graph":[1,8,1,2,7,2,1,1,8,1,1,1,2,1,8,1,2,2],"max":8,"average":2.7777777777777777},"selectorByRuleSizes":[{"selector":".Counter","declarations":8},{"selector":".state,.State","declarations":8},{"selector":".label,.Label","declarations":8},{"selector":".Label--outline","declarations":7},{"selector":".Counter--gray","declarations":2},{"selector":".Counter--gray-light","declarations":2},{"selector":".State--small","declarations":2},{"selector":".Label--outline-green","declarations":2},{"selector":".Label--gray","declarations":2},{"selector":".Counter:empty","declarations":1},{"selector":".State--small .octicon","declarations":1},{"selector":".State--red","declarations":1},{"selector":".State--purple","declarations":1},{"selector":".State--green","declarations":1},{"selector":".Label--orange","declarations":1},{"selector":".Label--gray-darker","declarations":1},{"selector":".label:hover,.Label:hover","declarations":1},{"selector":".labels","declarations":1}]},"selectors":{"total":21,"type":0,"class":21,"id":0,"pseudoClass":3,"pseudoElement":0,"values":[".labels",".label",".Label",".label:hover",".Label:hover",".Label--gray",".Label--outline",".Label--outline-green",".Label--gray-darker",".Label--orange",".state",".State",".State--green",".State--purple",".State--red",".State--small",".State--small .octicon",".Counter",".Counter:empty",".Counter--gray-light",".Counter--gray"],"specificity":{"max":20,"average":11.904761904761905}},"declarations":{"total":50,"unique":37,"properties":{"position":["relative"],"display":["inline-block","inline-block","inline-block"],"padding":["3px 4px","4px 8px",".125em 4px","2px 5px"],"font-size":["12px","12px","12px"],"font-weight":["600","400","600","600"],"line-height":["1","20px","1"],"color":["#fff","#586069","#586069","#28a745","#fff","#586069","#24292e","#fff"],"border-radius":["2px","3px","20px"],"box-shadow":["inset 0 -1px 0 rgba(27,31,35,0.12)","none"],"text-decoration":["none"],"background-color":["#eaecef","transparent","#6a737d","#d15704","#6a737d","#2cbe4e","#6f42c1","#cb2431","rgba(27,31,35,0.08)","rgba(27,31,35,0.15)","#6a737d"],"margin-top":["-1px"],"margin-bottom":["-1px"],"border":["1px solid rgba(27,31,35,0.15)","1px solid #34d058"],"text-align":["center"],"width":["1em"],"visibility":["hidden"]}},"mediaQueries":{"total":0,"unique":0,"values":[],"contents":[]}}} |
{ | ||
"version": "1.6.0-alpha.0dbe01ab", | ||
"version": "1.6.0-alpha.0e91d9c4", | ||
"name": "primer-labels", | ||
"description": "Labels add metatdata or indicate status of items and navigational elements.", | ||
"homepage": "http://primercss.io/", | ||
"homepage": "http://primer.github.io/", | ||
"author": "GitHub, Inc.", | ||
"license": "MIT", | ||
"style": "index.scss", | ||
"style": "build/build.css", | ||
"sass": "index.scss", | ||
"main": "build/index.js", | ||
@@ -19,14 +20,16 @@ "primer": { | ||
], | ||
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-labels", | ||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-labels", | ||
"bugs": { | ||
"url": "https://github.com/primer/primer-css/issues" | ||
"url": "https://github.com/primer/primer/issues" | ||
}, | ||
"scripts": { | ||
"build": "primer-module-build index.scss", | ||
"build": "../../script/npm-run primer-module-build index.scss", | ||
"prepare": "npm run build", | ||
"lint": "stylelint **/*.scss -s scss", | ||
"test": "npm-run-all -s build lint" | ||
"lint": "../../script/lint-scss", | ||
"test": "../../script/npm-run-all build lint", | ||
"prepublishOnly": "../../script/notify pending", | ||
"postpublish": "../../script/notify success" | ||
}, | ||
"dependencies": { | ||
"primer-support": "4.5.0-alpha.0dbe01ab" | ||
"primer-support": "4.8.0-alpha.0e91d9c4" | ||
}, | ||
@@ -37,4 +40,4 @@ "keywords": [ | ||
"github", | ||
"primercss" | ||
"design-system" | ||
] | ||
} |
@@ -1,9 +0,9 @@ | ||
# Primer CSS Labels | ||
# Primer Labels | ||
[![npm version](http://img.shields.io/npm/v/primer-labels.svg)](https://www.npmjs.org/package/primer-labels) | ||
[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css) | ||
[![npm version](https://img.shields.io/npm/v/primer-labels.svg)](https://www.npmjs.org/package/primer-labels) | ||
[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) | ||
> Labels add metadata or indicate status of items and navigational elements. | ||
This repository is a module of the full [primer-css][primer-css] repository. | ||
This repository is a module of the full [primer][primer] repository. | ||
@@ -40,4 +40,5 @@ ## Install | ||
title: Labels | ||
path: components/labels | ||
status_issue: https://github.com/github/design-systems/issues/332 | ||
status: New release | ||
status: Stable | ||
--> | ||
@@ -58,3 +59,3 @@ | ||
```html | ||
```html title="Label" | ||
<span title="Label: default label" class="Label bg-blue">default label</span> | ||
@@ -65,3 +66,4 @@ ``` | ||
```html | ||
```html title="Label without title" | ||
<!-- Don't do this --> | ||
<a href="#url">New select component</a><span class="Label bg-blue ml-1">design</span> | ||
@@ -76,3 +78,3 @@ ``` | ||
```html | ||
```html title="Label theme gray" | ||
<span title="Label: gray label" class="Label Label--gray">gray label</span> | ||
@@ -83,3 +85,3 @@ ``` | ||
```html | ||
```html title="Label theme dark gray" | ||
<span title="Label: dark gray label" class="Label Label--gray-darker">dark gray label</span> | ||
@@ -90,3 +92,3 @@ ``` | ||
```html | ||
```html title="Label theme orange" | ||
<span title="Label: orange label" class="Label Label--orange">orange label</span> | ||
@@ -97,3 +99,3 @@ ``` | ||
```html | ||
```html title="Label outline" | ||
<span title="Label: outline label" class="Label Label--outline">outlined label</span> | ||
@@ -104,3 +106,3 @@ ``` | ||
```html | ||
```html title="Label outline green" | ||
<span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span> | ||
@@ -114,3 +116,3 @@ ``` | ||
```html | ||
```html title="State" | ||
<span class="State">Default</span> | ||
@@ -122,3 +124,3 @@ ``` | ||
```html | ||
```erb title="State themes" | ||
<span title="Status: open" class="State State--green"><%= octicon "git-pull-request" %> Open</span> | ||
@@ -134,3 +136,3 @@ <span title="Status: closed" class="State State--red"><%= octicon "git-pull-request" %> Closed</span> | ||
```html | ||
```erb title="Small states" | ||
<span title="Status: open" class="State State--green State--small"><%= octicon "issue-opened" %> Open</span> | ||
@@ -142,5 +144,5 @@ <span title="Status: closed" class="State State--red State--small"><%= octicon "issue-closed" %> Closed</span> | ||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. | ||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. When a counter is empty, it's visibility will be hidden. | ||
```html | ||
```html title="Counter" | ||
<span class="Counter">16</span> | ||
@@ -151,5 +153,5 @@ <span class="Counter Counter--gray">32</span> | ||
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](../../core/components/navigation). | ||
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation). | ||
```html | ||
```html title="Counter in tabs" | ||
<div class="tabnav"> | ||
@@ -163,5 +165,5 @@ <nav class="tabnav-tabs" aria-label="Foo bar"> | ||
Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](../../core/components/box). | ||
Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](./box). | ||
```html | ||
```html title="Counter in Box headers" | ||
<div class="Box"> | ||
@@ -195,6 +197,6 @@ <div class="Box-header"> | ||
[primer-css]: https://github.com/primer/primer | ||
[docs]: http://primercss.io/ | ||
[primer]: https://github.com/primer/primer | ||
[docs]: http://primer.github.io/ | ||
[npm]: https://www.npmjs.com/ | ||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node | ||
[sass]: http://sass-lang.com/ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
19095
10
188
+ Addedprimer-support@4.8.0-alpha.0e91d9c4(transitive)
- Removedprimer-support@4.5.0-alpha.0dbe01ab(transitive)