mirror of
https://github.com/zhigang1992/probot.github.io.git
synced 2026-04-29 04:35:27 +08:00
Initial hacky version of site
This commit is contained in:
Brandon Keepers
58
node_modules/primer-box/CHANGELOG.md
generated
vendored
Normal file
58
node_modules/primer-box/CHANGELOG.md
generated
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
# v2.1.2
|
||||
|
||||
* Bump all the version numbers for readme - Mu-An Chiou [github/github@a9d152f](https://github.com/github/github/commit/a9d152f)
|
||||
* Fix all the travis badge URL - Mu-An Chiou [github/github@9cd6d84](https://github.com/github/github/commit/9cd6d84)
|
||||
|
||||
# v2.1.1
|
||||
|
||||
* update version number after color variable updates - broccolini [github/github@b2a811a](https://github.com/github/github/commit/b2a811a)
|
||||
* update border variable names used in components - broccolini [github/github@865ab4f](https://github.com/github/github/commit/865ab4f)
|
||||
|
||||
# v2.1.0
|
||||
|
||||
* update primer-core version number - broccolini [github/github@6846743](https://github.com/github/github/commit/6846743)
|
||||
* Update some borders to correct contrast and small inconsistencies - Mark Otto [github/github@76c782a](https://github.com/github/github/commit/76c782a)
|
||||
* lighter yellow for box row highlight - broccolini [github/github@ab68ca4](https://github.com/github/github/commit/ab68ca4)
|
||||
|
||||
# v2.0.2
|
||||
|
||||
* update version numbers for primer package with bold update - broccolini [github/github@5d3e089](https://github.com/github/github/commit/5d3e089)
|
||||
|
||||
# v2.0.1
|
||||
|
||||
* More versions - Jon Rohan [github/github@e12ba2e](https://github.com/github/github/commit/e12ba2e)
|
||||
* Pointing main js file to build - Jon Rohan [github/github@3575651](https://github.com/github/github/commit/3575651)
|
||||
|
||||
# v2.0.0
|
||||
|
||||
* Removing needless disables - Jon Rohan [github/github@6233c40](https://github.com/github/github/commit/6233c40)
|
||||
* update package version - broccolini [github/github@45f6fe9](https://github.com/github/github/commit/45f6fe9)
|
||||
* change Box-row-link to smaller breakpoint - broccolini [github/github@3b660b4](https://github.com/github/github/commit/3b660b4)
|
||||
* bump version number - broccolini [github/github@d4d505f](https://github.com/github/github/commit/d4d505f)
|
||||
* ensure first row border doesn't override header border - broccolini [github/github@42f0537](https://github.com/github/github/commit/42f0537)
|
||||
* Correct doc headings - broccolini [github/github@b5408ff](https://github.com/github/github/commit/b5408ff)
|
||||
* Update row styles and docs on markup structure - broccolini [github/github@9e0c44f](https://github.com/github/github/commit/9e0c44f)
|
||||
* removing box overlay styles to explore in separate pr - broccolini [github/github@392109a](https://github.com/github/github/commit/392109a)
|
||||
* update Subhead class name - broccolini [github/github@4c4463d](https://github.com/github/github/commit/4c4463d)
|
||||
* update bg-yellow variables - broccolini [github/github@79701f2](https://github.com/github/github/commit/79701f2)
|
||||
* bump box version number - broccolini [github/github@4eb2f8c](https://github.com/github/github/commit/4eb2f8c)
|
||||
* Update Box-danger theme - broccolini [github/github@abb10f6](https://github.com/github/github/commit/abb10f6)
|
||||
* Update Box-body-row to Box-row in scss and docs - broccolini [github/github@cdfe299](https://github.com/github/github/commit/cdfe299)
|
||||
* fix density rows and doc examples - broccolini [github/github@cd18965](https://github.com/github/github/commit/cd18965)
|
||||
* fix links - broccolini [github/github@c3238aa](https://github.com/github/github/commit/c3238aa)
|
||||
* update header and title instances - broccolini [github/github@13cfaf0](https://github.com/github/github/commit/13cfaf0)
|
||||
* update docs with new Box-body and row styles - broccolini [github/github@816ac8c](https://github.com/github/github/commit/816ac8c)
|
||||
* and negative margin to footer so works with Box-body - broccolini [github/github@225b707](https://github.com/github/github/commit/225b707)
|
||||
* separate body and row styles - broccolini [github/github@5a554f3](https://github.com/github/github/commit/5a554f3)
|
||||
* Update intro and use automated toc - broccolini [github/github@ad3a9e9](https://github.com/github/github/commit/ad3a9e9)
|
||||
* use all of the variables - broccolini [github/github@896b70a](https://github.com/github/github/commit/896b70a)
|
||||
* Float right profile image, remove danger zone bg - imgonnarelph [github/github@62d3f6d](https://github.com/github/github/commit/62d3f6d)
|
||||
* lint - imgonnarelph [github/github@9a5ec5a](https://github.com/github/github/commit/9a5ec5a)
|
||||
* User variable for red color - imgonnarelph [github/github@c44b27c](https://github.com/github/github/commit/c44b27c)
|
||||
* Style unboxed developer program section - imgonnarelph [github/github@e70aab4](https://github.com/github/github/commit/e70aab4)
|
||||
|
||||
# v0.0.1
|
||||
|
||||
* Updating box repo name - Jon Rohan [github/github@d54336a](https://github.com/github/github/commit/d54336a)
|
||||
* added feedback issue to box docs - broccolini [github/github@559a4d4](https://github.com/github/github/commit/559a4d4)
|
||||
* Move box into product-core cc @jonrohan - broccolini [github/github@8febc0e](https://github.com/github/github/commit/8febc0e)
|
||||
21
node_modules/primer-box/LICENSE
generated
vendored
Normal file
21
node_modules/primer-box/LICENSE
generated
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 GitHub Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
597
node_modules/primer-box/README.md
generated
vendored
Normal file
597
node_modules/primer-box/README.md
generated
vendored
Normal file
@@ -0,0 +1,597 @@
|
||||
# Primer CSS box
|
||||
|
||||
[](https://www.npmjs.org/package/primer-box)
|
||||
[](https://travis-ci.org/primer/primer-css)
|
||||
|
||||
> Box is a module for creating rounded-corner boxes with a white background and gray borders. Box has optional element styles for headers, lists, and footers.
|
||||
|
||||
This repository is a module of the full [primer-css][primer-css] repository.
|
||||
|
||||
## Install
|
||||
|
||||
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-box` with this command.
|
||||
|
||||
```
|
||||
$ npm install --save primer-box
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```scss
|
||||
@import "primer-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
|
||||
|
||||
<!-- %docs
|
||||
title: Box
|
||||
status_issue: https://github.com/github/design-systems/issues/198
|
||||
status: New release
|
||||
-->
|
||||
|
||||
The `.Box` component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
|
||||
|
||||
{:toc}
|
||||
|
||||
## Box
|
||||
|
||||
A `.Box` is a container with a a white background ,a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
This is a box.
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box elements
|
||||
Box elements include `Box-header`, `Box-body`, and `Box-footer`. These elements include borders and consistent padding. Optionally, you can include use `Box-title` which applies a bold font-weight the heading.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Box row
|
||||
|
||||
Use `Box-row` to add rows with borders and maintain the same padding. Box rows have a lighter border to give contrast between the header and footer.
|
||||
|
||||
**Note:** Box rows have some reliance on markup structure in order to target the first and last rows, therefore using an unordered list is recommended. See [box row markup structure](#box-row-markup-structure) for more information.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row three
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row four
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
Rows can be used with or without `Box-header`, `Box-footer`, or `Box-body`.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
<strong>Box body</strong>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row three
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row four
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Box row markup structure
|
||||
Box rows have some reliance on markup structure in order to target the first and last rows. Box rows are given a top border that is lighter in color than other box elements so the first row is targeted to apply a darker border color. An inner border-radius is applied to the first and last rows that that row corners don't poke outside the `Box`, this can be particularly noticeable when using a highlight on box rows.
|
||||
|
||||
Using an unordered list is recommended in order to target the first and last rows, however, if you need to use a `<div>` for your rows, you may want to place your rows inside a parent `<div>` so that the first and last rows are styled appropriately.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<!-- This wrapping div ensures the first and last rows can be targeted for styling. -->
|
||||
<div>
|
||||
<div class="Box-row">Box row using a div</div>
|
||||
<div class="Box-row">Box row using a div</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box padding density
|
||||
You can changed the padding density of the box component.
|
||||
|
||||
Use `Box--condensed` to apply a more condensed line-height and reduce the padding on the Y axis.
|
||||
|
||||
```html
|
||||
<div class="Box Box--condensed">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `Box--spacious` to increase padding and increase the title font size.
|
||||
|
||||
You may want to increase the overall font size to work with the larger padding, in this example the default body font size is increased to 16px using the `f4` typography utility.
|
||||
|
||||
```html
|
||||
<div class="Box Box--spacious f4">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Blue box theme
|
||||
Use `Box--blue` to style the box borders and box header in blue.
|
||||
|
||||
```html
|
||||
<div class="Box Box--blue">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Blue box header theme
|
||||
|
||||
Use `Box-header--blue` to add to change the header border and background to blue.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header Box-header--blue">
|
||||
<h3 class="Box-title">Box with blue header</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box danger theme
|
||||
|
||||
Use `Box--danger` to apply a red border to the outside of the box. This theme is helpful for communicating destructive actions.
|
||||
|
||||
**Note:** `Box-danger` only works with either `Box-row`'s or `Box-body`.
|
||||
|
||||
```html
|
||||
<div class="Box Box--danger">
|
||||
<div class="Box-row">
|
||||
Row one
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
Row two
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
`Box-danger` is often paired with a red heading. See the [subhead](/styleguide/css/styles/product/components/subhead) docs for more information.
|
||||
|
||||
```html
|
||||
<div class="Subhead border-bottom-0">
|
||||
<h2 class="Subhead-heading Subhead-heading--danger">Danger zone</h2>
|
||||
</div>
|
||||
|
||||
<div class="Box Box--danger">
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Row themes
|
||||
You can change the background color for individual rows, or change the color on hover or navigation focus.
|
||||
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-row Box-row--gray">
|
||||
.Box-row--gray
|
||||
</div>
|
||||
<div class="Box-row Box-row--hover-gray">
|
||||
.Box-row--hover-gray
|
||||
</div>
|
||||
<div class="Box-row Box-row--yellow">
|
||||
.Box-row--yellow
|
||||
</div>
|
||||
<div class="Box-row Box-row--hover-blue">
|
||||
.Box-row--hover-blue
|
||||
</div>
|
||||
<div class="Box-row Box-row--blue">
|
||||
.Box-row--blue
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `Box-row--focus-gray` or `Box-row--focus-blue` when using along-side `navigation-focus` if you want to highlight rows when using keyboard commands.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-row Box-row--focus-gray navigation-focus">
|
||||
.Box-row--focus-gray and .navigation-focus
|
||||
</div>
|
||||
<div class="Box-row Box-row--focus-gray">
|
||||
.Box-row--focus-gray
|
||||
</div>
|
||||
<div class="Box-row Box-row--focus-blue navigation-focus">
|
||||
.Box-row--focus-blue and .navigation-focus
|
||||
</div>
|
||||
<div class="Box-row Box-row--focus-blue">
|
||||
.Box-row--focus-blue
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Box row unread
|
||||
Use `.Box-row-unread` to apply a blue vertical line highlight for indicating a row contains unread items.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-row">
|
||||
Box row
|
||||
</div>
|
||||
<div class="Box-row Box-row--unread">
|
||||
Box row unread
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
Box row
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Box row link
|
||||
Use .`Box-row-link` when you want a link to appear dark gray and blue on hover on desktop, and remain a blue link on mobile. This is useful to indicate links on mobile without having hover styles.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-row">
|
||||
<a class="Box-row-link" href="#box-row-link">Box row link</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Dashed border
|
||||
Use the `border-dashed` utility to apply a dashed border to a box.
|
||||
|
||||
```html
|
||||
<div class="Box border-dashed p-2">
|
||||
A box with a dashed border
|
||||
</div>
|
||||
```
|
||||
|
||||
## Boxes with flash alerts
|
||||
Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`.
|
||||
|
||||
Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](/alerts) for more information.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<div class="flash flash-full">
|
||||
<button class="flash-close js-flash-close"><%= octicon "x" %></button>
|
||||
Flash message with close button.
|
||||
</div>
|
||||
<div class="flash flash-full flash-success">
|
||||
<%= octicon("check") %> Flash success with an icon.
|
||||
</div>
|
||||
<div class="flash flash-full flash-warn">
|
||||
<%= octicon("alert") %> Flash warning with an icon.
|
||||
</div>
|
||||
<div class="flash flash-full flash-error">
|
||||
Flash error inside a Box.
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Boxes with icons
|
||||
Use `Box-btn-octicon` with `btn-octicon` when you want the icon to maintain the same padding as other box elements. This selector offsets margin to ensure it lines up on the left and right sides of the box so you may need to add padding neighboring elements.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-body">
|
||||
<span class="pr-2">Box body</span>
|
||||
<button href="#" class="Box-btn-octicon btn-octicon"><%= octicon("pencil") %></button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
It's common to want to float icons to the far left or right and stop the `Box-title`from wrapping underneath. To do this you'll need to create a media object with utilities. Add `clearfix` to the surrounding div (this could be the header, body, or rows), add `overflow-hidden` to the title (or other text element), and float the icons as desired.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header clearfix">
|
||||
<button href="#" class="Box-btn-octicon btn-octicon float-right"><%= octicon("x") %></button>
|
||||
<h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-row clearfix">
|
||||
<button href="#" class="Box-btn-octicon btn-octicon float-left"><%= octicon "check" %></button>
|
||||
<p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box headers with counters
|
||||
Use a counter with a background that works against the contrast of the box header. The default counter colors do not stand out well against the header background so we suggest using one of the following styles:
|
||||
|
||||
Use `Counter--gray` for a counter with a gray background and dark gray text.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
<span class="Counter Counter--gray">12</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `Counter--gray-dark` for a counter with a dark gray background and white text.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
<span class="Counter Counter--gray-dark">12</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Form elements and buttons in boxes
|
||||
To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
|
||||
|
||||
Use [flexbox utilities](../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
|
||||
|
||||
```html
|
||||
<div class="Box Box--condensed">
|
||||
<div class="Box-header d-flex flex-items-center">
|
||||
<h3 class="Box-title overflow-hidden flex-auto">
|
||||
Box title
|
||||
</h3>
|
||||
<button class="btn btn-primary btn-sm">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
A similar approach can be used for buttons with multiple lines of text within a row.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small text-gray-light">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||
</div>
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small text-gray-light">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||
</div>
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small text-gray-light">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Using flexbox along with form, button, and link styles, you can create more complex box headers for things like bulk actions and sorting.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header d-flex flex-items-center">
|
||||
<form class="flex-auto">
|
||||
<label>
|
||||
<input class="mr-1" type="checkbox">
|
||||
Check it
|
||||
</label>
|
||||
</form>
|
||||
<button class="btn-link select-menu-button muted-link">
|
||||
Select menu
|
||||
</button>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can put forms in boxes. Often form submission buttons are aligned to the bottom right of the form which you can do with `text-right` instead of using floats.
|
||||
|
||||
```html
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Example form title
|
||||
</h3>
|
||||
</div>
|
||||
<form>
|
||||
<div class="Box-body">
|
||||
<dl class="form-group">
|
||||
<dt><label>Example label</label></dt>
|
||||
<dd><input class="form-control" type="text"></dd>
|
||||
</dl>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked="checked">
|
||||
Yes please
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Box-footer text-right">
|
||||
<button class="btn btn-secondary mr-1">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
When a box is all by itself centered on a page you can use [column widths](/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../utilities/typography) instead of the built in box title styles.
|
||||
|
||||
```html
|
||||
<div class="Box Box--spacious col-6 mx-auto text-center">
|
||||
<form>
|
||||
<div class="Box-body">
|
||||
<h3 class="f1-light">
|
||||
Example form
|
||||
</h3>
|
||||
<dl class="form-group mb-4">
|
||||
<dt><label>Example label</label></dt>
|
||||
<dd><input class="form-control" type="text"></dd>
|
||||
</dl>
|
||||
<button class="btn btn-primary btn-block">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
Box patterns can also be made with, and modified with [border utilities](../utilities/borders).
|
||||
|
||||
<!-- %enddocs -->
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||
|
||||
[primer-css]: https://github.com/primer/primer
|
||||
[docs]: http://primercss.io/
|
||||
[npm]: https://www.npmjs.com/
|
||||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
||||
[sass]: http://sass-lang.com/
|
||||
1
node_modules/primer-box/build/build.css
generated
vendored
Normal file
1
node_modules/primer-box/build/build.css
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.Box{background-color:#fff;border:1px solid #d1d5da;border-radius:3px}.Box--condensed{line-height:1.25}.Box--condensed .Box-header{padding:8px 16px}.Box--condensed .Box-body{padding:8px 16px}.Box--condensed .Box-footer{padding:8px 16px}.Box--condensed .Box-btn-octicon.btn-octicon{padding:8px 16px;margin:-8px -16px;line-height:1.25}.Box--condensed .Box-row{padding:8px 16px}.Box--spacious .Box-header{padding:24px;line-height:1.25}.Box--spacious .Box-title{font-size:20px}.Box--spacious .Box-body{padding:24px}.Box--spacious .Box-footer{padding:24px}.Box--spacious .Box-btn-octicon.btn-octicon{padding:24px;margin:-24px -24px}.Box--spacious .Box-row{padding:24px}.Box-header{padding:16px;margin:-1px -1px 0 -1px;background-color:#f6f8fa;border-color:#d1d5da;border-style:solid;border-width:1px;border-top-left-radius:3px;border-top-right-radius:3px}.Box-title{font-size:14px;font-weight:600}.Box-body{padding:16px;border-bottom:1px solid #e1e4e8}.Box-body:last-of-type{margin-bottom:-1px;border-bottom-right-radius:2px;border-bottom-left-radius:2px}.Box-row{padding:16px;margin-top:-1px;list-style-type:none;border-top:1px solid #e1e4e8}.Box-row:first-of-type{border-top-color:transparent;border-top-left-radius:2px;border-top-right-radius:2px}.Box-row:last-of-type{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:2px 0 0 #0366d6 inset}.Box-row.navigation-focus .Box-row--drag-button{color:#0366d6;cursor:-webkit-grab;cursor:grab;opacity:100}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:-webkit-grabbing;cursor:grabbing}.Box-row.navigation-focus.sortable-chosen{background-color:#fafbfc}.Box-row.navigation-focus.sortable-ghost{background-color:#f6f8fa}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:#f6f8fa}.Box-row--focus-blue.navigation-focus{background-color:#f1f8ff}.Box-row--hover-gray:hover{background-color:#f6f8fa}.Box-row--hover-blue:hover{background-color:#f1f8ff}@media (min-width: 768px){.Box-row-link{color:#24292e;text-decoration:none}.Box-row-link:hover{color:#0366d6;text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{padding:16px;margin-top:-1px;border-top:1px solid #e1e4e8}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue{border-color:#c8e1ff}.Box--blue .Box-header{background-color:#f1f8ff;border-color:#c8e1ff}.Box--blue .Box-body{border-color:#c8e1ff}.Box--blue .Box-row{border-color:#c8e1ff}.Box--blue .Box-footer{border-color:#c8e1ff}.Box--danger{border-color:#d73a49}.Box--danger .Box-row:first-of-type{border-color:#d73a49}.Box--danger .Box-body:last-of-type{border-color:#d73a49}.Box-header--blue{background-color:#f1f8ff;border-color:#c8e1ff}.Box-row--yellow{background-color:#fffbdd}.Box-row--blue{background-color:#f1f8ff}.Box-row--gray{background-color:#f6f8fa}.Box-btn-octicon.btn-octicon{padding:16px 16px;margin:-16px -16px;line-height:1.5}
|
||||
1
node_modules/primer-box/build/index.js
generated
vendored
Normal file
1
node_modules/primer-box/build/index.js
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
module.exports = {"cssstats":{"size":2970,"gzipSize":780,"humanizedSize":"3kB","humanizedGzipSize":"780B","rules":{"total":48,"size":{"graph":[3,1,1,1,1,3,1,2,1,1,1,2,1,8,2,2,3,4,3,2,1,4,2,1,1,1,1,1,1,1,2,2,1,3,2,1,2,1,1,1,1,1,1,2,1,1,1,3],"max":8,"average":1.75}},"selectors":{"total":49,"type":0,"class":49,"id":0,"pseudoClass":8,"pseudoElement":0,"values":[".Box",".Box--condensed",".Box--condensed .Box-header",".Box--condensed .Box-body",".Box--condensed .Box-footer",".Box--condensed .Box-btn-octicon.btn-octicon",".Box--condensed .Box-row",".Box--spacious .Box-header",".Box--spacious .Box-title",".Box--spacious .Box-body",".Box--spacious .Box-footer",".Box--spacious .Box-btn-octicon.btn-octicon",".Box--spacious .Box-row",".Box-header",".Box-title",".Box-body",".Box-body:last-of-type",".Box-row",".Box-row:first-of-type",".Box-row:last-of-type",".Box-row.Box-row--unread",".Box-row.unread",".Box-row.navigation-focus .Box-row--drag-button",".Box-row.navigation-focus.is-dragging .Box-row--drag-button",".Box-row.navigation-focus.sortable-chosen",".Box-row.navigation-focus.sortable-ghost",".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",".Box-row--focus-gray.navigation-focus",".Box-row--focus-blue.navigation-focus",".Box-row--hover-gray:hover",".Box-row--hover-blue:hover",".Box-row-link",".Box-row-link:hover",".Box-row--drag-button",".Box-footer",".Box--scrollable",".Box--blue",".Box--blue .Box-header",".Box--blue .Box-body",".Box--blue .Box-row",".Box--blue .Box-footer",".Box--danger",".Box--danger .Box-row:first-of-type",".Box--danger .Box-body:last-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"],"specificity":{"max":40,"average":18.979591836734695}},"declarations":{"total":84,"unique":49,"properties":{"background-color":["#fff","#f6f8fa","#fafbfc","#f6f8fa","#f6f8fa","#f1f8ff","#f6f8fa","#f1f8ff","#f1f8ff","#f1f8ff","#fffbdd","#f1f8ff","#f6f8fa"],"border":["1px solid #d1d5da"],"border-radius":["3px"],"line-height":["1.25","1.25","1.25","1.5"],"padding":["8px 16px","8px 16px","8px 16px","8px 16px","8px 16px","24px","24px","24px","24px","24px","16px","16px","16px","16px","16px 16px"],"margin":["-8px -16px","-24px -24px","-1px -1px 0 -1px","-16px -16px"],"font-size":["20px","14px"],"border-color":["#d1d5da","#c8e1ff","#c8e1ff","#c8e1ff","#c8e1ff","#c8e1ff","#d73a49","#d73a49","#d73a49","#c8e1ff"],"border-style":["solid"],"border-width":["1px"],"border-top-left-radius":["3px","2px"],"border-top-right-radius":["3px","2px"],"font-weight":["600"],"border-bottom":["1px solid #e1e4e8"],"margin-bottom":["-1px"],"border-bottom-right-radius":["2px","2px"],"border-bottom-left-radius":["2px","2px"],"margin-top":["-1px","-1px"],"list-style-type":["none"],"border-top":["1px solid #e1e4e8","1px solid #e1e4e8"],"border-top-color":["transparent"],"box-shadow":["2px 0 0 #0366d6 inset"],"color":["#0366d6","#24292e","#0366d6"],"cursor":["-webkit-grab","grab","-webkit-grabbing","grabbing"],"opacity":["100","0","0"],"text-decoration":["none","none"],"max-height":["324px"],"overflow":["scroll"]}},"mediaQueries":{"total":1,"unique":1,"values":["(min-width: 768px)"],"contents":[{"value":"(min-width: 768px)","rules":{"total":2,"size":{"graph":[2,2],"max":2,"average":2}},"selectors":{"total":2,"type":0,"class":2,"id":0,"pseudoClass":1,"pseudoElement":0,"values":[".Box-row-link",".Box-row-link:hover"],"specificity":{"max":20,"average":15}},"declarations":{"total":4,"unique":3,"properties":{"color":["#24292e","#0366d6"],"text-decoration":["none","none"]}}}]}}}
|
||||
2
node_modules/primer-box/index.scss
generated
vendored
Normal file
2
node_modules/primer-box/index.scss
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "primer-support/index.scss";
|
||||
@import "./lib/box.scss";
|
||||
284
node_modules/primer-box/lib/box.scss
generated
vendored
Normal file
284
node_modules/primer-box/lib/box.scss
generated
vendored
Normal file
@@ -0,0 +1,284 @@
|
||||
// Box
|
||||
// Intended to replace simple-box, boxed-group, and table-list
|
||||
|
||||
.Box {
|
||||
background-color: $white;
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Box padding density options
|
||||
.Box--condensed {
|
||||
line-height: $lh-condensed;
|
||||
|
||||
.Box-header {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
|
||||
.Box-btn-octicon {
|
||||
&.btn-octicon {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
margin: (-$spacer-2) (-$spacer-3);
|
||||
line-height: $lh-condensed;
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Box--spacious {
|
||||
.Box-header {
|
||||
padding: $spacer-4;
|
||||
line-height: $lh-condensed;
|
||||
}
|
||||
|
||||
.Box-title {
|
||||
font-size: $h3-size;
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
padding: $spacer-4;
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
padding: $spacer-4;
|
||||
}
|
||||
|
||||
.Box-btn-octicon {
|
||||
&.btn-octicon {
|
||||
padding: $spacer-4;
|
||||
margin: (-$spacer-4) (-$spacer-4);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row {
|
||||
padding: $spacer-4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Box-header {
|
||||
padding: $spacer-3;
|
||||
margin: -1px -1px 0 -1px;
|
||||
background-color: $bg-gray;
|
||||
border-color: $border-gray-dark;
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
.Box-title {
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
padding: $spacer-3;
|
||||
border-bottom: $border-width $border-style $border-gray;
|
||||
|
||||
// Ensures bottom-border doesn't poke out when .Box-body used without box-footer
|
||||
&:last-of-type {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Box rows
|
||||
.Box-row {
|
||||
padding: $spacer-3;
|
||||
margin-top: -1px;
|
||||
list-style-type: none; // To account for applying Box component to a list
|
||||
border-top: $border-width $border-style $border-gray;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-color: transparent;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
// Adds a blue vertical line to the left of the row
|
||||
// For indicating a row item is unread
|
||||
&.Box-row--unread,
|
||||
// .unread to be deprecated with .Box-row-unread
|
||||
&.unread {
|
||||
box-shadow: 2px 0 0 $blue inset;
|
||||
}
|
||||
|
||||
&.navigation-focus {
|
||||
// Focus styles for when drag icon
|
||||
.Box-row--drag-button {
|
||||
color: $text-blue;
|
||||
cursor: grab;
|
||||
opacity: 100;
|
||||
}
|
||||
|
||||
// Grabbing while row is dragged
|
||||
&.is-dragging .Box-row--drag-button {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
// Row dragging styles
|
||||
&.sortable-chosen {
|
||||
background-color: $bg-gray-light;
|
||||
}
|
||||
|
||||
// Makes dragging row background gray
|
||||
&.sortable-ghost {
|
||||
background-color: $bg-gray;
|
||||
|
||||
// Hides contents of row while dragging so row looks solid gray
|
||||
.Box-row--drag-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--focus-gray {
|
||||
&.navigation-focus {
|
||||
background-color: $bg-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--focus-blue {
|
||||
&.navigation-focus {
|
||||
background-color: $bg-blue-light;
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--hover-gray {
|
||||
&:hover {
|
||||
background-color: $bg-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--hover-blue {
|
||||
&:hover {
|
||||
background-color: $bg-blue-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional link style
|
||||
// Makes links on mobile blue since they don't have hover state,
|
||||
// and links are dark-gray with blue hover on desktop.
|
||||
.Box-row-link {
|
||||
@include breakpoint(md) {
|
||||
|
||||
color: $text-gray-dark;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Optional drag icon styles for reordering items
|
||||
// Focus styles included in .Box-row above
|
||||
.Box-row--drag-button {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
padding: $spacer-3;
|
||||
margin-top: -1px; // prevents double border when used with .Box-body
|
||||
border-top: $border-width $border-style $border-gray;
|
||||
}
|
||||
|
||||
// Option for a box with scrolling content
|
||||
.Box--scrollable {
|
||||
max-height: 324px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
// Box themes
|
||||
|
||||
.Box--blue {
|
||||
border-color: $border-blue-light;
|
||||
|
||||
.Box-header {
|
||||
background-color: $bg-blue-light;
|
||||
border-color: $border-blue-light;
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
border-color: $border-blue-light;
|
||||
}
|
||||
|
||||
.Box-row {
|
||||
border-color: $border-blue-light;
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
border-color: $border-blue-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Applies and red border to the outside of the box,
|
||||
// but not to the border separating rows.
|
||||
.Box--danger {
|
||||
border-color: $border-red;
|
||||
|
||||
.Box-row {
|
||||
&:first-of-type {
|
||||
border-color: $border-red;
|
||||
}
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
&:last-of-type {
|
||||
border-color: $border-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Box-header--blue {
|
||||
background-color: $bg-blue-light;
|
||||
border-color: $border-blue-light;
|
||||
}
|
||||
|
||||
// Box row highlight themes
|
||||
|
||||
.Box-row--yellow {
|
||||
background-color: $yellow-100;
|
||||
}
|
||||
|
||||
.Box-row--blue {
|
||||
background-color: $bg-blue-light;
|
||||
}
|
||||
|
||||
.Box-row--gray {
|
||||
background-color: $bg-gray;
|
||||
}
|
||||
|
||||
//Box with btn-octicon
|
||||
.Box-btn-octicon {
|
||||
|
||||
// Increase specificity when btn-octicon is used because comes after .Box in the cascade
|
||||
&.btn-octicon {
|
||||
padding: $spacer-3 $spacer-3;
|
||||
margin: (-$spacer-3) (-$spacer-3);
|
||||
line-height: $lh-default; // override btn-octicon line-height
|
||||
}
|
||||
}
|
||||
69
node_modules/primer-box/package.json
generated
vendored
Normal file
69
node_modules/primer-box/package.json
generated
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
{
|
||||
"_from": "primer-box@^2.1.7",
|
||||
"_id": "primer-box@2.1.7",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha1-BLcZ1evmpwgPWVgb9791TJTVc0I=",
|
||||
"_location": "/primer-box",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "primer-box@^2.1.7",
|
||||
"name": "primer-box",
|
||||
"escapedName": "primer-box",
|
||||
"rawSpec": "^2.1.7",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "^2.1.7"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/primer-core",
|
||||
"/primer-css"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/primer-box/-/primer-box-2.1.7.tgz",
|
||||
"_shasum": "04b719d5ebe6a7080f59581bf7bf754c94d57342",
|
||||
"_spec": "primer-box@^2.1.7",
|
||||
"_where": "/Users/bkeepers/projects/probot/probot.github.io/node_modules/primer-css",
|
||||
"author": {
|
||||
"name": "GitHub, Inc."
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/primer/primer-css/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {
|
||||
"primer-support": "^4.0.6"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.",
|
||||
"devDependencies": {
|
||||
"primer-module-build": "*",
|
||||
"stylelint": "*",
|
||||
"stylelint-config-primer": "*"
|
||||
},
|
||||
"files": [
|
||||
"index.scss",
|
||||
"lib",
|
||||
"build"
|
||||
],
|
||||
"homepage": "http://primercss.io/",
|
||||
"keywords": [
|
||||
"primer",
|
||||
"css",
|
||||
"github",
|
||||
"primercss"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "build/index.js",
|
||||
"name": "primer-box",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/primer/primer-css/tree/master/packages/primer-box"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "primer-module-build index.scss",
|
||||
"prepare": "npm run build",
|
||||
"test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss"
|
||||
},
|
||||
"style": "index.scss",
|
||||
"version": "2.1.7"
|
||||
}
|
||||
Reference in New Issue
Block a user