primer-box
Advanced tools
Comparing version 2.6.0-alpha.595805c5 to 2.6.0-alpha.5b896e00
@@ -1,1 +0,1 @@ | ||
module.exports = {"cssstats":{"size":2970,"gzipSize":780,"humanizedSize":"3kB","humanizedGzipSize":"780B","rules":{"total":48,"size":{"graph":[3,1,1,1,1,3,1,2,1,1,1,2,1,8,2,2,3,4,3,2,1,4,2,1,1,1,1,1,1,1,2,2,1,3,2,1,2,1,1,1,1,1,1,2,1,1,1,3],"max":8,"average":1.75}},"selectors":{"total":49,"type":0,"class":49,"id":0,"pseudoClass":8,"pseudoElement":0,"values":[".Box",".Box--condensed",".Box--condensed .Box-header",".Box--condensed .Box-body",".Box--condensed .Box-footer",".Box--condensed .Box-btn-octicon.btn-octicon",".Box--condensed .Box-row",".Box--spacious .Box-header",".Box--spacious .Box-title",".Box--spacious .Box-body",".Box--spacious .Box-footer",".Box--spacious .Box-btn-octicon.btn-octicon",".Box--spacious .Box-row",".Box-header",".Box-title",".Box-body",".Box-body:last-of-type",".Box-row",".Box-row:first-of-type",".Box-row:last-of-type",".Box-row.Box-row--unread",".Box-row.unread",".Box-row.navigation-focus .Box-row--drag-button",".Box-row.navigation-focus.is-dragging .Box-row--drag-button",".Box-row.navigation-focus.sortable-chosen",".Box-row.navigation-focus.sortable-ghost",".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",".Box-row--focus-gray.navigation-focus",".Box-row--focus-blue.navigation-focus",".Box-row--hover-gray:hover",".Box-row--hover-blue:hover",".Box-row-link",".Box-row-link:hover",".Box-row--drag-button",".Box-footer",".Box--scrollable",".Box--blue",".Box--blue .Box-header",".Box--blue .Box-body",".Box--blue .Box-row",".Box--blue .Box-footer",".Box--danger",".Box--danger .Box-row:first-of-type",".Box--danger .Box-body:last-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"],"specificity":{"max":40,"average":18.979591836734695}},"declarations":{"total":84,"unique":49,"properties":{"background-color":["#fff","#f6f8fa","#fafbfc","#f6f8fa","#f6f8fa","#f1f8ff","#f6f8fa","#f1f8ff","#f1f8ff","#f1f8ff","#fffbdd","#f1f8ff","#f6f8fa"],"border":["1px solid #d1d5da"],"border-radius":["3px"],"line-height":["1.25","1.25","1.25","1.5"],"padding":["8px 16px","8px 16px","8px 16px","8px 16px","8px 16px","24px","24px","24px","24px","24px","16px","16px","16px","16px","16px 16px"],"margin":["-8px -16px","-24px -24px","-1px -1px 0 -1px","-16px -16px"],"font-size":["20px","14px"],"border-color":["#d1d5da","#c8e1ff","#c8e1ff","#c8e1ff","#c8e1ff","#c8e1ff","#d73a49","#d73a49","#d73a49","#c8e1ff"],"border-style":["solid"],"border-width":["1px"],"border-top-left-radius":["3px","2px"],"border-top-right-radius":["3px","2px"],"font-weight":["600"],"border-bottom":["1px solid #e1e4e8"],"margin-bottom":["-1px"],"border-bottom-right-radius":["2px","2px"],"border-bottom-left-radius":["2px","2px"],"margin-top":["-1px","-1px"],"list-style-type":["none"],"border-top":["1px solid #e1e4e8","1px solid #e1e4e8"],"border-top-color":["transparent"],"box-shadow":["2px 0 0 #0366d6 inset"],"color":["#0366d6","#24292e","#0366d6"],"cursor":["-webkit-grab","grab","-webkit-grabbing","grabbing"],"opacity":["100","0","0"],"text-decoration":["none","none"],"max-height":["324px"],"overflow":["scroll"]}},"mediaQueries":{"total":1,"unique":1,"values":["(min-width: 768px)"],"contents":[{"value":"(min-width: 768px)","rules":{"total":2,"size":{"graph":[2,2],"max":2,"average":2}},"selectors":{"total":2,"type":0,"class":2,"id":0,"pseudoClass":1,"pseudoElement":0,"values":[".Box-row-link",".Box-row-link:hover"],"specificity":{"max":20,"average":15}},"declarations":{"total":4,"unique":3,"properties":{"color":["#24292e","#0366d6"],"text-decoration":["none","none"]}}}]}}} | ||
module.exports = {"cssstats":{"size":2926,"gzipSize":771,"humanizedSize":"3kB","humanizedGzipSize":"771B","rules":{"total":48,"size":{"graph":[3,1,1,1,1,3,1,2,1,1,1,2,1,8,2,2,3,4,3,2,1,3,1,1,1,1,1,1,1,1,2,2,1,3,2,1,2,1,1,1,1,1,1,2,1,1,1,3],"max":8,"average":1.7083333333333333},"selectorByRuleSizes":[{"selector":".Box-header","declarations":8},{"selector":".Box-row","declarations":4},{"selector":".Box-btn-octicon.btn-octicon","declarations":3},{"selector":".Box-footer","declarations":3},{"selector":".Box-row.navigation-focus .Box-row--drag-button","declarations":3},{"selector":".Box-row:first-of-type","declarations":3},{"selector":".Box-body:last-of-type","declarations":3},{"selector":".Box--condensed .Box-btn-octicon.btn-octicon","declarations":3},{"selector":".Box","declarations":3},{"selector":".Box-header--blue","declarations":2},{"selector":".Box--blue .Box-header","declarations":2},{"selector":".Box--scrollable","declarations":2},{"selector":".Box-row-link:hover","declarations":2},{"selector":".Box-row-link","declarations":2},{"selector":".Box-row:last-of-type","declarations":2},{"selector":".Box-body","declarations":2},{"selector":".Box-title","declarations":2},{"selector":".Box--spacious .Box-btn-octicon.btn-octicon","declarations":2},{"selector":".Box--spacious .Box-header","declarations":2},{"selector":".Box-row--gray","declarations":1},{"selector":".Box-row--blue","declarations":1},{"selector":".Box-row--yellow","declarations":1},{"selector":".Box--danger .Box-body:last-of-type","declarations":1},{"selector":".Box--danger .Box-row:first-of-type","declarations":1},{"selector":".Box--danger","declarations":1},{"selector":".Box--blue .Box-footer","declarations":1},{"selector":".Box--blue .Box-row","declarations":1},{"selector":".Box--blue .Box-body","declarations":1},{"selector":".Box--blue","declarations":1},{"selector":".Box-row--drag-button","declarations":1},{"selector":".Box-row--hover-blue:hover","declarations":1},{"selector":".Box-row--hover-gray:hover","declarations":1},{"selector":".Box-row--focus-blue.navigation-focus","declarations":1},{"selector":".Box-row--focus-gray.navigation-focus","declarations":1},{"selector":".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide","declarations":1},{"selector":".Box-row.navigation-focus.sortable-ghost","declarations":1},{"selector":".Box-row.navigation-focus.sortable-chosen","declarations":1},{"selector":".Box-row.navigation-focus.is-dragging .Box-row--drag-button","declarations":1},{"selector":".Box-row.Box-row--unread,.Box-row.unread","declarations":1},{"selector":".Box--spacious .Box-row","declarations":1},{"selector":".Box--spacious .Box-footer","declarations":1},{"selector":".Box--spacious .Box-body","declarations":1},{"selector":".Box--spacious .Box-title","declarations":1},{"selector":".Box--condensed .Box-row","declarations":1},{"selector":".Box--condensed .Box-footer","declarations":1},{"selector":".Box--condensed .Box-body","declarations":1},{"selector":".Box--condensed .Box-header","declarations":1},{"selector":".Box--condensed","declarations":1}]},"selectors":{"total":49,"type":0,"class":49,"id":0,"pseudoClass":8,"pseudoElement":0,"values":[".Box",".Box--condensed",".Box--condensed .Box-header",".Box--condensed .Box-body",".Box--condensed .Box-footer",".Box--condensed .Box-btn-octicon.btn-octicon",".Box--condensed .Box-row",".Box--spacious .Box-header",".Box--spacious .Box-title",".Box--spacious .Box-body",".Box--spacious .Box-footer",".Box--spacious .Box-btn-octicon.btn-octicon",".Box--spacious .Box-row",".Box-header",".Box-title",".Box-body",".Box-body:last-of-type",".Box-row",".Box-row:first-of-type",".Box-row:last-of-type",".Box-row.Box-row--unread",".Box-row.unread",".Box-row.navigation-focus .Box-row--drag-button",".Box-row.navigation-focus.is-dragging .Box-row--drag-button",".Box-row.navigation-focus.sortable-chosen",".Box-row.navigation-focus.sortable-ghost",".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",".Box-row--focus-gray.navigation-focus",".Box-row--focus-blue.navigation-focus",".Box-row--hover-gray:hover",".Box-row--hover-blue:hover",".Box-row-link",".Box-row-link:hover",".Box-row--drag-button",".Box-footer",".Box--scrollable",".Box--blue",".Box--blue .Box-header",".Box--blue .Box-body",".Box--blue .Box-row",".Box--blue .Box-footer",".Box--danger",".Box--danger .Box-row:first-of-type",".Box--danger .Box-body:last-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"],"specificity":{"max":40,"average":18.979591836734695}},"declarations":{"total":82,"unique":47,"properties":{"background-color":["#fff","#f6f8fa","#fafbfc","#f6f8fa","#f6f8fa","#f1f8ff","#f6f8fa","#f1f8ff","#f1f8ff","#f1f8ff","#fffbdd","#f1f8ff","#f6f8fa"],"border":["1px solid #d1d5da"],"border-radius":["3px"],"line-height":["1.25","1.25","1.25","1.5"],"padding":["8px 16px","8px 16px","8px 16px","8px 16px","8px 16px","24px","24px","24px","24px","24px","16px","16px","16px","16px","16px 16px"],"margin":["-8px -16px","-24px -24px","-1px -1px 0 -1px","-16px -16px"],"font-size":["20px","14px"],"border-color":["#d1d5da","#c8e1ff","#c8e1ff","#c8e1ff","#c8e1ff","#c8e1ff","#d73a49","#d73a49","#d73a49","#c8e1ff"],"border-style":["solid"],"border-width":["1px"],"border-top-left-radius":["3px","2px"],"border-top-right-radius":["3px","2px"],"font-weight":["600"],"border-bottom":["1px solid #e1e4e8"],"margin-bottom":["-1px"],"border-bottom-right-radius":["2px","2px"],"border-bottom-left-radius":["2px","2px"],"margin-top":["-1px","-1px"],"list-style-type":["none"],"border-top":["1px solid #e1e4e8","1px solid #e1e4e8"],"border-top-color":["transparent"],"box-shadow":["2px 0 0 #0366d6 inset"],"color":["#0366d6","#24292e","#0366d6"],"cursor":["grab","grabbing"],"opacity":["100","0","0"],"text-decoration":["none","none"],"max-height":["324px"],"overflow":["scroll"]}},"mediaQueries":{"total":1,"unique":1,"values":["(min-width: 768px)"],"contents":[{"value":"(min-width: 768px)","rules":{"total":2,"size":{"graph":[2,2],"max":2,"average":2},"selectorByRuleSizes":[{"selector":",.Box-row-link:hover","declarations":2},{"selector":".Box-row-link","declarations":2}]},"selectors":{"total":2,"type":0,"class":2,"id":0,"pseudoClass":1,"pseudoElement":0,"values":[".Box-row-link",".Box-row-link:hover"],"specificity":{"max":20,"average":15}},"declarations":{"total":4,"unique":3,"properties":{"color":["#24292e","#0366d6"],"text-decoration":["none","none"]}}}]}}} |
{ | ||
"version": "2.6.0-alpha.595805c5", | ||
"version": "2.6.0-alpha.5b896e00", | ||
"name": "primer-box", | ||
"description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.", | ||
"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,5 +20,5 @@ "primer": { | ||
], | ||
"repository": "https://github.com/primer/primer-css/tree/master/modules/primer-box", | ||
"repository": "https://github.com/primer/primer/tree/master/modules/primer-box", | ||
"bugs": { | ||
"url": "https://github.com/primer/primer-css/issues" | ||
"url": "https://github.com/primer/primer/issues" | ||
}, | ||
@@ -28,6 +29,8 @@ "scripts": { | ||
"lint": "../../script/lint-scss", | ||
"test": "../../script/npm-run-all build lint" | ||
"test": "../../script/npm-run-all build lint", | ||
"prepublishOnly": "../../script/notify pending", | ||
"postpublish": "../../script/notify success" | ||
}, | ||
"dependencies": { | ||
"primer-support": "4.5.0-alpha.595805c5" | ||
"primer-support": "4.8.0-alpha.5b896e00" | ||
}, | ||
@@ -38,4 +41,4 @@ "keywords": [ | ||
"github", | ||
"primercss" | ||
"design-system" | ||
] | ||
} |
@@ -1,9 +0,9 @@ | ||
# Primer CSS box | ||
# Primer box | ||
[![npm version](http://img.shields.io/npm/v/primer-box.svg)](https://www.npmjs.org/package/primer-box) | ||
[![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-box.svg)](https://www.npmjs.org/package/primer-box) | ||
[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer) | ||
> Box is a module for creating rounded-corner boxes with a white background and gray borders. Box has optional element styles for headers, lists, and footers. | ||
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: Box | ||
path: components/box | ||
status_issue: https://github.com/github/design-systems/issues/198 | ||
status: New release | ||
status: Stable | ||
--> | ||
@@ -263,3 +264,3 @@ | ||
`Box-danger` is often paired with a red heading. See the [subhead](/styleguide/css/styles/product/components/subhead) docs for more information. | ||
`Box-danger` is often paired with a red heading. See the [subhead](./subhead) docs for more information. | ||
@@ -361,5 +362,5 @@ ```html | ||
Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](/alerts) for more information. | ||
Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](./alerts) for more information. | ||
```html | ||
```erb | ||
<div class="Box"> | ||
@@ -391,9 +392,9 @@ <div class="Box-header"> | ||
```html | ||
<div class="Box"> | ||
<div class="Box-body"> | ||
<span class="pr-2">Box body</span> | ||
<button href="#" class="Box-btn-octicon btn-octicon"><%= octicon("pencil") %></button> | ||
</div> | ||
```erb | ||
<div class="Box"> | ||
<div class="Box-body"> | ||
<span class="pr-2">Box body</span> | ||
<button href="#" class="Box-btn-octicon btn-octicon"><%= octicon "pencil" %></button> | ||
</div> | ||
</div> | ||
``` | ||
@@ -403,21 +404,21 @@ | ||
```html | ||
<div class="Box"> | ||
<div class="Box-header clearfix"> | ||
<button href="#" class="Box-btn-octicon btn-octicon float-right"><%= octicon("x") %></button> | ||
<h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3> | ||
</div> | ||
<div class="Box-body"> | ||
Box body | ||
</div> | ||
```erb | ||
<div class="Box"> | ||
<div class="Box-header clearfix"> | ||
<button href="#" class="Box-btn-octicon btn-octicon float-right"><%= octicon "x" %></button> | ||
<h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3> | ||
</div> | ||
<div class="Box-body"> | ||
Box body | ||
</div> | ||
</div> | ||
``` | ||
```html | ||
<div class="Box"> | ||
<div class="Box-row clearfix"> | ||
<button href="#" class="Box-btn-octicon btn-octicon float-left"><%= octicon "check" %></button> | ||
<p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p> | ||
</div> | ||
```erb | ||
<div class="Box"> | ||
<div class="Box-row clearfix"> | ||
<button href="#" class="Box-btn-octicon btn-octicon float-left"><%= octicon "check" %></button> | ||
<p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p> | ||
</div> | ||
</div> | ||
``` | ||
@@ -463,3 +464,3 @@ | ||
Use [flexbox utilities](../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right. | ||
Use [flexbox utilities](/css/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right. | ||
@@ -570,3 +571,3 @@ ```html | ||
When a box is all by itself centered on a page you can use [column widths](/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../utilities/typography) instead of the built in box title styles. | ||
When a box is all by itself centered on a page you can use [column widths](/css/objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/css/utilities/typography) instead of the built in box title styles. | ||
@@ -592,3 +593,3 @@ ```html | ||
Box patterns can also be made with, and modified with [border utilities](../utilities/borders). | ||
Box patterns can also be made with, and modified with [border utilities](/css/utilities/borders). | ||
@@ -601,6 +602,6 @@ <!-- %enddocs --> | ||
[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
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
39897
8
599
+ Addedprimer-support@4.8.0-alpha.5b896e00(transitive)
- Removedprimer-support@4.5.0-alpha.595805c5(transitive)