mirror of
https://github.com/primer/css.git
synced 2024-11-14 03:54:54 +03:00
Merge branch 'main' into remove-pagehead
This commit is contained in:
Jon Rohan
commit
326ad0baa7
8
.changeset/README.md
Normal file
8
.changeset/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# Changesets
|
||||
|
||||
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
|
||||
with multi-package repos, or single-package repos to help you version and publish your code. You can
|
||||
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
|
||||
|
||||
We have a quick list of common questions to get you started engaging with this project in
|
||||
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
|
||||
10
.changeset/config.json
Normal file
10
.changeset/config.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
|
||||
"changelog": ["@changesets/changelog-github", {"repo": "primer/css"}],
|
||||
"commit": false,
|
||||
"linked": [],
|
||||
"access": "public",
|
||||
"baseBranch": "main",
|
||||
"updateInternalDependencies": "patch",
|
||||
"ignore": []
|
||||
}
|
||||
5
.changeset/nervous-plants-smell.md
Normal file
5
.changeset/nervous-plants-smell.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": minor
|
||||
---
|
||||
|
||||
Add common marketing utilities to primer/marketing
|
||||
5
.changeset/silver-fireants-run.md
Normal file
5
.changeset/silver-fireants-run.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": patch
|
||||
---
|
||||
|
||||
Fix .btn-with-count documentation
|
||||
5
.changeset/twelve-buses-pretend.md
Normal file
5
.changeset/twelve-buses-pretend.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": minor
|
||||
---
|
||||
|
||||
Change TableObject status to deprecated
|
||||
5
.changeset/witty-donuts-rest.md
Normal file
5
.changeset/witty-donuts-rest.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
'@primer/css': patch
|
||||
---
|
||||
|
||||
Fixing the `color-mode-theme` mixin. Currently the mixin doesn't take into account when `mode="light"` and `light-theme="dark"`. This fix allows dark themes to be set as light themes and to toggle into single light mode.
|
||||
4
.github/CONTRIBUTING.md
vendored
4
.github/CONTRIBUTING.md
vendored
@ -19,7 +19,7 @@ Guidelines for bug reports:
|
||||
|
||||
2. **Use the GitHub issue search** — check if the issue has already been reported.
|
||||
|
||||
3. **Check if the issue has been fixed** — try to reproduce it using the latest `master` branch in the repository.
|
||||
3. **Check if the issue has been fixed** — try to reproduce it using the latest `main` branch in the repository.
|
||||
|
||||
4. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example.
|
||||
|
||||
@ -56,7 +56,7 @@ Anyone can open a pull request on Primer CSS. You do not need to work at GitHub
|
||||
|
||||
1. Fork and clone [this repository](https://github.com/primer/css).
|
||||
2. Configure and install the dependencies: `npm install`
|
||||
3. Create a new branch from master `git checkout -b my-branch-name`
|
||||
3. Create a new branch from main `git checkout -b my-branch-name`
|
||||
4. Make your changes and commit them.
|
||||
5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/ds-core`.
|
||||
6. Wait for CI tests to finish.
|
||||
|
||||
13
.github/dependabot.yml
vendored
Normal file
13
.github/dependabot.yml
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
# To get started with Dependabot version updates, you'll need to specify which
|
||||
# package ecosystems to update and where the package manifests are located.
|
||||
# Please see the documentation for all configuration options:
|
||||
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
||||
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm" # See documentation for possible values
|
||||
directory: "/docs" # Location of package manifests
|
||||
schedule:
|
||||
interval: "daily"
|
||||
allow:
|
||||
- dependency-name: "@primer/gatsby-theme-doctocat"
|
||||
23
.github/workflows/bundle_size.yml
vendored
Normal file
23
.github/workflows/bundle_size.yml
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
name: Bundle report
|
||||
on: [push]
|
||||
jobs:
|
||||
bundle:
|
||||
name: Bundle report
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@master
|
||||
with:
|
||||
node-version: 12
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn
|
||||
|
||||
- name: Build
|
||||
run: yarn dist
|
||||
|
||||
- name: Reporting bundle sizes
|
||||
run: script/bundle-size-report.js --all
|
||||
18
.github/workflows/changelog.yml
vendored
18
.github/workflows/changelog.yml
vendored
@ -1,18 +0,0 @@
|
||||
name: changelog
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- 'release-*'
|
||||
- '*changelog*'
|
||||
jobs:
|
||||
all:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- uses: actions/setup-node@master
|
||||
with:
|
||||
node-version: 11
|
||||
- name: install
|
||||
run: npm install
|
||||
- name: changelog
|
||||
run: script/changelog.js
|
||||
62
.github/workflows/ci.yml
vendored
62
.github/workflows/ci.yml
vendored
@ -1,25 +1,51 @@
|
||||
name: CI
|
||||
on: push
|
||||
on: [push]
|
||||
jobs:
|
||||
all:
|
||||
ci:
|
||||
name: CI
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
- uses: actions/setup-node@master
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@master
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@master
|
||||
with:
|
||||
node-version: 11
|
||||
- name: install
|
||||
run: npm install
|
||||
- name: lint
|
||||
run: script/lint-ci
|
||||
- name: test
|
||||
run: npm test
|
||||
- name: prepublish
|
||||
run: script/prepublish
|
||||
- name: test deprecations
|
||||
if: startsWith(github.ref, 'refs/heads/release-')
|
||||
run: script/test-deprecations.js
|
||||
- uses: primer/publish@v1.1.0
|
||||
node-version: 12
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn
|
||||
|
||||
- name: CSS Lint
|
||||
run: yarn stylelint && yarn stylelint -- --report-needless-disables
|
||||
|
||||
- name: Build
|
||||
run: yarn dist
|
||||
|
||||
- name: Test
|
||||
run: yarn test
|
||||
|
||||
- name: Create .npmrc
|
||||
run: |
|
||||
cat << EOF > "$HOME/.npmrc"
|
||||
//registry.npmjs.org/:_authToken=$NPM_TOKEN
|
||||
EOF
|
||||
env:
|
||||
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
|
||||
|
||||
- name: Publish canary version
|
||||
run: |
|
||||
echo "$( jq '.version = "0.0.0"' package.json )" > package.json
|
||||
echo -e "---\n'@primer/css': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
|
||||
yarn changeset version --snapshot
|
||||
yarn changeset publish --tag canary
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
- name: Output canary version number
|
||||
run: |
|
||||
name=$(jq -r .name package.json)
|
||||
version=$(jq -r .version package.json)
|
||||
npx action-status --context="Published $name" --state=success --description=$version --url "https://unpkg.com/$name@$version/"
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
|
||||
|
||||
34
.github/workflows/release.yml
vendored
Normal file
34
.github/workflows/release.yml
vendored
Normal file
@ -0,0 +1,34 @@
|
||||
name: Release
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
jobs:
|
||||
release:
|
||||
name: Release
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@master
|
||||
with:
|
||||
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@master
|
||||
with:
|
||||
node-version: 12.x
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn
|
||||
|
||||
- name: Create release pull request or publish to npm
|
||||
id: changesets
|
||||
uses: changesets/action@master
|
||||
with:
|
||||
title: Release Tracking
|
||||
# This expects you to have a script called release which does a build for your packages and calls changeset publish
|
||||
publish: yarn release
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
|
||||
1
.node-version
Normal file
1
.node-version
Normal file
@ -0,0 +1 @@
|
||||
14.15.2
|
||||
@ -1,4 +1,5 @@
|
||||
*.log
|
||||
.changeset/
|
||||
.github/
|
||||
.next/
|
||||
.storybook/
|
||||
|
||||
589
CHANGELOG.md
589
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@ -40,7 +40,7 @@ response to any instances of unacceptable behavior.
|
||||
Project maintainers have the right and responsibility to remove, edit, or
|
||||
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||
permanently any contributor for other behaviors that they deem inappropriate,
|
||||
permanently any contributor for any behavior that they deem inappropriate,
|
||||
threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
74
MIGRATING.md
74
MIGRATING.md
@ -1,74 +0,0 @@
|
||||
# 12.0.0
|
||||
The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package — `@primer/css` — which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app:
|
||||
|
||||
## npm
|
||||
First, install the new package.
|
||||
|
||||
```sh
|
||||
npm install --save @primer/css
|
||||
```
|
||||
|
||||
If you use the `primer` package, all you'll need to do is:
|
||||
|
||||
```sh
|
||||
npm uninstall --save primer
|
||||
```
|
||||
|
||||
If you use other packages, such as `primer-utilities`, you will need to uninstall each one by name or use a command line tool like [jq](https://stedolan.github.io/jq/) to list them:
|
||||
|
||||
```sh
|
||||
jq -r '.dependencies | keys[] | select(.|startswith("primer"))' package.json
|
||||
```
|
||||
|
||||
And, if you're feeling saucy, uninstall them all by piping that to `xargs npm uninstall`. :sparkles:
|
||||
|
||||
## Sass
|
||||
There are a couple of things you'll need to change in your Sass setup when migrating to v12. This section is intentionally vague because environments vary wildly between text editors, Sass implementations, and application frameworks. When in doubt, consult the relevant documentation, and feel free to [file an issue][help] if you think that we can help.
|
||||
|
||||
### Sass imports
|
||||
Generally speaking, all of your Sass `@import` statements can be migrated with the following search-and-replace operations, **in the following order**:
|
||||
|
||||
* If you import `primer/index.scss` or `primer`, just replace `primer` with `@primer/css` and you're done!
|
||||
* Otherwise...
|
||||
1. Replace `primer-marketing-` with `@primer/css/marketing/`, e.g.
|
||||
* `primer-marketing-buttons/index.scss` becomes `@primer/css/marketing/buttons/index.scss`
|
||||
* `primer-marketing-utilities/index.scss` becomes `@primer/css/marketing/utilities/index.scss`
|
||||
1. Replace `primer-` with `@primer/css/`, e.g.
|
||||
* `primer-markdown/index.scss` becomes `@primer/css/markdown/index.scss`
|
||||
* `primer-utilities/index.scss` becomes `@primer/css/utilities/index.scss`
|
||||
1. Delete `lib/` from every Primer CSS path, e.g.
|
||||
* `primer-forms/lib/form-control.scss` becomes `@primer/css/forms/form-control.scss`
|
||||
* `primer-navigation/lib/subnav.scss` becomes `@primer/css/navigation/subnav.scss`
|
||||
|
||||
If your text editor supports search and replace regular expressions, the following patterns should work:
|
||||
|
||||
| find | replace |
|
||||
| :--- | :--- |
|
||||
| `primer-marketing-(\w+)(\/lib)?` | `@primer/css/marketing/$1` |
|
||||
| `primer-(\w+)(\/lib)?` | `@primer/css/$1` |
|
||||
| `primer\b` | `@primer/css`
|
||||
|
||||
#### `primer-migrate`
|
||||
You can also use the included [`primer-migrate` script](bin/primer-migrate):
|
||||
|
||||
```sh
|
||||
npx -p @primer/css primer-migrate path/to/**/*.scss
|
||||
```
|
||||
|
||||
### Sass include paths
|
||||
If you've installed Primer CSS with npm, you very likely already have `node_modules` listed in your Sass `includePaths` option, and you won't need to change anything. :tada:
|
||||
|
||||
If you've installed Primer CSS with something _other than_ npm, or you don't know how it was installed, consult the documentation for your setup first, then [let us know][help] if you still can't figure it out.
|
||||
|
||||
## Compiled CSS files
|
||||
|
||||
The compiled CSS files can be found under `/dist` in case you want to directly link to them.
|
||||
|
||||
## Fonts
|
||||
The marketing-specific font files published in the [`fonts` directory](https://unpkg.com/primer-marketing-support@2.0.0/fonts/) of `primer-marketing-support@2.0.0` are published in the `fonts` directory of `@primer/css`. If you use these fonts, you'll need to do the following:
|
||||
|
||||
1. Update any scripts that copy the `.woff` font files from `node_modules/primer-marketing-support/fonts` into your application to look for them in `node_modules/@primer/css/fonts`.
|
||||
1. Update any webpack (or other bundler) resolution rules that look for fonts in `primer-marketing-support/fonts` to look for them in `@primer/css/fonts`.
|
||||
1. Customize the [`$marketing-font-path` variable](src/marketing/support/variables.scss#L1) to match the path from which they're served.
|
||||
|
||||
[help]: https://github.com/primer/css/issues/new?title=Help!&labels=v12,migration
|
||||
@ -13,13 +13,13 @@
|
||||
<a aria-label="contributors graph" href="https://github.com/primer/css/graphs/contributors">
|
||||
<img src="https://img.shields.io/github/contributors/primer/css.svg">
|
||||
</a>
|
||||
<a aria-label="last commit" href="https://github.com/primer/css/commits/master">
|
||||
<a aria-label="last commit" href="https://github.com/primer/css/commits/main">
|
||||
<img alt="" src="https://img.shields.io/github/last-commit/primer/css.svg">
|
||||
</a>
|
||||
<a aria-label="join us in spectrum" href="https://spectrum.chat/primer">
|
||||
<img alt="" src="https://withspectrum.github.io/badge/badge.svg">
|
||||
</a>
|
||||
<a aria-label="license" href="https://github.com/primer/css/blob/master/LICENSE">
|
||||
<a aria-label="license" href="https://github.com/primer/css/blob/main/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/primer/css.svg" alt="">
|
||||
</a>
|
||||
</p>
|
||||
@ -65,5 +65,5 @@ The [Primer CSS docs site](https://primer.style/css) is deployed from this repo
|
||||
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[npm]: https://www.npmjs.com/
|
||||
[primer]: https://primer.style
|
||||
[primer]: https://primer.style/
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
18
RELEASING.md
18
RELEASING.md
@ -5,19 +5,19 @@
|
||||
1. Decide which [PRs](https://github.com/primer/css/pulls) should be part of the next release and if it will be a major, minor or patch `<version>`. You may also check the [release tracking project
|
||||
](https://github.com/primer/css/projects/2#column-4482699) or ask your team members in Slack.
|
||||
|
||||
1. Create a new release branch from `master` and name it `release-<version>`.
|
||||
1. Create a new release branch from `main` and name it `release-<version>`.
|
||||
|
||||
1. Run [`npm version <version>`](https://docs.npmjs.com/cli/version) to update the `version` field in both `package.json` and `package-lock.json`.
|
||||
|
||||
1. Create a new PR for the `release-<version>` branch. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change. The changelog gets generated automatically :
|
||||
1. Create a new PR for the `release-<version>` branch. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change.
|
||||
|
||||
```md
|
||||
# Primer CSS [Major|Minor|Patch] Release
|
||||
|
||||
Version: 📦 **`0.0.0`**
|
||||
Approximate release date: 📆 **DD/MM/YY**
|
||||
Changes: 🎉 [All merged PRs](https://github.com/primer/css/pulls?q=is%3Apr+is%3Amerged+base%3Arelease-0.0.0)
|
||||
|
||||
Approximate release date: 📆 **Mon DD, YYYY**
|
||||
Changes: 🎉 [All merged PRs](https://github.com/primer/css/pulls?q=is%3Apr+is%3Amerged+base%3Arelease-0.0.0) <!-- Update version at the end of the link. E.g. ...release-0.0.0 -> ...release-15.1.0 -->
|
||||
|
||||
---
|
||||
|
||||
### :boom: Breaking Change
|
||||
@ -43,18 +43,20 @@
|
||||
### Ship checklist
|
||||
|
||||
- [x] Update the `version` field in `package.json`
|
||||
- [ ] Merge all PRs
|
||||
- [ ] Update `CHANGELOG.md`
|
||||
- [ ] Test the release candidate version with `github/github`
|
||||
- [ ] Test the release candidate version with `github/github` (optional)
|
||||
- [ ] Get approval
|
||||
- [ ] Merge this PR and [create a new release](https://github.com/primer/css/releases/new)
|
||||
- [ ] Update `github/github`
|
||||
- [ ] Tell the world (Slack, Twitter, Team post)
|
||||
|
||||
For more details, see [RELEASING.md](https://github.com/primer/css/blob/master/RELEASING.md).
|
||||
For more details, see [RELEASING.md](https://github.com/primer/css/blob/main/RELEASING.md).
|
||||
|
||||
/cc @primer/ds-core
|
||||
```
|
||||
|
||||
1. Start merging existing PRs into the release branch. Note: You have to change the base branch from `master` to the `release-<version>` branch before merging.
|
||||
1. Start merging existing PRs into the release branch. Note: You have to change the base branch from `main` to the `release-<version>` branch before merging.
|
||||
|
||||
1. Update `CHANGELOG.md` and the PR description. **Tip**: You can copy&paste the changelog from `Checks > changelog > all > changelog`. It gets generated based on adding the `Tag` labels to PRs.
|
||||
|
||||
|
||||
480
deprecations.js
480
deprecations.js
@ -4,6 +4,486 @@
|
||||
* array and a "message" string.
|
||||
*/
|
||||
const versionDeprecations = {
|
||||
'16.0.0': [
|
||||
{
|
||||
selectors: [
|
||||
'.btn-blue',
|
||||
'.btn-blue:focus',
|
||||
'.btn-blue.focus',
|
||||
'.btn-blue:hover',
|
||||
'.btn-blue.hover',
|
||||
'.btn-blue:active',
|
||||
'.btn-blue.selected',
|
||||
'.btn-blue[aria-selected=true]',
|
||||
'[open]>.btn-blue',
|
||||
'.btn-blue:disabled',
|
||||
'.btn-blue.disabled',
|
||||
'.btn-blue[aria-disabled=true]',
|
||||
'.btn-blue .Counter',
|
||||
'.markdown-body li',
|
||||
'.input-dark',
|
||||
'.input-dark:-ms-input-placeholder',
|
||||
'.input-dark::-ms-input-placeholder',
|
||||
'.input-dark::placeholder',
|
||||
'.input-dark.focus',
|
||||
'.input-dark:focus',
|
||||
'::-ms-input-placeholder',
|
||||
'.border-blue',
|
||||
'.border-blue-light',
|
||||
'.border-green',
|
||||
'.border-green-light',
|
||||
'.border-red',
|
||||
'.border-red-light',
|
||||
'.border-purple',
|
||||
'.border-yellow',
|
||||
'.border-gray-light',
|
||||
'.border-gray-dark',
|
||||
'.border-black-fade',
|
||||
'.border-white-fade',
|
||||
'.border-white-fade-15',
|
||||
'.border-white-fade-30',
|
||||
'.border-white-fade-50',
|
||||
'.border-white-fade-70',
|
||||
'.border-white-fade-85',
|
||||
'.box-shadow',
|
||||
'.box-shadow-medium',
|
||||
'.box-shadow-large',
|
||||
'.box-shadow-extra-large',
|
||||
'.bg-white',
|
||||
'.bg-blue',
|
||||
'.bg-blue-light',
|
||||
'.bg-gray-dark',
|
||||
'.bg-gray',
|
||||
'.bg-gray-light',
|
||||
'.bg-green',
|
||||
'.bg-green-light',
|
||||
'.bg-red',
|
||||
'.bg-red-light',
|
||||
'.bg-yellow',
|
||||
'.bg-yellow-light',
|
||||
'.bg-yellow-dark',
|
||||
'.bg-purple',
|
||||
'.bg-pink',
|
||||
'.bg-purple-light',
|
||||
'.bg-orange',
|
||||
'.color-gray-0',
|
||||
'.bg-gray-0',
|
||||
'.color-gray-1',
|
||||
'.bg-gray-1',
|
||||
'.color-gray-2',
|
||||
'.bg-gray-2',
|
||||
'.color-gray-3',
|
||||
'.bg-gray-3',
|
||||
'.color-gray-4',
|
||||
'.bg-gray-4',
|
||||
'.color-gray-5',
|
||||
'.bg-gray-5',
|
||||
'.color-gray-6',
|
||||
'.bg-gray-6',
|
||||
'.color-gray-7',
|
||||
'.bg-gray-7',
|
||||
'.color-gray-8',
|
||||
'.bg-gray-8',
|
||||
'.color-gray-9',
|
||||
'.bg-gray-9',
|
||||
'.color-blue-0',
|
||||
'.bg-blue-0',
|
||||
'.color-blue-1',
|
||||
'.bg-blue-1',
|
||||
'.color-blue-2',
|
||||
'.bg-blue-2',
|
||||
'.color-blue-3',
|
||||
'.bg-blue-3',
|
||||
'.color-blue-4',
|
||||
'.bg-blue-4',
|
||||
'.color-blue-5',
|
||||
'.bg-blue-5',
|
||||
'.color-blue-6',
|
||||
'.bg-blue-6',
|
||||
'.color-blue-7',
|
||||
'.bg-blue-7',
|
||||
'.color-blue-8',
|
||||
'.bg-blue-8',
|
||||
'.color-blue-9',
|
||||
'.bg-blue-9',
|
||||
'.color-green-0',
|
||||
'.bg-green-0',
|
||||
'.color-green-1',
|
||||
'.bg-green-1',
|
||||
'.color-green-2',
|
||||
'.bg-green-2',
|
||||
'.color-green-3',
|
||||
'.bg-green-3',
|
||||
'.color-green-4',
|
||||
'.bg-green-4',
|
||||
'.color-green-5',
|
||||
'.bg-green-5',
|
||||
'.color-green-6',
|
||||
'.bg-green-6',
|
||||
'.color-green-7',
|
||||
'.bg-green-7',
|
||||
'.color-green-8',
|
||||
'.bg-green-8',
|
||||
'.color-green-9',
|
||||
'.bg-green-9',
|
||||
'.color-yellow-0',
|
||||
'.bg-yellow-0',
|
||||
'.color-yellow-1',
|
||||
'.bg-yellow-1',
|
||||
'.color-yellow-2',
|
||||
'.bg-yellow-2',
|
||||
'.color-yellow-3',
|
||||
'.bg-yellow-3',
|
||||
'.color-yellow-4',
|
||||
'.bg-yellow-4',
|
||||
'.color-yellow-5',
|
||||
'.bg-yellow-5',
|
||||
'.color-yellow-6',
|
||||
'.bg-yellow-6',
|
||||
'.color-yellow-7',
|
||||
'.bg-yellow-7',
|
||||
'.color-yellow-8',
|
||||
'.bg-yellow-8',
|
||||
'.color-yellow-9',
|
||||
'.bg-yellow-9',
|
||||
'.color-orange-0',
|
||||
'.bg-orange-0',
|
||||
'.color-orange-1',
|
||||
'.bg-orange-1',
|
||||
'.color-orange-2',
|
||||
'.bg-orange-2',
|
||||
'.color-orange-3',
|
||||
'.bg-orange-3',
|
||||
'.color-orange-4',
|
||||
'.bg-orange-4',
|
||||
'.color-orange-5',
|
||||
'.bg-orange-5',
|
||||
'.color-orange-6',
|
||||
'.bg-orange-6',
|
||||
'.color-orange-7',
|
||||
'.bg-orange-7',
|
||||
'.color-orange-8',
|
||||
'.bg-orange-8',
|
||||
'.color-orange-9',
|
||||
'.bg-orange-9',
|
||||
'.color-red-0',
|
||||
'.bg-red-0',
|
||||
'.color-red-1',
|
||||
'.bg-red-1',
|
||||
'.color-red-2',
|
||||
'.bg-red-2',
|
||||
'.color-red-3',
|
||||
'.bg-red-3',
|
||||
'.color-red-4',
|
||||
'.bg-red-4',
|
||||
'.color-red-5',
|
||||
'.bg-red-5',
|
||||
'.color-red-6',
|
||||
'.bg-red-6',
|
||||
'.color-red-7',
|
||||
'.bg-red-7',
|
||||
'.color-red-8',
|
||||
'.bg-red-8',
|
||||
'.color-red-9',
|
||||
'.bg-red-9',
|
||||
'.color-purple-0',
|
||||
'.bg-purple-0',
|
||||
'.color-purple-1',
|
||||
'.bg-purple-1',
|
||||
'.color-purple-2',
|
||||
'.bg-purple-2',
|
||||
'.color-purple-3',
|
||||
'.bg-purple-3',
|
||||
'.color-purple-4',
|
||||
'.bg-purple-4',
|
||||
'.color-purple-5',
|
||||
'.bg-purple-5',
|
||||
'.color-purple-6',
|
||||
'.bg-purple-6',
|
||||
'.color-purple-7',
|
||||
'.bg-purple-7',
|
||||
'.color-purple-8',
|
||||
'.bg-purple-8',
|
||||
'.color-purple-9',
|
||||
'.bg-purple-9',
|
||||
'.color-pink-0',
|
||||
'.bg-pink-0',
|
||||
'.color-pink-1',
|
||||
'.bg-pink-1',
|
||||
'.color-pink-2',
|
||||
'.bg-pink-2',
|
||||
'.color-pink-3',
|
||||
'.bg-pink-3',
|
||||
'.color-pink-4',
|
||||
'.bg-pink-4',
|
||||
'.color-pink-5',
|
||||
'.bg-pink-5',
|
||||
'.color-pink-6',
|
||||
'.bg-pink-6',
|
||||
'.color-pink-7',
|
||||
'.bg-pink-7',
|
||||
'.color-pink-8',
|
||||
'.bg-pink-8',
|
||||
'.color-pink-9',
|
||||
'.bg-pink-9',
|
||||
'.text-blue',
|
||||
'.text-red',
|
||||
'.text-gray-light',
|
||||
'.text-gray',
|
||||
'.text-gray-dark',
|
||||
'.text-green',
|
||||
'.text-yellow',
|
||||
'.text-orange',
|
||||
'.text-orange-light',
|
||||
'.text-purple',
|
||||
'.text-pink',
|
||||
'.text-white',
|
||||
'.link-gray',
|
||||
'.link-gray:hover',
|
||||
'.link-gray-dark',
|
||||
'.link-gray-dark:hover',
|
||||
'.link-hover-blue:hover',
|
||||
'.muted-link',
|
||||
'.muted-link:hover',
|
||||
'.text-shadow-dark',
|
||||
'.text-shadow-light',
|
||||
'.dropdown-menu-dark',
|
||||
'.dropdown-menu-dark::before',
|
||||
'.dropdown-menu-dark::after',
|
||||
'.dropdown-menu-dark .dropdown-header',
|
||||
'.dropdown-menu-dark .dropdown-divider',
|
||||
'.dropdown-menu-dark .dropdown-item',
|
||||
'.dropdown-menu-dark.dropdown-menu-w::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-w::after',
|
||||
'.dropdown-menu-dark.dropdown-menu-e::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-e::after',
|
||||
'.dropdown-menu-dark.dropdown-menu-ne::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-ne::after',
|
||||
'.Label--outline',
|
||||
'.Label--gray',
|
||||
'.Label--gray-darker',
|
||||
'.Label--yellow',
|
||||
'.Label--orange',
|
||||
'.Label--red',
|
||||
'.Label--outline-green',
|
||||
'.Label--green',
|
||||
'.Label--blue',
|
||||
'.Label--purple',
|
||||
'.Label--pink',
|
||||
'.State--green',
|
||||
'.State--red',
|
||||
'.State--purple',
|
||||
'.Counter--gray-light',
|
||||
'.Counter--gray',
|
||||
'.btn-transparent:active'
|
||||
],
|
||||
message: `This selector is not available in Primer CSS 16.0.0. Please refer to the documentation.`
|
||||
},
|
||||
{
|
||||
variables: [
|
||||
'$bg-black',
|
||||
'$bg-black-fade',
|
||||
'$bg-blue',
|
||||
'$bg-blue-light',
|
||||
'$bg-diffstat-added',
|
||||
'$bg-diffstat-deleted',
|
||||
'$bg-diffstat-neutral',
|
||||
'$bg-gray',
|
||||
'$bg-gray-dark',
|
||||
'$bg-gray-light',
|
||||
'$bg-green',
|
||||
'$bg-green-light',
|
||||
'$bg-orange',
|
||||
'$bg-pink',
|
||||
'$bg-purple',
|
||||
'$bg-purple-light',
|
||||
'$bg-red',
|
||||
'$bg-red-light',
|
||||
'$bg-white',
|
||||
'$bg-yellow',
|
||||
'$bg-yellow-dark',
|
||||
'$bg-yellow-light',
|
||||
'$black',
|
||||
'$black-fade-15',
|
||||
'$black-fade-30',
|
||||
'$black-fade-50',
|
||||
'$black-fade-70',
|
||||
'$black-fade-85',
|
||||
'$blue',
|
||||
'$blue-000',
|
||||
'$blue-100',
|
||||
'$blue-200',
|
||||
'$blue-300',
|
||||
'$blue-400',
|
||||
'$blue-500',
|
||||
'$blue-600',
|
||||
'$blue-700',
|
||||
'$blue-800',
|
||||
'$blue-900',
|
||||
'$border-black-fade',
|
||||
'$border-blue',
|
||||
'$border-blue-light',
|
||||
'$border-color',
|
||||
'$border-color-button',
|
||||
'$border-gray',
|
||||
'$border-gray-dark',
|
||||
'$border-gray-darker',
|
||||
'$border-gray-light',
|
||||
'$border-green',
|
||||
'$border-green-light',
|
||||
'$border-purple',
|
||||
'$border-red',
|
||||
'$border-red-light',
|
||||
'$border-white',
|
||||
'$border-white-fade',
|
||||
'$border-yellow',
|
||||
'$box-shadow',
|
||||
'$box-shadow-extra-large',
|
||||
'$box-shadow-focus',
|
||||
'$box-shadow-highlight',
|
||||
'$box-shadow-inset',
|
||||
'$box-shadow-large',
|
||||
'$box-shadow-medium',
|
||||
'$btn-active-shadow',
|
||||
'$btn-input-focus-shadow',
|
||||
'$form-control-shadow',
|
||||
'$gray',
|
||||
'$gray-000',
|
||||
'$gray-100',
|
||||
'$gray-200',
|
||||
'$gray-300',
|
||||
'$gray-400',
|
||||
'$gray-500',
|
||||
'$gray-600',
|
||||
'$gray-700',
|
||||
'$gray-800',
|
||||
'$gray-900',
|
||||
'$gray-dark',
|
||||
'$gray-light',
|
||||
'$green',
|
||||
'$green-000',
|
||||
'$green-100',
|
||||
'$green-200',
|
||||
'$green-300',
|
||||
'$green-400',
|
||||
'$green-500',
|
||||
'$green-600',
|
||||
'$green-700',
|
||||
'$green-800',
|
||||
'$green-900',
|
||||
'$orange',
|
||||
'$orange-000',
|
||||
'$orange-100',
|
||||
'$orange-200',
|
||||
'$orange-300',
|
||||
'$orange-400',
|
||||
'$orange-500',
|
||||
'$orange-600',
|
||||
'$orange-700',
|
||||
'$orange-800',
|
||||
'$orange-900',
|
||||
'$pink-000',
|
||||
'$pink-100',
|
||||
'$pink-200',
|
||||
'$pink-300',
|
||||
'$pink-400',
|
||||
'$pink-500',
|
||||
'$pink-600',
|
||||
'$pink-700',
|
||||
'$pink-800',
|
||||
'$pink-900',
|
||||
'$purple',
|
||||
'$purple-000',
|
||||
'$purple-100',
|
||||
'$purple-200',
|
||||
'$purple-300',
|
||||
'$purple-400',
|
||||
'$purple-500',
|
||||
'$purple-600',
|
||||
'$purple-700',
|
||||
'$purple-800',
|
||||
'$purple-900',
|
||||
'$red',
|
||||
'$red-000',
|
||||
'$red-100',
|
||||
'$red-200',
|
||||
'$red-300',
|
||||
'$red-400',
|
||||
'$red-500',
|
||||
'$red-600',
|
||||
'$red-700',
|
||||
'$red-800',
|
||||
'$red-900',
|
||||
'$text-black',
|
||||
'$text-blue',
|
||||
'$text-gray',
|
||||
'$text-gray-dark',
|
||||
'$text-gray-light',
|
||||
'$text-green',
|
||||
'$text-orange',
|
||||
'$text-orange-light',
|
||||
'$text-pink',
|
||||
'$text-purple',
|
||||
'$text-red',
|
||||
'$text-white',
|
||||
'$text-yellow',
|
||||
'$tooltip-background-color',
|
||||
'$tooltip-text-color',
|
||||
'$white',
|
||||
'$white-fade-15',
|
||||
'$white-fade-30',
|
||||
'$white-fade-50',
|
||||
'$white-fade-70',
|
||||
'$white-fade-85',
|
||||
'$yellow',
|
||||
'$yellow-000',
|
||||
'$yellow-100',
|
||||
'$yellow-200',
|
||||
'$yellow-300',
|
||||
'$yellow-400',
|
||||
'$yellow-500',
|
||||
'$yellow-600',
|
||||
'$yellow-700',
|
||||
'$yellow-800',
|
||||
'$yellow-900',
|
||||
'$blue-mktg',
|
||||
'$green-mktg'
|
||||
],
|
||||
message: `This variable is not available in Primer CSS 16.0.0. Please refer to the documentation.`
|
||||
}
|
||||
],
|
||||
'15.0.0': [
|
||||
{
|
||||
selectors: [
|
||||
'.btn-outline:active .Counter',
|
||||
'.btn-outline.selected .Counter',
|
||||
'.btn-outline[aria-selected=true] .Counter',
|
||||
'.tabnav .Counter',
|
||||
'.SideNav-item:hover::before',
|
||||
'.SideNav-item:focus::before',
|
||||
'.UnderlineNav-item:hover .UnderlineNav-octicon',
|
||||
'.UnderlineNav-item:focus .UnderlineNav-octicon',
|
||||
'.UnderlineNav--right .UnderlineNav-item',
|
||||
'.pagination::before',
|
||||
'.pagination::after',
|
||||
'.pagination a:first-child',
|
||||
'.pagination span:first-child',
|
||||
'.pagination em:first-child',
|
||||
'.pagination a:last-child',
|
||||
'.pagination span:last-child',
|
||||
'.pagination em:last-child',
|
||||
'.pagination .selected',
|
||||
'.IssueLabel--big .g-emoji',
|
||||
'.IssueLabel--big:hover',
|
||||
'.SelectMenu-item[aria-checked="true"]',
|
||||
'.SelectMenu-item[aria-checked="true"] .SelectMenu-icon--check',
|
||||
'.SelectMenu-tab:not([aria-checked="true"]):hover',
|
||||
'.SelectMenu-tab:not([aria-checked="true"]):active',
|
||||
'.SelectMenu-tab:not([aria-selected="true"]):hover'
|
||||
],
|
||||
message: `This selector is not available in Primer CSS 15.0.0. Please refer to the documentation.`
|
||||
}
|
||||
],
|
||||
'14.4.0': [
|
||||
{
|
||||
selectors: [
|
||||
|
||||
6
docs/.babelrc
Normal file
6
docs/.babelrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"presets": [
|
||||
"babel-preset-gatsby",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
title: Alerts
|
||||
path: components/alerts
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/alerts'
|
||||
source: 'https://github.com/primer/css/tree/main/src/alerts'
|
||||
bundle: alerts
|
||||
---
|
||||
|
||||
@ -40,24 +40,24 @@ Should the need arise, you can quickly space out your flash message from surroun
|
||||
</div>
|
||||
```
|
||||
|
||||
## Variations
|
||||
## Colors
|
||||
|
||||
Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively.
|
||||
|
||||
```html live
|
||||
<div class="flash flash-warn">
|
||||
<div class="flash">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div class="flash flash-error">
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div class="flash flash-success">
|
||||
<div class="flash mt-3 flash-error">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
@ -68,33 +68,75 @@ Add an icon to the left of the flash message to give it some funky fresh attenti
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
<!-- <%= octicon "alert" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
|
||||
/>
|
||||
</svg>
|
||||
Flash message with an icon goes here.
|
||||
<!-- <%= octicon "rocket" %> -->
|
||||
<svg class="octicon octicon-rocket" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.064 0C11.7434 9.77766e-05 9.51786 0.922034 7.87699 2.563L7.41799 3.021C7.10399 3.335 6.80199 3.662 6.51399 4H3.30999C3.01117 4.00009 2.71736 4.07669 2.45653 4.2225C2.19571 4.36832 1.97657 4.57849 1.81999 4.833L0.10999 7.607C0.0499638 7.7045 0.0130574 7.81445 0.00209983 7.92842C-0.00885773 8.04239 0.00642442 8.15736 0.0467749 8.26451C0.0871255 8.37166 0.151473 8.46815 0.234886 8.54658C0.318298 8.62502 0.418561 8.68331 0.52799 8.717L3.62999 9.671C3.66699 9.722 3.70899 9.771 3.75399 9.816L6.18299 12.244C6.22899 12.29 6.27699 12.332 6.32799 12.369L7.28199 15.471C7.31568 15.5804 7.37397 15.6807 7.45241 15.7641C7.53084 15.8475 7.62733 15.9119 7.73448 15.9522C7.84163 15.9926 7.9566 16.0078 8.07057 15.9969C8.18454 15.9859 8.29449 15.949 8.39199 15.889L11.166 14.182C11.4205 14.0254 11.6307 13.8063 11.7765 13.5455C11.9223 13.2846 11.9989 12.9908 11.999 12.692V9.485C12.337 9.197 12.664 8.895 12.978 8.581L13.436 8.122C15.0771 6.48154 15.9994 4.2564 16 1.936V1.75C16 1.28587 15.8156 0.840752 15.4874 0.512563C15.1592 0.184374 14.7141 0 14.25 0H14.064ZM10.5 10.625C10.412 10.685 10.323 10.743 10.234 10.8L7.88399 12.321L8.43199 14.104L10.381 12.904C10.4174 12.8816 10.4474 12.8503 10.4682 12.813C10.4891 12.7757 10.5 12.7337 10.5 12.691V10.625ZM3.67799 8.116L5.19999 5.766C5.25799 5.676 5.31699 5.588 5.37599 5.5H3.30899C3.26628 5.49999 3.22427 5.51092 3.18699 5.53175C3.1497 5.55258 3.11837 5.58262 3.09599 5.619L1.89599 7.569L3.67799 8.116ZM8.93799 3.623C10.2973 2.26391 12.1408 1.50028 14.063 1.5H14.249C14.3153 1.5 14.3789 1.52634 14.4258 1.57322C14.4727 1.62011 14.499 1.6837 14.499 1.75V1.936C14.4991 2.88813 14.3117 3.83096 13.9474 4.71066C13.5832 5.59035 13.0492 6.38968 12.376 7.063L11.917 7.521C11.157 8.281 10.32 8.958 9.41799 9.541L7.10099 11.041L4.95799 8.898L6.45799 6.581C7.04138 5.67884 7.71847 4.84085 8.47799 4.081L8.93599 3.623H8.93799ZM12 5C12 5.26522 11.8946 5.51957 11.7071 5.70711C11.5196 5.89464 11.2652 6 11 6C10.7348 6 10.4804 5.89464 10.2929 5.70711C10.1053 5.51957 9.99999 5.26522 9.99999 5C9.99999 4.73478 10.1053 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4C11.2652 4 11.5196 4.10536 11.7071 4.29289C11.8946 4.48043 12 4.73478 12 5ZM3.55999 14.56C3.70736 14.4227 3.82557 14.2571 3.90755 14.0731C3.98954 13.8891 4.03362 13.6905 4.03717 13.489C4.04073 13.2876 4.00368 13.0876 3.92824 12.9008C3.85279 12.714 3.7405 12.5444 3.59807 12.4019C3.45563 12.2595 3.28596 12.1472 3.09919 12.0718C2.91241 11.9963 2.71235 11.9593 2.51095 11.9628C2.30954 11.9664 2.11091 12.0105 1.92691 12.0924C1.74292 12.1744 1.57731 12.2926 1.43999 12.44C0.70599 13.17 0.39299 14.772 0.28999 15.443C0.2839 15.4792 0.286547 15.5163 0.29771 15.5512C0.308873 15.5861 0.328229 15.6179 0.354162 15.6438C0.380096 15.6698 0.411855 15.6891 0.44679 15.7003C0.481726 15.7114 0.518824 15.7141 0.55499 15.708C1.22599 15.605 2.82799 15.292 3.55999 14.56Z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
<!-- <%= octicon "shield-lock" %> -->
|
||||
<svg class="octicon octicon-shield-lock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.53336 0.133063C8.18645 0.0220524 7.81355 0.0220518 7.46664 0.133062L2.21664 1.81306C1.49183 2.045 1 2.71878 1 3.4798V6.99985C1 8.5659 1.31923 10.1823 2.3032 11.682C3.28631 13.1805 4.88836 14.4946 7.33508 15.5367C7.75909 15.7173 8.24091 15.7173 8.66493 15.5367C11.1116 14.4946 12.7137 13.1805 13.6968 11.682C14.6808 10.1823 15 8.5659 15 6.99985V3.4798C15 2.71878 14.5082 2.045 13.7834 1.81306L8.53336 0.133063ZM7.92381 1.5617C7.97336 1.54584 8.02664 1.54584 8.07619 1.5617L13.3262 3.2417C13.4297 3.27483 13.5 3.37109 13.5 3.4798V6.99985C13.5 8.35818 13.2253 9.66618 12.4426 10.8592C11.6591 12.0535 10.3216 13.2007 8.07713 14.1567C8.02866 14.1773 7.97134 14.1773 7.92287 14.1567C5.67838 13.2007 4.34094 12.0535 3.55737 10.8592C2.77465 9.66618 2.5 8.35818 2.5 6.99985V3.4798C2.5 3.37109 2.57026 3.27483 2.67381 3.2417L7.92381 1.5617ZM9.5 6.49988C9.5 7.05509 9.19835 7.53985 8.75 7.7992L8.75 10.2499C8.75 10.6641 8.41421 10.9999 8 10.9999C7.58579 10.9999 7.25 10.6641 7.25 10.2499L7.25 7.7992C6.80165 7.53985 6.5 7.05509 6.5 6.49988C6.5 5.67145 7.17157 4.99988 8 4.99988C8.82843 4.99988 9.5 5.67145 9.5 6.49988Z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
<!-- <%= octicon "flame" %> -->
|
||||
<svg class="octicon octicon-flame" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99789 14.5001C10.8304 14.5001 12.9971 12.5193 12.9971 10C12.9971 8.53654 12.3174 7.80948 11.1193 6.61667C11.1071 6.60453 11.0949 6.59236 11.0826 6.58014C10.0696 5.57183 8.7824 4.29061 8.24911 2.14559C7.92718 2.40211 7.61813 2.72476 7.38529 3.09924C6.95273 3.79496 6.7637 4.67919 7.33879 5.82934C7.81231 6.77637 8.00841 8.11294 7.06066 9.06069C6.45006 9.67129 5.51641 9.90115 4.65812 9.69385C4.1002 9.55909 3.61121 9.25672 3.22215 8.81981C3.08407 9.16747 3.00001 9.57013 3 10.0001C2.99994 12.5298 5.1636 14.5001 7.99789 14.5001ZM9.5332 0.752514C9.49562 0.340008 9.16001 0.00931669 8.76889 0.145686C7.03463 0.750359 4.34051 3.18696 5.99715 6.50017C6.34142 7.1887 6.28164 7.71839 6 8.00003C5.58104 8.41899 4.45998 8.4869 3.95925 7.16847C3.78678 6.71435 3.30098 6.40593 2.92501 6.71353C2.03625 7.44067 1.50003 8.70216 1.5 10C1.49992 13.5121 4.49789 16.0001 7.99789 16.0001C11.4979 16.0001 14.4971 13.5 14.4971 10C14.4971 7.86282 13.3699 6.74064 12.1862 5.56222C10.9968 4.37809 9.7504 3.13717 9.5332 0.752514Z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
<!-- <%= octicon "shield-check" %> -->
|
||||
<svg class="octicon octicon-shield-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.53336 0.133063C8.18645 0.0220524 7.81355 0.0220518 7.46664 0.133062L2.21664 1.81306C1.49183 2.045 1 2.71878 1 3.4798V6.99985C1 8.5659 1.31923 10.1823 2.3032 11.682C3.28631 13.1805 4.88836 14.4946 7.33508 15.5367C7.75909 15.7173 8.24091 15.7173 8.66493 15.5367C11.1116 14.4946 12.7137 13.1805 13.6968 11.682C14.6808 10.1823 15 8.5659 15 6.99985V3.4798C15 2.71878 14.5082 2.045 13.7834 1.81306L8.53336 0.133063ZM7.92381 1.5617C7.97336 1.54584 8.02664 1.54584 8.07619 1.5617L13.3262 3.2417C13.4297 3.27483 13.5 3.37109 13.5 3.4798V6.99985C13.5 8.35818 13.2253 9.66618 12.4426 10.8592C11.6591 12.0535 10.3216 13.2007 8.07713 14.1567C8.02866 14.1773 7.97134 14.1773 7.92287 14.1567C5.67838 13.2007 4.34094 12.0535 3.55737 10.8592C2.77465 9.66618 2.5 8.35818 2.5 6.99985V3.4798C2.5 3.37109 2.57026 3.27483 2.67381 3.2417L7.92381 1.5617ZM11.2803 6.28021C11.5732 5.98731 11.5732 5.51244 11.2803 5.21955C10.9874 4.92665 10.5126 4.92665 10.2197 5.21955L7.25 8.18922L6.28033 7.21955C5.98744 6.92665 5.51256 6.92665 5.21967 7.21955C4.92678 7.51244 4.92678 7.98731 5.21967 8.28021L6.71967 9.78021C7.01256 10.0731 7.48744 10.0731 7.78033 9.78021L11.2803 6.28021Z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
```
|
||||
|
||||
When using a `24px` icon, add a `.v-align-bottom` class and increase the font-size with `.f4` for a more balanced alignment.
|
||||
|
||||
```html live
|
||||
<div class="flash flash-success f4">
|
||||
<!-- <%= octicon "shield-check" %> -->
|
||||
<svg class="octicon octicon-shield-check v-align-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9275 3.55567C11.9748 3.54134 12.0252 3.54134 12.0725 3.55567L19.3225 5.75264C19.4292 5.78497 19.5 5.88157 19.5 5.99039V11C19.5 13.4031 18.7773 15.3203 17.5164 16.847C16.246 18.3853 14.3925 19.5706 12.0703 20.4278C12.0253 20.4444 11.9746 20.4444 11.9297 20.4278C9.60747 19.5706 7.75398 18.3853 6.48358 16.847C5.2227 15.3203 4.5 13.4031 4.5 11L4.5 5.9904C4.5 5.88158 4.57082 5.78496 4.6775 5.75264L11.9275 3.55567ZM12.5075 2.12013C12.1766 2.01985 11.8234 2.01985 11.4925 2.12013L4.24249 4.3171C3.50587 4.54032 3 5.21807 3 5.9904L3 11C3 13.7306 3.83104 15.9908 5.32701 17.8022C6.81347 19.6021 8.91996 20.9157 11.4102 21.835C11.7904 21.9753 12.2095 21.9753 12.5897 21.835C15.08 20.9157 17.1865 19.6021 18.673 17.8022C20.169 15.9908 21 13.7306 21 11V5.99039C21 5.21804 20.4941 4.54031 19.7575 4.3171L12.5075 2.12013ZM16.2803 9.78033C16.5732 9.48744 16.5732 9.01256 16.2803 8.71967C15.9874 8.42678 15.5126 8.42678 15.2197 8.71967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L16.2803 9.78033Z"></path></svg>
|
||||
Flash message with a larger icon
|
||||
</div>
|
||||
```
|
||||
|
||||
## 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">
|
||||
<button class="flash-close js-flash-close" type="button">
|
||||
<!-- <%= octicon "x", :"aria-label" => "Close" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-label="Close" role="img">
|
||||
<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>
|
||||
</button>
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -104,8 +146,23 @@ A flash message with an action button.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
<button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
|
||||
Flash message with action here.
|
||||
<button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -115,9 +172,7 @@ A flash message that is full width and removes border and border radius.
|
||||
|
||||
```html live
|
||||
<div class="flash flash-full">
|
||||
<div class="container">
|
||||
Full width flash message.
|
||||
</div>
|
||||
Full width flash message.
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -126,7 +181,7 @@ A flash message that is full width and removes border and border radius.
|
||||
A flash message that is fixed positioned at the top of the page. Use for more global events where the content of the page is unknown.
|
||||
|
||||
```html live
|
||||
<div class="ml-n3" style="min-height: 50px">
|
||||
<div class="ml-n3" style="min-height: 50px;">
|
||||
<div class="flash flash-banner">
|
||||
Flash banner message.
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Autocomplete
|
||||
path: components/autocomplete
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/autocomplete'
|
||||
source: 'https://github.com/primer/css/tree/main/src/autocomplete'
|
||||
bundle: autocomplete
|
||||
---
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Avatars
|
||||
path: components/avatars
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/avatars'
|
||||
source: 'https://github.com/primer/css/tree/main/src/avatars'
|
||||
bundle: avatars
|
||||
---
|
||||
|
||||
@ -15,15 +15,30 @@ Add `.avatar` to any `<img>` element to make it an avatar. This resets some key
|
||||
Be sure to set `width` and `height` attributes for maximum browser performance.
|
||||
|
||||
```html live
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
|
||||
```
|
||||
|
||||
### Small avatars
|
||||
|
||||
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" />
|
||||
```
|
||||
|
||||
### Avatar sizes
|
||||
|
||||
Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only supported for the `20px` avatar size.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
|
||||
<img class="avatar avatar-2 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" />
|
||||
<img class="avatar avatar-3 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=48" />
|
||||
<img class="avatar avatar-4 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=56" />
|
||||
<img class="avatar avatar-5 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" />
|
||||
<img class="avatar avatar-6 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=80" />
|
||||
<img class="avatar avatar-7 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
|
||||
<img class="avatar avatar-8 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=128" />
|
||||
```
|
||||
|
||||
### Parent-child avatars
|
||||
@ -192,10 +207,10 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
|
||||
### Small
|
||||
|
||||
```html live
|
||||
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small" title="Travis CI">
|
||||
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small">
|
||||
<img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt="">
|
||||
</a>
|
||||
<a class="CircleBadge CircleBadge--small bg-yellow" title="Zap this!" href="#small">
|
||||
<a class="CircleBadge CircleBadge--small bg-yellow" href="#small">
|
||||
<!-- <%= octicon "zap", class: "CircleBadge-icon text-white" %> -->
|
||||
<svg class="CircleBadge-icon text-white octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg>
|
||||
</a>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Blankslate
|
||||
path: components/blankslate
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/blankslate'
|
||||
source: 'https://github.com/primer/css/tree/main/src/blankslate'
|
||||
bundle: blankslate
|
||||
---
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -53,7 +53,7 @@ Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Bo
|
||||
|
||||
<!-- Temporary overrides (don't use in production) -->
|
||||
<style> .frame-example { min-height: 500px; } </style>
|
||||
<link href="https://unpkg.com/@github/details-dialog-element/index.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/@github/details-dialog-element/dist/index.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
[aria attributes]: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
|
||||
|
||||
@ -3,7 +3,7 @@ title: Box
|
||||
path: components/box
|
||||
status_issue: 'https://github.com/github/design-systems/issues/198'
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/box'
|
||||
source: 'https://github.com/primer/css/tree/main/src/box'
|
||||
bundle: box
|
||||
---
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Branch name
|
||||
path: components/branch-name
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/branch-name'
|
||||
source: 'https://github.com/primer/css/tree/main/src/branch-name'
|
||||
bundle: branch-name
|
||||
---
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Breadcrumbs
|
||||
path: components/breadcrumb
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/breadcrumb'
|
||||
source: 'https://github.com/primer/css/tree/main/src/breadcrumb'
|
||||
bundle: breadcrumb
|
||||
---
|
||||
|
||||
|
||||
@ -2,66 +2,103 @@
|
||||
title: Buttons
|
||||
path: components/buttons
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/buttons'
|
||||
source: 'https://github.com/primer/css/tree/main/src/buttons'
|
||||
bundle: buttons
|
||||
---
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
|
||||
|
||||
## Default button
|
||||
```html live
|
||||
<button class="btn" type="button">Button</button>
|
||||
```
|
||||
|
||||
Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site.
|
||||
|
||||
When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
|
||||
Note: When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">Button button</button>
|
||||
<a class="btn" href="#url" role="button">Link button</a>
|
||||
```
|
||||
|
||||
You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.
|
||||
## Button types
|
||||
|
||||
### Default
|
||||
|
||||
Use the standard — yet classy — `.btn` for form actions and general page actions. These are used extensively around the site.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">Button</button>
|
||||
<button class="btn btn-sm" type="button">Small button</button>
|
||||
<button class="btn" type="button">Default</button>
|
||||
```
|
||||
|
||||
## Primary button
|
||||
### Primary
|
||||
|
||||
Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-primary mr-2" type="button">Primary button</button>
|
||||
<button class="btn btn-sm btn-primary" type="button">Small primary button</button>
|
||||
<button class="btn btn-primary" type="button">Primary</button>
|
||||
```
|
||||
|
||||
## Danger button
|
||||
|
||||
Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-danger mr-2" type="button">Danger button</button>
|
||||
<button class="btn btn-sm btn-danger" type="button">Small danger button</button>
|
||||
```
|
||||
|
||||
## Outline button
|
||||
### Outline
|
||||
|
||||
Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-outline mr-2" type="button">Outline button</button>
|
||||
<button class="btn btn-sm btn-outline" type="button">Outline button</button>
|
||||
<button class="btn btn-outline" type="button">Outline</button>
|
||||
```
|
||||
|
||||
## Large button
|
||||
### Danger
|
||||
|
||||
Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
|
||||
Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-danger" type="button">Danger</button>
|
||||
```
|
||||
|
||||
## Button states
|
||||
|
||||
### Selected
|
||||
|
||||
Adding an `aria-selected="true"` attribute will keep the button in a selected state. Typically used for [`BtnGroups`](#button-groups).
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup d-block mb-2">
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn" type="button" aria-selected="true">Button</button>
|
||||
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
|
||||
</div>
|
||||
|
||||
<div class="BtnGroup d-block mb-2 ml-0">
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button" aria-selected="true">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-danger" type="button" aria-disabled="true">Disabled</button>
|
||||
```
|
||||
|
||||
## Button variations
|
||||
|
||||
### Sizes
|
||||
|
||||
Next to the default size there is also a `.btn-sm` (small) and `.btn-large` option. Use them to decrese or increase the button size. This is useful for fitting a button next to an input or turning a button into a prominent call to action in hero sections.
|
||||
|
||||
[Type scale utilities](/support/typography#type-scale) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-large mr-2" type="button">Large button</button>
|
||||
<a class="btn btn-large" href="#url" role="button">Large link button</a>
|
||||
<button class="btn btn-sm mr-2" type="button">Small</button>
|
||||
<button class="btn mr-2" type="button">Default</button>
|
||||
<button class="btn btn-large" type="button">Large</button>
|
||||
```
|
||||
|
||||
Use `.btn-large` with a type scale utility to transform the text to a bigger size.
|
||||
@ -73,33 +110,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
|
||||
</div>
|
||||
```
|
||||
|
||||
## Disabled state
|
||||
|
||||
Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button" aria-disabled="true">Disabled button</button>
|
||||
<a class="btn" href="#url" role="button" aria-disabled="true">Disabled button</a>
|
||||
```
|
||||
|
||||
Similar styles are applied to primary, danger, and outline buttons:
|
||||
|
||||
```html live
|
||||
<button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled button</button>
|
||||
<a class="btn btn-primary" href="#url" role="button" aria-disabled="true">Disabled button</a>
|
||||
```
|
||||
|
||||
```html live
|
||||
<button class="btn btn-danger mr-2" type="button" aria-disabled="true">Disabled button</button>
|
||||
<a class="btn btn-danger" href="#url" role="button" aria-disabled="true">Disabled button</a>
|
||||
```
|
||||
|
||||
```html live
|
||||
<button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled button</button>
|
||||
<a class="btn btn-outline" href="#url" role="button" aria-disabled="true">Disabled button</a>
|
||||
```
|
||||
|
||||
## Block button
|
||||
### Block button
|
||||
|
||||
Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
|
||||
|
||||
@ -108,7 +119,7 @@ Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, chang
|
||||
<button class="btn btn-sm btn-block" type="button">Small block button</button>
|
||||
```
|
||||
|
||||
## Link button
|
||||
### Link button
|
||||
|
||||
Create a button that looks like a link with `.btn-link`. Rather than using an `<a>` to trigger JS, this style on a `<button>` should be used for better accessibility.
|
||||
|
||||
@ -118,7 +129,7 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
|
||||
<button class="btn-link" type="button">Link button</button>
|
||||
```
|
||||
|
||||
## Invisible button
|
||||
### Invisible button
|
||||
|
||||
When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms.
|
||||
|
||||
@ -127,48 +138,93 @@ When you want a link, but you want it padded and line heighted like a button bes
|
||||
<button class="btn" type="button">Submit</button>
|
||||
```
|
||||
|
||||
## Octicon button
|
||||
### Hidden text button
|
||||
|
||||
Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
|
||||
Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
```html live
|
||||
<span class="hidden-text-expander">
|
||||
<button type="button" class="ellipsis-expander" aria-expanded="false">…</button>
|
||||
</span>
|
||||
```
|
||||
|
||||
You can also make the expander appear inline by adding `.inline`.
|
||||
|
||||
## Button with icons
|
||||
|
||||
Icons can be added to any button.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">
|
||||
<!-- <%= octicon "search" %> -->
|
||||
<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 "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" 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" 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" 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>
|
||||
```
|
||||
|
||||
### Icon-only button
|
||||
|
||||
Icon-only buttons `.btn-octicon` turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
|
||||
|
||||
```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="Trashcan icon">
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Close button
|
||||
### Close button
|
||||
|
||||
When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
## Button with counts
|
||||
|
||||
You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
|
||||
You can easily append a count to a **small button**. Add the `.btn-with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
|
||||
|
||||
**Be sure to clear the float added by the additional class.**
|
||||
|
||||
@ -176,7 +232,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>
|
||||
@ -208,22 +264,26 @@ You can also use the [counter](./labels#counters) component within buttons:
|
||||
Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup mr-2">
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<div class="BtnGroup d-block mb-2">
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
|
||||
</div>
|
||||
|
||||
<div class="BtnGroup mr-2">
|
||||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item btn-outline" type="button">Button</button>
|
||||
<div class="BtnGroup d-block mb-2 ml-0">
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup">
|
||||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item btn-sm" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -239,15 +299,3 @@ Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, withi
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Hidden text button
|
||||
|
||||
Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
```html live
|
||||
<span class="hidden-text-expander">
|
||||
<button type="button" class="ellipsis-expander" aria-expanded="false">…</button>
|
||||
</span>
|
||||
```
|
||||
|
||||
You can also make the expander appear inline by adding `.inline`.
|
||||
|
||||
@ -3,11 +3,15 @@ title: Dropdown
|
||||
status: New
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
|
||||
|
||||
## Basic examples
|
||||
|
||||
Dropdowns should be trigged by a `<button>`. **[Each dropdown menu requires a directional class](#alignment)**, much like our tooltips.
|
||||
Dropdowns should be triggered by a `<button>`. **[Each dropdown menu requires a directional class](#alignment)**, much like our tooltips.
|
||||
|
||||
Using a GitHub button:
|
||||
|
||||
@ -200,29 +204,3 @@ Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dark
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3 mb-n3" style="min-height: 240px;">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-se dropdown-menu-dark">
|
||||
<div class="dropdown-header">
|
||||
Dropdown header
|
||||
</div>
|
||||
<ul>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li class="dropdown-divider" role="none"></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Forms
|
||||
path: components/forms
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/forms'
|
||||
source: 'https://github.com/primer/css/tree/main/src/forms'
|
||||
bundle: forms
|
||||
---
|
||||
|
||||
@ -15,15 +15,16 @@ Overview:
|
||||
- Always declare a `type` on your `<button>`s.
|
||||
- Form layouts rely on form groups.
|
||||
|
||||
#### Kitchen sink
|
||||
## Kitchen sink
|
||||
|
||||
All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
|
||||
|
||||
```html live
|
||||
<p>
|
||||
<button class="btn" type="button">Button</button>
|
||||
<button class="btn select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
<button class="btn" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
<span class="dropdown-caret">
|
||||
</button>
|
||||
<input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description" />
|
||||
<input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA" />
|
||||
@ -35,8 +36,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
|
||||
<p>
|
||||
<button class="btn btn-sm" type="button">Small button</button>
|
||||
<button class="btn btn-sm select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
<button class="btn btn-sm" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
<span class="dropdown-caret">
|
||||
</button>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description" />
|
||||
<select class="form-select select-sm" aria-label="Important decision">
|
||||
@ -46,7 +48,7 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
</p>
|
||||
```
|
||||
|
||||
#### Example form
|
||||
## Example form
|
||||
|
||||
Form controls in Primer CSS currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.
|
||||
|
||||
@ -60,34 +62,20 @@ 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>
|
||||
```
|
||||
|
||||
#### Form contrast
|
||||
## Inputs
|
||||
|
||||
Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
|
||||
<input
|
||||
class="form-control input-contrast"
|
||||
type="text"
|
||||
placeholder="Input with contrast"
|
||||
aria-label="Input with contrast"
|
||||
/>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Sizing
|
||||
### Sizing
|
||||
|
||||
Make inputs smaller, larger, or full-width with an additional class.
|
||||
|
||||
##### Small
|
||||
#### Small
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -95,7 +83,7 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Large
|
||||
#### Large
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -103,7 +91,7 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Block
|
||||
#### Block
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -111,7 +99,48 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Dark
|
||||
### Input group
|
||||
|
||||
Attached an input and button to one another.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" placeholder="Username" aria-label="Username">
|
||||
<span class="input-group-button">
|
||||
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||
<!-- <%= octicon "clippy" %> -->
|
||||
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Form contrast
|
||||
|
||||
Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
|
||||
<input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
|
||||
</form>
|
||||
```
|
||||
|
||||
### Disabled state
|
||||
|
||||
Add the `disabled` attribute to make a `.form-control` appear disabled.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
|
||||
</form>
|
||||
```
|
||||
|
||||
### Dark
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3">
|
||||
@ -120,9 +149,9 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Hide webkit's contact info autofill icon
|
||||
### Hide WebKit's contact info autofill icon
|
||||
|
||||
Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
|
||||
WebKit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -135,7 +164,7 @@ Webkit sometimes gets confused and tries to add an icon/dropdown to autofill con
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Selects
|
||||
## Selects
|
||||
|
||||
Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
|
||||
|
||||
@ -153,7 +182,7 @@ Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for al
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Small
|
||||
### Small
|
||||
|
||||
Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).
|
||||
|
||||
@ -168,18 +197,10 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select select-sm" aria-label="Preference">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
<button class="btn btn-sm ml-1"> Small button</button>
|
||||
```
|
||||
|
||||
#### Form groups
|
||||
## Form groups
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -220,10 +241,12 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Form group validation
|
||||
## Form group validation
|
||||
|
||||
Convey success, errors and warnings for form groups. For github.com consider using the [`<auto-check>`](https://github.github.io/web-systems-documentation/#custom-elements-auto-check-md) element to perform server-side validation on an input.
|
||||
|
||||
### Success
|
||||
|
||||
If the input is **valid**, add the `.successed` class to the `<div class="form-group">` element. Next add/update a success message to the `.note` element, as well as the `.success` class.
|
||||
|
||||
```html live
|
||||
@ -246,6 +269,8 @@ If the input is **valid**, add the `.successed` class to the `<div class="form-g
|
||||
</form>
|
||||
```
|
||||
|
||||
### Error
|
||||
|
||||
If the input is **not valid**, add the `.errored` class to the `<div class="form-group">` element. Next add/update an error message to the `.note` element, as well as the `.error` class.
|
||||
|
||||
```html live
|
||||
@ -268,6 +293,8 @@ If the input is **not valid**, add the `.errored` class to the `<div class="form
|
||||
</form>
|
||||
```
|
||||
|
||||
### Warning
|
||||
|
||||
If the input should show a **warning**, add the `.warn` class to the `<div class="form-group">` element. Next add/update a warning message to the `.note` element, as well as the `.warning` class.
|
||||
|
||||
```html live
|
||||
@ -290,9 +317,20 @@ If the input should show a **warning**, add the `.warn` class to the `<div class
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Checkboxes and radios
|
||||
### Form actions
|
||||
|
||||
Utilities to spice up the alignment and styling of checkbox and radio controls.
|
||||
Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.
|
||||
|
||||
```html live
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn">Cancel</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Checkboxes and radios
|
||||
|
||||
Utilities to control alignment and styling of checkbox and radio controls.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
@ -321,7 +359,7 @@ You may also add emphasis to the label:
|
||||
</form>
|
||||
```
|
||||
|
||||
##### Show / hide content based on a checkbox or radio button state
|
||||
### Toggle content visibility based on a checkbox or radio button state
|
||||
|
||||
Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed.
|
||||
|
||||
@ -347,7 +385,7 @@ Content that is hidden by default should only be done so if it is non-essential
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Radio group
|
||||
## Radio group
|
||||
|
||||
Radio groups are tab like controls. Their blue border gives extra emphasis to what is selected.
|
||||
|
||||
@ -363,32 +401,3 @@ Radio groups are tab like controls. Their blue border gives extra emphasis to wh
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Input group
|
||||
|
||||
Attached an input and button to one another.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" placeholder="Username" aria-label="Username">
|
||||
<span class="input-group-button">
|
||||
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||
<!-- <%= octicon "clippy" %> -->
|
||||
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Form actions
|
||||
|
||||
Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.
|
||||
|
||||
```html live
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn">Cancel</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Header
|
||||
path: components/header
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/header'
|
||||
source: 'https://github.com/primer/css/tree/main/src/header'
|
||||
bundle: header
|
||||
---
|
||||
|
||||
|
||||
@ -3,63 +3,74 @@ title: Labels
|
||||
path: components/labels
|
||||
status_issue: 'https://github.com/github/design-systems/issues/332'
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/labels'
|
||||
source: 'https://github.com/primer/css/tree/main/src/labels'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
|
||||
|
||||
## Labels
|
||||
|
||||
The base label component styles the text, adds padding and rounded corners, and an inset box shadow. Labels come in various themes which apply colors and different border styles.
|
||||
The base label component styles the text, adds padding and rounded corners, and a border. Labels come in various themes which apply different colors.
|
||||
|
||||
GitHub also programmatically generates and applies a background color for labels on items such as issues and pull requests. Users are able to select any background color and the text color will adjust to work with light and dark background colors.
|
||||
|
||||
The base `Label` style does not apply a background color. Here's an example using the `bg-blue` utility to apply a blue background:
|
||||
The base `Label` style does not apply a background color and only uses the default border:
|
||||
|
||||
```html live title="Label"
|
||||
<span title="Label: default label" class="Label bg-blue">default label</span>
|
||||
```html live
|
||||
<span class="Label">design</span>
|
||||
```
|
||||
|
||||
**Note:** Be sure to include a title attribute on labels, as it's helpful for people using screen-readers to differentiate a label from other text. For example, without the title attribute, the following case would read as _"New select component design"_, rather than identifying `design` as a label.
|
||||
### Label contrast
|
||||
|
||||
```html live title="Label without title"
|
||||
<!-- Don't do this -->
|
||||
<a href="#url">New select component</a><span class="Label bg-blue ml-1">design</span>
|
||||
Use `Label--primary` to create a label with a stronger border. This label is also neutral in color, however, since its border is stronger it can stand out more compared to the default `Label`.
|
||||
|
||||
Use `Label--secondary` to create a label with a subtler text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
|
||||
|
||||
```html live
|
||||
<span class="Label">Default</span>
|
||||
<span class="Label Label--primary ml-1">Primary</span>
|
||||
<span class="Label Label--secondary ml-1">Secondary</span>
|
||||
```
|
||||
|
||||
### Label themes
|
||||
### Colored labels
|
||||
|
||||
Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently.
|
||||
Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.
|
||||
|
||||
Use `Label--gray` to create a label with a light gray background and gray text. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or when you want a label to feel less prominent compared with labels with stronger colors.
|
||||
- `Label--info`
|
||||
- `Label--success`
|
||||
- `Label--warning`
|
||||
- `Label--danger`
|
||||
|
||||
```html live title="Label theme gray"
|
||||
<span title="Label: gray label" class="Label Label--gray">gray label</span>
|
||||
```html live
|
||||
<span class="Label mr-1 Label--info">Info</span>
|
||||
<span class="Label mr-1 Label--success">Success</span>
|
||||
<span class="Label mr-1 Label--warning">Warning</span>
|
||||
<span class="Label mr-1 Label--danger">Danger</span>
|
||||
```
|
||||
|
||||
Use `Label--gray-darker` to create a label with a dark-gray background color. This label is also neutral in color, however, since its background is darker, it can stand out more compared to `Label--gray`.
|
||||
### Label sizes
|
||||
|
||||
```html live title="Label theme dark gray"
|
||||
<span title="Label: dark gray label" class="Label Label--gray-darker">dark gray label</span>
|
||||
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
|
||||
|
||||
```html live
|
||||
<span class="Label Label--gray-darker mr-1">Default</span>
|
||||
<span class="Label Label--large Label--gray-darker mr-1">Large</span>
|
||||
```
|
||||
|
||||
Use `Label--orange` to communicate "warning". The orange background color is very close to red, so avoid using next to labels with a red background color since most people will find it hard to tell the difference.
|
||||
### Inline labels
|
||||
|
||||
```html live title="Label theme orange"
|
||||
<span title="Label: orange label" class="Label Label--orange">orange label</span>
|
||||
```
|
||||
Sometimes when adding a label the line-height can be incrased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.
|
||||
|
||||
Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message.
|
||||
|
||||
```html live title="Label outline"
|
||||
<span title="Label: outline label" class="Label Label--outline">outlined label</span>
|
||||
```
|
||||
|
||||
Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message.
|
||||
|
||||
```html live title="Label outline green"
|
||||
<span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
|
||||
```html live
|
||||
<p class="col-4">
|
||||
Lorem Ipsum is simply <span class="Label Label--inline">dummy text</span> of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text.
|
||||
</p>
|
||||
```
|
||||
|
||||
## Issue labels
|
||||
@ -67,63 +78,65 @@ Use `Label--outline-green` in combination with `Label--outline` to communicate a
|
||||
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-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-blue text-white mr-1">Primer</span>
|
||||
<span class="IssueLabel bg-red text-white mr-1">bug 🐛</span>
|
||||
<span class="IssueLabel bg-pink text-white mr-1">help wanted</span>
|
||||
<span class="IssueLabel bg-yellow text-gray-dark mr-1">🚂 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-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-blue text-white mr-1">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-red text-white mr-1">bug 🐛</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-pink text-white mr-1">help wanted</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-yellow text-gray-dark mr-1">🚂 deploy: train</span>
|
||||
```
|
||||
|
||||
|
||||
## States
|
||||
|
||||
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
|
||||
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
|
||||
```html live title="State"
|
||||
<span class="State">Default</span>
|
||||
```
|
||||
|
||||
### State themes
|
||||
|
||||
States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
- `State`
|
||||
- `State State--draft`
|
||||
- `State State--open`
|
||||
- `State State--merged`
|
||||
- `State State--closed`
|
||||
|
||||
```html live
|
||||
<span title="Status: open" class="State State--green mr-2">
|
||||
<span class="State State--draft mr-2">Draft</span>
|
||||
|
||||
<span class="State State--open mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.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.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 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.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.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"></path></svg>
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span title="Status: closed" class="State State--red mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.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.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 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.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.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"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
<span title="Status: merged" class="State State--purple">
|
||||
|
||||
<span class="State State--merged mr-2">
|
||||
<!-- <%= octicon "git-merge" %> -->
|
||||
<svg class="octicon octicon-git-merge" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7c-.73 0-1.38.41-1.73 1.02V8C7.22 7.98 6 7.64 5.14 6.98c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 .99C.89.99 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 2a1.993 1.993 0 0 0 1-3.72V7.67c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 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.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.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.2zm8 6c-.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"></path></svg>
|
||||
<svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>
|
||||
Merged
|
||||
</span>
|
||||
```
|
||||
|
||||
**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content.
|
||||
<span class="State State--closed mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Small states
|
||||
|
||||
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
|
||||
|
||||
```html live
|
||||
<span title="Status: open" class="State State--green State--small mr-2">
|
||||
<span class="State State--small mr-2">Default</span>
|
||||
<span class="State State--small State--open mr-2">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span title="Status: closed" class="State State--red State--small">
|
||||
<span class="State State--small State--closed mr-2">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
@ -132,47 +145,44 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
|
||||
|
||||
## Counters
|
||||
|
||||
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, its visibility will be hidden.
|
||||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations:
|
||||
|
||||
```html live title="Counter"
|
||||
<span class="Counter">16</span>
|
||||
<span class="Counter Counter--gray">32</span>
|
||||
<span class="Counter Counter--gray-light">64</span>
|
||||
1. the default `Counter`,
|
||||
2. the `Counter--primary` with a stronger background color
|
||||
3. and `Counter--secondary` with a more subtler text color.
|
||||
|
||||
Note: When a counter is empty, its visibility will be hidden.
|
||||
|
||||
```html live
|
||||
<span class="Counter mr-1">1</span>
|
||||
<span class="Counter mr-1 Counter--primary">23</span>
|
||||
<span class="Counter mr-1 Counter--secondary">456</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](./navigation).
|
||||
|
||||
```html live title="Counter in tabs"
|
||||
```html live
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</span></a>
|
||||
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](./box).
|
||||
You can also have icons and emoji in counters. Or use utilities for counters with different background colors.
|
||||
|
||||
```html live title="Counter in Box headers"
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
<span class="Counter Counter--gray">3</span>
|
||||
</h3>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row three
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```html live
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<span class="Counter mr-1">
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 bg-green text-white">22</span>
|
||||
<span class="Counter mr-1 bg-red text-white">22</span>
|
||||
<span class="Counter mr-1 bg-purple text-white">22</span>
|
||||
```
|
||||
|
||||
## Diffstat
|
||||
|
||||
52
docs/content/components/links.md
Normal file
52
docs/content/components/links.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Links
|
||||
path: components/links
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/main/src/links'
|
||||
bundle: links
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
By default `<a>` elements already use the right link color and apply an underline on hover.
|
||||
|
||||
```html live
|
||||
Some text with a default <a href="#url">link</a>
|
||||
```
|
||||
|
||||
If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.Link` class.
|
||||
|
||||
```html live
|
||||
Some text with a <span class="Link">span that behaves like a link</span>
|
||||
```
|
||||
|
||||
If you like to override the default link styles you can do so with the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
|
||||
|
||||
Use `.Link--primary` to turn the link color to blue only on hover.
|
||||
|
||||
```html live
|
||||
<p class="color-text-secondary">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
|
||||
```
|
||||
|
||||
Use `.Link--secondary` for a more subtle link color that turns blue on hover.
|
||||
|
||||
```html live
|
||||
Some text with a <a class="Link--secondary" href="#url">Link--secondary</a>
|
||||
```
|
||||
|
||||
Use `.Link--muted` also removes the underline on hover. Tip: You can also use the `.no-underline` utility to do the same for `.Link--primary`.
|
||||
|
||||
```html live
|
||||
<p>Some text with a <a class="Link--secondary no-underline" href="#url">Link--muted</a></p>
|
||||
<p>Some text with a <a class="Link--primary no-underline" href="#url">Link--primary no-underline</a></p>
|
||||
```
|
||||
|
||||
Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
|
||||
|
||||
```html live
|
||||
<a class="color-text-secondary no-underline" href="#url">
|
||||
A link with a partial <span class="Link--onHover">Link--onHover</span>
|
||||
</a>
|
||||
```
|
||||
@ -2,7 +2,7 @@
|
||||
title: Loaders
|
||||
path: components/loaders
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/loaders'
|
||||
source: 'https://github.com/primer/css/tree/main/src/loaders'
|
||||
bundle: loaders
|
||||
---
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Markdown
|
||||
path: components/markdown
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/markdown'
|
||||
source: 'https://github.com/primer/css/tree/main/src/markdown'
|
||||
bundle: markdown
|
||||
---
|
||||
|
||||
|
||||
@ -2,24 +2,24 @@
|
||||
title: Marketing Buttons
|
||||
path: components/marketing-buttons
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/marketing/buttons'
|
||||
source: 'https://github.com/primer/css/tree/main/src/marketing/buttons'
|
||||
bundle: marketing-buttons
|
||||
---
|
||||
|
||||
Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
|
||||
|
||||
## Colors and outlined
|
||||
## Colors, outlined and transparent
|
||||
|
||||
Marketing buttons can be solid blue, outlined blue, solid green, or transparent.
|
||||
|
||||
The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
|
||||
|
||||
```html live
|
||||
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||
<div class="bg-gray-dark">
|
||||
<button class="btn-mktg btn-transparent m-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg mr-3" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-3" type="button">Sign up</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-3" type="button">Learn more</button>
|
||||
<div class="mt-3 p-3" style="background-color: var(--color-scale-gray-9);">
|
||||
<button class="btn-mktg btn-transparent" type="button">Learn more</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -29,9 +29,10 @@ Available in two sizes, marketing buttons have a default size and a large size.
|
||||
|
||||
```html live
|
||||
<button class="btn-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
|
||||
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
|
||||
<hr>
|
||||
<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
|
||||
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Navigation
|
||||
path: components/navigation
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/navigation'
|
||||
source: 'https://github.com/primer/css/tree/main/src/navigation'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
@ -119,7 +119,7 @@ Use `.UnderlineNav-actions` to place another element, such as a button, to the o
|
||||
<a class="UnderlineNav-item" href="#url">Item 4</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn">Button</a>
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
@ -142,7 +142,7 @@ Use `.UnderlineNav--right` to right align the navigation.
|
||||
```html live title="UnderlineNav--right with actions"
|
||||
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn">Button</a>
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
|
||||
@ -161,23 +161,23 @@ Use `.UnderlineNav--right` to right align the navigation.
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 1</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 2</span>
|
||||
<span class="Counter">10</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 3</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", :class = "UnderlineNav-octicon" %> -->
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 4</span>
|
||||
</a>
|
||||
@ -197,7 +197,7 @@ Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNa
|
||||
<a class="UnderlineNav-item" href="#url">Item 4</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn">Button</a>
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -237,20 +237,8 @@ Different kind of content can be added inside a Side Nav item. Use utility class
|
||||
With an avatar
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "octoface", class: "mr-2" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-octoface mr-2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
|
||||
<svg class="SideNav-icon octicon octicon-octoface" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
|
||||
With an icon
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
@ -268,10 +256,10 @@ Different kind of content can be added inside a Side Nav item. Use utility class
|
||||
</svg>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a label <span class="Label bg-blue" title="Label: label">label</span>
|
||||
With a label <span class="Label bg-blue">label</span>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
|
||||
With a counter <span class="Counter ml-1">16</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<h5>With a heading</h5>
|
||||
@ -299,38 +287,23 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t
|
||||
```html live
|
||||
<nav class="SideNav border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "person", class: "mr-2" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-person mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "person", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-person SideNav-icon" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true"> <path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z" /> </svg>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "octoface", class: "mr-2" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-octoface mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-octoface SideNav-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<nav class="SideNav bg-white border-top py-3 pl-6">
|
||||
<nav class="SideNav bg-white border-top py-3" style="padding-left: 44px">
|
||||
<a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
|
||||
<a class="SideNav-subItem" href="#url">Sub item 2</a>
|
||||
<a class="SideNav-subItem" href="#url">Sub item 3</a>
|
||||
</nav>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "mail", class: "mr-2" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-mail mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "mail", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-mail SideNav-icon" width="14" height="16" viewBox="0 0 14 16" aria-hidden="true"> <path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z" /> </svg>
|
||||
<span>Emails</span>
|
||||
</a>
|
||||
</nav>
|
||||
@ -349,6 +322,42 @@ When you need to toggle between different views, consider using a tabnav. It'll
|
||||
</div>
|
||||
```
|
||||
|
||||
Tabs can also contain icons and counters.
|
||||
|
||||
```html live
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "comment-discussion" %> -->
|
||||
<svg class="octicon octicon-comment-discussion" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.75C1.5 2.6837 1.52634 2.62011 1.57322 2.57322C1.62011 2.52634 1.6837 2.5 1.75 2.5H10.25C10.3163 2.5 10.3799 2.52634 10.4268 2.57322C10.4737 2.62011 10.5 2.6837 10.5 2.75V8.25C10.5 8.3163 10.4737 8.37989 10.4268 8.42678C10.3799 8.47366 10.3163 8.5 10.25 8.5H6.75C6.55115 8.50017 6.36052 8.57931 6.22 8.72L3.5 11.44V9.25C3.5 9.05109 3.42098 8.86032 3.28033 8.71967C3.13968 8.57902 2.94891 8.5 2.75 8.5H1.75C1.6837 8.5 1.62011 8.47366 1.57322 8.42678C1.52634 8.37989 1.5 8.3163 1.5 8.25V2.75ZM1.75 1C1.28587 1 0.840752 1.18437 0.512563 1.51256C0.184374 1.84075 0 2.28587 0 2.75L0 8.25C0 9.216 0.784 10 1.75 10H2V11.543C2.0001 11.8311 2.08561 12.1127 2.24571 12.3522C2.40581 12.5917 2.63333 12.7784 2.8995 12.8886C3.16567 12.9988 3.45854 13.0277 3.74111 12.9715C4.02367 12.9153 4.28324 12.7767 4.487 12.573L7.061 10H10.25C10.7141 10 11.1592 9.81563 11.4874 9.48744C11.8156 9.15925 12 8.71413 12 8.25V2.75C12 2.28587 11.8156 1.84075 11.4874 1.51256C11.1592 1.18437 10.7141 1 10.25 1H1.75ZM14.5 4.75C14.5 4.6837 14.4737 4.62011 14.4268 4.57322C14.3799 4.52634 14.3163 4.5 14.25 4.5H13.75C13.5511 4.5 13.3603 4.42098 13.2197 4.28033C13.079 4.13968 13 3.94891 13 3.75C13 3.55109 13.079 3.36032 13.2197 3.21967C13.3603 3.07902 13.5511 3 13.75 3H14.25C15.216 3 16 3.784 16 4.75V10.25C16 10.7141 15.8156 11.1592 15.4874 11.4874C15.1592 11.8156 14.7141 12 14.25 12H14V13.543C13.9999 13.8311 13.9144 14.1127 13.7543 14.3522C13.5942 14.5917 13.3667 14.7784 13.1005 14.8886C12.8343 14.9988 12.5415 15.0277 12.2589 14.9715C11.9763 14.9153 11.7168 14.7767 11.513 14.573L9.22 12.28C9.14631 12.2113 9.08721 12.1285 9.04622 12.0365C9.00523 11.9445 8.98318 11.8452 8.98141 11.7445C8.97963 11.6438 8.99816 11.5438 9.03588 11.4504C9.0736 11.357 9.12974 11.2722 9.20096 11.201C9.27218 11.1297 9.35701 11.0736 9.4504 11.0359C9.54379 10.9982 9.64382 10.9796 9.74452 10.9814C9.84523 10.9832 9.94454 11.0052 10.0365 11.0462C10.1285 11.0872 10.2113 11.1463 10.28 11.22L12.5 13.44V11.25C12.5 11.0511 12.579 10.8603 12.7197 10.7197C12.8603 10.579 13.0511 10.5 13.25 10.5H14.25C14.3163 10.5 14.3799 10.4737 14.4268 10.4268C14.4737 10.3799 14.5 10.3163 14.5 10.25V4.75Z"></path></svg>
|
||||
<span>Conversation</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "git-commit" %> -->
|
||||
<svg class="octicon octicon-git-commit" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 7.75C10.5 8.41305 10.2366 9.04893 9.76777 9.51777C9.29893 9.98661 8.66304 10.25 8 10.25C7.33696 10.25 6.70107 9.98661 6.23223 9.51777C5.76339 9.04893 5.5 8.41305 5.5 7.75C5.5 7.08696 5.76339 6.45108 6.23223 5.98224C6.70107 5.5134 7.33696 5.25 8 5.25C8.66304 5.25 9.29893 5.5134 9.76777 5.98224C10.2366 6.45108 10.5 7.08696 10.5 7.75ZM11.93 8.5C11.7554 9.41441 11.2674 10.2393 10.5501 10.8327C9.83272 11.426 8.93093 11.7506 8 11.7506C7.06907 11.7506 6.16728 11.426 5.44994 10.8327C4.73259 10.2393 4.2446 9.41441 4.07 8.5H0.75C0.551088 8.5 0.360322 8.42099 0.21967 8.28033C0.0790176 8.13968 0 7.94892 0 7.75C0 7.55109 0.0790176 7.36033 0.21967 7.21967C0.360322 7.07902 0.551088 7 0.75 7H4.07C4.2446 6.0856 4.73259 5.26069 5.44994 4.66736C6.16728 4.07403 7.06907 3.7494 8 3.7494C8.93093 3.7494 9.83272 4.07403 10.5501 4.66736C11.2674 5.26069 11.7554 6.0856 11.93 7H15.25C15.4489 7 15.6397 7.07902 15.7803 7.21967C15.921 7.36033 16 7.55109 16 7.75C16 7.94892 15.921 8.13968 15.7803 8.28033C15.6397 8.42099 15.4489 8.5 15.25 8.5H11.93Z"></path></svg>
|
||||
<span>Commits</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "checklist" %> -->
|
||||
<svg class="octicon octicon-checklist" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 1.75C2.5 1.61193 2.61193 1.5 2.75 1.5H11.25C11.3881 1.5 11.5 1.61193 11.5 1.75V9.48645C11.5 9.90067 11.8358 10.2365 12.25 10.2365C12.6642 10.2365 13 9.90067 13 9.48645V1.75C13 0.783502 12.2165 0 11.25 0H2.75C1.7835 0 1 0.783502 1 1.75V13.25C1 14.2165 1.7835 15 2.75 15H5.92083C6.33504 15 6.67083 14.6642 6.67083 14.25C6.67083 13.8358 6.33504 13.5 5.92083 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25V1.75ZM4.75 4C4.33579 4 4 4.33579 4 4.75C4 5.16421 4.33579 5.5 4.75 5.5H9.25C9.66421 5.5 10 5.16421 10 4.75C10 4.33579 9.66421 4 9.25 4H4.75ZM4 7.75C4 7.33579 4.33579 7 4.75 7H6.75C7.16421 7 7.5 7.33579 7.5 7.75C7.5 8.16421 7.16421 8.5 6.75 8.5H4.75C4.33579 8.5 4 8.16421 4 7.75ZM15.774 11.2866C16.0703 10.9972 16.076 10.5223 15.7866 10.226C15.4972 9.92965 15.0223 9.92402 14.726 10.2134L10.7003 14.1447L9.28127 12.7206C8.98889 12.4272 8.51402 12.4264 8.22061 12.7187C7.9272 13.0111 7.92636 13.486 8.21873 13.7794L10.1618 15.7294C10.4521 16.0207 10.9229 16.0239 11.2171 15.7366L15.774 11.2866Z"></path></svg>
|
||||
<span>Checks</span>
|
||||
<span class="Counter">27</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "diff" %> -->
|
||||
<svg class="octicon octicon-diff" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 1.5C2.61193 1.5 2.5 1.61193 2.5 1.75V14.25C2.5 14.3881 2.61193 14.5 2.75 14.5H13.25C13.3881 14.5 13.5 14.3881 13.5 14.25V4.66421C13.5 4.59791 13.4737 4.53432 13.4268 4.48744L10.5126 1.57322C10.4657 1.52634 10.4021 1.5 10.3358 1.5H2.75ZM1 1.75C1 0.783502 1.7835 0 2.75 0H10.3358C10.7999 0 11.245 0.184374 11.5732 0.512563L14.4874 3.42678C14.8156 3.75497 15 4.20008 15 4.66421V14.25C15 15.2165 14.2165 16 13.25 16H2.75C1.7835 16 1 15.2165 1 14.25V1.75ZM8 3.25C8.41421 3.25 8.75 3.58579 8.75 4V5.5H10.25C10.6642 5.5 11 5.83579 11 6.25C11 6.66421 10.6642 7 10.25 7H8.75V8.5C8.75 8.91421 8.41421 9.25 8 9.25C7.58579 9.25 7.25 8.91421 7.25 8.5V7H5.75C5.33579 7 5 6.66421 5 6.25C5 5.83579 5.33579 5.5 5.75 5.5H7.25V4C7.25 3.58579 7.58579 3.25 8 3.25ZM5 11.25C5 10.8358 5.33579 10.5 5.75 10.5H10.25C10.6642 10.5 11 10.8358 11 11.25C11 11.6642 10.6642 12 10.25 12H5.75C5.33579 12 5 11.6642 5 11.25Z"></path></svg>
|
||||
<span>Files changed</span>
|
||||
<span class="Counter">6</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.float-right` to align additional elements in the `.tabnav`:
|
||||
|
||||
```html live title="tabnav with buttons"
|
||||
@ -395,13 +404,13 @@ A vertical list of filters. Grey text on white background. Selecting a filter fr
|
||||
<li>
|
||||
<a class="filter-item" href="#url" aria-current="page">
|
||||
First filter
|
||||
<span class="count" title="results">21</span>
|
||||
<span class="count">21</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="filter-item" href="#url">
|
||||
Second filter
|
||||
<span class="count" title="results">3</span>
|
||||
<span class="count">3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -435,19 +444,8 @@ You can have `subnav-search` in the subnav bar.
|
||||
</nav>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-search subnav-search-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 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 0 0 0-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"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 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 0 0 0-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" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -461,54 +459,18 @@ 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 select-menu js-menu-container js-select-menu subnav-search-context">
|
||||
<button
|
||||
type="button"
|
||||
name="button"
|
||||
class="btn select-menu-button js-menu-target"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
</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>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder js-menu-content js-navigation-container" aria-hidden="true">
|
||||
<div class="select-menu-modal">
|
||||
<div class="select-menu-list">
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 1
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 2
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 3
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-search subnav-search-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 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 0 0 0-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"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 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 0 0 0-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" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Pagination
|
||||
path: components/pagination
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/pagination'
|
||||
source: 'https://github.com/primer/css/tree/main/src/pagination'
|
||||
bundle: pagination
|
||||
---
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Popover
|
||||
path: components/popover
|
||||
status: Experimental
|
||||
source: 'https://github.com/primer/css/tree/master/src/popover'
|
||||
source: 'https://github.com/primer/css/tree/main/src/popover'
|
||||
bundle: popover
|
||||
---
|
||||
|
||||
@ -51,7 +51,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<div class="Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large">
|
||||
<div class="Popover-message text-left p-4 mt-2 mx-auto Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -66,7 +66,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -80,7 +80,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Bottom"
|
||||
<div class="position-relative text-center">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -95,7 +95,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Bottom-right"
|
||||
<div class="position-relative text-right pr-2">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -109,7 +109,7 @@ Defaults to caret oriented top-center.
|
||||
|
||||
```html live title="Bottom-left"
|
||||
<div class="Popover position-relative pl-2">
|
||||
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -124,7 +124,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="d-flex flex-justify-center flex-items-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--left p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -139,7 +139,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="d-flex flex-justify-center flex-items-end">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -154,7 +154,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="d-flex flex-justify-center flex-items-start">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--left-top p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -168,7 +168,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Right"
|
||||
<div class="d-flex flex-justify-center flex-items-center">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -183,7 +183,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Right-bottom"
|
||||
<div class="d-flex flex-justify-center flex-items-end">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -198,7 +198,7 @@ Defaults to caret oriented top-center.
|
||||
```html live title="Right-top"
|
||||
<div class="d-flex flex-justify-center flex-items-start">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -214,7 +214,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="position-relative pl-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
@ -229,7 +229,7 @@ Defaults to caret oriented top-center.
|
||||
<div class="position-relative text-right pr-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 position-relative">
|
||||
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large">
|
||||
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
title: Progress
|
||||
path: components/progress
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/progress'
|
||||
source: 'https://github.com/primer/css/tree/main/src/progress'
|
||||
bundle: progress
|
||||
---
|
||||
|
||||
Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
|
||||
Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children (`Progress-item`) should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
|
||||
|
||||
```html live
|
||||
<span class="Progress">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -20,7 +20,7 @@ Large progress bars are slightly taller than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--large">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -30,7 +30,7 @@ Small progress bars are shorter than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--small">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -41,7 +41,7 @@ For inline progress indicators, use the `Progress` and `d-inline-flex` with an i
|
||||
```html live
|
||||
<span class="text-small text-gray mr-2">4 of 16</span>
|
||||
<span class="Progress d-inline-flex" style="width: 160px">
|
||||
<div class="bg-green" style="width: 25%"></div>
|
||||
<div class="Progress-item color-bg-success-inverse" style="width: 25%"></div>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -52,7 +52,7 @@ In cases where it's not possible to describe the progress in text, provide an `a
|
||||
```html live
|
||||
<div aria-label="tasks: 8 of 10 complete">
|
||||
<span class="Progress">
|
||||
<span class="bg-green" style="width: 80%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 80%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
@ -64,11 +64,10 @@ To show the progress of tasks in multiple states (such as "done", "in progress",
|
||||
```html live
|
||||
<div class="tooltipped tooltipped-n" aria-label="tasks: 80 done, 14 in progress, 6 open">
|
||||
<span class="Progress">
|
||||
<span class="Progress-item bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item bg-purple" style="width: 25%;"></span>
|
||||
<span class="Progress-item bg-pink" style="width: 15%;"></span>
|
||||
<span class="Progress-item bg-red" style="width: 8%;"></span>
|
||||
<span class="Progress-item bg-blue" style="width: 2%;"></span>
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-warning-inverse" style="width: 25%;"></span>
|
||||
<span class="Progress-item color-bg-danger-inverse" style="width: 15%;"></span>
|
||||
<span class="Progress-item color-bg-info-inverse" style="width: 10%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Select menu (deprecated)
|
||||
path: components/select-menu
|
||||
status: Deprecated
|
||||
source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/select-menu.scss'
|
||||
source: 'https://github.com/github/github/blob/main/app/assets/stylesheets/components/select-menu.scss'
|
||||
symbols: [active, close-button, css-truncate-target, description, description-inline, description-warning, disabled, filterable-empty, has-error, hidden-select-button-text, icon-only, indeterminate, is-loading, is-showing-new-item-form, label-select-menu, last-visible, menu-active, modal-backdrop, navigation-focus, octicon, octicon-check, octicon-dash, octicon-octoface, octicon-x, opaque, primary, select-menu, select-menu-action, select-menu-blankslate, select-menu-button, select-menu-button-gravatar, select-menu-button-large, select-menu-clear-item, select-menu-divider, select-menu-error, select-menu-filters, select-menu-header, select-menu-item, select-menu-item-gravatar, select-menu-item-heading, select-menu-item-icon, select-menu-item-parent, select-menu-item-template, select-menu-item-text, select-menu-list, select-menu-loading-overlay, select-menu-modal, select-menu-modal-holder, select-menu-modal-narrow, select-menu-modal-right, select-menu-new-item-form, select-menu-no-results, select-menu-tab, select-menu-tab-bucket, select-menu-tab-nav, select-menu-tabs, select-menu-text-filter, select-menu-title, selected, spinner]
|
||||
---
|
||||
|
||||
@ -761,7 +761,7 @@ Open the select menu below and click different options to see it in action.
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="js-select-button">master</span>
|
||||
<span class="js-select-button">main</span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
@ -772,7 +772,7 @@ Open the select menu below and click different options to see it in action.
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">master</span>
|
||||
<span class="select-menu-item-text js-select-button-text">main</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
@ -798,7 +798,7 @@ As shown below, emphasized text works great with the stateful text functionality
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<i>Branch:</i>
|
||||
<span class="js-select-button">master</span>
|
||||
<span class="js-select-button">main</span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
@ -809,7 +809,7 @@ As shown below, emphasized text works great with the stateful text functionality
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">master</span>
|
||||
<span class="select-menu-item-text js-select-button-text">main</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Select menu
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/select-menu'
|
||||
source: 'https://github.com/primer/css/tree/main/src/select-menu'
|
||||
bundle: select-menu
|
||||
---
|
||||
|
||||
@ -18,18 +18,6 @@ Use a `<details>` element to toggle the select menu. The `<summary>` element can
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
@ -40,7 +28,7 @@ Use a `<details>` element to toggle the select menu. The `<summary>` element can
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"><!-- min height for > sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 120px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
Add a `.SelectMenu-header` to house a clear title and a close button. Note that the close button is only shown on narrow screens (mobile).
|
||||
@ -57,18 +45,6 @@ In case the select menu should be aligned to the right, use `SelectMenu right-0`
|
||||
</summary>
|
||||
<div class="SelectMenu right-0">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
@ -94,42 +70,30 @@ If the `SelectMenu` should show a check icon for selected items, use the `Select
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
</div>
|
||||
@ -138,7 +102,62 @@ If the `SelectMenu` should show a check icon for selected items, use the `Select
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 250px"><!-- min height for > sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 200px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Borderless
|
||||
|
||||
Use the `.SelectMenu-list--borderless` modifier to remove the borders between list items. Note: It's better to keep the borders if a list contains items with multiple lines of text. It will make it easier to see where the items start and end.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<div class="SelectMenu-list SelectMenu-list--borderless">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 120px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Header
|
||||
|
||||
Add a `.SelectMenu-header` at the top to house a clear title and a close button.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## List items
|
||||
@ -155,13 +174,8 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!--%= octicon "x" %-->
|
||||
<svg version="1.1" 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>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
@ -196,9 +210,7 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="SelectMenu-item d-block" role="menuitem">
|
||||
With a <span class="Label bg-blue" title="Label: label">label</span>
|
||||
</button>
|
||||
<button class="SelectMenu-item d-block" role="menuitem">With a <span class="Label bg-blue">label</span></button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
|
||||
</button>
|
||||
@ -217,7 +229,7 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
|
||||
## Divider
|
||||
|
||||
The select menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`.
|
||||
The select menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`. It can be a `<div>` with text/content. Or just an `<hr>` to add a visual separator.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
@ -230,12 +242,7 @@ The select menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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 octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
@ -244,14 +251,50 @@ The select menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
<div class="SelectMenu-divider">More options</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 4</button>
|
||||
<hr class="SelectMenu-divider">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 260px"><!-- min height for > sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 300px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
Dividers are also supported when using the `.SelectMenu-list--borderless` modifier.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list SelectMenu-list--borderless">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<div class="SelectMenu-divider">More options</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 4</button>
|
||||
<hr class="SelectMenu-divider">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 300px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Footer
|
||||
@ -269,11 +312,7 @@ Use a `.SelectMenu-footer` at the bottom for additional information. As a side e
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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 octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
@ -306,8 +345,8 @@ If the list is expected to get long, consider adding a `.SelectMenu-filter` inpu
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
@ -364,12 +403,7 @@ Sometimes you need two or more lists of items in your select menu, e.g. branches
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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 octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
@ -415,18 +449,13 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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 octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-message bg-red-0 text-red">Message goes here</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<div class="SelectMenu-message bg-red-0 text-red p-2">Message goes here</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -446,23 +475,15 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu SelectMenu--hasFilter">
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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 octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter" />
|
||||
</form>
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-loading">
|
||||
<!-- <%= octicon "octoface", class: "anim-pulse", width: 32 %> -->
|
||||
@ -489,6 +510,31 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
<div class="d-none d-sm-block" style="height: 220px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Disabled
|
||||
|
||||
To disable a list item, use the `disabled` attribute for `<button>`s. For `<a>`s replace the `href` with an `aria-disabled="true"` attribute. Note: If not obvious, try to communicate to the user why an item is disabled.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem" disabled>Item 2 (disabled)</button>
|
||||
<a class="SelectMenu-item" role="menuitem" href="#">Item 3</a>
|
||||
<a class="SelectMenu-item" role="menuitem" aria-disabled="true">Item 4 (disabled)</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 160px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Blankslate
|
||||
|
||||
Sometimes a select menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
|
||||
@ -504,12 +550,7 @@ Sometimes a select menu needs to communicate a "blank slate" where there's no co
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" 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 octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
@ -536,11 +577,11 @@ 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">
|
||||
<summary class="btn" title="Pick an item">
|
||||
<summary class="btn">
|
||||
<span>Choose</span>
|
||||
<span class="dropdown-caret"></span>
|
||||
</summary>
|
||||
@ -574,4 +615,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.
|
||||
|
||||
@ -3,7 +3,7 @@ title: Subhead
|
||||
path: components/subhead
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/101'
|
||||
source: 'https://github.com/primer/css/tree/master/src/subhead'
|
||||
source: 'https://github.com/primer/css/tree/main/src/subhead'
|
||||
bundle: subhead
|
||||
---
|
||||
|
||||
@ -77,4 +77,3 @@ Use the `.Subhead-heading--danger` modifier to make the text bold and red. This
|
||||
<div class="Subhead-heading Subhead-heading--danger">Danger zone</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ The `TimelineItem` component is used to display items on a vertical timeline, co
|
||||
|
||||
## TimelineItem-badge
|
||||
|
||||
The default TimelineItem-badge color is dark text on a light grey background.
|
||||
The default TimelineItem-badge color is dark text on a light gray background.
|
||||
|
||||
```html live
|
||||
<!-- Default TimelineItem Badge -->
|
||||
|
||||
@ -156,7 +156,7 @@ Include a link to allow users to take actions within a Toast.
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here </strong><a href="#">Action.</a></span>
|
||||
<span class="Toast-content">Toast message goes here<a href="#">Action.</a></span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Tooltips
|
||||
path: components/tooltips
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/tooltips'
|
||||
source: 'https://github.com/primer/css/tree/main/src/tooltips'
|
||||
bundle: tooltips
|
||||
---
|
||||
|
||||
|
||||
@ -2,12 +2,11 @@
|
||||
title: Truncate
|
||||
path: components/truncate
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/truncate'
|
||||
source: 'https://github.com/primer/css/tree/main/src/truncate'
|
||||
bundle: truncate
|
||||
---
|
||||
|
||||
|
||||
The `css-truncate` class will shorten text with an ellipsis. Always add a `title` attribute to the truncated element so the full text remains accessible.
|
||||
The `css-truncate` class will shorten text with an ellipsis.
|
||||
|
||||
## Truncate overflow
|
||||
|
||||
@ -15,8 +14,7 @@ Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text t
|
||||
|
||||
```html live
|
||||
<div class="col-3">
|
||||
<div class="css-truncate css-truncate-overflow border p-3"
|
||||
title="branch-name-that-is-really-long">
|
||||
<div class="css-truncate css-truncate-overflow border p-3">
|
||||
branch-name-that-is-really-long
|
||||
</div>
|
||||
<div class="border p-3 mt-3">
|
||||
@ -31,8 +29,7 @@ Combine the `css-truncate` and `css-truncate-target` classes for inline (or inli
|
||||
|
||||
```html live
|
||||
Some text with a
|
||||
<strong class="css-truncate css-truncate-target"
|
||||
title="branch-name-that-is-really-long">
|
||||
<strong class="css-truncate css-truncate-target">
|
||||
branch-name-that-is-really-long
|
||||
</strong>
|
||||
```
|
||||
@ -41,8 +38,7 @@ You can override the maximum width of the truncated text with an inline `style`
|
||||
|
||||
```html live
|
||||
Some text with a
|
||||
<strong class="css-truncate css-truncate-target" style="max-width: 180px"
|
||||
title="branch-name-that-is-really-long">
|
||||
<strong class="css-truncate css-truncate-target" style="max-width: 180px">
|
||||
branch-name-that-is-really-long
|
||||
</strong>
|
||||
```
|
||||
@ -51,8 +47,7 @@ You can reveal the entire string on hover with the addition of `.expandable`.
|
||||
|
||||
```html live
|
||||
Some text with a
|
||||
<strong class="css-truncate css-truncate-target expandable"
|
||||
title="branch-name-that-is-really-long">
|
||||
<strong class="css-truncate css-truncate-target expandable">
|
||||
branch-name-that-is-really-long
|
||||
</strong>
|
||||
```
|
||||
|
||||
@ -18,7 +18,7 @@ Decisions to add new components are made on a case-by-case basis, with help from
|
||||
- If your design is difficult to compose with current styles, does this highlight problems with existing components (such as overly-specific components, or missing objects and utilities)?
|
||||
- Is this a totally new pattern or should it be an extension of an existing component?
|
||||
- How is this pattern being implemented currently - have you identified problems with it’s current implementation that can be improved with adding a new pattern?
|
||||
- Is the desire for this new pattern a side-effect of lacking documentation or mis-understandings of use with current styles?
|
||||
- Is the desire for this new pattern a side-effect of lacking documentation or misunderstanding of use with current styles?
|
||||
- Are there special factors that need to be considered as to why the this pattern needs it’s own styles? Such legal issues, usability issues, or branding and trademarks?
|
||||
- Is this something that would be better handled by other front-end code rather than CSS?
|
||||
- Every new addition of CSS means we ask our users to download a larger CSS file, and we increase the maintenance work of our CSS framework. Does the convenience of adding these new styles outweigh those costs?
|
||||
@ -147,7 +147,7 @@ See [the deprecation data docs](../tools/deprecations) for more information.
|
||||
---
|
||||
title: Alerts
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/alerts'
|
||||
source: 'https://github.com/primer/css/tree/main/src/alerts'
|
||||
---
|
||||
```
|
||||
|
||||
@ -166,6 +166,6 @@ Primer CSS follows [semantic versioning](http://semver.org/) conventions. This h
|
||||
To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so we recommend reviewing [semver](http://semver.org/) and/or asking the team by [opening an issue](#step-1-open-an-issue).
|
||||
|
||||
[semantic versioning]: https://semver.org
|
||||
[script/test-deprecations.js]: https://github.com/primer/css/tree/master/script/test-deprecations.js
|
||||
[deprecations.js]: https://github.com/primer/css/tree/master/deprecations.js
|
||||
[lib/stylelint-todo.js]: https://github.com/primer/css/tree/master/lib/stylelint-todo.js
|
||||
[script/test-deprecations.js]: https://github.com/primer/css/tree/main/script/test-deprecations.js
|
||||
[deprecations.js]: https://github.com/primer/css/tree/main/deprecations.js
|
||||
[lib/stylelint-todo.js]: https://github.com/primer/css/tree/main/lib/stylelint-todo.js
|
||||
|
||||
@ -100,5 +100,5 @@ Don't forget to add the compiled CSS to the `<head>` section of your page.
|
||||
You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from the [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML:
|
||||
|
||||
```html
|
||||
<link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
162
docs/content/getting-started/theming.md
Normal file
162
docs/content/getting-started/theming.md
Normal file
@ -0,0 +1,162 @@
|
||||
---
|
||||
title: Theming
|
||||
path: getting-started/theming
|
||||
---
|
||||
|
||||
Primer CSS offers multiple color themes for components and utilities. The colors change based on the active theme and color mode.
|
||||
|
||||
Currently there are 3 themes (`light`, `dark`, `dark_dimmed`) to choose from. When nothing is specified, Primer CSS uses the `light` theme.
|
||||
|
||||
## Set a theme
|
||||
|
||||
Configure Primer CSS to use a certain theme by adding the following attributes:
|
||||
|
||||
- `data-color-mode` with a value of either `light` or `dark`
|
||||
- either `data-light-theme` or `data-dark-theme` with a value of either `light`, `dark`, `dark_dimmed`
|
||||
|
||||
The attributes can be added to any element, but ideally it should be added to the document root (`<html>`). Below an example to use the `dark_dimmed` theme:
|
||||
|
||||
```html
|
||||
<html data-color-mode="dark" data-dark-theme="dark_dimmed">
|
||||
```
|
||||
|
||||
More examples:
|
||||
|
||||
```html live
|
||||
<div data-color-mode="light" data-light-theme="light" class="p-3">
|
||||
<h4>Light</h4>
|
||||
<code class="d-block mt-1 mb-3 color-text-secondary">
|
||||
data-color-mode="light" data-light-theme="light"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" class="p-3">
|
||||
<h4>Dark</h4>
|
||||
<code class="d-block mt-1 mb-3 color-text-secondary">
|
||||
data-color-mode="dark" data-dark-theme="dark"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<h4>Dark Dimmed</h4>
|
||||
<code class="d-block mt-1 mb-3 color-text-secondary">
|
||||
data-color-mode="dark" data-dark-theme="dark_dimmed"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Sync to the system
|
||||
|
||||
If the theme should be synced to the OS's color mode, use `data-color-mode="auto"` and set a `data-light-theme` as well as a `data-dark-theme`.
|
||||
|
||||
```html live
|
||||
<div data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<h4>Synced to system</h4>
|
||||
<code class="d-block mt-1 mb-3 color-text-secondary">
|
||||
data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
Change the color mode of your OS to see the switch between the `data-light-theme="light"` and `data-dark-theme="dark_dimmed"`.
|
||||
|
||||
## Custom color variables
|
||||
|
||||
It's recommended to use the [functional variables](/support/color-system#functional-variables) as much as possible. It will guarantee that the variables will work as expected with any new theme that might get added in the future. Somtimes you might still need a custom variable that changes based on the color mode. You can create a custom variable with the `color-variables` mixin.
|
||||
|
||||
```css
|
||||
@include color-variables(
|
||||
("custom-css-variable-1": (
|
||||
light: var(--color-scale-gray-3),
|
||||
dark: var(--color-scale-gray-5)
|
||||
),
|
||||
"custom-css-variable-2": (
|
||||
light: var(--color-scale-gray-2),
|
||||
dark: var(--color-scale-gray-6)
|
||||
),
|
||||
"custom-css-variable-3": (
|
||||
light: var(--color-scale-gray-2),
|
||||
dark: var(--color-scale-gray-6)
|
||||
)
|
||||
));
|
||||
```
|
||||
|
||||
The custom variables will be prefixed with `--color-` and can be used in the same way as other functional variables.
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
color: var(--color-custom-css-variable-1);
|
||||
background-color: var(--color-custom-css-variable-2);
|
||||
border-color: var(--color-custom-css-variable-2);
|
||||
}
|
||||
```
|
||||
|
||||
## Auto variables
|
||||
|
||||
If you tried using the [`scale` color variables](/support/color-system#color-variables) you might have noticed that they are not that useful with multiple color modes. That's because they stay light or dark in any color mode. As seen above, you could create custom variables that invert the scale like so:
|
||||
|
||||
```css
|
||||
@include color-variables(
|
||||
("custom-css-variable": (
|
||||
light: var(--color-scale-gray-7),
|
||||
dark: var(--color-scale-gray-2)
|
||||
)
|
||||
));
|
||||
|
||||
.my-class {
|
||||
color: var(--color-custom-css-variable);
|
||||
}
|
||||
```
|
||||
|
||||
In this case, the `auto` variables might come in handy.
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
color: var(--color-auto-gray-7);
|
||||
}
|
||||
```
|
||||
|
||||
The benefit of `auto` over the `scale` variables is that `auto` variables automatically get inverted in dark mode.
|
||||
|
||||
```html live
|
||||
<div data-color-mode="light" data-light-theme="light" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
|
||||
<style>code { margin-right: 16px; }</style>
|
||||
```
|
||||
|
||||
In general, use `auto` variables if the results give enough constrast or create custom variables for further fine tuning.
|
||||
@ -3,7 +3,7 @@ title: Grid
|
||||
path: objects/grid
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/88'
|
||||
source: 'https://github.com/primer/css/tree/master/src/layout/grid.scss'
|
||||
source: 'https://github.com/primer/css/tree/main/src/layout/grid.scss'
|
||||
bundle: layout
|
||||
---
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Table object
|
||||
title: Table object (deprecated)
|
||||
path: objects/table-object
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/table-object'
|
||||
status: Deprecated
|
||||
source: 'https://github.com/primer/css/tree/main/src/table-object'
|
||||
bundle: table-object
|
||||
---
|
||||
|
||||
|
||||
@ -104,12 +104,6 @@ Make sure text-based alternative is always available when using icons, images, a
|
||||
<p>To find out more about GitHub Enterprise pricing, <a href="#url">click here</a>.</p>
|
||||
```
|
||||
|
||||
Use `title` to add information on top of existing content.
|
||||
|
||||
```html
|
||||
<a title="@octocat's repositories" href="https://github.com/octocat?tab=repositories">octocat</a>
|
||||
```
|
||||
|
||||
Use `aria-label` when there is no text.
|
||||
|
||||
```html
|
||||
|
||||
@ -93,7 +93,7 @@ Example:
|
||||
|
||||
## BEM-style naming and structure
|
||||
|
||||
Components and objects should follow the [Block Element Modifier](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) (BEM) model in terms of structure. We've chosen to use a modified form of BEM syntax using [Uppercase](https://en.wikipedia.org/wiki/Uppercase) for the block name, hyphens and lowercase or elements, and double-hyphens and lowercase for modifiers. When a Block class requires two words use [PascalCase](https://en.wikipedia.org/wiki/PascalCase), for example `ProgressBar`. When an Element or Modifier class requires two words use [camelCase](https://en.wikipedia.org/wiki/camelCase), for example `[Component]-closeButton` or `[Component]--extraLarge`.
|
||||
Components and objects should follow the [Block Element Modifier](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) (BEM) model in terms of structure. We've chosen to use a modified form of BEM syntax using [uppercase](https://en.wikipedia.org/wiki/Uppercase) for the block name, hyphens and lowercase for elements, and double-hyphens and lowercase for modifiers. When a block class requires two words use [Pascal case](https://en.wikipedia.org/wiki/PascalCase), for example `ProgressBar`. When an element or modifier class requires two words use [camel case](https://en.wikipedia.org/wiki/camelCase), for example `[Component]-closeButton` or `[Component]--extraLarge`.
|
||||
|
||||
* **Block**: A block includes all of the base styles you want shared across every variation of a component. Minimal thematic styling should be applied to blocks, particularly when variations of a component include visual variations. Apply additional styles with modifers rather than overriding base styles.
|
||||
* **Element**: An element is part of a component. Elements should work together with other elements and can have modifiers. Element styles should not override block styles - this often results in applying more styles directly to elements rather than having styles flow down from the parent level.
|
||||
|
||||
216
docs/content/stickersheet/index.md
Normal file
216
docs/content/stickersheet/index.md
Normal file
@ -0,0 +1,216 @@
|
||||
---
|
||||
title: Sticker Sheet
|
||||
path: stickersheet/
|
||||
---
|
||||
|
||||
### Light/Dark
|
||||
|
||||
```html live
|
||||
|
||||
<div class="d-flex overflow-x-auto">
|
||||
<div class="flex-1 p-4 overflow-x-auto" data-color-mode="light">
|
||||
|
||||
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> Icon
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 Counter">1.5K</span> Counter
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2">Label</span>
|
||||
<span class="Label mr-2 Label--red" >Danger</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 IssueLabel bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-2 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<button class="mr-2 btn" type="button">Button</button>
|
||||
<button class="mr-2 btn btn-primary" type="button">Primary</button>
|
||||
<div class="my-2"></div>
|
||||
<button class="mr-2 btn btn-outline" type="button">Outline</button>
|
||||
<button class="mr-2 btn btn-danger" type="button">Danger</button>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<select class="form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<input class="form-control" type="text" placeholder="Input" />
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="flash">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div><!-- end light -->
|
||||
<div class="flex-1 p-4 overflow-x-auto" data-color-mode="dark"><!-- ------------------------ -->
|
||||
|
||||
|
||||
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> Icon
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 Counter">1.5K</span> Counter
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2">Label</span>
|
||||
<span class="Label mr-2 Label--red" >Danger</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 IssueLabel bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-2 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<button class="mr-2 btn" type="button">Button</button>
|
||||
<button class="mr-2 btn btn-primary" type="button">Primary</button>
|
||||
<div class="my-2"></div>
|
||||
<button class="mr-2 btn btn-outline" type="button">Outline</button>
|
||||
<button class="mr-2 btn btn-danger" type="button">Danger</button>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<select class="form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<input class="form-control" type="text" placeholder="Input" />
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="flash">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div><!-- end dark -->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Temporary overrides (don't use in production) -->
|
||||
<style> .frame-example { padding: 0 !important; } </style>
|
||||
<link href="https://unpkg.com/@github/details-dialog-element/dist/index.css" rel="stylesheet" />
|
||||
|
||||
```
|
||||
149
docs/content/stickersheet/labels.md
Normal file
149
docs/content/stickersheet/labels.md
Normal file
@ -0,0 +1,149 @@
|
||||
---
|
||||
title: Labels
|
||||
path: stickersheet/labels
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/labels'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
```html live
|
||||
<p class="mb-4 col-4">
|
||||
The base <span class="Label Label--inline"> label </span> component styles the text, adds <span class="Label Label--inline">padding</span> and rounded corners, and a border. Labels come in various themes which apply different colors.
|
||||
</p>
|
||||
|
||||
<div class="mb-4">Hello <span class="Label mr-1">world</span></div>
|
||||
|
||||
<div class="mb-2 f6">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f5">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f4">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f3">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f2">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f1">Hello <span class="Label mr-1">world</span></div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2 Label--gray">Gray</span>
|
||||
<span class="Label mr-2">Default</span>
|
||||
<span class="Label mr-2 Label--gray-darker">Dark gray</span>
|
||||
<span class="Label mr-2 Label--yellow">Pending</span>
|
||||
<span class="Label mr-2 Label--orange">Warning</span>
|
||||
<span class="Label mr-2 Label--red" >Error</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label Label--large mr-2 Label--gray">Gray</span>
|
||||
<span class="Label Label--large mr-2">Default</span>
|
||||
<span class="Label Label--large mr-2 Label--gray-darker">Dark gray</span>
|
||||
<span class="Label Label--large mr-2 Label--yellow">Pending</span>
|
||||
<span class="Label Label--large mr-2 Label--orange">Warning</span>
|
||||
<span class="Label Label--large mr-2 Label--red" >Error</span>
|
||||
<span class="Label Label--large mr-2 Label--green" >Success</span>
|
||||
<span class="Label Label--large mr-2 Label--blue" >Info</span>
|
||||
|
||||
<hr class="my-4"><!-- Divider ------------------------ -->
|
||||
|
||||
<span class="IssueLabel bg-blue text-white mr-2">Primer</span>
|
||||
<span class="IssueLabel mr-2" style="background-color: #e5bffc;">
|
||||
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
|
||||
</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-2">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big mr-2" style="background-color: #e5bffc;">
|
||||
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
|
||||
</span>
|
||||
```
|
||||
|
||||
### States
|
||||
|
||||
```html live
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State State--small mr-2">Default</span>
|
||||
<span class="State State--small State--green mr-2">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--small State--red mr-2">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Counters
|
||||
|
||||
```html live
|
||||
<span class="Counter mr-1">1</span>
|
||||
<span class="Counter mr-1 Counter--gray-light">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<span class="Counter mr-1">
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 bg-green text-white">22</span>
|
||||
<span class="Counter mr-1 bg-red text-white">22</span>
|
||||
<span class="Counter mr-1 bg-purple text-white">22</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Counter mr-1 Counter--gray-light">1</span>
|
||||
<span class="Counter mr-1">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<div class="my-2"></div>
|
||||
<span class="Counter Counter--small mr-1 Counter--gray-light">1</span>
|
||||
<span class="Counter Counter--small mr-1">23</span>
|
||||
<span class="Counter Counter--small mr-1 Counter--gray">456</span>
|
||||
<span class="Counter Counter--small mr-1">1.5K</span>
|
||||
```
|
||||
|
||||
### Diffstat
|
||||
|
||||
```html live
|
||||
<span class="diffstat tooltipped tooltipped-e" aria-label="6 changes: 3 additions & 3 deletions">
|
||||
6
|
||||
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
|
||||
</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="diffstat">
|
||||
<span class="text-green">+7</span>
|
||||
<span class="text-red">−2</span>
|
||||
<span class="tooltipped tooltipped-e" aria-label="9 lines changed">
|
||||
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
|
||||
</span>
|
||||
</span>
|
||||
```
|
||||
95
docs/content/stickersheet/sizes.md
Normal file
95
docs/content/stickersheet/sizes.md
Normal file
@ -0,0 +1,95 @@
|
||||
---
|
||||
title: Sticker Sheet
|
||||
path: stickersheet/sizes
|
||||
---
|
||||
|
||||
### Sizes
|
||||
|
||||
```html live
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">16px</span>
|
||||
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">20px</span>
|
||||
<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label">Label</span>
|
||||
<span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-3 Counter">1.5K</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">24px</span>
|
||||
<img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label Label--large">Label</span>
|
||||
<span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
|
||||
<span class="mr-3 State State--small">State</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">28px</span>
|
||||
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn btn-sm" type="button">Button</button>
|
||||
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">32px</span>
|
||||
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn" type="button">Button</button>
|
||||
<input class="mr-3 form-control" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
<nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
<span class="mr-3 State">State</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">40px</span>
|
||||
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
|
||||
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 4</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">48px</span>
|
||||
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
|
||||
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">64px</span>
|
||||
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
|
||||
<div class="mr-3 Header d-inline-block v-align-middle">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
@ -2,7 +2,7 @@
|
||||
title: Breakpoints
|
||||
path: support/breakpoints
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/master/src/support/variables/layout.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/support/variables/layout.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
@ -31,15 +31,15 @@ In most cases, breakpoints get used with the `min-width` media query. This means
|
||||
| Large | lg | from `1012px` upwards -> |
|
||||
| Extra-large | xl | from `1280px` upwards -> |
|
||||
|
||||
A responsive utility class stays enabled **unless** it gets overridden with another responsive utility class that has a higher breakpoint. Here the example from above `<div class="col-12 col-md-8 col-xl-4">...</div>` visualized:
|
||||
A responsive utility class stays enabled **unless** it gets overridden with another responsive utility class that has a higher breakpoint. Here the example from above `<div class="col-12 col-md-8 col-xl-4">...</div>` visualized:
|
||||
|
||||
```
|
||||
| 0px ->
|
||||
| 544px ->
|
||||
| 0px ->
|
||||
| 544px ->
|
||||
| sm
|
||||
| 768px ->
|
||||
| md
|
||||
| 1012px ->
|
||||
| 768px ->
|
||||
| md
|
||||
| 1012px ->
|
||||
| lg
|
||||
| 1280px ->
|
||||
| xl
|
||||
|
||||
@ -1,25 +1,88 @@
|
||||
---
|
||||
title: Color system
|
||||
description: 'Sass variables, mixins, and functions for use in our components.'
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/master/src/support/variables/color-system.scss'
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/blob/main/src/support/variables/color-system.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
import colors from 'primer-colors'
|
||||
import {Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
|
||||
import {Link as LinkIcon} from '@primer/octicons-react'
|
||||
import {palettes, variables} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
|
||||
import lightColors from '@primer/primitives/dist/js/colors/light'
|
||||
import {Flash, Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
|
||||
import {LinkIcon, OctofaceIcon} from '@primer/octicons-react'
|
||||
import {colorModes, palettes, functionalVarNames, flattened} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, ColorModeTable, CSSModeVars, overlayColor} from '../../src/color-system'
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
## Functional variables
|
||||
|
||||
The Primer color system contains multiple color modes; currently, Primer ships with a light mode and a dark mode. Each color mode comes with a set of CSS variables that can be used to style elements based on the functionality of the element. These should be used instead of specifying colors directly so that the colors adapt correctly when switching between color modes.
|
||||
|
||||
When at all possible, favor using [color utility classes](/utilities/colors) over using custom CSS to set colors. Because the new Primer CSS color system is based on *functional* colors, you should only use colors designed for the element you're applying them to. For example, text colors, which start with `--color-text-`, should not be used for icons, backgrounds, or any other non-text element.
|
||||
|
||||
### Text
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^text-/}
|
||||
render={variable => {
|
||||
return <span style={{color: `var(--color-${variable})`}}>--color-{variable}</span>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Icons
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^icon-(?!folder)/}
|
||||
render={variable => {
|
||||
return <><span style={{color: `var(--color-${variable})`}}><StyledOcticon icon={OctofaceIcon} /></span> --color-{variable}</>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Borders
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^border-/}
|
||||
render={variable => {
|
||||
return <div style={{border: `2px solid var(--color-${variable})`, marginBottom: 10, padding: 4}}>--color-{variable}</div>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Backgrounds
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^bg-/}
|
||||
render={variable => {
|
||||
return <Flex mb={1}><div style={{
|
||||
background: `var(--color-${variable})`,
|
||||
height: 20,
|
||||
width: 20,
|
||||
display: 'inline-block',
|
||||
border: '1px solid var(--color-border-primary)',
|
||||
marginRight: 10
|
||||
}} />--color-{variable}</Flex>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Other variables
|
||||
|
||||
For a list of *all* functional variables, including app- and component-specific variables, see [this reference page](https://primer.style/primitives/).
|
||||
|
||||
## Color palette
|
||||
|
||||
In rare ocassions, it may be necessary to use one of the variables from the base color scale, though since the colors differ in the various color modes, the functional variables listed above should be used in almost all normal cases.
|
||||
|
||||
<Flex flexWrap="wrap" mr={-2}>
|
||||
{palettes
|
||||
.concat(
|
||||
{title: 'Black', name: 'black', value: colors.gray[9]},
|
||||
{title: 'White', name: 'white', value: colors.white, props: {className: 'border'}}
|
||||
)
|
||||
.map(({name, title, value, props = {}}) => (
|
||||
<Flex.Item
|
||||
as={Link}
|
||||
@ -39,11 +102,11 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
## Color variables
|
||||
### Color variables
|
||||
|
||||
<Flex flexWrap="wrap" mr={[0, 0, -4]}>
|
||||
{palettes.map(({name, title, value, values}) => (
|
||||
<Flex id={name} flexDirection="column" width={[1, 1, 1 / 2]} pr={[0, 0, 4]} mb={4}>
|
||||
<Flex id={name} flexDirection="column" width={1} pr={0} mb={4} key={name}>
|
||||
<Flex
|
||||
as={Link}
|
||||
href={`#${name}`}
|
||||
@ -61,10 +124,9 @@ import {PaletteTable, PaletteCell, overlayColor} from '../../src/color-system'
|
||||
</Flex.Item>
|
||||
<StyledOcticon icon={LinkIcon} color="inherit !important" height={20} />
|
||||
</Flex>
|
||||
<PaletteTable
|
||||
columns={['variable', 'value']}
|
||||
values={[{variable: name, value, slug: name}].concat(values)}
|
||||
hasHeader={false}
|
||||
<ColorModeTable
|
||||
baseColor={value}
|
||||
values={values}
|
||||
cellPadding="8px 16px"
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Support
|
||||
path: support/index
|
||||
source: 'https://github.com/primer/css/tree/master/src/support'
|
||||
source: 'https://github.com/primer/css/tree/main/src/support'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Marketing support
|
||||
path: support/marketing-variables
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/marketing/support'
|
||||
source: 'https://github.com/primer/css/tree/main/src/marketing/support'
|
||||
bundle: marketing-support
|
||||
---
|
||||
|
||||
@ -22,4 +22,3 @@ Starting where the `primer-core` spacing scale ends at spacer 6, the marketing s
|
||||
| 12 | 128 |
|
||||
|
||||
See [primer-marketing-support](https://npm.im/primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/utilities/marketing-margin) and [padding](/utilities/marketing-padding).
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Spacing
|
||||
path: support/spacing
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/master/src/support/variables/layout.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/support/variables/layout.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Typography
|
||||
path: support/typography
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/329'
|
||||
source: 'https://github.com/primer/css/blob/master/src/support/variables/typography.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/support/variables/typography.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
|
||||
309
docs/content/support/v16-migration.mdx
Normal file
309
docs/content/support/v16-migration.mdx
Normal file
@ -0,0 +1,309 @@
|
||||
---
|
||||
title: Primer v16 Migration Guide
|
||||
description: 'Guide for migrating to version 16.0.0 of Primer'
|
||||
---
|
||||
|
||||
Primer v16.0.0 introduces the idea of _color modes_ and _functional variables_. A color mode defines a set of colors in the Primer system that differs from that of other color modes. Currently, Primer ships with a light mode and a dark mode.
|
||||
|
||||
Because colors differ in each color mode, it doesn't make sense to try to make an element a specific color; instead, Primer now applies colors based on the function of an element using functional variables. As a result, the Sass color variables that existed in Primer prior to version 16.0.0 have been replaced with functional CSS variables. These variables have different values depending on the current color mode. For a list of the new functional CSS color variables, see [the color system page](/support/color-system). The color utility classes have also been updated to match; see [the color utilities page](/utilities/colors) for more information.
|
||||
|
||||
## Migration guide
|
||||
|
||||
### Components
|
||||
|
||||
Most components don't need to be updated and should work without making changes. But some of the componets that use presentational class names now use functional class names.
|
||||
|
||||
#### Buttons
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----------- | ----- |
|
||||
| `.btn-blue` | n/a |
|
||||
|
||||
#### Counters
|
||||
|
||||
| [`v15`](https://primer.style/css/components/labels#counters) | `v16` |
|
||||
| ------------------------------------------------------------ | --------------------- |
|
||||
| `.Counter--gray` | `.Counter--primary` |
|
||||
| `.Counter--gray-light` | `.Counter--secondary` |
|
||||
|
||||
#### Dropdwon
|
||||
|
||||
| [`v15`](https://primer.style/css/components/dropdown#dark) | `v16` |
|
||||
| ---------------------------------------------------------- | ----- |
|
||||
| `.dropdown-menu-dark` | n/a |
|
||||
|
||||
#### Labels
|
||||
|
||||
| [`v15`](https://primer.style/css/components/labels) | `v16` |
|
||||
| --------------------------------------------------- | ------------------- |
|
||||
| `.Label--gray-darker` | `.Label--primary` |
|
||||
| `.Label--gray` | `.Label--secondary` |
|
||||
| `.Label--blue` | `.Label--info` |
|
||||
| `.Label--green` | `.Label--success` |
|
||||
| `.Label--yellow` | `.Label--warning` |
|
||||
| `.Label--red` | `.Label--danger` |
|
||||
| `.Label--orange` | n/a |
|
||||
| `.Label--purple` | n/a |
|
||||
| `.Label--pink` | n/a |
|
||||
|
||||
#### States
|
||||
|
||||
| [`v15`](https://primer.style/css/components/labels#states) | `v16` |
|
||||
| ---------------------------------------------------------- | ---------------- |
|
||||
| n/a | `.State--draft` |
|
||||
| `.State--green` | `.State--open` |
|
||||
| `.State--purple` | `.State--merged` |
|
||||
| `.State--red` | `.State--closed` |
|
||||
|
||||
### Utility classes
|
||||
|
||||
See [the color utility classes page](/utilities/colors) for a list of all the functional color utility classes.
|
||||
|
||||
#### Text
|
||||
|
||||
| [`v15`](https://primer.style/css/utilities/colors#text-color-utilities) | `v16` |
|
||||
| ----------------------------------------------------------------------- | ----------------------- |
|
||||
| `.text-gray-dark` | `.color-text-primary` |
|
||||
| `.text-gray` | `.color-text-secondary` |
|
||||
| `.text-gray-light` | `.color-text-tertiary` |
|
||||
| `.text-blue` | `.color-text-link` |
|
||||
| `.text-green` | `.color-text-success` |
|
||||
| `.text-yellow` | `.color-text-warning` |
|
||||
| `.text-red` | `.color-text-danger` |
|
||||
| `.text-white` | `.color-text-white` |
|
||||
| n/a | `.color-text-inverse` |
|
||||
| `.text-black` | n/a |
|
||||
| `.text-orange` | n/a |
|
||||
| `.text-orange-light` | n/a |
|
||||
| `.text-purple` | n/a |
|
||||
| `.text-pink` | n/a |
|
||||
|
||||
#### Icon
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----- | ----------------------- |
|
||||
| n/a | `.color-icon-primary` |
|
||||
| n/a | `.color-icon-secondary` |
|
||||
| n/a | `.color-icon-tertiary` |
|
||||
| n/a | `.color-icon-info` |
|
||||
| n/a | `.color-icon-success` |
|
||||
| n/a | `.color-icon-warning` |
|
||||
| n/a | `.color-icon-danger` |
|
||||
|
||||
#### Border
|
||||
|
||||
| [`v15`](https://primer.style/css/utilities/borders#border-color-utilities) | `v16` |
|
||||
| -------------------------------------------------------------------------- | ------------------------- |
|
||||
| `.border-gray` | `.color-border-primary` |
|
||||
| `.border-gray-light` | `.color-border-secondary` |
|
||||
| `.border-gray-dark` | `.color-border-tertiary` |
|
||||
| `.border-blue` | `.color-border-info` |
|
||||
| `.border-green` | `.color-border-success` |
|
||||
| `.border-yellow` | `.color-border-warning` |
|
||||
| `.border-red` | `.color-border-danger` |
|
||||
| `.border-white` | `.color-border-inverse` |
|
||||
| n/a | `.color-border-overlay` |
|
||||
| `.border-gray-darker` | n/a |
|
||||
| `.border-blue-light` | n/a |
|
||||
| `.border-red-light` | n/a |
|
||||
| `.border-purple` | n/a |
|
||||
| `.border-black-fade` | n/a |
|
||||
| `.border-white-fade` | n/a |
|
||||
| `.border-white-fade-15` | n/a |
|
||||
| `.border-white-fade-30` | n/a |
|
||||
| `.border-white-fade-50` | n/a |
|
||||
| `.border-white-fade-70` | n/a |
|
||||
| `.border-white-fade-85` | n/a |
|
||||
|
||||
#### Background
|
||||
|
||||
| [`v15`](https://primer.style/css/utilities/colors#background-utilities) | `v16` |
|
||||
| ----------------------------------------------------------------------- | --------------------------- |
|
||||
| `.bg-white` | `.color-bg-primary` |
|
||||
| `.bg-gray-light` | `.color-bg-secondary` |
|
||||
| `.bg-gray` | `.color-bg-tertiary` |
|
||||
| `.bg-gray-dark` | `.color-bg-canvas-inverse` |
|
||||
| `.bg-blue-light` | `.color-bg-info` |
|
||||
| `.bg-blue` | `.color-bg-info-inverse` |
|
||||
| `.bg-green-light` | `.color-bg-success` |
|
||||
| `.bg-green` | `.color-bg-success-inverse` |
|
||||
| `.bg-yellow-light` | `.color-bg-warning` |
|
||||
| `.bg-yellow` | `.color-bg-warning-inverse` |
|
||||
| `.bg-red-light` | `.color-bg-danger` |
|
||||
| `.bg-red` | `.color-bg-danger-inverse` |
|
||||
| n/a | `.color-bg-canvas` |
|
||||
| n/a | `.color-bg-canvas-inset` |
|
||||
| n/a | `.color-bg-overlay` |
|
||||
| `.bg-purple-light` | n/a |
|
||||
| `.bg-purple` | n/a |
|
||||
| `.bg-yellow-dark` | n/a |
|
||||
| `.bg-orange` | n/a |
|
||||
| `.bg-pink` | n/a |
|
||||
|
||||
#### Shadow
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ------------------------- | --------------------------- |
|
||||
| `.box-shadow` | `.color-shadow-small` |
|
||||
| `.box-shadow-medium` | `.color-shadow-medium` |
|
||||
| `.box-shadow-large` | `.color-shadow-large` |
|
||||
| `.box-shadow-extra-large` | `.color-shadow-extra-large` |
|
||||
|
||||
#### Link
|
||||
|
||||
The `link` utilities are part of the `Link` component.
|
||||
|
||||
| [`v15`](https://primer.style/css/utilities/colors##link-colors) | `v16` |
|
||||
| --------------------------------------------------------------- | ------------------ |
|
||||
| `.link-gray-dark` | `.Link--primary` |
|
||||
| `.link-gray` | `.Link--secondary` |
|
||||
| `.muted-link` | `.Link--muted` |
|
||||
| `.link-hover-blue` | `.Link--onHover` |
|
||||
| n/a | `.Link` |
|
||||
|
||||
### Mixins
|
||||
|
||||
| `v15` | `v16` |
|
||||
| --------------- | ----- |
|
||||
| `btn-solid()` | n/a |
|
||||
| `btn-inverse()` | n/a |
|
||||
| `btn-outline()` | n/a |
|
||||
|
||||
### Variables
|
||||
|
||||
See [the color system page](/support/color-system) for a list of all the functional CSS variables.
|
||||
|
||||
#### Text
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ------------------------------------ | ------------------------------- |
|
||||
| `$text-gray-dark` (`$gray-900`) | `var(--color-text-primary)` |
|
||||
| `$text-gray` (`$gray-600`) | `var(--color-text-secondary)` |
|
||||
| `$text-gray-light` (`$gray-500`) | `var(--color-text-tertiary)` |
|
||||
| `$text-blue` (`$blue-500`) | `var(--color-text-link)` |
|
||||
| `$text-green` (`$green-600`) | `var(--color-text-success)` |
|
||||
| `$text-red` (`$red-600`) | `var(--color-text-danger)` |
|
||||
| `$text-yellow` (`$yellow-800`) | `var(--color-text-warning)` |
|
||||
| `$text-white` (`$white`) | `var(--color-text-white)` |
|
||||
| n/a | `var(--color-text-inverse)` |
|
||||
| n/a | `var(--color-text-placeholder)` |
|
||||
| n/a | `var(--color-text-disabled)` |
|
||||
| `$text-black` (`$black`) | n/a |
|
||||
| `$text-orange` (`$orange-900`) | n/a |
|
||||
| `$text-orange-light` (`$orange-600`) | n/a |
|
||||
| `$text-purple` (`$purple-500`) | n/a |
|
||||
| `$text-pink` (`$pink-500`) | n/a |
|
||||
|
||||
#### Icon
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----- | ----------------------------- |
|
||||
| n/a | `var(--color-icon-primary)` |
|
||||
| n/a | `var(--color-icon-secondary)` |
|
||||
| n/a | `var(--color-icon-tertiary)` |
|
||||
| n/a | `var(--color-icon-info)` |
|
||||
| n/a | `var(--color-icon-danger)` |
|
||||
| n/a | `var(--color-icon-success)` |
|
||||
| n/a | `var(--color-icon-warning)` |
|
||||
|
||||
#### Border
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----------------------------------------------------- | ------------------------------- |
|
||||
| `$border-color` (`$gray-200`) | `var(--color-border-primary)` |
|
||||
| `$border-gray` (`$gray-200`) | `var(--color-border-primary)` |
|
||||
| `$border-gray-light` (`lighten($gray-200, 3%)`) | `var(--color-border-secondary)` |
|
||||
| `$border-gray-dark` (`$gray-300`) | `var(--color-border-tertiary)` |
|
||||
| `$border-white` (`$white`) | `var(--color-border-inverse)` |
|
||||
| `$border-blue` (`$blue-500`) | `var(--color-border-info)` |
|
||||
| `$border-green` (`$green-400`) | `var(--color-border-success)` |
|
||||
| `$border-red` (`$red-500`) | `var(--color-border-danger)` |
|
||||
| `$border-yellow` (`$yellow-600`) | `var(--color-border-warning)` |
|
||||
| n/a | `var(--color-border-overlay)` |
|
||||
| `$border-gray-darker` (`$gray-700`) | n/a |
|
||||
| `$border-blue-light` (`$blue-200`) | n/a |
|
||||
| `$border-red-light` (`$red-300`) | n/a |
|
||||
| `$border-purple` (`$purple-500`) | n/a |
|
||||
| `$border-black-fade` (`$black-fade-15`) | n/a |
|
||||
| `$border-white-fade` (`$white-fade-15`) | n/a |
|
||||
| `$border-green-light` (`desaturate($green-300, 40%)`) | n/a |
|
||||
|
||||
#### Background
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----------------------------------- | --------------------------------- |
|
||||
| `$bg-white` (`$white`) | `var(--color-bg-primary)` |
|
||||
| `$bg-gray-light` (`$gray-000`) | `var(--color-bg-secondary)` |
|
||||
| `$bg-gray` (`$gray-100`) | `var(--color-bg-tertiary)` |
|
||||
| `$bg-gray-dark` (`$gray-900`) | `var(--color-bg-canvas-inverse)` |
|
||||
| `$bg-red` (`$red-500`) | `var(--color-bg-danger-inverse)` |
|
||||
| `$bg-red-light` (`$red-000`) | `var(--color-bg-danger)` |
|
||||
| `$bg-green` (`$green-500`) | `var(--color-bg-success-inverse)` |
|
||||
| `$bg-green-light` (`$green-100`) | `var(--color-bg-success)` |
|
||||
| `$bg-blue` (`$blue-500`) | `var(--color-bg-info-inverse)` |
|
||||
| `$bg-blue-light` (`$blue-000`) | `var(--color-bg-info)` |
|
||||
| `$bg-yellow` (`$yellow-500`) | `var(--color-bg-warning-inverse)` |
|
||||
| `$bg-yellow-light` (`$yellow-200`) | `var(--color-bg-warning)` |
|
||||
| n/a | `var(--color-bg-canvas)` |
|
||||
| n/a | `var(--color-bg-canvas-inset)` |
|
||||
| n/a | `var(--color-bg-overlay)` |
|
||||
| `$bg-black` (`$black`) | n/a |
|
||||
| `$bg-black-fade` (`$black-fade-50`) | n/a |
|
||||
| `$bg-orange` (`$orange-700`) | n/a |
|
||||
| `$bg-purple` (`$purple-500`) | n/a |
|
||||
| `$bg-purple-light` (`$purple-000`) | n/a |
|
||||
| `$bg-pink` (`$pink-500`) | n/a |
|
||||
| `$bg-yellow-dark` (`$yellow-700`) | n/a |
|
||||
|
||||
#### Shadow
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ------------------------- | --------------------------------- |
|
||||
| `$box-shadow` | `var(--color-shadow-small)` |
|
||||
| `$box-shadow-medium` | `var(--color-shadow-medium)` |
|
||||
| `$box-shadow-large` | `var(--color-shadow-large)` |
|
||||
| `$box-shadow-extra-large` | `var(--color-shadow-extra-large)` |
|
||||
| `$box-shadow-highlight` | `var(--color-shadow-highlight)` |
|
||||
| `$box-shadow-inset` | `var(--color-shadow-inset)` |
|
||||
| `$box-shadow-focus` | `var(--color-state-focus-shadow)` |
|
||||
|
||||
### Color System
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----------- | --------------------------- |
|
||||
| `$black` | `var(--color-scale-black)` |
|
||||
| `$white` | `var(--color-scale-white)` |
|
||||
| `$gray-000` | `var(--color-scale-gray-0)` |
|
||||
| `$gray-100` | `var(--color-scale-gray-1)` |
|
||||
| `$gray-200` | `var(--color-scale-gray-2)` |
|
||||
| ... | ... |
|
||||
| `$pink-700` | `var(--color-scale-pink-7)` |
|
||||
| `$pink-800` | `var(--color-scale-pink-8)` |
|
||||
| `$pink-900` | `var(--color-scale-pink-9)` |
|
||||
|
||||
### Auto colors
|
||||
|
||||
| `v15` | `v16` |
|
||||
| ----- | -------------------------- |
|
||||
| n/a | `var(--color-auto-black)` |
|
||||
| n/a | `var(--color-auto-white)` |
|
||||
| n/a | `var(--color-auto-gray-0)` |
|
||||
| n/a | `var(--color-auto-gray-1)` |
|
||||
| n/a | `var(--color-auto-gray-2)` |
|
||||
| ... | ... |
|
||||
| n/a | `var(--color-auto-pink-7)` |
|
||||
| n/a | `var(--color-auto-pink-8)` |
|
||||
| n/a | `var(--color-auto-pink-9)` |
|
||||
|
||||
Note: The `auto` colors automatically inverse based on the color mode. Example:
|
||||
|
||||
| Variable | In `light` mode | In `dark` mode |
|
||||
| -------------------------- | --------------- | -------------- |
|
||||
| `var(--color-auto-gray-0)` | light gray | dark gray |
|
||||
| `var(--color-auto-gray-9)` | dark gray | light gray |
|
||||
|
||||
It doesn't always work perfectly, therefore functional variables should be used as much as possible. But in some cases auto colors can still be handy.
|
||||
|
||||
### Misc
|
||||
|
||||
There are a few more selectors and variables that got removed. Please refer to [deprecations.js](https://github.com/primer/css/blob/master/deprecations.js) for a complete list.
|
||||
@ -1,15 +1,14 @@
|
||||
---
|
||||
title: Variables
|
||||
path: support/variables
|
||||
status: Experimental
|
||||
bundle: alerts
|
||||
status: Stable
|
||||
---
|
||||
|
||||
import {Variables, DeprecationIcon} from '../../src/variables'
|
||||
|
||||
<Variables>
|
||||
|
||||
The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/master/src/support/variables).
|
||||
The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/main/src/support/variables).
|
||||
|
||||
Variables with a <DeprecationIcon /> are planned for [deprecation](../tools/deprecations) in a future version of `@primer/css`, and should be avoided.
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ The JSON data is available in the unpacked node module's `dist/deprecations.json
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Deprecation messages strings may include Markdown so that they can be included in the [changelog].
|
||||
|
||||
* `selectors` is an object mapping CSS selectors (e.g. `.btn-purple`) to the version in which they are _or will be_ deprecated:
|
||||
@ -45,7 +45,7 @@ The JSON data is available in the unpacked node module's `dist/deprecations.json
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
* `variables` is an object mapping SCSS variables (including the leading `$`, e.g. `$status-pending`) to the version in which they are or will be deprecated:
|
||||
|
||||
```json
|
||||
@ -58,7 +58,7 @@ The JSON data is available in the unpacked node module's `dist/deprecations.json
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Node
|
||||
|
||||
@ -125,5 +125,5 @@ console.log(`$yellow-700 deprecated? ${isVariableDeprecated('$yellow-700')}`)
|
||||
|
||||
|
||||
[semver]: https://npm.im/semver
|
||||
[changelog]: https://github.com/primer/css/tree/master/CHANGELOG.md
|
||||
[changelog]: https://github.com/primer/css/tree/main/CHANGELOG.md
|
||||
[Map]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
|
||||
|
||||
@ -3,7 +3,7 @@ title: Linting
|
||||
path: tools/linting
|
||||
---
|
||||
|
||||
We use linters to enforce [coding principles and standards](/principles). On every pull request we run the linters on the code to make sure any changes meet our standards. When a commit contains code that doesn't meet the standards, the build fails which blocks merging into master and deploying to production.
|
||||
We use linters to enforce [coding principles and standards](/principles). On every pull request we run the linters on the code to make sure any changes meet our standards. When a commit contains code that doesn't meet the standards, the build fails which blocks merging into main and deploying to production.
|
||||
|
||||
For teams working on `github/github` this configuration is all setup for you. While we do recommend you also [setup a plugin](#plugins) in your editor, this is not required.
|
||||
|
||||
@ -106,4 +106,4 @@ We check that our compiled CSS assets don't contain more selectors than the [IE
|
||||
|
||||
## Linting dotcom
|
||||
|
||||
There are a few handy scripts to make your life easier when working with CSS on dotcom, especially when doing bigger refactors. Checkout the [Stylelint guide](https://github.com/github/design-systems/blob/master/tools/stylelint.md).
|
||||
There are a few handy scripts to make your life easier when working with CSS on dotcom, especially when doing bigger refactors. Checkout the [Stylelint guide](https://github.com/github/design-systems/blob/main/tools/stylelint.md).
|
||||
|
||||
@ -19,7 +19,7 @@ This method requires no dev environment set up and is useful for when you want t
|
||||
<head>
|
||||
<title></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@ -3,7 +3,7 @@ title: Animations
|
||||
path: utilities/animations
|
||||
example_layout: toggle
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/master/src/utilities/animations.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/animations.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
@ -97,3 +97,12 @@ The `.hover-grow` class will increase the scale of the element upon hover.
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Rotation
|
||||
|
||||
The `.anim-rotate` class will rotate the element indefinitely around the coordinate specified by `transform-origin`. Most elements have a default of `transform-origin: 50% 50%` and will rotate around the center.
|
||||
|
||||
```html live
|
||||
<!-- <%= octicon("mark-github",:height => 32, :class => "anim-rotate") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github anim-rotate" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
```
|
||||
|
||||
@ -3,13 +3,10 @@ title: Borders
|
||||
path: utilities/borders
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/72'
|
||||
source: 'https://github.com/primer/css/tree/master/src/utilities/borders.scss'
|
||||
source: 'https://github.com/primer/css/tree/main/src/utilities/borders.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
import {palettes, borders} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, PaletteValue} from '../../src/color-system'
|
||||
|
||||
Utilities for borders, and border radius.
|
||||
|
||||
## Default border
|
||||
@ -55,105 +52,6 @@ Remove borders from all sides or a single side with `.border-0`, `.border-top-0`
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.
|
||||
|
||||
```html live
|
||||
<div class="border border-blue mb-2">
|
||||
.border-blue
|
||||
</div>
|
||||
<div class="border border-blue-light mb-2">
|
||||
.border-blue-light
|
||||
</div>
|
||||
<div class="border border-green mb-2">
|
||||
.border-green
|
||||
</div>
|
||||
<div class="border border-green-light mb-2">
|
||||
.border-green-light
|
||||
</div>
|
||||
<div class="border border-red mb-2">
|
||||
.border-red
|
||||
</div>
|
||||
<div class="border border-red-light mb-2">
|
||||
.border-red-light
|
||||
</div>
|
||||
<div class="border border-purple mb-2">
|
||||
.border-purple
|
||||
</div>
|
||||
<div class="border border-yellow mb-2">
|
||||
.border-yellow
|
||||
</div>
|
||||
<div class="border border-gray-light mb-2">
|
||||
.border-gray-light
|
||||
</div>
|
||||
<div class="border border-gray-dark mb-2">
|
||||
.border-gray-dark
|
||||
</div>
|
||||
```
|
||||
|
||||
### Borders with alpha transparency
|
||||
|
||||
Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
|
||||
|
||||
```html live
|
||||
<div class="border border-black-fade bg-blue-light p-2 mb-2">
|
||||
.border-black-fade .bg-blue-light
|
||||
</div>
|
||||
<div class="border border-black-fade bg-red-light p-2 mb-2">
|
||||
.border-black-fade .bg-red-light
|
||||
</div>
|
||||
```
|
||||
|
||||
On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`.
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark text-white p-3">
|
||||
<div class="border border-white-fade p-2">
|
||||
.border-white-fade
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark text-white p-3 mb-3">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-30 p-2 mb-2">
|
||||
.border-white-fade-30
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-50 p-2 mb-2">
|
||||
.border-white-fade-50
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-70 p-2 mb-2">
|
||||
.border-white-fade-70
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-85 p-2 mb-2">
|
||||
.border-white-fade-85
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-blue text-white p-3">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-30 p-2 mb-2">
|
||||
.border-white-fade-30
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-50 p-2 mb-2">
|
||||
.border-white-fade-50
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-70 p-2 mb-2">
|
||||
.border-white-fade-70
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-85 p-2 mb-2">
|
||||
.border-white-fade-85
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border style
|
||||
|
||||
Use `border-dashed` to give an element a dashed border.
|
||||
@ -166,18 +64,21 @@ Use `border-dashed` to give an element a dashed border.
|
||||
|
||||
## Rounded corners
|
||||
|
||||
Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
|
||||
Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 4px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
|
||||
|
||||
```html live
|
||||
<div class="Box rounded-0 mb-2">
|
||||
<div class="border rounded-0 p-2 mb-2">
|
||||
.rounded-0
|
||||
</div>
|
||||
<div class="border rounded-1 mb-2">
|
||||
<div class="border rounded-1 p-2 mb-2">
|
||||
.rounded-1
|
||||
</div>
|
||||
<div class="border rounded-2 mb-2">
|
||||
<div class="border rounded-2 p-2 mb-2">
|
||||
.rounded-2
|
||||
</div>
|
||||
<div class="border rounded-3 p-2 mb-2">
|
||||
.rounded-3
|
||||
</div>
|
||||
<div class="border circle p-3" style="width: 100px; height: 100px;">
|
||||
.circle
|
||||
</div>
|
||||
@ -186,17 +87,17 @@ Use the following utilities to add or remove rounded corners: `rounded-0` remove
|
||||
You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
|
||||
|
||||
```html live
|
||||
<div class="border rounded-top-1 mb-2">
|
||||
.rounded-top-1
|
||||
<div class="border rounded-top-2 p-2 mb-2">
|
||||
.rounded-top-2
|
||||
</div>
|
||||
<div class="border rounded-right-1 mb-2">
|
||||
.rounded-right-1
|
||||
<div class="border rounded-right-2 p-2 mb-2">
|
||||
.rounded-right-2
|
||||
</div>
|
||||
<div class="border rounded-bottom-1 mb-2">
|
||||
.rounded-bottom-1
|
||||
<div class="border rounded-bottom-2 p-2 mb-2">
|
||||
.rounded-bottom-2
|
||||
</div>
|
||||
<div class="border rounded-left-1 mb-2">
|
||||
.rounded-left-1
|
||||
<div class="border rounded-left-2 p-2 mb-2">
|
||||
.rounded-left-2
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -218,6 +119,11 @@ You can adjust border widths on all sides or each side individually with respons
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Border colors are documented on the [colors utilities page](../utilities/colors#border-colors).
|
||||
|
||||
<!-- TODO: Remove?
|
||||
## Border color utilities
|
||||
|
||||
<PaletteTable
|
||||
@ -230,3 +136,4 @@ You can adjust border widths on all sides or each side individually with respons
|
||||
]}
|
||||
style={{borderSpacing: '0 4px'}}
|
||||
/>
|
||||
-->
|
||||
|
||||
@ -3,19 +3,23 @@ title: Box shadow
|
||||
path: utilities/box-shadow
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/269'
|
||||
source: 'https://github.com/primer/css/tree/master/src/utilities/box-shadow.scss'
|
||||
source: 'https://github.com/primer/css/tree/main/src/utilities/box-shadow.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
|
||||
|
||||
## Default
|
||||
## Small
|
||||
|
||||
Default shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
|
||||
Small shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow p-3">
|
||||
.box-shadow
|
||||
<div class="color-shadow-small p-3">
|
||||
.color-shadow-small
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -23,7 +27,7 @@ These types of shadows are typically applied to elements with borders, such as t
|
||||
|
||||
```html live
|
||||
<div class="col-6">
|
||||
<div class="Box box-shadow">
|
||||
<div class="Box color-shadow-small">
|
||||
<div class="Box-row">
|
||||
<h3 class="m-0">Organization</h3>
|
||||
</div>
|
||||
@ -47,8 +51,8 @@ These types of shadows are typically applied to elements with borders, such as t
|
||||
Medium box shadows are more diffused and slightly larger than small box shadows.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-medium p-3">
|
||||
.box-shadow-medium
|
||||
<div class="color-shadow-medium p-3">
|
||||
.color-shadow-medium
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -56,7 +60,7 @@ Medium box shadows are typically used on editorialized content that needs to app
|
||||
|
||||
```html live
|
||||
<div class="col-6">
|
||||
<a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
|
||||
<a class="d-block color-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
|
||||
<div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div>
|
||||
<h3 class="text-gray-dark">Serverless architecture</h3>
|
||||
<p class="text-gray">
|
||||
@ -83,15 +87,15 @@ Medium box shadows are typically used on editorialized content that needs to app
|
||||
Large box shadows are very diffused and used sparingly in the product UI.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-large p-3">
|
||||
.box-shadow-large
|
||||
<div class="color-shadow-large p-3">
|
||||
.color-shadow-large
|
||||
</div>
|
||||
```
|
||||
|
||||
These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-large rounded-2 overflow-hidden">
|
||||
<div class="color-shadow-large rounded-2 overflow-hidden">
|
||||
<img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub" />
|
||||
</div>
|
||||
```
|
||||
@ -101,8 +105,8 @@ These shadows are used for marketing content, UI screenshots, and content that a
|
||||
Extra large box shadows are even more diffused.
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-extra-large p-3">
|
||||
.box-shadow-extra-large
|
||||
<div class="color-shadow-extra-large p-3">
|
||||
.color-shadow-extra-large
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -113,7 +117,7 @@ These shadows are used for marketing content and content that appears on top of
|
||||
Additionally there is a `box-shadow-none` class that removes `box-shadow`:
|
||||
|
||||
```html live
|
||||
<div class="box-shadow-large box-shadow-none p-3">
|
||||
<div class="color-shadow-large box-shadow-none p-3">
|
||||
.box-shadow-none
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -1,30 +1,176 @@
|
||||
---
|
||||
title: Colors
|
||||
description: 'Immutable, atomic CSS classes to rapidly build product'
|
||||
status: Stable
|
||||
status: New
|
||||
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}
|
||||
]
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Use color utilities to apply color to the background of elements, text, and borders.
|
||||
|
||||
## Text colors
|
||||
|
||||
Use text color utilities to set text to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
|
||||
> ⚠️ The `.color-text-warning` currently doesn't pass accessibility standards, but will be updated in the future. **Use with caution**.
|
||||
|
||||
```html live
|
||||
<div class="color-text-primary mb-2">.color-text-primary</div>
|
||||
<div class="color-text-secondary mb-2">.color-text-secondary</div>
|
||||
<div class="color-text-tertiary mb-2">.color-text-tertiary</div>
|
||||
<div class="color-text-link mb-2">.color-text-link</div>
|
||||
<div class="color-text-success mb-2">.color-text-success</div>
|
||||
<div class="color-text-warning mb-2">.color-text-warning <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span></div>
|
||||
<div class="color-text-danger mb-2">.color-text-danger</div>
|
||||
```
|
||||
|
||||
You can set the color inheritance on an element by using the `text-inherit` class.
|
||||
|
||||
```html live
|
||||
<div class="color-text-success">This text is green, <a href="#" class="text-inherit">including the link</a></div>
|
||||
```
|
||||
|
||||
## Icon colors
|
||||
|
||||
Use icon color utilities to set [Octicons](https://primer.style/octicons) to a specific color.
|
||||
|
||||
```html live
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "icon-primary mr-1" %> -->
|
||||
<svg class="color-icon-primary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-primary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-secondary mr-1" %> -->
|
||||
<svg class="color-icon-secondary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-secondary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-tertiary mr-1" %> -->
|
||||
<svg class="color-icon-tertiary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-tertiary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-info mr-1" %> -->
|
||||
<svg class="color-icon-info mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-info
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-success mr-1" %> -->
|
||||
<svg class="color-icon-success mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-success
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-warning mr-1" %> -->
|
||||
<svg class="color-icon-warning mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-warning
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-danger mr-1" %> -->
|
||||
<svg class="color-icon-danger mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-danger
|
||||
</div>
|
||||
```
|
||||
|
||||
## Background colors
|
||||
|
||||
Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
|
||||
### Background utilities
|
||||
```html live
|
||||
<div class="color-bg-canvas mb-2">.color-bg-canvas</div>
|
||||
<div class="color-bg-primary mb-2">.color-bg-primary</div>
|
||||
<div class="color-bg-secondary mb-2">.color-bg-secondary</div>
|
||||
<div class="color-bg-tertiary mb-2">.color-bg-tertiary</div>
|
||||
<div class="color-bg-info mb-2">.color-bg-info</div>
|
||||
<div class="color-bg-success mb-2">.color-bg-success</div>
|
||||
<div class="color-bg-warning mb-2">.color-bg-warning</div>
|
||||
<div class="color-bg-danger mb-2">.color-bg-danger</div>
|
||||
```
|
||||
|
||||
## Inversed and permanent colors
|
||||
|
||||
⚠️ WIP: Don't use in produciton. They might still change.
|
||||
|
||||
You can inverse the canvas background color. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-canvas-inverse color-text-inverse mb-2">.color-bg-canvas-inverse .color-text-inverse</div>
|
||||
```
|
||||
|
||||
When using the functional inversed background colors the `.color-text-white` is the better choice as it keeps the text white in all color modes. An exception is the `.color-bg-warning-inverse`.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-info-inverse color-text-white mb-2">.color-bg-info-inverse .color-text-white</div>
|
||||
<div class="color-bg-success-inverse color-text-white mb-2">.color-bg-success-inverse .color-text-white</div>
|
||||
<div class="color-bg-warning-inverse mb-2">.color-bg-warning-inverse</div>
|
||||
<div class="color-bg-danger-inverse color-text-white mb-2">.color-bg-danger-inverse .color-text-white</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Override default border colors with the following utilities.
|
||||
|
||||
```html live
|
||||
<div class="border color-border-primary mb-2">.color-border-primary</div>
|
||||
<div class="border color-border-secondary mb-2">.color-border-secondary</div>
|
||||
<div class="border color-border-tertiary mb-2">.color-border-tertiary</div>
|
||||
<div class="border color-border-info mb-2">.color-border-info</div>
|
||||
<div class="border color-border-success mb-2">.color-border-success</div>
|
||||
<div class="border color-border-warning mb-2">.color-border-warning</div>
|
||||
<div class="border color-border-danger mb-2">.color-border-danger</div>
|
||||
|
||||
<div class="color-bg-canvas-inverse color-text-inverse p-3">
|
||||
<div class="border color-border-inverse">.color-border-inverse</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Borders with alpha transparency
|
||||
|
||||
> TODO: Deprecate?
|
||||
|
||||
Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
|
||||
|
||||
```html live
|
||||
<div class="border border-black-fade color-bg-info p-2 mb-2">.border-black-fade</div>
|
||||
<div class="border border-black-fade color-bg-danger p-2 mb-2">.border-black-fade</div>
|
||||
```
|
||||
|
||||
On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`. Or use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-info-inverse color-text-inverse p-3">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15 or .border-white-fade
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-30 p-2 mb-2">
|
||||
.border-white-fade-30
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-50 p-2 mb-2">
|
||||
.border-white-fade-50
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-70 p-2 mb-2">
|
||||
.border-white-fade-70
|
||||
</div>
|
||||
<div class="border-bottom border-white-fade-85 p-2 mb-2">
|
||||
.border-white-fade-85
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Link colors
|
||||
|
||||
You can use the [Link](../components/links) component to change the link colors.
|
||||
|
||||
|
||||
<!-- TODO: Remove? -->
|
||||
<!--
|
||||
<PaletteTable>
|
||||
{palettes.map(({name, title, value}) => (
|
||||
<PaletteTableFragment name={name} type="bg" sparse key={name}>
|
||||
@ -36,102 +182,27 @@ Background colors are most commonly used for filling large blocks of content or
|
||||
</PaletteTableFragment>
|
||||
))}
|
||||
</PaletteTable>
|
||||
-->
|
||||
|
||||
## Text colors
|
||||
|
||||
Use text color utilities to set text or [Octicons](https://octicons.github.com) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
|
||||
These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **⚠️ Any of the combinations with a warning icon must be used with caution**.
|
||||
|
||||
### Text color inheritance
|
||||
|
||||
You can set the color inheritance on an element by using the `text-inherit` class.
|
||||
|
||||
```html live
|
||||
<div class="text-purple">This text is purple, <a href="#" class="text-inherit">including the link</a></div>
|
||||
```
|
||||
|
||||
### Text on white background
|
||||
|
||||
```html live
|
||||
<div class="text-blue mb-2">
|
||||
.text-blue
|
||||
</div>
|
||||
<div class="text-gray-dark mb-2">
|
||||
.text-gray-dark
|
||||
</div>
|
||||
<div class="text-gray mb-2">
|
||||
.text-gray
|
||||
</div>
|
||||
<div class="text-gray-light mb-2">
|
||||
.text-gray-light
|
||||
</div>
|
||||
<div class="text-red mb-2">
|
||||
.text-red
|
||||
</div>
|
||||
<div class="text-orange mb-2">
|
||||
.text-orange
|
||||
</div>
|
||||
<div class="text-orange-light mb-2">
|
||||
.text-orange-light
|
||||
<span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
|
||||
</div>
|
||||
<div class="text-yellow mb-2">
|
||||
.text-yellow
|
||||
<span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
|
||||
</div>
|
||||
<div class="text-green mb-2">
|
||||
.text-green
|
||||
<span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
|
||||
</div>
|
||||
<div class="text-purple mb-2">
|
||||
.text-purple
|
||||
</div>
|
||||
```
|
||||
|
||||
### Text on colored backgrounds
|
||||
|
||||
```html live
|
||||
<div class="text-white bg-blue mb-2">
|
||||
.text-white on .bg-blue
|
||||
</div>
|
||||
<div class="bg-blue-light mb-2">
|
||||
.text-gray-dark on .bg-blue-light
|
||||
</div>
|
||||
<div class="text-white bg-red mb-2">
|
||||
.text-white on .bg-red
|
||||
</div>
|
||||
<div class="text-red bg-red-light mb-2">
|
||||
.text-red on .bg-red-light
|
||||
</div>
|
||||
<div class="bg-green-light mb-2">
|
||||
.text-gray-dark on .bg-green-light
|
||||
</div>
|
||||
<div class="bg-yellow-dark mb-2">
|
||||
.text-gray-dark on .bg-yellow-dark
|
||||
</div>
|
||||
<div class="bg-yellow mb-2">
|
||||
.text-gray-dark on .bg-yellow
|
||||
</div>
|
||||
<div class="bg-yellow-light mb-2">
|
||||
.text-gray-dark on .bg-yellow-light
|
||||
</div>
|
||||
<div class="text-white bg-purple mb-2">
|
||||
.text-white on .bg-purple
|
||||
</div>
|
||||
<div class="text-white bg-gray-dark mb-2">
|
||||
.text-white on .bg-gray-dark
|
||||
</div>
|
||||
<div class="bg-gray">
|
||||
.text-gray-dark on .bg-gray
|
||||
</div>
|
||||
```
|
||||
|
||||
### Text color utilities
|
||||
|
||||
<PaletteTable columns={textColumns}>
|
||||
<!-- TODO: Remove? -->
|
||||
<!--
|
||||
<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} key={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}
|
||||
@ -140,47 +211,4 @@ You can set the color inheritance on an element by using the `text-inherit` clas
|
||||
</PaletteTableFragment>
|
||||
))}
|
||||
</PaletteTable>
|
||||
|
||||
## White background
|
||||
|
||||
You can make a background explicitly white (`#fff`) with the `bg-white` utility:
|
||||
|
||||
```html live
|
||||
<div class="bg-gray-dark p-2">
|
||||
<span class="bg-white">.bg-white over .bg-gray-dark</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Link colors
|
||||
|
||||
Base link styles turn links blue and apply an underline on hover. You can override the base link styles with text color utilities and the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
|
||||
|
||||
Use `link-gray` to turn the link color to `$text-gray` and remain hover on blue.
|
||||
|
||||
```html live
|
||||
<a class="link-gray" href="#url">link-gray</a>
|
||||
```
|
||||
|
||||
Use `link-gray-dark` to turn the link color to `$text-gray-dark` and remain hover on blue.
|
||||
|
||||
```html live
|
||||
<a class="link-gray-dark" href="#url">link-gray-dark</a>
|
||||
```
|
||||
|
||||
Use `.muted-link` to turn the link light gray in color, and blue on hover or focus with no underline.
|
||||
|
||||
```html live
|
||||
<a class="muted-link" href="#url">muted-link</a>
|
||||
```
|
||||
|
||||
Use `link-hover-blue` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
|
||||
|
||||
```html live
|
||||
<a class="text-gray-dark no-underline" href="#url">
|
||||
A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
|
||||
</a>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Border colors are documented on the [border utilities page](../utilities/borders#border-width-style-and-color-utilities).
|
||||
-->
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Details
|
||||
path: utilities/details
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/master/src/utilities/details.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/details.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Flexbox
|
||||
path: utilities/flexbox
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/157'
|
||||
source: 'https://github.com/primer/css/blob/master/src/utilities/flexbox.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/flexbox.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
@ -91,10 +91,10 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
|
||||
|
||||
### Example using `.flex-column-reverse`
|
||||
|
||||
This example uses the responsive variant `.flex-md-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
This example uses the responsive variant `.flex-sm-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-md-column-reverse">
|
||||
<div class="border d-flex flex-column flex-sm-column-reverse">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
<div class="p-5 border bg-gray-light">Item 3</div>
|
||||
@ -103,10 +103,10 @@ This example uses the responsive variant `.flex-md-column-reverse` to override `
|
||||
|
||||
### Example using `.flex-row`
|
||||
|
||||
This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
This example uses the responsive variant `.flex-sm-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-md-row">
|
||||
<div class="border d-flex flex-column flex-sm-row">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
<div class="p-5 border bg-gray-light">Item 3</div>
|
||||
@ -115,10 +115,10 @@ This example uses the responsive variant `.flex-md-row` to override `.flex-colum
|
||||
|
||||
### Example using `.flex-row-reverse`
|
||||
|
||||
This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
This example uses the responsive variant `.flex-sm-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-md-row-reverse">
|
||||
<div class="border d-flex flex-column flex-sm-row-reverse">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
<div class="p-5 border bg-gray-light">Item 3</div>
|
||||
@ -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.
|
||||
@ -541,7 +559,7 @@ Add `.flex-grow-0` to prevent an item from growing. This can be useful when used
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light">flex item</div>
|
||||
<div class="p-5 border bg-gray-light flex-auto flex-md-grow-0">.flex-auto .flex-md-grow-0</div>
|
||||
<div class="p-5 border bg-gray-light flex-auto flex-sm-grow-0">.flex-auto .flex-sm-grow-0</div>
|
||||
<div class="p-5 border bg-gray-light">flex item</div>
|
||||
</div>
|
||||
```
|
||||
@ -681,7 +699,7 @@ Resize window to see the effect.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-order-1 flex-md-order-none">1. .flex-order-1 .flex-md-order-none</div>
|
||||
<div class="p-5 border bg-gray-light flex-order-1 flex-sm-order-none">1. .flex-order-1 .flex-sm-order-none</div>
|
||||
<div class="p-5 border bg-gray-light">2.</div>
|
||||
<div class="p-5 border bg-gray-light">3.</div>
|
||||
</div>
|
||||
@ -718,8 +736,8 @@ Each responsive style is applied to the specified breakpoint and up.
|
||||
Mixing flex properties:
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start flex-md-items-center flex-justify-start flex-lg-justify-between">
|
||||
<div class="p-5 border bg-gray-light flex-md-self-stretch">.flex-self-stretch</div>
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start flex-sm-items-center flex-justify-start flex-lg-justify-between">
|
||||
<div class="p-5 border bg-gray-light flex-sm-self-stretch">.flex-self-stretch</div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
</div>
|
||||
@ -745,14 +763,14 @@ You can use flex utilities to make a simple media object, like this:
|
||||
Here is an example of a media object that is **vertically centered on large screens**, but converts to a stacked column layout on small screens.
|
||||
|
||||
```html live
|
||||
<div class="border p-3 d-flex flex-column flex-md-row flex-md-items-center">
|
||||
<div class="pr-0 pr-md-3 mb-3 mb-md-0 d-flex flex-justify-center flex-md-justify-start">
|
||||
<div class="border p-3 d-flex flex-column flex-sm-row flex-sm-items-center">
|
||||
<div class="pr-0 pr-sm-3 mb-3 mb-sm-0 d-flex flex-justify-center flex-sm-justify-start">
|
||||
<img style="max-width:100px; max-height:100px;" src="https://github.com/github.png" />
|
||||
</div>
|
||||
<div class="d-flex text-center text-md-left">
|
||||
<div class="d-flex text-center text-sm-left">
|
||||
<p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
|
||||
</div>
|
||||
<div class="ml-md-3 d-flex flex-justify-center">
|
||||
<div class="ml-sm-3 d-flex flex-justify-center">
|
||||
<!-- <%= octicon "mark-github", :height => '32' %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
@ -761,7 +779,7 @@ Here is an example of a media object that is **vertically centered on large scre
|
||||
|
||||
## Flexbox bugs
|
||||
|
||||
This section lists flexbox bugs that affect [browsers we currently support](https://github.com/primer/css/blob/master/.browserslistrc).
|
||||
This section lists flexbox bugs that affect [browsers we currently support](https://github.com/primer/css/blob/main/.browserslistrc).
|
||||
|
||||
1. **Minimum content sizing of flex items not honored.** Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using `d-flex`. This can be applied with the `flex-shrink-0` utility. For more information read [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored).
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Layout
|
||||
path: utilities/layout
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/master/src/utilities/layout.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/layout.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
@ -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._
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Margin
|
||||
path: utilities/margin
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/master/src/utilities/margin.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/margin.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -3,7 +3,7 @@ title: Marketing borders (deprecated)
|
||||
sort_title: Borders Marketing
|
||||
path: utilities/marketing-borders
|
||||
status: Deprecated
|
||||
source: 'https://github.com/primer/css/blob/master/src/marketing/utilities/borders.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/borders.scss'
|
||||
bundle: marketing-utilities
|
||||
---
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Marketing Filters
|
||||
path: utilities/marketing-filters
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/302'
|
||||
source: 'https://github.com/primer/css/blob/master/src/marketing/utilities/filters.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/filters.scss'
|
||||
bundle: marketing-utilities
|
||||
---
|
||||
|
||||
|
||||
@ -3,13 +3,13 @@ title: Marketing Layout
|
||||
sort_title: Layout Marketing
|
||||
path: utilities/marketing-layout
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/master/src/marketing/utilities/layout.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/layout.scss'
|
||||
bundle: marketing-utilities
|
||||
---
|
||||
|
||||
Marketing layout utilities build on top of [primer-core utilities](/utilities/layout#position), adding the option of responsive positioning.
|
||||
|
||||
|
||||
|
||||
|
||||
## Position elements with spacing utilities
|
||||
|
||||
|
||||
@ -4,13 +4,13 @@ sort_title: Margin Marketing
|
||||
path: utilities/marketing-margin
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/378'
|
||||
source: 'https://github.com/primer/css/blob/master/src/marketing/utilities/margin.scss'
|
||||
source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/margin.scss'
|
||||
bundle: marketing-utilities
|
||||
---
|
||||
|
||||
Marketing margin utilities extend [core margin utilities](/utilities/margin). The [marketing scale](/support/marketing-variables#extended-spacing-scale) starts from spacer `7` up to `12`.
|
||||
|
||||
**Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
|
||||
**Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
|
||||
|
||||
```html live
|
||||
<div class="bg-yellow d-inline-block"><div class="mt-7 p-1 bg-gray">.mb-7</div></div>
|
||||
|
||||
@ -4,7 +4,7 @@ sort_title: Padding Marketing
|
||||
path: utilities/marketing-padding
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/378'
|
||||
source: 'https://github.com/primer/css/tree/master/src/marketing/utilities/padding.scss'
|
||||
source: 'https://github.com/primer/css/tree/main/src/marketing/utilities/padding.scss'
|
||||
bundle: marketing-utilities
|
||||
---
|
||||
|
||||
@ -14,7 +14,7 @@ Marketing padding utilities extend [core padding utilities](/utilities/padding).
|
||||
<div class="pt-7 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div>
|
||||
<div class="pt-8 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div>
|
||||
<div class="pt-9 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div>
|
||||
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
|
||||
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-10</div></div>
|
||||
<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div>
|
||||
<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div>
|
||||
```
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
title: Marketing Typography
|
||||
path: utilities/marketing-type
|
||||
status: New
|
||||
source: 'https://github.com/primer/css/tree/master/src/marketing/type'
|
||||
source: 'https://github.com/primer/css/tree/main/src/marketing/type'
|
||||
bundle: marketing-type
|
||||
---
|
||||
|
||||
The typography for our marketing pages differs from Primer CSS's core—it is responsive, on a slightly different scale, and headlines are set in the [defined marketing font](https://github.com/primer/css/blob/master/src/marketing/support/variables.scss).
|
||||
The typography for our marketing pages differs from Primer CSS's core—it is responsive, on a slightly different scale, and headlines are set in the [defined marketing font](https://github.com/primer/css/blob/main/src/marketing/support/variables.scss).
|
||||
|
||||
## Heading Utilities
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Padding
|
||||
path: utilities/padding
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/utilities/padding.scss'
|
||||
source: 'https://github.com/primer/css/tree/main/src/utilities/padding.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Typography
|
||||
path: utilities/typography
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/utilities/typography.scss'
|
||||
source: 'https://github.com/primer/css/tree/main/src/utilities/typography.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
@ -80,6 +80,8 @@ Change the line height density with these utilities. Responsive variants are als
|
||||
<p class="lh-condensed-ultra">
|
||||
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
|
||||
</p>
|
||||
|
||||
<style>.frame-example {height:350px;}</style>
|
||||
```
|
||||
|
||||
The `lh-0` utility class sets `line-height: 0 !important`, and can be used to remove vertical spacing from elements that inherit line-height but don't contain any text.
|
||||
|
||||
19207
docs/package-lock.json
generated
19207
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/octicons": "^9.1.1",
|
||||
"@primer/octicons-react": "^9.1.1",
|
||||
"@primer/gatsby-theme-doctocat": "^1.6.0",
|
||||
"@primer/octicons": "^11.0.0",
|
||||
"@primer/octicons-react": "^11.0.0",
|
||||
"@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",
|
||||
|
||||
@ -1,13 +1,41 @@
|
||||
import React from 'react'
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/index.scss'
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/docs.scss'
|
||||
import {Flex} from '@primer/components'
|
||||
import {Frame} from '@primer/gatsby-theme-doctocat'
|
||||
import {MoonIcon, SunIcon} from '@primer/octicons-react'
|
||||
import React from 'react'
|
||||
|
||||
function LivePreviewWrapper({children}) {
|
||||
const [colorMode, setColorModeState] = React.useState('light')
|
||||
|
||||
const setColorMode = mode => {
|
||||
window.dispatchEvent(new CustomEvent('color-mode-change', {detail: {mode}}))
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
const callback = e => setColorModeState(e.detail.mode)
|
||||
window.addEventListener('color-mode-change', callback)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('color-mode-change', callback)
|
||||
}
|
||||
}, [setColorModeState])
|
||||
|
||||
return (
|
||||
<Frame>
|
||||
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
|
||||
<style>{primerStyles}</style>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
<div data-color-mode={colorMode} data-light-theme="light" data-dark-theme="dark">
|
||||
<Flex pt={2} px={2} justifyContent="flex-end">
|
||||
<button
|
||||
className="btn"
|
||||
aria-label={colorMode === 'light' ? 'Activate dark mode' : 'Activate light mode'}
|
||||
onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
|
||||
>
|
||||
{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
|
||||
</button>
|
||||
</Flex>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
</Frame>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
children:
|
||||
- title: Contributing
|
||||
url: /getting-started/contributing
|
||||
- title: Theming
|
||||
url: /getting-started/theming
|
||||
- title: Support
|
||||
url: /support
|
||||
children:
|
||||
@ -91,6 +93,8 @@
|
||||
url: /components/header
|
||||
- title: Labels
|
||||
url: /components/labels
|
||||
- title: Links
|
||||
url: /components/links
|
||||
- title: Loaders
|
||||
url: /components/loaders
|
||||
- title: Markdown
|
||||
|
||||
@ -1,11 +1,82 @@
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../src/docs.scss'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import chroma from 'chroma-js'
|
||||
import styled from 'styled-components'
|
||||
import {Box, Text} from '@primer/components'
|
||||
import {colors, getPaletteByName} from './color-variables'
|
||||
import {Frame} from '@primer/gatsby-theme-doctocat'
|
||||
import {Box, Flex, Text} from '@primer/components'
|
||||
import {colors, colorModes, getPaletteByName} from './color-variables'
|
||||
import Table from './table'
|
||||
|
||||
function LivePreviewWrapper({children}) {
|
||||
return (
|
||||
<Frame>
|
||||
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
|
||||
<style>{primerStyles}</style>
|
||||
<Flex direction="row">
|
||||
<div data-color-mode="light" data-light-theme="light" style={{flex: 1}}>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" style={{flex: 1}}>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Frame>
|
||||
)
|
||||
}
|
||||
|
||||
function capitalize(word) {
|
||||
return word[0].toUpperCase() + word.substr(1)
|
||||
}
|
||||
|
||||
export function CSSModeVars({filter, vars, render}) {
|
||||
const filteredVars = vars.filter(s => s.match(filter))
|
||||
|
||||
return (
|
||||
<LivePreviewWrapper>
|
||||
{filteredVars.map(variable => (
|
||||
<div key={variable}>{render(variable)}</div>
|
||||
))}
|
||||
</LivePreviewWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export function ColorModeTable({baseColor, values, ...rest}) {
|
||||
const fgColor = overlayColor(baseColor)
|
||||
const colorProps = {bg: baseColor, color: fgColor}
|
||||
|
||||
return (
|
||||
<Table {...rest}>
|
||||
<thead>
|
||||
<tr>
|
||||
<PaletteCell as="th" {...colorProps}>
|
||||
Variable
|
||||
</PaletteCell>
|
||||
{colorModes.map(mode => (
|
||||
<PaletteCell as="th" {...colorProps} key={mode}>
|
||||
{capitalize(mode)} Mode
|
||||
</PaletteCell>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{values.map(({variable, slug, values}) => (
|
||||
<tr key={slug}>
|
||||
<PaletteCell {...colorProps}>
|
||||
<Var>{variable}</Var>
|
||||
</PaletteCell>
|
||||
{Object.keys(values).map(mode => (
|
||||
<PaletteCell key={mode} bg={values[mode]} color={overlayColor(values[mode])}>
|
||||
<Var>{values[mode]}</Var>
|
||||
</PaletteCell>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
|
||||
export function PaletteTable(props) {
|
||||
const {columns = [], hasHeader, ...rest} = props
|
||||
const {children = <PaletteTableFragment columns={columns} {...rest} />} = rest
|
||||
@ -45,7 +116,7 @@ export function PaletteTableFragment(props) {
|
||||
const cellProps = {type, ...row}
|
||||
const valueProps = {prefix, type, ...row}
|
||||
return (
|
||||
<tr key={row.value}>
|
||||
<tr key={row.slug}>
|
||||
{cols.map(({Cell = PaletteCell, Value = PaletteValue, title}) => (
|
||||
<Cell key={title} {...cellProps}>
|
||||
<Value {...valueProps} />
|
||||
@ -97,9 +168,7 @@ PaletteCell.defaultProps = {
|
||||
as: 'td'
|
||||
}
|
||||
|
||||
PaletteCell.propTypes = {
|
||||
value: PropTypes.string.isRequired
|
||||
}
|
||||
PaletteCell.propTypes = {}
|
||||
|
||||
PaletteCell.Alias = ({aliases, type, ...rest}) =>
|
||||
aliases && aliases[type] ? (
|
||||
@ -144,7 +213,7 @@ export function PaletteValue({value, ...rest}) {
|
||||
return <Var {...rest}>{value}</Var>
|
||||
}
|
||||
|
||||
PaletteValue.Variable = ({variable}) => <Var>${variable}</Var>
|
||||
PaletteValue.Variable = ({variable}) => <Var>var({variable})</Var>
|
||||
PaletteValue.Variable.propTypes = {
|
||||
variable: PropTypes.string.isRequired
|
||||
}
|
||||
@ -214,9 +283,13 @@ export function overlayColor(bg) {
|
||||
if ($overlayColorCache.has(bg)) {
|
||||
return $overlayColorCache.get(bg)
|
||||
} else {
|
||||
const result = chroma(bg).luminance() > 0.5 ? colors.black : colors.white
|
||||
$overlayColorCache.set(bg, result)
|
||||
return result
|
||||
try {
|
||||
const result = chroma(bg).luminance() > 0.5 ? colors.black : colors.white
|
||||
$overlayColorCache.set(bg, result)
|
||||
return result
|
||||
} catch (err) {
|
||||
return 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,66 +1,71 @@
|
||||
import titleCase from 'title-case'
|
||||
import primerColors from 'primer-colors'
|
||||
import allModeColors from '@primer/primitives/dist/js/colors'
|
||||
|
||||
import colorSystemSCSS from '!!raw-loader!../../src/support/variables/color-system.scss'
|
||||
import colorVariablesSCSS from '!!raw-loader!../../src/support/variables/colors.scss'
|
||||
|
||||
const variables = {}
|
||||
|
||||
parseSCSSVariables(colorSystemSCSS, variables)
|
||||
parseSCSSVariables(colorVariablesSCSS, variables)
|
||||
// TODO: Remove? Not sure if still needed?
|
||||
// The `../../src/support/variables/colors.scss` file got removed since all color variables are now in primer/primitives.
|
||||
// import colorVariablesSCSS from '!!raw-loader!../../src/support/variables/colors.scss'
|
||||
|
||||
// XXX we don't necessarily define them in this order in primer-colors,
|
||||
// so we define an array here just to be safe
|
||||
const gradientHues = ['gray', 'blue', 'green', 'purple', 'yellow', 'orange', 'red', 'pink']
|
||||
|
||||
const colors = {
|
||||
...primerColors,
|
||||
pink: Object.keys(variables)
|
||||
.filter(key => key.startsWith('pink-'))
|
||||
.sort()
|
||||
.map(key => variables[key])
|
||||
}
|
||||
const colors = allModeColors.light.scale
|
||||
|
||||
const aliases = {}
|
||||
const variables = {}
|
||||
|
||||
// TODO: Remove? Not sure if still needed?
|
||||
// parseSCSSVariables(colorVariablesSCSS, variables)
|
||||
|
||||
const colorModes = Object.keys(allModeColors).sort((a, b) => {
|
||||
if (a.startsWith('light') && !b.startsWith('light')) return -1
|
||||
if (!a.startsWith('light') && b.startsWith('light')) return 1
|
||||
else return a.localeCompare(b)
|
||||
})
|
||||
|
||||
const palettes = gradientHues.map(name => {
|
||||
return {
|
||||
name,
|
||||
title: titleCase(name),
|
||||
value: variables[name] || colors[name][5],
|
||||
value: colors[name][5],
|
||||
values: colors[name].map((value, index) => ({
|
||||
value,
|
||||
values: colorModes.reduce((acc, mode) => {
|
||||
acc[mode] = allModeColors[mode].scale[name][index]
|
||||
return acc
|
||||
}, {}),
|
||||
index,
|
||||
variable: `${name}-${index}00`,
|
||||
slug: `${name}-${index}`,
|
||||
aliases: (aliases[value] = {})
|
||||
variable: `--color-scale-${name}-${index}`,
|
||||
slug: `color-scale-${name}-${index}`,
|
||||
aliases: {}
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
||||
for (const key of Object.keys(variables)) {
|
||||
const match = key.match(/^(bg|text|border)-(\w+)(-(dark|light))?$/)
|
||||
const value = variables[key]
|
||||
if (match && aliases[value]) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, type, name, suffix] = match
|
||||
aliases[value][type] = key
|
||||
}
|
||||
}
|
||||
export {colors, colorModes, gradientHues, palettes, getPaletteByName}
|
||||
|
||||
export {colors, gradientHues, palettes, getPaletteByName, variables}
|
||||
export const flattened = colorModes.reduce((acc, mode) => {
|
||||
acc[mode] = flattenVars(allModeColors[mode])
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
export const functionalVarNames = Object.keys(flattened.light).filter(
|
||||
v => !v.startsWith('scale-') && !v.startsWith('auto-')
|
||||
)
|
||||
|
||||
export const allColors = palettes.reduce((all, {values}) => all.concat(values), [])
|
||||
|
||||
export const borders = Object.keys(variables)
|
||||
.filter(key => key.startsWith('border-') && !variables[key].includes('$'))
|
||||
.sort()
|
||||
.map(key => ({
|
||||
variable: key,
|
||||
value: variables[key],
|
||||
slug: key,
|
||||
aliases: {border: key}
|
||||
}))
|
||||
// TODO: fix the borders code
|
||||
//
|
||||
// export const borders = Object.keys(variables)
|
||||
// // 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,
|
||||
// value: variables[key],
|
||||
// slug: key,
|
||||
// aliases: {border: key}
|
||||
// }))
|
||||
|
||||
function getPaletteByName(name) {
|
||||
return palettes.find(palette => palette.name === name)
|
||||
@ -74,8 +79,36 @@ function parseSCSSVariables(scssString, variables = {}) {
|
||||
if (match) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, name, value] = match
|
||||
variables[name] = value.startsWith('$') ? variables[value.substr(1)] : value
|
||||
variables[name] = value.startsWith('$') ? variables[value.substr(1)] || value : value
|
||||
}
|
||||
} while (match)
|
||||
return variables
|
||||
}
|
||||
|
||||
function flattenVars(tree, prefix = []) {
|
||||
let output = {}
|
||||
|
||||
for (const key of Object.keys(tree)) {
|
||||
const val = tree[key]
|
||||
const varName = [...prefix, key].map(dasherize).join('-')
|
||||
if (Array.isArray(val) && !varName.includes('shadow')) {
|
||||
for (const i in val) {
|
||||
const arrayVarName = `${varName}-${i}`
|
||||
output[arrayVarName] = val[i]
|
||||
}
|
||||
} else if (Array.isArray(val)) {
|
||||
output[varName] = val.join(' ')
|
||||
} else if (typeof val === 'object') {
|
||||
const obj = flattenVars(val, [...prefix, key])
|
||||
output = {...output, ...obj}
|
||||
} else {
|
||||
output[varName] = val
|
||||
}
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
function dasherize(str) {
|
||||
return str.replace(/([A-Z])/g, (m, r) => `-${r.toLowerCase()}`).replace(/^-/, '')
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import {Flex, Link, Text, Tooltip, Flash} from '@primer/components'
|
||||
import Octicon, {Alert} from '@primer/octicons-react'
|
||||
import Octicon, {AlertIcon} from '@primer/octicons-react'
|
||||
import themeGet from '@styled-system/theme-get'
|
||||
import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table'
|
||||
import styled from 'styled-components'
|
||||
@ -107,7 +107,7 @@ function VariablesDetails({variablesByFile, ...props}) {
|
||||
return Array.from(variablesByFile.entries()).map(([path, variables]) => (
|
||||
<React.Fragment key={path}>
|
||||
<h3>
|
||||
Defined in <Link href={`https://github.com/primer/css/tree/master/${path}`}>{path}</Link>
|
||||
Defined in <Link href={`https://github.com/primer/css/tree/main/${path}`}>{path}</Link>
|
||||
</h3>
|
||||
<Table {...props}>
|
||||
<thead>
|
||||
@ -126,7 +126,7 @@ function VariablesDetails({variablesByFile, ...props}) {
|
||||
#
|
||||
</Link>
|
||||
<Flex.Item flex="1">
|
||||
<Link href={`https://github.com/primer/css/tree/master/${source.path}#L${source.line}`}>
|
||||
<Link href={`https://github.com/primer/css/tree/main/${source.path}#L${source.line}`}>
|
||||
<Mono nowrap>{name}</Mono>
|
||||
</Link>
|
||||
</Flex.Item>
|
||||
@ -198,7 +198,7 @@ function DeprecationFlag({variable, ...rest}) {
|
||||
function DeprecationIcon() {
|
||||
return (
|
||||
<Text color="red.5">
|
||||
<Octicon icon={Alert} />
|
||||
<Octicon icon={AlertIcon} />
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
9487
package-lock.json
generated
9487
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
29
package.json
29
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "14.4.0",
|
||||
"version": "16.0.2",
|
||||
"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.",
|
||||
@ -28,7 +28,6 @@
|
||||
"stylelint": "stylelint --quiet src",
|
||||
"eslint": "eslint script deprecations.js lib .storybook",
|
||||
"eslint-docs": "eslint docs/{content,src,*.js}",
|
||||
"postpublish": "script/postpublish",
|
||||
"prepublishOnly": "script/prepublish",
|
||||
"publish-storybook": "script/publish-storybook",
|
||||
"start": "npm run dev",
|
||||
@ -37,18 +36,22 @@
|
||||
"build-storybook": "build-storybook -o .storybuild",
|
||||
"test": "npm-run-all -s test-urls test-migrate",
|
||||
"test-urls": "script/test-doc-urls.js",
|
||||
"test-migrate": "script/test-migrate"
|
||||
"test-migrate": "script/test-migrate",
|
||||
"release": "changeset publish"
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/octicons": "^9.1.1"
|
||||
"@primer/octicons": "^9.1.1",
|
||||
"@primer/primitives": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@changesets/changelog-github": "^0.3.0",
|
||||
"@changesets/cli": "^2.14.1",
|
||||
"@octokit/rest": "^16.34.0",
|
||||
"@storybook/addon-viewport": "5.3.18",
|
||||
"@storybook/react": "5.3.18",
|
||||
"autoprefixer": "9.4.7",
|
||||
"autoprefixer": "9.8.6",
|
||||
"code-blocks": "^1.1.0",
|
||||
"colorette": "^1.1.0",
|
||||
"colorette": "^1.2.1",
|
||||
"css-loader": "1.0.0",
|
||||
"cssstats": "3.3.0",
|
||||
"details-dialog-element": "^1.4.0",
|
||||
@ -62,21 +65,19 @@
|
||||
"minimist": "1.2.3",
|
||||
"node-fetch": "2.4.0",
|
||||
"npm-run-all": "4.1.5",
|
||||
"postcss": "7.0.14",
|
||||
"postcss": "7.0.32",
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-load-config": "2.0.0",
|
||||
"postcss-loader": "^2.0.6",
|
||||
"postcss-load-config": "2.1.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-node-sass": "2.1.8",
|
||||
"postcss-scss": "2.0.0",
|
||||
"postcss-value-parser": "^4.0.2",
|
||||
"postcss-scss": "2.1.1",
|
||||
"postcss-value-parser": "^4.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"semantic-release": "^15.13.27",
|
||||
"semver": "5.7.1",
|
||||
"stream-buffers": "^3.0.2",
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "4.1.2",
|
||||
"stylelint": "^10.1.0",
|
||||
"stylelint-config-primer": "^9.0.0",
|
||||
"stylelint-config-primer": "^9.2.1",
|
||||
"stylelint-disable": "^0.1.5",
|
||||
"stylelint-only": "^1.0.1",
|
||||
"stylelint-scss": "^3.12.0",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
parser: 'postcss-scss',
|
||||
map: {
|
||||
@ -6,7 +8,7 @@ module.exports = {
|
||||
},
|
||||
plugins: {
|
||||
'postcss-node-sass': {
|
||||
includePaths: ['node_modules'],
|
||||
includePaths: [path.join(__dirname, 'node_modules')],
|
||||
outputStyle: 'compressed'
|
||||
},
|
||||
'autoprefixer': {}
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = {
|
||||
dryRun: true,
|
||||
plugins: ['./lib/semantic-release-plugin']
|
||||
}
|
||||
@ -33,13 +33,17 @@ function analyzeVariables(file) {
|
||||
if (last(entry.values) !== value) {
|
||||
entry.values.push(value)
|
||||
}
|
||||
variables[actualProp] = Object.assign(
|
||||
{
|
||||
computed: value
|
||||
},
|
||||
entry,
|
||||
{refs: []}
|
||||
)
|
||||
if (value.match(/^var\(--.*\)/)) {
|
||||
delete variables[actualProp]
|
||||
} else {
|
||||
variables[actualProp] = Object.assign(
|
||||
{
|
||||
computed: value
|
||||
},
|
||||
entry,
|
||||
{refs: []}
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
const semanticRelease = require('semantic-release')
|
||||
const {spawnSync} = require('child_process')
|
||||
const {WritableStreamBuffer} = require('stream-buffers')
|
||||
|
||||
const branch = getBranch()
|
||||
const options = {branch, dryRun: true}
|
||||
|
||||
console.warn(`Running semantic-release with options: ${JSON.stringify(options)}...`)
|
||||
|
||||
semanticRelease(options, {
|
||||
stdout: new WritableStreamBuffer(),
|
||||
stderr: new WritableStreamBuffer()
|
||||
})
|
||||
.then(result => {
|
||||
const {
|
||||
nextRelease: {version, notes}
|
||||
} = result
|
||||
console.warn(`Release ${version} notes:\n`)
|
||||
console.log(notes)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error.message)
|
||||
process.exitCode = 1
|
||||
})
|
||||
|
||||
function getBranch() {
|
||||
const {GITHUB_REF} = process.env
|
||||
if (GITHUB_REF) {
|
||||
return GITHUB_REF.replace(/^refs\/heads\//, '')
|
||||
} else {
|
||||
return spawnSync('git', ['symbolic-ref', '--short', 'HEAD'], {encoding: 'utf8'}).stdout.trim()
|
||||
}
|
||||
}
|
||||
@ -55,7 +55,7 @@ async function dist() {
|
||||
writeFile(to, result.css, encoding),
|
||||
writeFile(meta.stats, JSON.stringify(cssstats(result.css)), encoding),
|
||||
writeFile(meta.js, `module.exports = {cssstats: require('./stats/${name}.json')}`, encoding),
|
||||
result.map ? writeFile(meta.map, result.map, encoding) : null
|
||||
result.map ? writeFile(meta.map, result.map.toString(), encoding) : null
|
||||
])
|
||||
bundles[name] = meta
|
||||
})
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user