mirror of
https://github.com/primer/css.git
synced 2024-09-11 16:36:07 +03:00
Merge remote-tracking branch 'origin/master' into doctocat
This commit is contained in:
Cole Bemis
commit
b8c331741b
@ -1,2 +1,3 @@
|
||||
<link rel="stylesheet" href="https://unpkg.com/octicons@8.5.0/build/build.css">
|
||||
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css">
|
||||
<script src="https://github.com/site/assets/styleguide.js" async></script>
|
||||
|
||||
22
DEVELOP.md
22
DEVELOP.md
@ -36,7 +36,7 @@ The typical Primer workflow looks something like this:
|
||||
Run `npm install` to install the npm dependencies.
|
||||
|
||||
## Docs site
|
||||
The Primer CSS docs are built with React using [Primer Components](https://primer.style/components) and automatically deployed on every push to this repo using our [primer/deploy action](/primer/deploy). You can run the server locally with:
|
||||
The Primer CSS docs are built with React using [Primer Components](https://primer.style/components) and automatically deployed on every push to this repo with [Now]. You can run the server locally with:
|
||||
|
||||
```sh
|
||||
npm start
|
||||
@ -73,29 +73,27 @@ This should open up the site in your browser (if not, navigate to `http://localh
|
||||
### Code blocks
|
||||
All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
|
||||
|
||||
Note: At this time, we do not load any stories from `src/**/stories.js`.
|
||||
|
||||
## Scripts
|
||||
Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS, notably:
|
||||
Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
|
||||
|
||||
* `fresh` does a "fresh" npm install (like `npm install -f`)
|
||||
* `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
|
||||
* `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
|
||||
* `lint` lints all of our SCSS source files.
|
||||
* `lint-js` lints the docs site and supporting scripts.
|
||||
* `lint` lints both our SCSS and JavaScript source files.
|
||||
* `lint-css` lints our SCSS source files.
|
||||
* `lint-js` lints the JavaScript source files.
|
||||
* `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
|
||||
* `test-urls` compares a (pre-generated) list of paths from the [Primer Style Guide](https://styleguide.github.com/primer/) to files in `pages/css`, and lets us know if we've inadvertently deleted or renamed anything.
|
||||
* `start` runs the documentation site locally (alias: `dev`).
|
||||
* `test-urls` compares a (pre-generated) list of paths from the **deprecated** [Primer Style Guide](https://styleguide.github.com/primer/) to files in `pages/css`, and lets us know if we've inadvertently deleted or renamed anything.
|
||||
* `test-migrate` tests the [`primer-migrate`](MIGRATING.md#primer-migrate) command line utility.
|
||||
* `watch` runs the sync script in watch mode, copying files as they're changed from `src/` to `pages/css/`.
|
||||
|
||||
You can list all of the available scripts with:
|
||||
|
||||
```sh
|
||||
npm run
|
||||
```
|
||||
The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
|
||||
|
||||
|
||||
[@primer/css]: https://www.npmjs.com/package/@primer/css
|
||||
[run-scripts]: https://docs.npmjs.com/cli/run-script
|
||||
[storybook]: https://storybook.js.org/
|
||||
[now]: https://zeit.co/now
|
||||
[npm]: https://www.npmjs.com/
|
||||
[npx]: https://www.npmjs.com/package/npx
|
||||
|
||||
@ -14,8 +14,11 @@ Wrap some content in the outer `.blankslate` wrapper to give it the blankslate a
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -46,6 +49,7 @@ Narrows the blankslate container to not occupy the entire available width.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-narrow">
|
||||
<<<<<<< HEAD:docs/content/components/blankslate.md
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
@ -57,8 +61,11 @@ Removes the `border-radius` on the top corners.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-capped">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -68,8 +75,11 @@ Significantly increases the vertical padding.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-spacious">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -79,18 +89,42 @@ Increases the size of the text in the blankslate
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-large">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
<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>
|
||||
```
|
||||
|
||||
##### No background
|
||||
##### Add border
|
||||
|
||||
Removes the `background-color` and `border`.
|
||||
To add a border, wrap the blankstate component with the [Box component](/css/components/box).
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-clean-background">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
```html
|
||||
<div class="Box">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Capped
|
||||
|
||||
Removes the `border-radius` on the top corners.
|
||||
|
||||
```html
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
```
|
||||
|
||||
105
docs/content/components/header.md
Normal file
105
docs/content/components/header.md
Normal file
@ -0,0 +1,105 @@
|
||||
---
|
||||
title: Header
|
||||
path: components/header
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/header'
|
||||
bundle: header
|
||||
---
|
||||
|
||||
Use the Header component to create a header that has all of it's items aligned vertically with consistent horizontal spacing.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
## Header
|
||||
|
||||
The `.Header` class is the wrapping class that aligns all the items properly and gives the header it's dark background. Each direct child of the `.Header` component is expected to be a `.Header-item` component. The component utilizes flexbox CSS to align all these items properly and applies spacing scale margin.
|
||||
|
||||
```html title="Header"
|
||||
<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 %>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
<div class="Header-item">
|
||||
<input type="search" class="form-control input-dark" />
|
||||
</div>
|
||||
<div class="Header-item Header-item--full">
|
||||
Menu
|
||||
</div>
|
||||
<div class="Header-item mr-0">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://github.com/octocat.png" width="20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
## Header-item
|
||||
|
||||
All items directly under the `.Header` component should be a `.Header-item` component. Inside these components can be anything (text, forms, images...), and the `.Header-item` component will make sure these elements vertically align with each other.
|
||||
|
||||
`.Header-item` elements have a built-in margin that will need to be overridden with the `mr-0` utility class for the last element in the container. We relied on the utility classes here instead of `:last-child` because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints.
|
||||
|
||||
```html title="Header-item"
|
||||
<div class="Header">
|
||||
<!-- Text item -->
|
||||
<div class="Header-item">
|
||||
Text item
|
||||
</div>
|
||||
|
||||
<!-- Form item -->
|
||||
<div class="Header-item">
|
||||
<input class="form-control input-dark" type="text"/>
|
||||
</div>
|
||||
|
||||
<!-- Image item -->
|
||||
<div class="Header-item">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://github.com/octocat.png" width="20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Header-item--full
|
||||
|
||||
The `.Header-item` element has a modifier class, `.Header-item--full`, that stretches it to fill the available space and push any remaining items to the right.
|
||||
|
||||
```html title="Header-item--full"
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
Item 1
|
||||
</div>
|
||||
|
||||
<!-- Full item stretches across -->
|
||||
<div class="Header-item Header-item--full border">
|
||||
Item 2
|
||||
</div>
|
||||
|
||||
<div class="Header-item mr-0 ">
|
||||
Item 3
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
## Header-link
|
||||
|
||||
Add the `.Header-link` class to any anchor tags in the header to give them consistent styling and hover opacity. This class makes the links white, bold and 70% fade on hover.
|
||||
|
||||
```html title="Header-link"
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link">About</a>
|
||||
</div>
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link">Releases</a>
|
||||
</div>
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link">Team</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -195,11 +195,12 @@ 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">
|
||||
<svg class="octicon octicon-octoface mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="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"></path></svg>
|
||||
<%= octicon "octoface", class: "mr-2" %>
|
||||
With an icon
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a status icon <svg class="octicon octicon-primitive-dot color-green-5 ml-2 float-right" viewBox="0 0 8 16" version="1.1" width="8" height="16" aria-hidden="true"><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"></path></svg>
|
||||
With a status icon
|
||||
<%= octicon "primitive-dot", class: "color-green-5 ml-2 float-right" %>
|
||||
</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>
|
||||
@ -233,11 +234,11 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t
|
||||
```html live
|
||||
<nav class="SideNav bg-gray-light border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
<svg class="SideNav-icon octicon octicon-person mr-2" viewBox="0 0 12 16" version="1.1" width="12" height="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"></path></svg>
|
||||
<%= octicon "person", class: "mr-2" %>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">
|
||||
<svg class="SideNav-icon octicon octicon-octoface mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="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"></path></svg>
|
||||
<%= octicon "octoface", class: "mr-2" %>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<nav class="SideNav bg-white border-top py-3 pl-6">
|
||||
@ -246,7 +247,7 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t
|
||||
<a class="SideNav-subItem" href="#url">Sub item 3</a>
|
||||
</nav>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<svg class="SideNav-icon octicon octicon-mail mr-2" viewBox="0 0 14 16" version="1.1" width="14" height="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"></path></svg>
|
||||
<%= octicon "mail", class: "mr-2" %>
|
||||
<span>Emails</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
@ -7,13 +7,14 @@ bundle: select-menu
|
||||
|
||||
The `SelectMenu` component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
|
||||
|
||||
|
||||
|
||||
## Basic example
|
||||
|
||||
Use a `<details>` element to toggle the Select Menu. The `<summary>` element can be styled in many ways. In the example below it's a `.btn`.
|
||||
|
||||
```html live
|
||||
<<<<<<< HEAD:docs/content/components/select-menu.md
|
||||
|
||||
````html live
|
||||
======= ```erb >>>>>>> origin/master:pages/css/components/select-menu.md
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -22,7 +23,9 @@ Use a `<details>` element to toggle the Select Menu. The `<summary>` element can
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
@ -33,9 +36,9 @@ Use a `<details>` element to toggle the Select Menu. The `<summary>` element can
|
||||
</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>
|
||||
```
|
||||
<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>
|
||||
````
|
||||
|
||||
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).
|
||||
|
||||
@ -45,7 +48,6 @@ In case the Select Menu should be aligned to the right, use `SelectMenu right-0`
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-end">
|
||||
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
Choose an item
|
||||
@ -54,7 +56,9 @@ In case the Select Menu should be aligned to the right, use `SelectMenu right-0`
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
@ -64,11 +68,10 @@ In case the Select Menu should be aligned to the right, use `SelectMenu right-0`
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
|
||||
<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-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>
|
||||
```
|
||||
|
||||
## Selected state
|
||||
@ -84,20 +87,19 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<svg class="SelectMenu-icon octicon octicon-check" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||
Selected state
|
||||
<%= octicon "check", class: "SelectMenu-icon" %> Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<svg class="SelectMenu-icon octicon octicon-check" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||
Default state
|
||||
<%= octicon "check", class: "SelectMenu-icon" %> Default state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<svg class="SelectMenu-icon octicon octicon-check" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||
Selected state
|
||||
<%= octicon "check", class: "SelectMenu-icon" %> Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
|
||||
@ -106,8 +108,8 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
|
||||
</div>
|
||||
</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-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>
|
||||
```
|
||||
|
||||
## List items
|
||||
@ -123,18 +125,26 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
Text only
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
<img class="avatar avatar-small mr-2" src="https://avatars.githubusercontent.com/hubot?s=40" alt="hubot" height="20" width="20">
|
||||
<img
|
||||
class="avatar avatar-small mr-2"
|
||||
src="https://avatars.githubusercontent.com/hubot?s=40"
|
||||
alt="hubot"
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
With an avatar
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
With a status icon <svg class="octicon octicon-primitive-dot color-green-5 ml-2" style="fill:currentColor" viewBox="0 0 8 16" version="1.1" width="8" height="16" aria-hidden="true"><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"></path></svg>
|
||||
With a status icon <%= octicon "primitive-dot", class: "color-green-5 ml-2" %>
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
With a <span class="Label bg-blue" title="Label: label">label</span>
|
||||
@ -151,8 +161,8 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
</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>
|
||||
<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>
|
||||
```
|
||||
|
||||
## Divider
|
||||
@ -168,7 +178,9 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
@ -182,8 +194,8 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
</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-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>
|
||||
```
|
||||
|
||||
## Additional filter and footer
|
||||
@ -201,7 +213,9 @@ Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for ad
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||
@ -255,10 +269,12 @@ Sometimes you need two or more lists of items in your Select Menu, e.g. branches
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter" />
|
||||
</form>
|
||||
<nav class="SelectMenu-tabs">
|
||||
<button class="SelectMenu-tab" aria-selected="true">Branches</button>
|
||||
@ -281,8 +297,8 @@ Sometimes you need two or more lists of items in your Select Menu, e.g. branches
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 380px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 380px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Message
|
||||
@ -298,7 +314,9 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
@ -310,8 +328,8 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 200px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 200px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Loading
|
||||
@ -327,14 +345,16 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter" />
|
||||
</form>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-loading">
|
||||
<svg height="32" class="octicon octicon-octoface anim-pulse" viewBox="0 0 16 16" version="1.1" width="32" 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"></path></svg>
|
||||
<%= octicon "octoface", class: "anim-pulse", width: 32 %>
|
||||
</div>
|
||||
</menu>
|
||||
<footer class="SelectMenu-footer">Loading...</footer>
|
||||
@ -342,8 +362,8 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 220px"> <!-- min height for > sm --> </div>
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 220px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Blankslate
|
||||
@ -359,11 +379,13 @@ Sometimes a Select Menu needs to communicate a "blank slate" where there's no co
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button"><svg class="octicon octicon-x" style="fill:currentColor" viewBox="0 0 12 16" version="1.1" width="12" height="16" 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"></path></svg></button>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<%= octicon "x" %>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-blankslate">
|
||||
<svg height="32" class="octicon octicon-repo color-gray-3" viewBox="0 0 12 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
|
||||
<%= octicon "repo", class: "color-gray-3", width: 24 %>
|
||||
<h4 class="my-2">No repositories</h4>
|
||||
<p class="mb-3 text-gray">We didn’t find any matching repositories that you can commit to.</p>
|
||||
<button type="button" class="btn btn-sm btn-primary">Create a repository</button>
|
||||
@ -373,8 +395,8 @@ Sometimes a Select Menu needs to communicate a "blank slate" where there's no co
|
||||
</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-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>
|
||||
```
|
||||
|
||||
## github.com usage
|
||||
@ -392,7 +414,7 @@ When adding the `.SelectMenu` component on github.com, use the [`<details-menu>`
|
||||
<header class="SelectMenu-header">
|
||||
<span class="SelectMenu-title">My Select Menu</span>
|
||||
<button class="SelectMenu-closeButton" type="button" data-toggle-for="my-select-menu">
|
||||
<%= octicon("x", :"aria-label" => "Close menu") %>
|
||||
<%= octicon("x", "aria-label": "Close menu") %>
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
@ -411,7 +433,7 @@ If loading content should be deferred, use the [`<include-fragment>`](https://gi
|
||||
<details-menu class="SelectMenu" src="/my-menu" preload>
|
||||
<div class="SelectMenu-modal">
|
||||
<include-fragment class="SelectMenu-loading" aria-label="Menu is loading">
|
||||
<%= octicon('octoface', class: "anim-pulse", :height => 32) %>
|
||||
<%= octicon("octoface", class: "anim-pulse", :height => 32) %>
|
||||
</include-fragment>
|
||||
</div>
|
||||
</details-menu>
|
||||
|
||||
@ -3,7 +3,7 @@ title: Getting started
|
||||
path: getting-started/index
|
||||
---
|
||||
|
||||
Primer CSS is [open-sourced on GitHub](https://github.com/primer/primer) and [available on npm](https://www.npmjs.com/package/primer).
|
||||
Primer CSS is [open-sourced on GitHub](https://github.com/primer/css) and [available on npm](https://www.npmjs.com/package/@primer/css).
|
||||
|
||||
## Installing via npm
|
||||
|
||||
|
||||
@ -25,15 +25,15 @@ Whether you work on `github/github` or not, it's useful to see lint errors local
|
||||
bin/stylelint "app/assets/stylesheets/**/*.scss" --syntax scss
|
||||
```
|
||||
|
||||
For more advanced usage, we recommend reading the [stylelint user guide](http://stylelint.io/user-guide/) and checking out our [primer stylelint configuration](https://github.com/primer/primer/tree/master/tools/stylelint-config-primer).
|
||||
For more advanced usage, we recommend reading the [stylelint user guide](http://stylelint.io/user-guide/) and checking out our [primer stylelint configuration](https://github.com/primer/stylelint-config-primer).
|
||||
|
||||
### Configuration
|
||||
|
||||
Stylelint is [configured by a JSON file](http://stylelint.io/user-guide/configuration/) that specifies which linter rules we enforce. If you are working on `github/github`, you don't need to do any setup because the configuration is included within the repository bundle.
|
||||
|
||||
We have extracted out our configuration file into a separate repository [primer/stylelint-config-primer](https://github.com/primer/primer/tree/master/tools/stylelint-config-primer). This gives us a central source where we can keep the configuration up-to-date and distribute easily across all our projects.
|
||||
We have extracted out our configuration file into a separate repository [primer/stylelint-config-primer](https://github.com/primer/stylelint-config-primer). This gives us a central source where we can keep the configuration up-to-date and distribute easily across all our projects.
|
||||
|
||||
To [use the configuration](https://github.com/primer/primer/tree/master/tools/stylelint-config-primer#usage) in your project, install the config `npm install --save stylelint-config-primer` via npm, and extend the config in your `.stylelintrc` file. Put the file in the root directory of your project.
|
||||
To [use the configuration](https://github.com/primer/stylelint-config-primer#usage) in your project, install the config `npm install --save stylelint-config-primer` via npm, and extend the config in your `.stylelintrc` file. Put the file in the root directory of your project.
|
||||
|
||||
```json
|
||||
{
|
||||
@ -41,7 +41,7 @@ To [use the configuration](https://github.com/primer/primer/tree/master/tools/st
|
||||
}
|
||||
```
|
||||
|
||||
A list of all the specific rules we have enabled are documented in [the package README](https://www.npmjs.com/package/stylelint-config-primer#documentation).
|
||||
A list of all the specific rules we have enabled are documented in [the package README](https://github.com/primer/stylelint-config-primer#documentation).
|
||||
|
||||
### Disabling
|
||||
|
||||
|
||||
91
lib/erb-to-html.js
Normal file
91
lib/erb-to-html.js
Normal file
@ -0,0 +1,91 @@
|
||||
/* eslint-disable no-console */
|
||||
const visit = require('unist-util-visit')
|
||||
const cache = new Map()
|
||||
const ERB_BLOCK_PATTERN = /<%=[^%]+%>/g
|
||||
|
||||
module.exports = options => {
|
||||
const convert = converter(options)
|
||||
return tree => {
|
||||
visit(tree, 'code', node => {
|
||||
const match = node.lang ? node.lang.match(/^[a-z]+/) : null
|
||||
const lang = match ? match[0] : null
|
||||
if (lang === 'erb' || lang === 'html') {
|
||||
const erb = node.value
|
||||
const html = convert(erb)
|
||||
const remaining = html ? html.match(ERB_BLOCK_PATTERN) : null
|
||||
if (html && !remaining) {
|
||||
node.value = html
|
||||
node.lang = node.lang.replace(/^erb/, 'html')
|
||||
} else if (remaining) {
|
||||
// console.warn(`Unable to convert ${remaining.length} ERB blocks:\n ${remaining.join(' \n')}`)
|
||||
} else {
|
||||
// console.warn(`No conversions made in: ${erb}`)
|
||||
}
|
||||
} else {
|
||||
// console.warn(`Unknown code block lang: ${node.lang}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function converter({methods = {}}) {
|
||||
return erb => {
|
||||
const blocks = erb.match(ERB_BLOCK_PATTERN)
|
||||
if (blocks && blocks.length) {
|
||||
let html = erb
|
||||
// console.warn(`Replacing ${blocks.length} ERB block(s)...`)
|
||||
for (const block of blocks) {
|
||||
const output = convert(block)
|
||||
if (output !== block) {
|
||||
// const count = html.split(block).length - 1
|
||||
// console.warn(` found ${count} instances of "${block}"`)
|
||||
html = replaceAll(html, block, output)
|
||||
// console.warn(html)
|
||||
}
|
||||
}
|
||||
return html
|
||||
}
|
||||
}
|
||||
|
||||
function convert(block) {
|
||||
if (cache.has(block)) {
|
||||
return cache.get(block)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, method, argString] = block.match(/<%= *(\w+)[ (]([^)]+)\)? *%>/)
|
||||
const parts = argString.split(/, */)
|
||||
const args = []
|
||||
const kwargs = {}
|
||||
let match
|
||||
for (const part of parts) {
|
||||
if ((match = part.match(/^:(.+) => (.+)$/))) {
|
||||
kwargs[unquote(match[1])] = unquote(match[2])
|
||||
} else if ((match = part.match(/^(.+): (.+)$/))) {
|
||||
kwargs[unquote(match[1])] = unquote(match[2])
|
||||
} else {
|
||||
args.push(unquote(part))
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof methods[method] === 'function') {
|
||||
let output = methods[method](args, kwargs)
|
||||
console.warn(`converted: ${block} -> ${output}`)
|
||||
const escaped = block.replace('<', '').replace('>', '')
|
||||
output = `<!--${escaped}-->\n${output}`
|
||||
cache.set(block, output)
|
||||
return output
|
||||
} else {
|
||||
console.warn(`No such ERB method implemented: "${method}"`)
|
||||
return block
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function replaceAll(str, input, output) {
|
||||
return str.split(input).join(output)
|
||||
}
|
||||
|
||||
function unquote(str) {
|
||||
return str.replace(/^\s*"([^"]+)"\s*$/, (_, value) => value)
|
||||
}
|
||||
1081
package-lock.json
generated
1081
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "12.5.0",
|
||||
"version": "12.6.0",
|
||||
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
|
||||
"homepage": "https://primer.style/css",
|
||||
"author": "GitHub, Inc.",
|
||||
@ -42,6 +42,9 @@
|
||||
"test-urls": "node docs-test/urls.js",
|
||||
"test-migrate": "script/test-migrate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/octicons": "^9.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-viewport": "5.0.11",
|
||||
"@storybook/react": "5.0.11",
|
||||
@ -80,7 +83,7 @@
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "4.1.2",
|
||||
"stylelint": "9.10.1",
|
||||
"stylelint-config-primer": "7.0.0",
|
||||
"stylelint-config-primer": "7.0.1",
|
||||
"table": "5.2.3",
|
||||
"tar": "4.4.8",
|
||||
"tree-model": "^1.0.7",
|
||||
@ -90,5 +93,8 @@
|
||||
"unist-util-stringify-position": "^2.0.0",
|
||||
"unist-util-visit": "^1.4.0",
|
||||
"webpack": "4.20.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/octicons": "9.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
21
script/generate-bundle-readmes
Executable file
21
script/generate-bundle-readmes
Executable file
@ -0,0 +1,21 @@
|
||||
#!/usr/bin/env node
|
||||
const {dirname, join} = require('path')
|
||||
const globby = require('globby')
|
||||
const {exists, readFile, writeFile} = require('fs-extra')
|
||||
|
||||
Promise.all([
|
||||
readFile('src/README.template.md', 'utf8'),
|
||||
globby('src/*/index.scss')
|
||||
]).then(async ([template, indexes]) => {
|
||||
for (const indexPath of indexes) {
|
||||
const dir = dirname(indexPath)
|
||||
const parts = dir.split('/')
|
||||
const bundle = parts.pop()
|
||||
const readmePath = join(dir, 'README.md')
|
||||
await writeFile(readmePath, getReadmeContents(bundle), 'utf8')
|
||||
}
|
||||
|
||||
function getReadmeContents(bundle) {
|
||||
return template.replace(/{bundle}/g, bundle)
|
||||
}
|
||||
})
|
||||
25
src/README.template.md
Normal file
25
src/README.template.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
bundle: "{bundle}"
|
||||
generated: true
|
||||
---
|
||||
|
||||
# Primer CSS: `{bundle}` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/{bundle}/index.scss";
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/{bundle}.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
@ -1,36 +1,25 @@
|
||||
# Primer Alerts
|
||||
> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
|
||||
---
|
||||
bundle: "alerts"
|
||||
generated: true
|
||||
---
|
||||
|
||||
This repository is a module of the full [Primer CSS][primer] repository.
|
||||
# Primer CSS: `alerts` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-alerts/index.scss";
|
||||
@import "@primer/css/alerts/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/alerts](https://primer.style/css/components/alerts).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/alerts.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Avatars
|
||||
---
|
||||
bundle: "avatars"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Avatars are images that users can set as their profile picture. On GitHub, they’re always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `avatars` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-avatars/index.scss";
|
||||
@import "@primer/css/avatars/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/avatars](https://primer.style/css/components/avatars).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/avatars.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,36 +1,25 @@
|
||||
# Primer Base
|
||||
> GitHub's CSS to reset the browsers default styles. Built on top of normalize.css
|
||||
---
|
||||
bundle: "base"
|
||||
generated: true
|
||||
---
|
||||
|
||||
This repository is a module of the full [primer][primer] repository. And is built off of [normalize.css](https://github.com/necolas/normalize.css/)
|
||||
# Primer CSS: `base` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-base/index.scss";
|
||||
@import "@primer/css/base/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
You can read more about base in the [docs][docs].
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/base.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Blankslate
|
||||
---
|
||||
bundle: "blankslate"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `blankslate` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-blankslate/index.scss";
|
||||
@import "@primer/css/blankslate/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/blankslate](https://primer.style/css/components/blankslate).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/blankslate.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -3,10 +3,6 @@
|
||||
position: relative;
|
||||
padding: $spacer-5;
|
||||
text-align: center;
|
||||
background-color: $gray-000;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 10px rgba($black, 0.05);
|
||||
|
||||
code {
|
||||
padding: 2px 5px 3px;
|
||||
@ -15,6 +11,11 @@
|
||||
border: 1px solid $border-gray-light;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.blankslate-icon {
|
||||
@ -38,10 +39,17 @@
|
||||
}
|
||||
|
||||
// was .large-format
|
||||
// QUESTION: should we deprecate this?
|
||||
.blankslate-large {
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: $spacer-3 0;
|
||||
font-size: $h3-size;
|
||||
//font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size?
|
||||
font-size: $h2-size;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -50,8 +58,7 @@
|
||||
}
|
||||
|
||||
// was .clean-background
|
||||
// TO DO: deprecate this and use utility instead
|
||||
.blankslate-clean-background {
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer box
|
||||
---
|
||||
bundle: "box"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Box is a module for creating rounded-corner boxes with a white background and gray borders. Box has optional element styles for headers, lists, and footers.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `box` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-box/index.scss";
|
||||
@import "@primer/css/box/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/box](https://primer.style/css/components/box).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/box.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer / Branch Name
|
||||
---
|
||||
bundle: "branch-name"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> A nice, consistent way to display branch names.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `branch-name` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-branch-name/index.scss";
|
||||
@import "@primer/css/branch-name/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/branch-name](https://primer.style/css/components/branch-name).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/branch-name.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,21 +1,25 @@
|
||||
# Primer Breadcrumb Navigation
|
||||
---
|
||||
bundle: "breadcrumb"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Breadcrumb navigation for GitHub's pages with parents / grandparents.
|
||||
# Primer CSS: `breadcrumb` bundle
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
## Usage
|
||||
|
||||
## Documentation
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
Find further documentation at [primer.style/css/components/breadcrumb](https://primer.style/css/components/breadcrumb).
|
||||
```scss
|
||||
@import "@primer/css/breadcrumb/index.scss";
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/breadcrumb.css`.
|
||||
|
||||
## License
|
||||
|
||||
MIT © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[primer-support]: https://github.com/primer/css-support
|
||||
[support]: https://github.com/primer/css-support
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Buttons
|
||||
---
|
||||
bundle: "buttons"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `buttons` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-buttons/index.scss";
|
||||
@import "@primer/css/buttons/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/buttons](https://primer.style/css/components/buttons).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/buttons.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Core
|
||||
---
|
||||
bundle: "core"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Primer core is one of 3 meta-packages that belong to the Primer framework. Primer core contains packages that are shared between GitHub product and marketing websites.
|
||||
|
||||
This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm.
|
||||
# Primer CSS: `core` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-core/index.scss";
|
||||
@import "@primer/css/core/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
You can read more about primer in the [docs][docs].
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/core.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -5,6 +5,9 @@
|
||||
* Released under MIT license. Copyright (c) 2019 GitHub Inc.
|
||||
*/
|
||||
|
||||
// Include .octicon base styles
|
||||
@import "@primer/octicons/index.scss";
|
||||
|
||||
// Primer master file
|
||||
//
|
||||
// Imports all Primer files in their intended order for easy mass-inclusion.
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Forms
|
||||
---
|
||||
bundle: "forms"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Style individual form controls and utilize common layouts.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `forms` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-forms/index.scss";
|
||||
@import "@primer/css/forms/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/forms](https://primer.style/css/components/forms).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/forms.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
25
src/header/README.md
Normal file
25
src/header/README.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
bundle: "header"
|
||||
generated: true
|
||||
---
|
||||
|
||||
# Primer CSS: `header` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/header/index.scss";
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/header.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
35
src/header/header.scss
Normal file
35
src/header/header.scss
Normal file
@ -0,0 +1,35 @@
|
||||
.Header {
|
||||
z-index: 32; // TODO: Figure out z-index system
|
||||
display: flex;
|
||||
padding: $spacer-3;
|
||||
font-size: $h5-size;
|
||||
line-height: $lh-default;
|
||||
color: $white-fade-70;
|
||||
background-color: $bg-gray-dark;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.Header-item {
|
||||
display: flex;
|
||||
margin-right: $spacer-3;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.Header-item--full {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.Header-link {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $white;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white-fade-70;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
2
src/header/index.scss
Normal file
2
src/header/index.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "../support/index.scss";
|
||||
@import "./header.scss";
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Labels
|
||||
---
|
||||
bundle: "labels"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Labels add metadata or indicate status of items and navigational elements.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `labels` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-labels/index.scss";
|
||||
@import "@primer/css/labels/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/labels](https://primer.style/css/components/labels).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/labels.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
line-height: 20px;
|
||||
color: $text-white;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: $gray-500;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Layout
|
||||
---
|
||||
bundle: "layout"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Primer’s layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it’s just containers, rows, and columns.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `layout` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-layout/index.scss";
|
||||
@import "@primer/css/layout/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/objects/layout](https://primer.style/css/objects/layout).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/layout.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Markdown
|
||||
---
|
||||
bundle: "markdown"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Stylesheets for rendering GitHub Flavored Markdown and syntax highlighted code snippets.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `markdown` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-markdown/index.scss";
|
||||
@import "@primer/css/markdown/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/markdown](https://primer.style/css/components/markdown).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/markdown.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer marketing
|
||||
---
|
||||
bundle: "marketing"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Primer marketing is one of 3 meta-packages that belong to the Primer framework. Primer marketing contains packages that are used on GitHub marketing websites.
|
||||
|
||||
This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm.
|
||||
# Primer CSS: `marketing` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-marketing/index.scss";
|
||||
@import "@primer/css/marketing/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
You can read more about primer in the [docs][docs].
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/marketing.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Navigation
|
||||
---
|
||||
bundle: "navigation"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `navigation` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-navigation/index.scss";
|
||||
@import "@primer/css/navigation/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/navigation](https://primer.style/css/components/navigation).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/navigation.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,27 +1,25 @@
|
||||
# Primer Pagination
|
||||
---
|
||||
bundle: "pagination"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Pagination component for applying button styles to a connected set of links that go to related pages
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `pagination` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-pagination/index.scss";
|
||||
@import "@primer/css/pagination/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/pagination.css`.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
## License
|
||||
|
||||
## Documentation
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
Find further documentation at [primer.style/css/components/pagination](https://primer.style/css/components/pagination).
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,38 +1,25 @@
|
||||
# Primer Popover
|
||||
---
|
||||
bundle: "popover"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `popover` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-popover/index.scss";
|
||||
@import "@primer/css/popover/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/popover](https://primer.style/css/components/popover).
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/popover.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer product
|
||||
---
|
||||
bundle: "product"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Primer product is one of 3 meta-packages that belong to the Primer framework. Primer product contains packages that are used on GitHub product websites.
|
||||
|
||||
This repository is a compilation of [several CSS packages](https://github.com/primer/css). You can break it down into smaller sections using npm.
|
||||
# Primer CSS: `product` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-product/index.scss";
|
||||
@import "@primer/css/product/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, a npm script is included that will output a CSS version to `build/build.css` The built CSS file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
You can read more about primer in the [docs][docs].
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/product.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
@import "../avatars/index.scss";
|
||||
@import "../blankslate/index.scss";
|
||||
@import "../branch-name/index.scss";
|
||||
@import "../header/index.scss";
|
||||
@import "../labels/index.scss";
|
||||
@import "../markdown/index.scss";
|
||||
@import "../popover/index.scss";
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer / Progress
|
||||
---
|
||||
bundle: "progress"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Use Progress components to visualize task completion
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `progress` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-progress/index.scss";
|
||||
@import "@primer/css/progress/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/progress](https://primer.style/css/components/progress).
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/progress.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,4 +1,25 @@
|
||||
# Select Menu
|
||||
- [Live documentation](https://primer.style/css/components/select-menu)
|
||||
- [Documentation source](../../pages/css/components/select-menu.md)
|
||||
- [Style source](./select-menu.scss)
|
||||
---
|
||||
bundle: "select-menu"
|
||||
generated: true
|
||||
---
|
||||
|
||||
# Primer CSS: `select-menu` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/select-menu/index.scss";
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/select-menu.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,39 +1,25 @@
|
||||
# Primer / Subhead
|
||||
|
||||
> The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
---
|
||||
bundle: "subhead"
|
||||
generated: true
|
||||
---
|
||||
|
||||
# Primer CSS: `subhead` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-subhead/index.scss";
|
||||
@import "@primer/css/subhead/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/subhead](https://primer.style/css/components/subhead).
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/subhead.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,31 +1,25 @@
|
||||
# Primer Support
|
||||
---
|
||||
bundle: "support"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent.
|
||||
>
|
||||
> Most of the time to include these you'll only need to add `@import "support/support";` to the top of your bundle. If you want only a specific partial you can import them separately.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `support` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-support/index.scss";
|
||||
@import "@primer/css/support/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
## Build
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/support](https://primer.style/css/support).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/support.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css/support
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,38 +1,25 @@
|
||||
# Primer table object
|
||||
---
|
||||
bundle: "table-object"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Table object is a module for creating dynamically resizable elements that always sit on the same horizontal line (e.g., they never break to a new line). Using table styles in our CSS means it’s cross browser friendly back to at least IE9.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `table-object` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-table-object/index.scss";
|
||||
@import "@primer/css/table-object/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/objects/table-object](https://primer.style/css/objects/table-object).
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/table-object.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1 +1,25 @@
|
||||
# Primer Toasts
|
||||
---
|
||||
bundle: "toasts"
|
||||
generated: true
|
||||
---
|
||||
|
||||
# Primer CSS: `toasts` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "@primer/css/toasts/index.scss";
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/toasts.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -63,6 +63,10 @@
|
||||
background-color: $green-500;
|
||||
}
|
||||
|
||||
.Toast--loading .Toast-icon {
|
||||
background-color: $gray-600;
|
||||
}
|
||||
|
||||
// Animations
|
||||
|
||||
.Toast--animateIn {
|
||||
@ -87,3 +91,12 @@
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.Toast--spinner {
|
||||
animation: Toast--spinner 1000ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes Toast--spinner {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@ -1,38 +1,25 @@
|
||||
# Primer Tooltips
|
||||
---
|
||||
bundle: "tooltips"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `tooltips` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-tooltips/index.scss";
|
||||
@import "@primer/css/tooltips/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/tooltips](https://primer.style/css/components/tooltips).
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/tooltips.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,38 +1,25 @@
|
||||
# Primer Truncate
|
||||
---
|
||||
bundle: "truncate"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> .css-truncate will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of the .css-truncate-target.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `truncate` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-truncate/index.scss";
|
||||
@import "@primer/css/truncate/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/components/truncate](https://primer.style/css/components/truncate).
|
||||
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/truncate.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
@ -1,37 +1,25 @@
|
||||
# Primer Utilities
|
||||
---
|
||||
bundle: "utilities"
|
||||
generated: true
|
||||
---
|
||||
|
||||
> There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
# Primer CSS: `utilities` bundle
|
||||
|
||||
## Usage
|
||||
|
||||
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
|
||||
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
|
||||
|
||||
```scss
|
||||
@import "primer-utilities/index.scss";
|
||||
@import "@primer/css/utilities/index.scss";
|
||||
```
|
||||
|
||||
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
|
||||
|
||||
## Build
|
||||
|
||||
For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Find further documentation at [primer.style/css/utilities](https://primer.style/css/utilities).
|
||||
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/utilities.css`.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer]: https://github.com/primer/css
|
||||
[docs]: https://primer.style/css
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
|
||||
[scss]: https://sass-lang.com/documentation/syntax#scss
|
||||
|
||||
Loading…
Reference in New Issue
Block a user