mirror of
https://github.com/primer/css.git
synced 2024-12-29 17:12:27 +03:00
Merge branch 'master' into npm-audit-fix
This commit is contained in:
Michelle Tilley
GitHub
commit
fbd8211319
28
CHANGELOG.md
28
CHANGELOG.md
@ -1,3 +1,31 @@
|
||||
## 15.2.0
|
||||
|
||||
### :rocket: Enhancements
|
||||
- [#1145](https://github.com/primer/css/pull/1145) Make final position responsive
|
||||
- [#1148](https://github.com/primer/css/pull/1148) flex wrap reverse added
|
||||
- [#1157](https://github.com/primer/css/pull/1157) Overflow responsive variants
|
||||
- [#1156](https://github.com/primer/css/pull/1156) Add missing rounded-3 utility
|
||||
|
||||
### :memo: Documentation
|
||||
- [#1160](https://github.com/primer/css/pull/1160) Remove custom emoji from SelectMenu docs
|
||||
- [#1165](https://github.com/primer/css/pull/1165) Replaced old octicons in examples
|
||||
- [#1146](https://github.com/primer/css/pull/1146) Corrected a few typos
|
||||
- [#1142](https://github.com/primer/css/pull/1142) Fix typo in Box documentation
|
||||
- [#1125](https://github.com/primer/css/pull/1125) Remove reference to Crema
|
||||
- [#1155](https://github.com/primer/css/pull/1155) Place search subnav example on new line
|
||||
|
||||
### :nail_care: Polish
|
||||
- [#1147](https://github.com/primer/css/pull/1147) Increase input font-size on iOS
|
||||
- [#1152](https://github.com/primer/css/pull/1152) Remove .autocomplete-results inset border that is occluded by items
|
||||
|
||||
### Committers
|
||||
- [@MauricioHernanCabrera](https://github.com/MauricioHernanCabrera)
|
||||
- [@ashygee](https://github.com/ashygee)
|
||||
- [@esdraspavon](https://github.com/esdraspavon)
|
||||
- [@neildaniels](https://github.com/neildaniels)
|
||||
- [@nicksloan](https://github.com/nicksloan)
|
||||
|
||||
|
||||
## 15.1.0
|
||||
|
||||
### :rocket: Enhancements
|
||||
|
||||
6
docs/.babelrc
Normal file
6
docs/.babelrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"presets": [
|
||||
"babel-preset-gatsby",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
}
|
||||
@ -104,7 +104,7 @@ When using a `24px` icon, add a `.v-align-bottom` class and increase the font-si
|
||||
|
||||
## With dismiss
|
||||
|
||||
Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.
|
||||
Add a close icon on the right to allow users to dismiss a flash message.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
|
||||
@ -23,7 +23,7 @@ A list of items used to show autocompleted results. Use the [`<auto-complete>`](
|
||||
<style>.frame-example {width:300px;height:160px;}</style>
|
||||
```
|
||||
|
||||
Autocomplete items can contain attional content, like an `.avatar`. Or use utility classes to cusotmize the text style.
|
||||
Autocomplete items can contain additional content, like an `.avatar`. Or use utility classes to customize the text style.
|
||||
|
||||
```html live
|
||||
<div class="position-relative">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -11,7 +11,7 @@ The `.Box` component can be used for something as simple as a rounded corner box
|
||||
|
||||
## Box
|
||||
|
||||
A `.Box` is a container with a a white background, a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
|
||||
A `.Box` is a container with a white background, a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
|
||||
@ -134,22 +134,22 @@ Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an
|
||||
```html live
|
||||
<button class="btn-octicon" type="button" aria-label="Desktop icon">
|
||||
<!-- <%= octicon "device-desktop" %> -->
|
||||
<svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Pencil icon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon btn-octicon-danger" type="button" aria-label="Trashcan icon">
|
||||
<!-- <%= octicon "trashcan" %> -->
|
||||
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Kebab icon">
|
||||
<!-- <%= octicon "kebab-horizontal" %> -->
|
||||
<svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
@ -162,7 +162,7 @@ When using the `octicon-x` icon for a close button, add `.close-button` to remov
|
||||
```html live
|
||||
<button class="close-button" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" /></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
@ -173,32 +173,31 @@ Icons can be added to any button.
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">
|
||||
<!-- <%= octicon "search" %> -->
|
||||
<svg class="octicon octicon-search" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"></path></svg>
|
||||
<span>Find file</span>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary mr-2" type="button">
|
||||
<!-- <%= octicon "cloud-download" %> -->
|
||||
<svg class="octicon octicon-cloud-download" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"></path></svg>
|
||||
<!-- <%= octicon "download" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"></path></svg>
|
||||
<span>Clone</span>
|
||||
<span class="dropdown-caret"></span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-danger mr-2" type="button">
|
||||
<!-- <%= octicon "trashcan" %> -->
|
||||
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline mr-2" type="button">
|
||||
<!-- <%= octicon "device-desktop" %> -->
|
||||
<svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>
|
||||
<span>Open in Desktop</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" type="button" aria-label="Pencil icon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
@ -212,7 +211,7 @@ You can easily append a count to a **small button**. Add the `.with-count` class
|
||||
<div class="clearfix">
|
||||
<a class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<!-- <%= octicon "eye" %> -->
|
||||
<svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
|
||||
<span>Watch</span>
|
||||
</a>
|
||||
<a class="social-count" href="#url">6</a>
|
||||
|
||||
@ -62,8 +62,8 @@ Form controls in Primer CSS currently have no basic layout specified (this is by
|
||||
|
||||
<label> <input type="checkbox" /> Remember me </label>
|
||||
|
||||
<label> <input type="radio" id="herp" name="herpderp" checked /> Herp </label>
|
||||
<label> <input type="radio" id="derp" name="herpderp" /> Derp </label>
|
||||
<label> <input type="radio" id="potato" name="radio-group-example" checked /> Potato </label>
|
||||
<label> <input type="radio" id="tomato" name="radio-group-example" /> Tomato </label>
|
||||
|
||||
<button class="btn" type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
@ -459,8 +459,9 @@ You can also use a `subnav-search-context` to display search help in a select me
|
||||
<a class="subnav-item" href="#url">Item 2</a>
|
||||
<a class="subnav-item" href="#url">Item 3</a>
|
||||
</nav>
|
||||
|
||||
<div class="float-left ml-3 subnav-search-context">
|
||||
</div>
|
||||
<div class="subnav">
|
||||
<div class="float-left subnav-search-context">
|
||||
<button class="btn" type="button" name="button" aria-expanded="false" aria-haspopup="true">
|
||||
Filters
|
||||
<span class="dropdown-caret"></span>
|
||||
|
||||
@ -579,7 +579,7 @@ Sometimes a select menu needs to communicate a "blank slate" where there's no co
|
||||
|
||||
## github.com usage
|
||||
|
||||
When adding the `.SelectMenu` component on github.com, use the [`<details-menu>`](https://github.com/github/details-menu-element) element. It will :tophat: magically make the `.SelectMenu` work. Here a basic example:
|
||||
When adding the `.SelectMenu` component on github.com, use the [`<details-menu>`](https://github.com/github/details-menu-element) element. It will magically make the `.SelectMenu` work. Here a basic example:
|
||||
|
||||
```erb
|
||||
<details class="details-reset details-overlay" id="my-select-menu">
|
||||
@ -617,4 +617,4 @@ If loading content should be deferred, use the [`<include-fragment>`](https://gi
|
||||
</details-menu>
|
||||
```
|
||||
|
||||
It will add a pulsing :octoface: icon while the content is loading.
|
||||
It will add a pulsing "octoface" icon while the content is loading.
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -132,8 +132,9 @@ You can choose whether flex items are forced into a single line or wrapped onto
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
||||
```
|
||||
|
||||
### Classes
|
||||
@ -142,6 +143,7 @@ You can choose whether flex items are forced into a single line or wrapped onto
|
||||
| --- | --- |
|
||||
| `.flex-wrap` | Flex items will break onto multiple lines (default) |
|
||||
| `.flex-nowrap` | Flex items are laid out in a single line, even if they overflow |
|
||||
| `.flex-wrap-reverse` | Behaves the same as wrap but cross-start and cross-end are permuted. |
|
||||
|
||||
### `flex-wrap` example
|
||||
|
||||
@ -175,6 +177,22 @@ You can choose whether flex items are forced into a single line or wrapped onto
|
||||
</div>
|
||||
```
|
||||
|
||||
### `flex-wrap-reverse` example
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-wrap-reverse">
|
||||
<div class="p-5 px-6 border bg-gray-light">1</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">2</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">3</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">4</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">5</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">6</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">7</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">8</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">9</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Justify content
|
||||
|
||||
Use these classes to distribute space between and around flex items along the **main axis** of the container.
|
||||
|
||||
@ -118,6 +118,8 @@ Overflow utilities can also target x- and y-axes independently via:
|
||||
* `.overflow-y-scroll`
|
||||
* `.overflow-y-visible`
|
||||
|
||||
Overflow utilities can be applied or changed per [breakpoint](/objects/grid#breakpoints). Each **responsive** overflow utility is applied to the specified breakpoint and up, using the following formula: `overflow-[breakpoint]-[axis]-[property]`. For example: `overflow-x-scroll` or `overflow-md-x-visible`.
|
||||
|
||||
## Floats
|
||||
Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
|
||||
```html live
|
||||
@ -227,6 +229,29 @@ Use `.height-full` to set height to 100%.
|
||||
## Position
|
||||
Position utilities can be used to alter the default document flow. **Be careful when using positioning, it's often unnecessary and commonly misused.**
|
||||
|
||||
The position of an element depends on the content. Use `top-0`, `right-0`, `bottom-0`, and `left-0` to further specify an elements final position.
|
||||
|
||||
```html live
|
||||
<div style="height: 64px;">
|
||||
<div class="border position-absolute top-0 left-0">
|
||||
.top-0 .left-0
|
||||
</div>
|
||||
<div class="border position-absolute top-0 right-0">
|
||||
.top-0 .right-0
|
||||
</div>
|
||||
<div class="border position-absolute bottom-0 right-0">
|
||||
.bottom-0 .right-0
|
||||
</div>
|
||||
<div class="border position-absolute bottom-0 left-0">
|
||||
.bottom-0 .left-0
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Using the **responsive variants** (e.g. `.right-md-0`) can be helpful for positioning select menus, dropdowns, popovers etc. when the content gets shuffled around for certain responsive breakpoints. You can also use `auto` to "reset" a final position for wider breakpoints (e.g. `right-0 right-md-auto`).
|
||||
|
||||
### Relative
|
||||
|
||||
Use `.position-relative` to create a new stacking context.
|
||||
|
||||
_Note how the other elements are displayed as if "Two" were in its normal position and taking up space._
|
||||
@ -246,6 +271,8 @@ _Note how the other elements are displayed as if "Two" were in its normal positi
|
||||
</div>
|
||||
```
|
||||
|
||||
### Absolute
|
||||
|
||||
Use `.position-absolute` to take elements out of the normal document flow.
|
||||
|
||||
```html live
|
||||
@ -258,6 +285,8 @@ Use `.position-absolute` to take elements out of the normal document flow.
|
||||
</div>
|
||||
```
|
||||
|
||||
### Fixed
|
||||
|
||||
Use `.position-fixed` to position an element relative to the viewport. **Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.**
|
||||
|
||||
_Note: This example is shown in an `<iframe>` and therefore will not be positioned to the viewport of this page._
|
||||
@ -270,25 +299,6 @@ _Note: This example is shown in an `<iframe>` and therefore will not be position
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `top-0`, `right-0`, `bottom-0`, and `left-0` with `position-absolute`, `position-fixed`, or `position-relative` to further specify an elements position.
|
||||
|
||||
```html live
|
||||
<div style="height: 64px;">
|
||||
<div class="border position-absolute top-0 left-0">
|
||||
.top-0 .left-0
|
||||
</div>
|
||||
<div class="border position-absolute top-0 right-0">
|
||||
.top-0 .right-0
|
||||
</div>
|
||||
<div class="border position-absolute bottom-0 right-0">
|
||||
.bottom-0 .right-0
|
||||
</div>
|
||||
<div class="border position-absolute bottom-0 left-0">
|
||||
.bottom-0 .left-0
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
To fill an entire width or height, use opposing directions.
|
||||
|
||||
_Note: fixed positioning has been disabled here for demonstration only._
|
||||
|
||||
@ -85,7 +85,7 @@ Reset margins built into typography elements or other components with `m-0`, `mt
|
||||
|
||||
## Responsive margins
|
||||
|
||||
All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
All margin utilities can be adjusted per [breakpoint](/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html live
|
||||
<div class="bg-yellow d-inline-block">
|
||||
|
||||
18212
docs/package-lock.json
generated
18212
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": "^1.1.0",
|
||||
"@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",
|
||||
|
||||
@ -53,7 +53,8 @@ export {colors, gradientHues, palettes, getPaletteByName, variables}
|
||||
export const allColors = palettes.reduce((all, {values}) => all.concat(values), [])
|
||||
|
||||
export const borders = Object.keys(variables)
|
||||
.filter(key => key.startsWith('border-') && !variables[key].includes('$'))
|
||||
// Re: border-gray-darker, see https://github.com/primer/css/pull/1192
|
||||
.filter(key => key.startsWith('border-') && !variables[key].includes('$') && key !== 'border-gray-darker')
|
||||
.sort()
|
||||
.map(key => ({
|
||||
variable: key,
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "15.1.0",
|
||||
"version": "15.2.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "15.1.0",
|
||||
"version": "15.2.0",
|
||||
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
|
||||
"homepage": "https://primer.style/css",
|
||||
"author": "GitHub, Inc.",
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
font-size: 13px;
|
||||
list-style: none;
|
||||
background: $bg-white;
|
||||
border: $border;
|
||||
border-radius: $border-radius;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium;
|
||||
box-shadow: $box-shadow-medium;
|
||||
}
|
||||
|
||||
// One of the items that appears within an autocomplete group
|
||||
|
||||
@ -46,9 +46,12 @@ label {
|
||||
background-color: #f3f4f6; // custom gray
|
||||
}
|
||||
|
||||
// Ensures inputs don't zoom on mobile but are body-font size on desktop
|
||||
@include breakpoint(md) {
|
||||
font-size: $body-font-size;
|
||||
// Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
font-size: $h4-size;
|
||||
@include breakpoint(md) {
|
||||
font-size: $body-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
}
|
||||
|
||||
li {
|
||||
// TODO@16.0.0: Remove this. See https://github.com/primer/css/pull/1137.
|
||||
word-wrap: break-all;
|
||||
}
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ $border: $border-width $border-color $border-style !default;
|
||||
// Border Radius
|
||||
$border-radius-1: 4px !default;
|
||||
$border-radius-2: 6px !default;
|
||||
$border-radius-3: 8px !default;
|
||||
$border-radius: $border-radius-2 !default;
|
||||
|
||||
// Box shadow
|
||||
|
||||
@ -44,6 +44,7 @@
|
||||
.rounded#{$variant}-0 { border-radius: 0 !important; }
|
||||
.rounded#{$variant}-1 { border-radius: $border-radius-1 !important; }
|
||||
.rounded#{$variant}-2 { border-radius: $border-radius-2 !important; }
|
||||
.rounded#{$variant}-3 { border-radius: $border-radius-3 !important; }
|
||||
|
||||
@each $edge, $corners in $edges {
|
||||
.rounded#{$variant}-#{$edge}-0 {
|
||||
@ -54,19 +55,19 @@
|
||||
|
||||
.rounded#{$variant}-#{$edge}-1 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius / 2 !important;
|
||||
border-#{$corner}-radius: $border-radius-1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-2 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius !important;
|
||||
border-#{$corner}-radius: $border-radius-2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-3 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius * 2 !important;
|
||||
border-#{$corner}-radius: $border-radius-3 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,8 +9,9 @@
|
||||
.flex#{$variant}-column { flex-direction: column !important; }
|
||||
.flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
|
||||
|
||||
.flex#{$variant}-wrap { flex-wrap: wrap !important; }
|
||||
.flex#{$variant}-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex#{$variant}-wrap { flex-wrap: wrap !important; }
|
||||
.flex#{$variant}-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex#{$variant}-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.flex#{$variant}-justify-start { justify-content: flex-start !important; }
|
||||
.flex#{$variant}-justify-end { justify-content: flex-end !important; }
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// Layout
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
|
||||
|
||||
// Loop through the breakpoint values
|
||||
/* Position */
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
@each $position in $responsive-positions {
|
||||
@ -12,14 +12,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Set top 0 */
|
||||
.top-0 { top: 0 !important; }
|
||||
/* Set right 0 */
|
||||
.right-0 { right: 0 !important; }
|
||||
/* Set bottom 0 */
|
||||
.bottom-0 { bottom: 0 !important; }
|
||||
/* Set left 0 */
|
||||
.left-0 { left: 0 !important; }
|
||||
/* Final position */
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
.top#{$variant}-0 { top: 0 !important; }
|
||||
.right#{$variant}-0 { right: 0 !important; }
|
||||
.bottom#{$variant}-0 { bottom: 0 !important; }
|
||||
.left#{$variant}-0 { left: 0 !important; }
|
||||
.top#{$variant}-auto { top: auto !important; }
|
||||
.right#{$variant}-auto { right: auto !important; }
|
||||
.bottom#{$variant}-auto { bottom: auto !important; }
|
||||
.left#{$variant}-auto { left: auto !important; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Vertical align middle */
|
||||
.v-align-middle { vertical-align: middle !important; }
|
||||
@ -35,10 +40,14 @@
|
||||
.v-align-baseline { vertical-align: baseline !important; }
|
||||
|
||||
// Overflow utilities
|
||||
@each $overflow in (visible, hidden, auto, scroll) {
|
||||
.overflow-#{$overflow} { overflow: $overflow !important; }
|
||||
.overflow-x-#{$overflow} { overflow-x: $overflow !important; }
|
||||
.overflow-y-#{$overflow} { overflow-y: $overflow !important; }
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
@each $overflow in (visible, hidden, auto, scroll) {
|
||||
.overflow#{$variant}-#{$overflow} { overflow: $overflow !important; }
|
||||
.overflow#{$variant}-x-#{$overflow} { overflow-x: $overflow !important; }
|
||||
.overflow#{$variant}-y-#{$overflow} { overflow-y: $overflow !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Clear floats
|
||||
|
||||
Loading…
Reference in New Issue
Block a user