mirror of
https://github.com/primer/css.git
synced 2025-01-04 12:22:17 +03:00
Merge branch 'master' into release-15.2.0
This commit is contained in:
simurai
GitHub
commit
db82c2d9ce
6
docs/.babelrc
Normal file
6
docs/.babelrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"presets": [
|
||||
"babel-preset-gatsby",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
}
|
||||
@ -14,71 +14,49 @@ Wrap some content in the outer `.blankslate` wrapper to give it the blankslate a
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
<h3 class="mb-1">This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## With Octicons
|
||||
|
||||
When it helps the message, include (relevant) icons in your blank slate. Add `.blankslate-icon` to any `.mega-octicon`s as the first elements in the blankslate, like so.
|
||||
When it helps the message, include (relevant) icons in your blank slate. Add the `.blankslate-icon` class to give icons the proper styling.
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<!-- <%= octicon "git-commit", :height = 32, :class => "blankslate-icon" %> -->
|
||||
<svg width="28" height="32" viewBox="0 0 14 16" class="octicon octicon-git-commit blankslate-icon" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "tag", :height = 32, :class => "blankslate-icon" %> -->
|
||||
<svg width="28" height="32" viewBox="0 0 14 16" class="octicon octicon-tag blankslate-icon" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "git-branch", :height = 32, :class => "blankslate-icon" %> -->
|
||||
<svg width="20" height="32" viewBox="0 0 10 16" class="octicon octicon-git-branch blankslate-icon" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "octoface", :height = 24, :class => "blankslate-icon" %> -->
|
||||
<svg class="octicon octicon-octoface blankslate-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7.75 11c-.69 0-1.25.56-1.25 1.25v1.5a1.25 1.25 0 102.5 0v-1.5C9 11.56 8.44 11 7.75 11zm1.27 4.5a.469.469 0 01.48-.5h5a.47.47 0 01.48.5c-.116 1.316-.759 2.5-2.98 2.5s-2.864-1.184-2.98-2.5zm7.23-4.5c-.69 0-1.25.56-1.25 1.25v1.5a1.25 1.25 0 102.5 0v-1.5c0-.69-.56-1.25-1.25-1.25z"></path><path fill-rule="evenodd" d="M21.255 3.82a1.725 1.725 0 00-2.141-1.195c-.557.16-1.406.44-2.264.866-.78.386-1.647.93-2.293 1.677A18.442 18.442 0 0012 5c-.93 0-1.784.059-2.569.17-.645-.74-1.505-1.28-2.28-1.664a13.876 13.876 0 00-2.265-.866 1.725 1.725 0 00-2.141 1.196 23.645 23.645 0 00-.69 3.292c-.125.97-.191 2.07-.066 3.112C1.254 11.882 1 13.734 1 15.527 1 19.915 3.13 23 12 23c8.87 0 11-3.053 11-7.473 0-1.794-.255-3.647-.99-5.29.127-1.046.06-2.15-.066-3.125a23.652 23.652 0 00-.689-3.292zM20.5 14c.5 3.5-1.5 6.5-8.5 6.5s-9-3-8.5-6.5c.583-4 3-6 8.5-6s7.928 2 8.5 6z"></path></svg>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## With graphic, button and link
|
||||
|
||||
Add a graphic, button and/or link to add additional information and provide users a way to add content to this page.
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Variations
|
||||
|
||||
Add an additional optional class to the `.blankslate` to change its appearance.
|
||||
|
||||
### Narrow
|
||||
|
||||
Narrows the blankslate container to not occupy the entire available width.
|
||||
`.blankslate-narrow` narrows the blankslate container to not occupy the entire available width.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-narrow">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Spacious
|
||||
|
||||
Significantly increases the vertical padding.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-spacious">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -88,11 +66,11 @@ Significantly increases the vertical padding.
|
||||
|
||||
### Large
|
||||
|
||||
Increases the size of the text in the blankslate
|
||||
`.blankslate-large` increases the size of the text in the blankslate
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-large">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -100,6 +78,22 @@ Increases the size of the text in the blankslate
|
||||
</div>
|
||||
```
|
||||
|
||||
### Spacious
|
||||
|
||||
`.blankslate-spacious` significantly increases the vertical padding.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-spacious">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
<p><button class="btn-link" type="button">Learn more</button></p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Note**: It's possible to combine variations. Large and spacious (`blankslate blankslate-large blankslate-spacious`) is often used toghether.
|
||||
|
||||
### Add border
|
||||
|
||||
To add a border, wrap the blankstate component with the [Box component](/components/box).
|
||||
@ -107,7 +101,7 @@ To add a border, wrap the blankstate component with the [Box component](/compone
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
@ -123,7 +117,7 @@ Removes the `border-radius` on the top corners.
|
||||
```html live
|
||||
<div class="Box rounded-top-0">
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="mb-3" />
|
||||
<h3 class="mb-1">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<button class="btn btn-primary my-3" type="button">New pull request</button>
|
||||
|
||||
@ -8,14 +8,6 @@ status_issue: 'https://github.com/github/design-systems/issues/97'
|
||||
import {Box, BorderBox} from '@primer/components'
|
||||
import {palettes, allColors} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
|
||||
const textColumns = [
|
||||
{
|
||||
title: 'Alias',
|
||||
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
|
||||
},
|
||||
'variable',
|
||||
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
|
||||
]
|
||||
|
||||
Use color utilities to apply color to the background of elements, text, and borders.
|
||||
|
||||
@ -128,9 +120,23 @@ You can set the color inheritance on an element by using the `text-inherit` clas
|
||||
|
||||
### Text color utilities
|
||||
|
||||
<PaletteTable columns={textColumns}>
|
||||
<PaletteTable columns={[
|
||||
{
|
||||
title: 'Alias',
|
||||
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
|
||||
},
|
||||
'variable',
|
||||
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
|
||||
]}>
|
||||
{palettes.map(({name, title, value}) => (
|
||||
<PaletteTableFragment name={name} type="text" sparse prefix="color" columns={textColumns}>
|
||||
<PaletteTableFragment name={name} type="text" sparse prefix="color" columns={[
|
||||
{
|
||||
title: 'Alias',
|
||||
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
|
||||
},
|
||||
'variable',
|
||||
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
|
||||
]}>
|
||||
<tr>
|
||||
<PaletteHeading indicatorColor={value} colSpan="4">
|
||||
{title}
|
||||
|
||||
18147
docs/package-lock.json
generated
18147
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,18 +9,21 @@
|
||||
"build": "./script/now-build.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-react": "^7.10.4",
|
||||
"@loadable/component": "^5.10.2",
|
||||
"@primer/components": "^17.1.0",
|
||||
"@primer/gatsby-theme-doctocat": "^0.20.0",
|
||||
"@primer/gatsby-theme-doctocat": "^0.25.2",
|
||||
"@primer/octicons": "^9.1.1",
|
||||
"@primer/octicons-react": "^9.1.1",
|
||||
"@svgr/webpack": "^4.3.2",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"babel-preset-gatsby": "^0.5.10",
|
||||
"chroma-js": "^2.0.6",
|
||||
"gatsby": "^2.10.4",
|
||||
"core-js": "^3.6.5",
|
||||
"gatsby": "^2.24.62",
|
||||
"gatsby-plugin-alias-imports": "^1.0.5",
|
||||
"gatsby-plugin-google-analytics": "^2.1.7",
|
||||
"gatsby-plugin-sass": "^2.1.0",
|
||||
"gatsby-plugin-google-analytics": "^2.3.14",
|
||||
"gatsby-plugin-sass": "^2.3.13",
|
||||
"gatsby-plugin-svgr": "^2.0.2",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-node-sass": "^2.1.8",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user