mirror of
https://github.com/thangisme/notes.git
synced 2024-11-03 07:37:34 -05:00
Just the Docs build packaging
This commit is contained in:
Patrick Marsceill
parent
167e7cdddd
commit
9f13bc4625
103
_sass/primer-support/CHANGELOG.md
Normal file
103
_sass/primer-support/CHANGELOG.md
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
# v1.2.2
|
||||||
|
|
||||||
|
* update version numbers for primer package with bold update - broccolini [github/github@5d3e089](https://github.com/github/github/commit/5d3e089)
|
||||||
|
|
||||||
|
# v1.2.1
|
||||||
|
|
||||||
|
* More versions - Jon Rohan [github/github@e12ba2e](https://github.com/github/github/commit/e12ba2e)
|
||||||
|
|
||||||
|
# v1.2.0
|
||||||
|
|
||||||
|
* Revving this per @jonrohan - Patrick Marsceill [github/github@331f0b1](https://github.com/github/github/commit/331f0b1)
|
||||||
|
* Consolidate variables - Patrick Marsceill [github/github@37ea8ac](https://github.com/github/github/commit/37ea8ac)
|
||||||
|
* Make shadow vars - Patrick Marsceill [github/github@93b2e11](https://github.com/github/github/commit/93b2e11)
|
||||||
|
* update bg-yellow variables - broccolini [github/github@79701f2](https://github.com/github/github/commit/79701f2)
|
||||||
|
* Moving - Jon Rohan [github/github@34d0849](https://github.com/github/github/commit/34d0849)
|
||||||
|
* Updates based on feedback - Jon Rohan [github/github@d3528f1](https://github.com/github/github/commit/d3528f1)
|
||||||
|
* Documenting current color utilities - Jon Rohan [github/github@46b5f85](https://github.com/github/github/commit/46b5f85)
|
||||||
|
* add border color variables - broccolini [github/github@42f0fc0](https://github.com/github/github/commit/42f0fc0)
|
||||||
|
|
||||||
|
# v1.1.0
|
||||||
|
|
||||||
|
* updating the version number - Jon Rohan [github/github@db462e6](https://github.com/github/github/commit/db462e6)
|
||||||
|
* Updating spacer-6 from 48px to 40px - Jon Rohan [github/github@ae380d1](https://github.com/github/github/commit/ae380d1)
|
||||||
|
* updating lg breakpoint for use with new spacer-3 - Jon Rohan [github/github@f5baf52](https://github.com/github/github/commit/f5baf52)
|
||||||
|
|
||||||
|
# v1.0.0
|
||||||
|
|
||||||
|
* Fix counter color on primary button - Patrick Marsceill [github/github@9089145](https://github.com/github/github/commit/9089145)
|
||||||
|
* Cutting new versions of primer modules - Jon Rohan [github/github@157f5ab](https://github.com/github/github/commit/157f5ab)
|
||||||
|
* remove old comment - Patrick Marsceill [github/github@794502e](https://github.com/github/github/commit/794502e)
|
||||||
|
* Defaulting variables to new formula, with hardcoded old values - Jon Rohan [github/github@1f12c54](https://github.com/github/github/commit/1f12c54)
|
||||||
|
* Updating spacer-2 to 8px - Jon Rohan [github/github@3f7fbaf](https://github.com/github/github/commit/3f7fbaf)
|
||||||
|
* Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a)
|
||||||
|
* Getting rid of as much as possible - Sophie Shepherd [github/github@e2e5de4](https://github.com/github/github/commit/e2e5de4)
|
||||||
|
* Make default box shadow a var and apply it to .box-shadow utility - Patrick Marsceill [github/github@bda03be](https://github.com/github/github/commit/bda03be)
|
||||||
|
* Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c)
|
||||||
|
|
||||||
|
# v0.6.0
|
||||||
|
|
||||||
|
* Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5)
|
||||||
|
* use variables in breakpoints and update containers - broccolini [github/github@b615663](https://github.com/github/github/commit/b615663)8
|
||||||
|
* Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f)
|
||||||
|
* comment for @connors - Mark Otto [github/github@b3e2922](https://github.com/github/github/commit/b3e2922)
|
||||||
|
* Move stats switcher vars over and update the height for reals - Mark Otto [github/github@9695fa0](https://github.com/github/github/commit/9695fa0)
|
||||||
|
|
||||||
|
# v0.5.0
|
||||||
|
|
||||||
|
* Bumping to a new version - Jon Rohan [github/github@ff32813](https://github.com/github/github/commit/ff32813)
|
||||||
|
* Rename spacer variables - Sophie Shepherd [github/github@e5ffa47](https://github.com/github/github/commit/e5ffa47)
|
||||||
|
* default it - Mark Otto [github/github@6c895dd](https://github.com/github/github/commit/6c895dd)
|
||||||
|
* slightly different stack - Mark Otto [github/github@4e3882d](https://github.com/github/github/commit/4e3882d)
|
||||||
|
* nuke linux fonts - Mark Otto [github/github@534c790](https://github.com/github/github/commit/534c790)
|
||||||
|
* Change variable order - Mark Otto [github/github@42bceda](https://github.com/github/github/commit/42bceda)
|
||||||
|
* First part of genpopping all system font changes: remove typographic overrides for font-size, line-height, etc on global components - Mark Otto [github/github@6c50e2d](https://github.com/github/github/commit/6c50e2d)
|
||||||
|
|
||||||
|
# v0.4.0
|
||||||
|
|
||||||
|
* Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96)
|
||||||
|
* New line-height variables - Mark Otto [github/github@b15b1ea](https://github.com/github/github/commit/b15b1ea)
|
||||||
|
* Revert variables breakup back to single file - Jon Rohan [github/github@3397db7](https://github.com/github/github/commit/3397db7)
|
||||||
|
* Organize the variables and mixins into better files - Jon Rohan [github/github@9383dc2](https://github.com/github/github/commit/9383dc2)
|
||||||
|
* Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070)
|
||||||
|
* including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed)
|
||||||
|
* Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613)
|
||||||
|
* add font-weight to heading mixins - broccolini [github/github@585098e](https://github.com/github/github/commit/585098e)
|
||||||
|
* reoganizing the docs section - Jon Rohan [github/github@8cb4556](https://github.com/github/github/commit/8cb4556)
|
||||||
|
* disabling some lints - Jon Rohan [github/github@3d70154](https://github.com/github/github/commit/3d70154)
|
||||||
|
* Adding callouts to alerts module - Jon Rohan [github/github@355fe6c](https://github.com/github/github/commit/355fe6c)
|
||||||
|
|
||||||
|
# v0.3.2
|
||||||
|
|
||||||
|
* Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba)
|
||||||
|
|
||||||
|
# v0.3.1
|
||||||
|
|
||||||
|
* Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd)
|
||||||
|
|
||||||
|
# v0.3.0
|
||||||
|
|
||||||
|
* Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81)
|
||||||
|
* Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34)
|
||||||
|
* Bumping the version - Jon Rohan [github/github@01e7c4e](https://github.com/github/github/commit/01e7c4e)
|
||||||
|
* Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101)
|
||||||
|
|
||||||
|
# v0.2.0
|
||||||
|
|
||||||
|
* v0.2.0 - Jon Rohan [github/github@75201c5](https://github.com/github/github/commit/75201c5)
|
||||||
|
* Updating support to use travis-ci - Jon Rohan [github/github@707ad54](https://github.com/github/github/commit/707ad54)
|
||||||
|
* Adding support variables and mixins from primer/primer - Jon Rohan [github/github@b9e6118](https://github.com/github/github/commit/b9e6118)
|
||||||
|
* Fix -down scoping - Joshua Peek [github/github@87a37bf](https://github.com/github/github/commit/87a37bf)
|
||||||
|
* Moving variables to _variables and creating linter - Jon Rohan [github/github@f689536](https://github.com/github/github/commit/f689536)
|
||||||
|
* Tracking disabled scss-lint rules in graphite - Jon Rohan [github/github@356112f](https://github.com/github/github/commit/356112f)
|
||||||
|
* renaming the mixin - Jon Rohan [github/github@db06b9a](https://github.com/github/github/commit/db06b9a)
|
||||||
|
* dropping speed variables - Jon Rohan [github/github@0610ffe](https://github.com/github/github/commit/0610ffe)
|
||||||
|
* no timing variables for now - Jon Rohan [github/github@4c018f1](https://github.com/github/github/commit/4c018f1)
|
||||||
|
* Refactoring animations into reusable animiation classes - Jon Rohan [github/github@084863e](https://github.com/github/github/commit/084863e)
|
||||||
|
* Using a retina mixin for repetable code - Jon Rohan [github/github@408bb72](https://github.com/github/github/commit/408bb72)
|
||||||
|
* Updating copy on readmes - Jon Rohan [github/github@38d5dbc](https://github.com/github/github/commit/38d5dbc)
|
||||||
|
* Updating the folders with feedback and writing some readmes - Jon Rohan [github/github@fc81a30](https://github.com/github/github/commit/fc81a30)
|
||||||
|
* cleanup some dupe utility classes - Jon Rohan [github/github@c2dfad7](https://github.com/github/github/commit/c2dfad7)
|
||||||
|
* Some updates for the imports - Jon Rohan [github/github@345dd82](https://github.com/github/github/commit/345dd82)
|
||||||
|
* Hella refactoring and moving files to modules - Jon Rohan [github/github@556cc0d](https://github.com/github/github/commit/556cc0d)
|
||||||
|
* Moving all these files - Jon Rohan [github/github@9c8d0f5](https://github.com/github/github/commit/9c8d0f5)
|
||||||
21
_sass/primer-support/LICENSE
Normal file
21
_sass/primer-support/LICENSE
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.
|
||||||
42
_sass/primer-support/README.md
Normal file
42
_sass/primer-support/README.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# Primer CSS Support
|
||||||
|
|
||||||
|
[](https://www.npmjs.org/package/primer-support)
|
||||||
|
[](https://travis-ci.org/primer/support)
|
||||||
|
|
||||||
|
> 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-css][primer] repository.
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-support` with this command.
|
||||||
|
|
||||||
|
```
|
||||||
|
$ npm install --save primer-support
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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-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._
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
You can read more about support in the [docs][docs].
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
||||||
|
|
||||||
|
[primer]: 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/
|
||||||
8
_sass/primer-support/index.scss
Normal file
8
_sass/primer-support/index.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
// variables
|
||||||
|
@import "./lib/variables.scss";
|
||||||
|
|
||||||
|
// mixins
|
||||||
|
@import "./lib/mixins/typography.scss";
|
||||||
|
@import "./lib/mixins/layout.scss";
|
||||||
|
@import "./lib/mixins/buttons.scss";
|
||||||
|
@import "./lib/mixins/misc.scss";
|
||||||
137
_sass/primer-support/lib/mixins/buttons.scss
Normal file
137
_sass/primer-support/lib/mixins/buttons.scss
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
// Button color generator for primary and themed buttons
|
||||||
|
|
||||||
|
@mixin solid-btn($foreground: $text-gray-dark, $background: #eee) {
|
||||||
|
color: $foreground;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||||
|
background-color: $background;
|
||||||
|
background-image: linear-gradient(saturate(lighten($background, 13%), 8%), saturate(darken($background, 9%), 5%));
|
||||||
|
border: 1px solid darken($background, 8%);
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
color: saturate(darken($background, 9%), 5%);
|
||||||
|
background: $foreground;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&.zeroclipboard-is-hover,
|
||||||
|
&.zeroclipboard-is-active {
|
||||||
|
background-color: darken($background, 10%);
|
||||||
|
background-image: linear-gradient(lighten($background, 8%), darken($background, 13%));
|
||||||
|
border-color: darken($background, 12%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&.selected,
|
||||||
|
&.zeroclipboard-is-active {
|
||||||
|
background-color: darken($background, 15%);
|
||||||
|
background-image: none;
|
||||||
|
border-color: darken($background, 20%);
|
||||||
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected:hover {
|
||||||
|
background-color: darken($background, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
color: $foreground;
|
||||||
|
cursor: default;
|
||||||
|
background-color: mix(#fff, $background, 50%);
|
||||||
|
background-image: linear-gradient(mix(#fff, $background, 60%), mix(#fff, darken($background, 5%), 45%));
|
||||||
|
border-color: mix(#fff, $background, 40%);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button color generator for default-y buttons with grey bgs and colored text, like btn-danger
|
||||||
|
|
||||||
|
@mixin inverse-hover-btn($foreground: $text-gray-dark) {
|
||||||
|
color: $foreground;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $text-white;
|
||||||
|
background-color: $foreground;
|
||||||
|
background-image: linear-gradient(lighten($foreground, 30%), lighten($foreground, 10%));
|
||||||
|
border-color: $foreground;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&.selected {
|
||||||
|
color: $text-white;
|
||||||
|
background-color: darken($foreground, 5%);
|
||||||
|
background-image: none;
|
||||||
|
border-color: darken($foreground, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected:hover {
|
||||||
|
background-color: darken($foreground, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
color: mix(#fff, $foreground, 50%);
|
||||||
|
background-color: #efefef;
|
||||||
|
background-image: linear-gradient(#fefefe, #efefef);
|
||||||
|
border-color: #e1e1e1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&.selected {
|
||||||
|
.counter {
|
||||||
|
color: $text-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
|
||||||
|
|
||||||
|
@mixin outline-btn($text-color: $text-blue, $bg-color: $bg-white) {
|
||||||
|
color: $text-color;
|
||||||
|
background-color: $bg-color;
|
||||||
|
background-image: none;
|
||||||
|
border: 1px solid $border-gray;
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
background-color: rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&.selected,
|
||||||
|
&.zeroclipboard-is-hover,
|
||||||
|
&.zeroclipboard-is-active {
|
||||||
|
color: $bg-color;
|
||||||
|
background-color: $text-color;
|
||||||
|
background-image: none;
|
||||||
|
border-color: $text-color;
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
color: $text-color;
|
||||||
|
background-color: $bg-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected:hover {
|
||||||
|
background-color: darken($text-color, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled,
|
||||||
|
&.disabled {
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
color: $text-gray;
|
||||||
|
background-color: $bg-white;
|
||||||
|
background-image: none;
|
||||||
|
border-color: $border-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
52
_sass/primer-support/lib/mixins/layout.scss
Normal file
52
_sass/primer-support/lib/mixins/layout.scss
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
// Responsive media queries
|
||||||
|
|
||||||
|
@mixin breakpoint($breakpoint) {
|
||||||
|
// Retrieves the value from the key
|
||||||
|
$value: map-get($breakpoints, $breakpoint);
|
||||||
|
|
||||||
|
// If the key exists in the map
|
||||||
|
@if $value != null {
|
||||||
|
// Prints a media query based on the value
|
||||||
|
@media (min-width: $value) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the key doesn't exist in the map
|
||||||
|
@else {
|
||||||
|
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||||
|
+ "Please make sure it is defined in `$breakpoints` map.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Retina media query
|
||||||
|
|
||||||
|
@mixin retina-media-query {
|
||||||
|
@media
|
||||||
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||||
|
only screen and (min--moz-device-pixel-ratio: 2),
|
||||||
|
only screen and (-moz-min-device-pixel-ratio: 2),
|
||||||
|
only screen and (-o-min-device-pixel-ratio: 2/1),
|
||||||
|
only screen and (min-device-pixel-ratio: 2),
|
||||||
|
only screen and (min-resolution: 192dpi),
|
||||||
|
only screen and (min-resolution: 2dppx) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clearfix
|
||||||
|
//
|
||||||
|
// Clears floats via mixin.
|
||||||
|
|
||||||
|
@mixin clearfix {
|
||||||
|
&::before {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
29
_sass/primer-support/lib/mixins/misc.scss
Normal file
29
_sass/primer-support/lib/mixins/misc.scss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
// Generate a two-color caret for any element.
|
||||||
|
@mixin double-caret($foreground: #fff, $background: #ddd) {
|
||||||
|
&::after,
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 11px;
|
||||||
|
right: 100%;
|
||||||
|
left: -16px;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
content: " ";
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid solid outset;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
margin-top: 1px;
|
||||||
|
margin-left: 2px;
|
||||||
|
border-width: 7px;
|
||||||
|
border-right-color: $foreground;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-width: 8px;
|
||||||
|
border-right-color: $background;
|
||||||
|
}
|
||||||
|
}
|
||||||
76
_sass/primer-support/lib/mixins/typography.scss
Normal file
76
_sass/primer-support/lib/mixins/typography.scss
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
// Text hiding for image based text replacement.
|
||||||
|
// Higher performance than -9999px because it only renders
|
||||||
|
// the size of the actual text, not a full 9999px box.
|
||||||
|
@mixin hide-text() {
|
||||||
|
overflow: hidden;
|
||||||
|
text-indent: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Heading mixins for use within components
|
||||||
|
// These match heading utilities in utilities/typography
|
||||||
|
@mixin h1 {
|
||||||
|
font-size: $h1-size;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h2 {
|
||||||
|
font-size: $h2-size;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h3 {
|
||||||
|
font-size: $h3-size;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h4 {
|
||||||
|
font-size: $h4-size;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h5 {
|
||||||
|
font-size: $h5-size;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h6 {
|
||||||
|
font-size: $h6-size;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive heading mixins
|
||||||
|
// There are no responsive mixins for h5 and h6 because they are small
|
||||||
|
// and don't need to be smaller on mobile.
|
||||||
|
@mixin h1-reponsive {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
|
||||||
|
// Up to 32px in future
|
||||||
|
@include breakpoint(md) { font-size: 30px; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h2-responsive {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
|
||||||
|
// Up to 22px or 24px in future
|
||||||
|
@include breakpoint(md) { font-size: 21px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h3-responsive {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: 16px; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin h4-responsive {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: 14px; }
|
||||||
|
|
||||||
|
}
|
||||||
201
_sass/primer-support/lib/variables.scss
Normal file
201
_sass/primer-support/lib/variables.scss
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
// variables
|
||||||
|
// stylelint-disable declaration-bang-space-before
|
||||||
|
// These are our margin and padding utility spacers. The default step size we
|
||||||
|
// use is 8px. This gives us a key of:
|
||||||
|
// 0 => 0px
|
||||||
|
// 1 => 4px
|
||||||
|
// 2 => 8px
|
||||||
|
// 3 => 12px
|
||||||
|
// 4 => 24px
|
||||||
|
// 5 => 32px
|
||||||
|
// 6 => 40px
|
||||||
|
$spacer: 8px !default;
|
||||||
|
$spacers: (
|
||||||
|
0,
|
||||||
|
round($spacer / 2),
|
||||||
|
$spacer,
|
||||||
|
$spacer * 2,
|
||||||
|
$spacer * 3,
|
||||||
|
$spacer * 4,
|
||||||
|
$spacer * 5
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
// Aliases for easy use
|
||||||
|
$spacer-1: nth($spacers, 2) !default; // 4px
|
||||||
|
$spacer-2: nth($spacers, 3) !default; // 8px
|
||||||
|
$spacer-3: nth($spacers, 4) !default; // 12px
|
||||||
|
$spacer-4: nth($spacers, 5) !default; // 24px
|
||||||
|
$spacer-5: nth($spacers, 6) !default; // 32px
|
||||||
|
$spacer-6: nth($spacers, 7) !default; // 40px
|
||||||
|
|
||||||
|
$container-width: 980px !default;
|
||||||
|
$grid-gutter: 10px !default;
|
||||||
|
|
||||||
|
// breakpoints
|
||||||
|
$width-xs: 0;
|
||||||
|
$width-sm: 544px;
|
||||||
|
$width-md: 768px;
|
||||||
|
$width-lg: 1012px;
|
||||||
|
$width-xl: 1280px;
|
||||||
|
|
||||||
|
// New responsive container-width
|
||||||
|
$container-md: $width-md !default;
|
||||||
|
$container-lg: $width-lg !default;
|
||||||
|
$container-xl: $width-xl !default;
|
||||||
|
|
||||||
|
// Breakpoints
|
||||||
|
$breakpoints: (
|
||||||
|
// Small screen / phone
|
||||||
|
sm: $width-sm,
|
||||||
|
// Medium screen / tablet
|
||||||
|
md: $width-md,
|
||||||
|
// Large screen / desktop (980 + (12 * 2)) <= container + gutters
|
||||||
|
lg: $width-lg,
|
||||||
|
// Extra large screen / wide desktop
|
||||||
|
xl: $width-xl
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
// ---- Colors ----
|
||||||
|
|
||||||
|
// Brand
|
||||||
|
$blue: #4078c0 !default;
|
||||||
|
$gray-dark: #333 !default;
|
||||||
|
$gray-light: #999 !default;
|
||||||
|
$gray: #767676 !default;
|
||||||
|
$green: #6cc644 !default;
|
||||||
|
$orange: #c9510c !default;
|
||||||
|
$purple: #6e5494 !default;
|
||||||
|
$red: #bd2c00 !default;
|
||||||
|
$yellow: #ffd36b !default;
|
||||||
|
$white: #fff !default;
|
||||||
|
|
||||||
|
// State indicators.
|
||||||
|
$status-renamed: #fffa5d !default;
|
||||||
|
$status-pending: #cea61b !default;
|
||||||
|
|
||||||
|
// Repository type colors
|
||||||
|
$repo-private-text: #4c4a42 !default;
|
||||||
|
$repo-private-bg: #fff9ea !default;
|
||||||
|
$repo-private-icon: #e9dba5 !default;
|
||||||
|
|
||||||
|
// Alerts
|
||||||
|
$flash-border-blue: #bac6d3 !default;
|
||||||
|
$flash-bg-blue: #e2eef9 !default;
|
||||||
|
$flash-text-blue: #246 !default;
|
||||||
|
|
||||||
|
$flash-border-yellow: #dfd8c2 !default;
|
||||||
|
$flash-bg-yellow: #fff9ea !default;
|
||||||
|
$flash-text-yellow: #4c4a42 !default;
|
||||||
|
|
||||||
|
$flash-border-red: #d2b2b2 !default;
|
||||||
|
$flash-bg-red: #fcdede !default;
|
||||||
|
$flash-text-red: #911 !default;
|
||||||
|
|
||||||
|
$flash-border-green: #bad3be !default;
|
||||||
|
$flash-bg-green: #e2f9e5 !default;
|
||||||
|
$flash-text-green: #22662c !default;
|
||||||
|
|
||||||
|
// Border colors
|
||||||
|
$border-blue: #c5d5dd !default;
|
||||||
|
$border-blue-light: #c9e6f2 !default;
|
||||||
|
$border-blue-dark: $blue !default;
|
||||||
|
$border-red: $flash-border-red !default;
|
||||||
|
$border-red-dark: $red !default;
|
||||||
|
$border-gray-dark: #ddd !default;
|
||||||
|
$border-gray-darker: #444 !default;
|
||||||
|
$border-gray-light: #eee !default;
|
||||||
|
$border-gray: #e5e5e5 !default;
|
||||||
|
|
||||||
|
// Background colors
|
||||||
|
$bg-blue-light: #f2f8fa !default;
|
||||||
|
$bg-blue: $blue !default;
|
||||||
|
$bg-gray-dark: $gray-dark !default;
|
||||||
|
$bg-gray-light: #fafafa !default;
|
||||||
|
$bg-gray: #f5f5f5 !default;
|
||||||
|
$bg-green: $green !default;
|
||||||
|
$bg-green-light: #eaffea !default;
|
||||||
|
$bg-orange: $orange !default;
|
||||||
|
$bg-purple: $purple !default;
|
||||||
|
$bg-red: $red !default;
|
||||||
|
$bg-red-light: #fcdede !default;
|
||||||
|
$bg-white: $white !default;
|
||||||
|
$bg-yellow: $yellow !default;
|
||||||
|
$bg-yellow-light: #fff9ea !default; // same as $flash-bg-yellow and $repo-private-bg
|
||||||
|
|
||||||
|
// Text colors
|
||||||
|
$text-blue: $blue !default;
|
||||||
|
$text-gray-dark: $gray-dark !default;
|
||||||
|
$text-gray-light: $gray-light !default;
|
||||||
|
$text-gray: $gray !default;
|
||||||
|
$text-green: darken($green, 10%) !default;
|
||||||
|
$text-orange: $orange !default;
|
||||||
|
$text-purple: $purple !default;
|
||||||
|
$text-red: $red !default;
|
||||||
|
$text-white: $white !default;
|
||||||
|
|
||||||
|
// Border size
|
||||||
|
$border-width: 1px !default;
|
||||||
|
$border-color: $border-gray !default;
|
||||||
|
$border-style: solid !default;
|
||||||
|
$border: $border-width $border-color $border-style !default;
|
||||||
|
$border-radius: 3px !default;
|
||||||
|
|
||||||
|
// Box shadow
|
||||||
|
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !default;
|
||||||
|
$box-shadow-medium: 0 1px 5px rgba(0, 0, 0, 0.15) !default;
|
||||||
|
$box-shadow-large: 0 1px 15px rgba(0, 0, 0, 0.15) !default;
|
||||||
|
|
||||||
|
// Heading sizes
|
||||||
|
$h00-size: 48px !default;
|
||||||
|
$h0-size: 40px !default;
|
||||||
|
$h1-size: 32px !default;
|
||||||
|
$h2-size: 24px !default;
|
||||||
|
$h3-size: 20px !default;
|
||||||
|
$h4-size: 16px !default;
|
||||||
|
$h5-size: 14px !default;
|
||||||
|
$h6-size: 12px !default;
|
||||||
|
|
||||||
|
$font-weight-bold: 600 !default;
|
||||||
|
$font-weight-semibold: 500 !default;
|
||||||
|
$font-weight-normal: 400 !default;
|
||||||
|
$font-weight-light: 300 !default;
|
||||||
|
|
||||||
|
$font-size-small: 12px !default;
|
||||||
|
|
||||||
|
$lh-condensed-ultra: 1 !default;
|
||||||
|
$lh-condensed: 1.25 !default;
|
||||||
|
$lh-default: 1.5 !default;
|
||||||
|
|
||||||
|
// Font stacks
|
||||||
|
$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||||
|
|
||||||
|
// Monospace font stack
|
||||||
|
$mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
|
||||||
|
|
||||||
|
// The base body size
|
||||||
|
$body-font-size: 14px !default;
|
||||||
|
$body-line-height: $lh-default !default;
|
||||||
|
|
||||||
|
// Tooltips
|
||||||
|
$tooltip-max-width: 250px !default;
|
||||||
|
$tooltip-background-color: rgba(0, 0, 0, 0.8) !default;
|
||||||
|
$tooltip-text-color: #fff !default;
|
||||||
|
$tooltip-delay: 0.4s !default;
|
||||||
|
$tooltip-duration: 0.1s !default;
|
||||||
|
|
||||||
|
$blob-inner-border: #eee;
|
||||||
|
|
||||||
|
$commitBackgroundColor: #f2f9fc;
|
||||||
|
|
||||||
|
$conversationListBorderColor: #eee;
|
||||||
|
|
||||||
|
$exploregrid-item-border-radius: 4px;
|
||||||
|
|
||||||
|
$stats-switcher-py: 10px;
|
||||||
|
// Future proof this `height` value by finding the computed line-height, then
|
||||||
|
// adding the total value of the vertical padding. This var is used to toggle
|
||||||
|
// between the stats bar and language breakdown.
|
||||||
|
$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
|
||||||
|
|
||||||
|
$min_tab_size: 1;
|
||||||
|
$max_tab_size: 12;
|
||||||
96
_sass/primer-support/package.json
Normal file
96
_sass/primer-support/package.json
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
{
|
||||||
|
"_args": [
|
||||||
|
[
|
||||||
|
"primer-support@*",
|
||||||
|
"/Users/pmarsceill/_projects/just-the-docs/node_modules/primer-utilities"
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"_from": "primer-support@*",
|
||||||
|
"_id": "primer-support@1.2.2",
|
||||||
|
"_inCache": true,
|
||||||
|
"_installable": true,
|
||||||
|
"_location": "/primer-support",
|
||||||
|
"_nodeVersion": "7.4.0",
|
||||||
|
"_npmOperationalInternal": {
|
||||||
|
"host": "packages-12-west.internal.npmjs.com",
|
||||||
|
"tmp": "tmp/primer-support-1.2.2.tgz_1485397949758_0.28626534412615"
|
||||||
|
},
|
||||||
|
"_npmUser": {
|
||||||
|
"email": "yes@jonrohan.codes",
|
||||||
|
"name": "jonrohan"
|
||||||
|
},
|
||||||
|
"_npmVersion": "4.0.5",
|
||||||
|
"_phantomChildren": {},
|
||||||
|
"_requested": {
|
||||||
|
"name": "primer-support",
|
||||||
|
"raw": "primer-support@*",
|
||||||
|
"rawSpec": "*",
|
||||||
|
"scope": null,
|
||||||
|
"spec": "*",
|
||||||
|
"type": "range"
|
||||||
|
},
|
||||||
|
"_requiredBy": [
|
||||||
|
"/primer-utilities"
|
||||||
|
],
|
||||||
|
"_resolved": "https://registry.npmjs.org/primer-support/-/primer-support-1.2.2.tgz",
|
||||||
|
"_shasum": "40bcefb3e674a3d4f3e6d4a449e31bde9e0ef4ae",
|
||||||
|
"_shrinkwrap": null,
|
||||||
|
"_spec": "primer-support@*",
|
||||||
|
"_where": "/Users/pmarsceill/_projects/just-the-docs/node_modules/primer-utilities",
|
||||||
|
"author": {
|
||||||
|
"name": "GitHub, Inc."
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/primer/primer-support/issues"
|
||||||
|
},
|
||||||
|
"dependencies": {},
|
||||||
|
"description": "Sass variables, mixins, and functions for use in our components.",
|
||||||
|
"devDependencies": {
|
||||||
|
"stylelint": "*",
|
||||||
|
"stylelint-config-primer": "*"
|
||||||
|
},
|
||||||
|
"directories": {},
|
||||||
|
"dist": {
|
||||||
|
"shasum": "40bcefb3e674a3d4f3e6d4a449e31bde9e0ef4ae",
|
||||||
|
"tarball": "https://registry.npmjs.org/primer-support/-/primer-support-1.2.2.tgz"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"index.scss",
|
||||||
|
"lib"
|
||||||
|
],
|
||||||
|
"gitHead": "43628c583a708db88ce21a0acc357b99ae8c74c8",
|
||||||
|
"homepage": "http://primercss.io/",
|
||||||
|
"keywords": [
|
||||||
|
"css",
|
||||||
|
"functions",
|
||||||
|
"github",
|
||||||
|
"mixins",
|
||||||
|
"primer",
|
||||||
|
"primercss",
|
||||||
|
"scss",
|
||||||
|
"variables"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"maintainers": [
|
||||||
|
{
|
||||||
|
"name": "broccolini",
|
||||||
|
"email": "diana.mounter@gmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "jonrohan",
|
||||||
|
"email": "yes@jonrohan.codes"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"name": "primer-support",
|
||||||
|
"optionalDependencies": {},
|
||||||
|
"readme": "ERROR: No README data found!",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/primer/primer-support.git"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "stylelint **/*.scss -c .stylelintrc.json -s scss"
|
||||||
|
},
|
||||||
|
"style": "index.scss",
|
||||||
|
"version": "1.2.2"
|
||||||
|
}
|
||||||
178
_sass/primer-utilities/CHANGELOG.md
Normal file
178
_sass/primer-utilities/CHANGELOG.md
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
# v3.5.0
|
||||||
|
|
||||||
|
* package version bump and update changelog for styleguide - Mark Otto [github/github@84ffd6d](https://github.com/github/github/commit/84ffd6d)
|
||||||
|
* update comment for @pmarsceill - Mark Otto [github/github@b446760](https://github.com/github/github/commit/b446760)
|
||||||
|
* colors, buttons, and more - Mark Otto [github/github@307d8ce](https://github.com/github/github/commit/307d8ce)
|
||||||
|
* Bump version and update CHANGELOG - Mu-An Chiou [github/github@b4de751](https://github.com/github/github/commit/b4de751)
|
||||||
|
* Add focus guide button - Mu-An Chiou [github/github@2101e25](https://github.com/github/github/commit/2101e25)
|
||||||
|
* Add title and change button activation copy - Mu-An Chiou [github/github@35af0e4](https://github.com/github/github/commit/35af0e4)
|
||||||
|
* initial docs - Caleb Winters [github/github@7a576e5](https://github.com/github/github/commit/7a576e5)
|
||||||
|
* Add .sr-only doc - Mu-An Chiou [github/github@2068b05](https://github.com/github/github/commit/2068b05)
|
||||||
|
* Move .sr-only to to cored utility and add sr-only logout button - Mu-An Chiou [github/github@0c1a73f](https://github.com/github/github/commit/0c1a73f)
|
||||||
|
|
||||||
|
# v3.3.1
|
||||||
|
|
||||||
|
* bumping the version - Jon Rohan [github/github@4a72b25](https://github.com/github/github/commit/4a72b25)
|
||||||
|
* flexbug copy tweak - broccolini [github/github@6a4a4d2](https://github.com/github/github/commit/6a4a4d2)
|
||||||
|
|
||||||
|
# v3.3.0
|
||||||
|
|
||||||
|
* Docs update - Patrick Marsceill [github/github@3acfa8e](https://github.com/github/github/commit/3acfa8e)
|
||||||
|
* Comma splice - Patrick Marsceill [github/github@754ae36](https://github.com/github/github/commit/754ae36)
|
||||||
|
* rip out box-shadows and use TOC not hard coded links - Patrick Marsceill [github/github@ba64689](https://github.com/github/github/commit/ba64689)
|
||||||
|
* Makd small default - Patrick Marsceill [github/github@fcebabb](https://github.com/github/github/commit/fcebabb)
|
||||||
|
* Tidy up the docs - Patrick Marsceill [github/github@04a5a9e](https://github.com/github/github/commit/04a5a9e)
|
||||||
|
* Update old classname in docs - Patrick Marsceill [github/github@9a905ba](https://github.com/github/github/commit/9a905ba)
|
||||||
|
* Use Box not utils for example - Patrick Marsceill [github/github@d10cba8](https://github.com/github/github/commit/d10cba8)
|
||||||
|
* Update page heading levels for toc - Patrick Marsceill [github/github@8ffa7ab](https://github.com/github/github/commit/8ffa7ab)
|
||||||
|
* Bump package version number - Patrick Marsceill [github/github@72e938a](https://github.com/github/github/commit/72e938a)
|
||||||
|
* Update docs - Patrick Marsceill [github/github@36be95e](https://github.com/github/github/commit/36be95e)
|
||||||
|
* Consolidate box-shadow styles - Patrick Marsceill [github/github@35cdd34](https://github.com/github/github/commit/35cdd34)
|
||||||
|
* Implement shadow vars - Patrick Marsceill [github/github@8f8aaf0](https://github.com/github/github/commit/8f8aaf0)
|
||||||
|
* add docs for flexbox bug - broccolini [github/github@ce472fc](https://github.com/github/github/commit/ce472fc)
|
||||||
|
* add flex-shrink utility to review status - broccolini [github/github@2ac6ae8](https://github.com/github/github/commit/2ac6ae8)
|
||||||
|
* bump version number - broccolini [github/github@903297b](https://github.com/github/github/commit/903297b)
|
||||||
|
* add imports for new partials - broccolini [github/github@bdfb45c](https://github.com/github/github/commit/bdfb45c)
|
||||||
|
* move flexbox styles into their own partial - broccolini [github/github@a82b8f3](https://github.com/github/github/commit/a82b8f3)
|
||||||
|
* move display and visibility utilities into separate partial - broccolini [github/github@bcb21b0](https://github.com/github/github/commit/bcb21b0)
|
||||||
|
* Disable selector-no-utility because this is the utility - Patrick Marsceill [github/github@d6871fb](https://github.com/github/github/commit/d6871fb)
|
||||||
|
* add new docs - Patrick Marsceill [github/github@704fd67](https://github.com/github/github/commit/704fd67)
|
||||||
|
* remove old documentation - Patrick Marsceill [github/github@449fb2a](https://github.com/github/github/commit/449fb2a)
|
||||||
|
* Move legacy box-shadow to new scss partial - Patrick Marsceill [github/github@89bca94](https://github.com/github/github/commit/89bca94)
|
||||||
|
* refactor numbering to include old box-shadow - Patrick Marsceill [github/github@414fd6a](https://github.com/github/github/commit/414fd6a)
|
||||||
|
* depricate old box-shadow-large - Patrick Marsceill [github/github@73effa4](https://github.com/github/github/commit/73effa4)
|
||||||
|
* Discrete box-shadow utils - Patrick Marsceill [github/github@d430697](https://github.com/github/github/commit/d430697)
|
||||||
|
* Removing needless disables - Jon Rohan [github/github@6233c40](https://github.com/github/github/commit/6233c40)
|
||||||
|
* Making updates to wording cc @broccolini - Jon Rohan [github/github@d2bf29f](https://github.com/github/github/commit/d2bf29f)
|
||||||
|
* Make all href #url - Mu-An Chiou [github/github@27ba40c](https://github.com/github/github/commit/27ba40c)
|
||||||
|
* Add wb-break-all to docs - Jason Long [github/github@169f2da](https://github.com/github/github/commit/169f2da)
|
||||||
|
* adding text-gray-dark and more acurately mentioning standards - Jon Rohan [github/github@55de600](https://github.com/github/github/commit/55de600)
|
||||||
|
* Bump version - Jason Long [github/github@2404538](https://github.com/github/github/commit/2404538)
|
||||||
|
* Update typography.scss - Jason Long [github/github@ad36e9b](https://github.com/github/github/commit/ad36e9b)
|
||||||
|
* update bg-yellow variables - broccolini [github/github@79701f2](https://github.com/github/github/commit/79701f2)
|
||||||
|
* Remove trailing line break which confuses guide.rb - Mu-An Chiou [github/github@9028863](https://github.com/github/github/commit/9028863)
|
||||||
|
* Improve code samples - Add URL to <a> - Add aria-label to <input> - Add type to <button> - Replace unnecessary <a> with <div> - Mu-An Chiou [github/github@42e67c8](https://github.com/github/github/commit/42e67c8)
|
||||||
|
* Add border to show block difference - Mu-An Chiou [github/github@22f7bdd](https://github.com/github/github/commit/22f7bdd)
|
||||||
|
* Link somewhere, since # shouldn't be allowed - Mu-An Chiou [github/github@09cb5f1](https://github.com/github/github/commit/09cb5f1)
|
||||||
|
|
||||||
|
# v3.0.0
|
||||||
|
|
||||||
|
|
||||||
|
# v2.0.0
|
||||||
|
|
||||||
|
* Cutting new versions of primer modules - Jon Rohan [github/github@157f5ab](https://github.com/github/github/commit/157f5ab)
|
||||||
|
* Updating layout hints - Jon Rohan [github/github@d6cc7dc](https://github.com/github/github/commit/d6cc7dc)
|
||||||
|
* mentioning link instead of text - Jon Rohan [github/github@008fd98](https://github.com/github/github/commit/008fd98)
|
||||||
|
* Updating the color hints to mention the variables - Jon Rohan [github/github@32a5752](https://github.com/github/github/commit/32a5752)
|
||||||
|
* Replace instances that can be replaced. Delete shadows when on white bgs. - Sophie Shepherd [github/github@e33bf62](https://github.com/github/github/commit/e33bf62)
|
||||||
|
* Add utility classes to typography scss - Sophie Shepherd [github/github@0116477](https://github.com/github/github/commit/0116477)
|
||||||
|
* Rename repository with prefix primer- - Jon Rohan [github/github@ec8774a](https://github.com/github/github/commit/ec8774a)
|
||||||
|
* Using 0 instead of 0px - Jon Rohan [github/github@3c5bcf5](https://github.com/github/github/commit/3c5bcf5)
|
||||||
|
* new argument name, add comments in code - Caleb Winters [github/github@51251be](https://github.com/github/github/commit/51251be)
|
||||||
|
* fix whitelisting - Caleb Winters [github/github@26fba58](https://github.com/github/github/commit/26fba58)
|
||||||
|
* polishing the docs, adding better examples - Caleb Winters [github/github@a7c5fb6](https://github.com/github/github/commit/a7c5fb6)
|
||||||
|
* change tag to experimental, add link to MDN - Caleb Winters [github/github@a47e282](https://github.com/github/github/commit/a47e282)
|
||||||
|
* remove global flex property - Caleb Winters [github/github@16491b8](https://github.com/github/github/commit/16491b8)
|
||||||
|
* Kill unneeded attribute - Patrick Marsceill [github/github@6c071dc](https://github.com/github/github/commit/6c071dc)
|
||||||
|
* Make default box shadow a var and apply it to .box-shadow utility - Patrick Marsceill [github/github@bda03be](https://github.com/github/github/commit/bda03be)
|
||||||
|
* Update box shadow to be better - Patrick Marsceill [github/github@6cbd1f0](https://github.com/github/github/commit/6cbd1f0)
|
||||||
|
* list styles without admin.deps - Sophie Shepherd [github/github@450f684](https://github.com/github/github/commit/450f684)
|
||||||
|
* Revert "Add list-style: none; utility" - Sophie Shepherd [github/github@c6d72f2](https://github.com/github/github/commit/c6d72f2)
|
||||||
|
* Add list-style: none; utility - Sophie Shepherd [github/github@7a494d8](https://github.com/github/github/commit/7a494d8)
|
||||||
|
* Add bg-shade-gradient - Patrick Marsceill [github/github@c7efe79](https://github.com/github/github/commit/c7efe79)
|
||||||
|
* Separating out modules into primer-core and primer-product - Jon Rohan [github/github@ddf698c](https://github.com/github/github/commit/ddf698c)
|
||||||
|
|
||||||
|
# v1.0.0
|
||||||
|
|
||||||
|
* Updating to major new version - Jon Rohan [github/github@f0df999](https://github.com/github/github/commit/f0df999)
|
||||||
|
* Replacing .text-muted and .mute with .text-gray and .text-gray-dark - Jon Rohan [github/github@0ddd68d](https://github.com/github/github/commit/0ddd68d)
|
||||||
|
* Replacing .danger with .text-red - Jon Rohan [github/github@3f99b1f](https://github.com/github/github/commit/3f99b1f)
|
||||||
|
* Removing text-danger and using text-red - Jon Rohan [github/github@15627aa](https://github.com/github/github/commit/15627aa)
|
||||||
|
* Remove .hidden - Mu-An Chiou [github/github@8701f4b](https://github.com/github/github/commit/8701f4b)
|
||||||
|
* Removing text-success class and replacing with text-green - Jon Rohan [github/github@74529f7](https://github.com/github/github/commit/74529f7)
|
||||||
|
* Removing text-closed class and replacing with text-red - Jon Rohan [github/github@a3bceee](https://github.com/github/github/commit/a3bceee)
|
||||||
|
* Replacing m-auto with the newer class mx-auto - Jon Rohan [github/github@f2b3354](https://github.com/github/github/commit/f2b3354)
|
||||||
|
* Remove .text-open from the codebase, using .text-green instead - Jon Rohan [github/github@ec6cb2a](https://github.com/github/github/commit/ec6cb2a)
|
||||||
|
* Remove .text-diff-added from the codebase, using .text-green instead - Jon Rohan [github/github@aa0791d](https://github.com/github/github/commit/aa0791d)
|
||||||
|
* Remove .text-diff-deleted from the codebase, using .text-red instead - Jon Rohan [github/github@a5fecd0](https://github.com/github/github/commit/a5fecd0)
|
||||||
|
* Remove .text-failure from the codebase, using .text-red instead - Jon Rohan [github/github@6626959](https://github.com/github/github/commit/6626959)
|
||||||
|
* Remove .text-error from the codebase, using .text-red instead - Jon Rohan [github/github@dc31063](https://github.com/github/github/commit/dc31063)
|
||||||
|
* move animations into utilities module cc @jonrohan - broccolini [github/github@0c6d032](https://github.com/github/github/commit/0c6d032)
|
||||||
|
|
||||||
|
# v0.6.0
|
||||||
|
|
||||||
|
* Updating version - Jon Rohan [github/github@6bf5fe5](https://github.com/github/github/commit/6bf5fe5)
|
||||||
|
* card tweaks to get labels and assignees in there - Mark Otto [github/github@e341b50](https://github.com/github/github/commit/e341b50)
|
||||||
|
* add line space between rule - broccolini [github/github@b02308e](https://github.com/github/github/commit/b02308e)
|
||||||
|
* Updating link to real primer-css repository - Jon Rohan [github/github@bbaedda](https://github.com/github/github/commit/bbaedda)
|
||||||
|
* Fixing typo in vertical alignment utilities closes https://github.com/primer/utilities/pull/1 cc @fabianperez - Jon Rohan [github/github@78bb59c](https://github.com/github/github/commit/78bb59c)
|
||||||
|
* Updating the modules stylelint - Jon Rohan [github/github@389609f](https://github.com/github/github/commit/389609f)
|
||||||
|
* move over all bold variable changes - Mark Otto [github/github@6b5b021](https://github.com/github/github/commit/6b5b021)
|
||||||
|
* disable lints because easier to read through like this - broccolini [github/github@dbc50c3](https://github.com/github/github/commit/dbc50c3)
|
||||||
|
* change h0 h00 to f0 f00 to match light type utils - broccolini [github/github@bacbb65](https://github.com/github/github/commit/bacbb65)
|
||||||
|
|
||||||
|
# v0.5.0
|
||||||
|
|
||||||
|
* Bumping to a new version - Jon Rohan [github/github@ff32813](https://github.com/github/github/commit/ff32813)
|
||||||
|
* Make sure the modules build without error before publishing - Jon Rohan [github/github@57ac5e6](https://github.com/github/github/commit/57ac5e6)
|
||||||
|
* Adding docs for margin and padding - Jon Rohan [github/github@4ec0398](https://github.com/github/github/commit/4ec0398)
|
||||||
|
* ohhhh remove that my bad - Mark Otto [github/github@caa46b2](https://github.com/github/github/commit/caa46b2)
|
||||||
|
* Adjusting the regex and cleaning up unused classes - Jon Rohan [github/github@d3c1cce](https://github.com/github/github/commit/d3c1cce)
|
||||||
|
* Creating a depcreated classes test to watch for any deprecated class use - Jon Rohan [github/github@1e001c1](https://github.com/github/github/commit/1e001c1)
|
||||||
|
* utils - Mark Otto [github/github@23cec0a](https://github.com/github/github/commit/23cec0a)
|
||||||
|
|
||||||
|
# v0.4.0
|
||||||
|
|
||||||
|
* Publishing a new version - Jon Rohan [github/github@eed0e96](https://github.com/github/github/commit/eed0e96)
|
||||||
|
* Moving the min-width to a utility - Jon Rohan [github/github@1560299](https://github.com/github/github/commit/1560299)
|
||||||
|
* New line-height variables - Mark Otto [github/github@b15b1ea](https://github.com/github/github/commit/b15b1ea)
|
||||||
|
* re-order type utilities - broccolini [github/github@8314eba](https://github.com/github/github/commit/8314eba)52
|
||||||
|
* correct h3 size - broccolini [github/github@a2581ae](https://github.com/github/github/commit/a2581ae)d
|
||||||
|
* Removing some unnecessary lint plugins and using native - Jon Rohan [github/github@2ae0070](https://github.com/github/github/commit/2ae0070)
|
||||||
|
* including no-utility lint plugin - Jon Rohan [github/github@5cb86ed](https://github.com/github/github/commit/5cb86ed)
|
||||||
|
|
||||||
|
# v0.3.0
|
||||||
|
|
||||||
|
* 0.3.0 - Jon Rohan [github/github@8478cb3](https://github.com/github/github/commit/8478cb3)
|
||||||
|
* revert to correct plugins - Jon Rohan [github/github@bcffe49](https://github.com/github/github/commit/bcffe49)
|
||||||
|
* Adding stats script to generate build/index.js file - Jon Rohan [github/github@91a4720](https://github.com/github/github/commit/91a4720)
|
||||||
|
* Adding lint plugins for new config - Jon Rohan [github/github@7fb9613](https://github.com/github/github/commit/7fb9613)
|
||||||
|
* fix typo on visibility utility - broccolini [github/github@7d52b85](https://github.com/github/github/commit/7d52b85)
|
||||||
|
|
||||||
|
# v0.2.2
|
||||||
|
|
||||||
|
* Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7)
|
||||||
|
* Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf)
|
||||||
|
* Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0)
|
||||||
|
* Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291)
|
||||||
|
|
||||||
|
# v0.2.1
|
||||||
|
|
||||||
|
* Bumping version to include postcss.json in npm - Jon Rohan [github/github@9e560ba](https://github.com/github/github/commit/9e560ba)
|
||||||
|
* Using stylelint to lint the modules instead of scss_lint - Jon Rohan [github/github@cb0b8fd](https://github.com/github/github/commit/cb0b8fd)
|
||||||
|
* Updating stats recorder and removing some unused lint disables - Jon Rohan [github/github@6dbdfe1](https://github.com/github/github/commit/6dbdfe1)
|
||||||
|
* Updating for stylelint instead of scss_lint - Jon Rohan [github/github@87a2c68](https://github.com/github/github/commit/87a2c68)
|
||||||
|
|
||||||
|
# v0.2.0
|
||||||
|
|
||||||
|
* Cutting new version 0.2.0 - Jon Rohan [github/github@a6f6586](https://github.com/github/github/commit/a6f6586)
|
||||||
|
* Don't link requirements - Jon Rohan [github/github@7740e81](https://github.com/github/github/commit/7740e81)
|
||||||
|
* Updating the README with more detailed instructions - Jon Rohan [github/github@5dd7c34](https://github.com/github/github/commit/5dd7c34)
|
||||||
|
* Reorganize the module folders into a more flexible organization - Jon Rohan [github/github@5a07101](https://github.com/github/github/commit/5a07101)
|
||||||
|
* cleaning up the package.json files - Jon Rohan [github/github@77763a1](https://github.com/github/github/commit/77763a1)
|
||||||
|
* Adding npm version badges to readme - Jon Rohan [github/github@90b1871](https://github.com/github/github/commit/90b1871)
|
||||||
|
* Adding tavisci build badges to the readmes - Jon Rohan [github/github@1a6126f](https://github.com/github/github/commit/1a6126f)
|
||||||
|
|
||||||
|
# v0.1.0
|
||||||
|
|
||||||
|
* Updating support dependency versions - Jon Rohan [github/github@76d97ec](https://github.com/github/github/commit/76d97ec)
|
||||||
|
* Moving text base utilities to utilities module - Jon Rohan [github/github@ac7383e](https://github.com/github/github/commit/ac7383e)
|
||||||
|
* polish select target page - Caleb Winters [github/github@2ca8bb1](https://github.com/github/github/commit/2ca8bb1)
|
||||||
|
* use scss-lint:disable for now - Jon Rohan [github/github@7532519](https://github.com/github/github/commit/7532519)
|
||||||
|
* typo in install instructions - Jon Rohan [github/github@27b72e4](https://github.com/github/github/commit/27b72e4)
|
||||||
|
* Adding primer-support dependency - Jon Rohan [github/github@0961785](https://github.com/github/github/commit/0961785)
|
||||||
|
* Adding more relevant info to the package.json file - Jon Rohan [github/github@1715cfd](https://github.com/github/github/commit/1715cfd)
|
||||||
|
* Moving license to stylesheets directory to reuse for other modules - Jon Rohan [github/github@8fa7b44](https://github.com/github/github/commit/8fa7b44)
|
||||||
|
* Adding a little bit more description to readme - Jon Rohan [github/github@7a29727](https://github.com/github/github/commit/7a29727)
|
||||||
|
* Add info about saving in install - Jon Rohan [github/github@3f0aa6d](https://github.com/github/github/commit/3f0aa6d)
|
||||||
|
* Creating a utilities module - Jon Rohan [github/github@7dc4d41](https://github.com/github/github/commit/7dc4d41)
|
||||||
21
_sass/primer-utilities/LICENSE
Normal file
21
_sass/primer-utilities/LICENSE
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.
|
||||||
48
_sass/primer-utilities/README.md
Normal file
48
_sass/primer-utilities/README.md
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
# Primer CSS Utilities
|
||||||
|
|
||||||
|
[](https://www.npmjs.org/package/primer-utilities)
|
||||||
|
[](https://travis-ci.org/primer/utilities)
|
||||||
|
|
||||||
|
> 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-css][primer-css] repository.
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-utilities` with this command.
|
||||||
|
|
||||||
|
```
|
||||||
|
$ npm install --save primer-utilities
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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-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
|
||||||
|
|
||||||
|
You can read more about utilities in the [docs folder](./docs/).
|
||||||
|
|
||||||
|
## 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
_sass/primer-utilities/build/build.css
Normal file
1
_sass/primer-utilities/build/build.css
Normal file
File diff suppressed because one or more lines are too long
1
_sass/primer-utilities/build/index.js
Normal file
1
_sass/primer-utilities/build/index.js
Normal file
File diff suppressed because one or more lines are too long
13
_sass/primer-utilities/index.scss
Normal file
13
_sass/primer-utilities/index.scss
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
@import "primer-support/index.scss";
|
||||||
|
// utilities
|
||||||
|
@import "./lib/animations.scss";
|
||||||
|
@import "./lib/borders.scss";
|
||||||
|
@import "./lib/box-shadow.scss";
|
||||||
|
@import "./lib/colors.scss";
|
||||||
|
@import "./lib/flexbox.scss";
|
||||||
|
@import "./lib/layout.scss";
|
||||||
|
@import "./lib/margin.scss";
|
||||||
|
@import "./lib/padding.scss";
|
||||||
|
@import "./lib/typography.scss";
|
||||||
|
// Visibility and display should always come last in the imports so that they override other utilities with !important
|
||||||
|
@import "./lib/visibility-display.scss";
|
||||||
153
_sass/primer-utilities/lib/animations.scss
Normal file
153
_sass/primer-utilities/lib/animations.scss
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
// This file contains reusable animations for github.
|
||||||
|
// stylelint-disable primer/selector-no-utility
|
||||||
|
// Fade in
|
||||||
|
// A class to fade in an element on the page.
|
||||||
|
.anim-fade-in {
|
||||||
|
animation-name: fade-in;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
|
||||||
|
&.fast {
|
||||||
|
animation-duration: 300ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade in and slide up an element */
|
||||||
|
.anim-fade-up {
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: fade-up;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-up {
|
||||||
|
0% {
|
||||||
|
opacity: 0.8;
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade an element out and slide down */
|
||||||
|
.anim-fade-down {
|
||||||
|
animation-name: fade-down;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-down {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grow an element width from 0 to 100% */
|
||||||
|
.anim-grow-x {
|
||||||
|
width: 0%;
|
||||||
|
animation-name: grow-x;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease;
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes grow-x {
|
||||||
|
to { width: 100%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shrink an element from 100% to 0% */
|
||||||
|
.anim-shrink-x {
|
||||||
|
animation-name: shrink-x;
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shrink-x {
|
||||||
|
to { width: 0%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade in an element and scale it fast */
|
||||||
|
.anim-scale-in {
|
||||||
|
animation-name: scale-in;
|
||||||
|
animation-duration: 0.15s;
|
||||||
|
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulse an element's opacity */
|
||||||
|
.anim-pulse {
|
||||||
|
animation-name: pulse;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulse in an element */
|
||||||
|
.anim-pulse-in {
|
||||||
|
animation-name: pulse-in;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-in {
|
||||||
|
0% {
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
53
_sass/primer-utilities/lib/borders.scss
Normal file
53
_sass/primer-utilities/lib/borders.scss
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
// Border utilities
|
||||||
|
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
|
||||||
|
|
||||||
|
/* Add a gray border */
|
||||||
|
.border { border: $border !important; }
|
||||||
|
/* Add a gray border to the top */
|
||||||
|
.border-top { border-top: $border !important; }
|
||||||
|
/* Add a gray border to the right */
|
||||||
|
.border-right { border-right: $border !important; }
|
||||||
|
/* Add a gray border to the bottom */
|
||||||
|
.border-bottom { border-bottom: $border !important; }
|
||||||
|
/* Add a gray border to the left */
|
||||||
|
.border-left { border-left: $border !important; }
|
||||||
|
/* Add a gray border to the left and right */
|
||||||
|
.border-y {
|
||||||
|
border-top: $border !important;
|
||||||
|
border-bottom: $border !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-dashed { border-style: dashed !important; }
|
||||||
|
|
||||||
|
/* Use with .border to turn the border blue */
|
||||||
|
.border-blue { border-color: $border-blue !important; }
|
||||||
|
/* Use with .border to turn the border blue */
|
||||||
|
.border-blue-dark { border-color: $border-blue-dark !important; }
|
||||||
|
/* Use with .border to turn the border red */
|
||||||
|
.border-red { border-color: $border-red !important; }
|
||||||
|
/* Use with .border to turn the border red */
|
||||||
|
.border-red-dark { border-color: $border-red-dark !important; }
|
||||||
|
/* Use with .border to turn the border gray-light */
|
||||||
|
.border-gray-light { border-color: $border-gray-light !important; }
|
||||||
|
/* Use with .border to turn the border gray-dark */
|
||||||
|
.border-gray-dark { border-color: $border-gray-dark !important; }
|
||||||
|
|
||||||
|
// Without borders
|
||||||
|
/* Remove all borders */
|
||||||
|
.border-0 { border: 0 !important; }
|
||||||
|
/* Remove the top border */
|
||||||
|
.border-top-0 { border-top: 0 !important; }
|
||||||
|
/* Remove the right border */
|
||||||
|
.border-right-0 { border-right: 0 !important; }
|
||||||
|
/* Remove the bottom border */
|
||||||
|
.border-bottom-0 { border-bottom: 0 !important; }
|
||||||
|
/* Remove the left border */
|
||||||
|
.border-left-0 { border-left: 0 !important; }
|
||||||
|
|
||||||
|
// Rounded corners
|
||||||
|
/* Remove the border-radius */
|
||||||
|
.rounded-0 { border-radius: 0 !important; }
|
||||||
|
/* Add a border-radius to all corners */
|
||||||
|
.rounded-1 { border-radius: $border-radius !important; }
|
||||||
|
/* Add a 2x border-radius to all corners */
|
||||||
|
.rounded-2 { border-radius: $border-radius * 2 !important; }
|
||||||
22
_sass/primer-utilities/lib/box-shadow.scss
Normal file
22
_sass/primer-utilities/lib/box-shadow.scss
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
// Box shadow utilities
|
||||||
|
// stylelint-disable primer/selector-no-utility
|
||||||
|
|
||||||
|
// Box shadows
|
||||||
|
|
||||||
|
.box-shadow {
|
||||||
|
box-shadow: $box-shadow !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-shadow-medium {
|
||||||
|
box-shadow: $box-shadow-medium !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-shadow-large {
|
||||||
|
box-shadow: $box-shadow-large !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Turn off box shadow
|
||||||
|
|
||||||
|
.box-shadow-none {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
109
_sass/primer-utilities/lib/colors.scss
Normal file
109
_sass/primer-utilities/lib/colors.scss
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
// Color utilities
|
||||||
|
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
|
||||||
|
// stylelint-disable comment-empty-line-before
|
||||||
|
|
||||||
|
// background colors
|
||||||
|
/* Set the background to $bg-white */
|
||||||
|
.bg-white { background-color: $bg-white !important; }
|
||||||
|
/* Set the background to $bg-blue */
|
||||||
|
.bg-blue { background-color: $bg-blue !important; }
|
||||||
|
/* Set the background to $bg-blue-light */
|
||||||
|
.bg-blue-light { background-color: $bg-blue-light !important; }
|
||||||
|
/* Set the background to $bg-gray-dark */
|
||||||
|
.bg-gray-dark { background-color: $bg-gray-dark !important; }
|
||||||
|
/* Set the background to $bg-gray */
|
||||||
|
.bg-gray { background-color: $bg-gray !important; }
|
||||||
|
/* Set the background to $bg-gray-light */
|
||||||
|
.bg-gray-light { background-color: $bg-gray-light !important; }
|
||||||
|
/* Set the background to $bg-green */
|
||||||
|
.bg-green { background-color: $bg-green !important; }
|
||||||
|
/* Set the background to $bg-green-light */
|
||||||
|
.bg-green-light { background-color: $bg-green-light !important; }
|
||||||
|
/* Set the background to $bg-red */
|
||||||
|
.bg-red { background-color: $bg-red !important; }
|
||||||
|
/* Set the background to $bg-red-light */
|
||||||
|
.bg-red-light { background-color: $bg-red-light !important; }
|
||||||
|
/* Set the background to $bg-yellow */
|
||||||
|
.bg-yellow { background-color: $bg-yellow !important; }
|
||||||
|
/* Set the background to $bg-yellow-light */
|
||||||
|
.bg-yellow-light { background-color: $bg-yellow-light !important; }
|
||||||
|
/* Set the background to $bg-purple */
|
||||||
|
.bg-purple { background-color: $bg-purple !important; }
|
||||||
|
|
||||||
|
.bg-shade-gradient {
|
||||||
|
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.065), rgba(0, 0, 0, 0)) !important;
|
||||||
|
background-repeat: no-repeat !important;
|
||||||
|
background-size: 100% 200px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// text colors
|
||||||
|
/* Set the text color to $text-blue */
|
||||||
|
.text-blue { color: $text-blue !important; }
|
||||||
|
/* Set the text color to $text-red */
|
||||||
|
.text-red { color: $text-red !important; }
|
||||||
|
/* Set the text color to $text-gray-light */
|
||||||
|
.text-gray-light { color: $text-gray-light !important; }
|
||||||
|
/* Set the text color to $text-gray */
|
||||||
|
.text-gray { color: $text-gray !important; }
|
||||||
|
/* Set the text color to $text-gray-dark */
|
||||||
|
.text-gray-dark { color: $text-gray-dark !important; }
|
||||||
|
/* Set the text color to $text-green */
|
||||||
|
.text-green { color: $text-green !important; }
|
||||||
|
/* Set the text color to $text-orange */
|
||||||
|
.text-orange { color: $text-orange !important; }
|
||||||
|
/* Set the text color to $text-purple */
|
||||||
|
.text-purple { color: $text-purple !important; }
|
||||||
|
/* Set the text color to $text-white */
|
||||||
|
.text-white { color: $text-white !important; }
|
||||||
|
/* Set the text color to inherit */
|
||||||
|
.text-inherit { color: inherit !important; }
|
||||||
|
|
||||||
|
// Text states
|
||||||
|
.text-renamed { color: $status-renamed !important; }
|
||||||
|
.text-pending { color: $status-pending !important; }
|
||||||
|
|
||||||
|
// Link colors
|
||||||
|
// Sets the links color to $text-gray and $text-blue on hover
|
||||||
|
.link-gray {
|
||||||
|
color: $text-gray !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $text-blue !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sets the links color to $text-gray-dark and $text-blue on hover
|
||||||
|
.link-gray-dark {
|
||||||
|
color: $text-gray-dark !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $text-blue !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the link color to $text-blue on hover
|
||||||
|
Useful when you want only part of a link to turn blue on hover */
|
||||||
|
.link-hover-blue {
|
||||||
|
&:hover {
|
||||||
|
color: $text-blue !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make a link $text-gray, then $text-blue on hover and removes the underline */
|
||||||
|
.muted-link {
|
||||||
|
color: $text-gray !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $text-blue !important;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shade gradient
|
||||||
|
//
|
||||||
|
// Shade gradient style from Basecoat
|
||||||
|
.shade-gradient {
|
||||||
|
background-image: linear-gradient(180deg, #f5f5f5, #fff);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 200px;
|
||||||
|
}
|
||||||
81
_sass/primer-utilities/lib/flexbox.scss
Normal file
81
_sass/primer-utilities/lib/flexbox.scss
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
// Flex utility classes
|
||||||
|
|
||||||
|
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
|
||||||
|
// stylelint-disable comment-empty-line-before
|
||||||
|
|
||||||
|
// - - - - - - - - - - - - - - - - - - - - - - -
|
||||||
|
// This is a template for generating the flex utility classes.
|
||||||
|
// A version of each class will be generated without a breakpoint,
|
||||||
|
// along with a variant for each breakpoint.
|
||||||
|
// - - - - - - - - - - - - - - - - - - - - - - -
|
||||||
|
|
||||||
|
@mixin flexUtility($breakpoint: 0) {
|
||||||
|
|
||||||
|
// This is the breakpoint that will be inserted into class names
|
||||||
|
$breakstring: -#{$breakpoint}; // example: `.d-sm-flex`
|
||||||
|
|
||||||
|
// If there's no breakpoint, the $breakstring value will be blank.
|
||||||
|
@if $breakpoint == 0 {
|
||||||
|
$breakstring: ""; // example: `.d-flex`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flexbox classes
|
||||||
|
// Container
|
||||||
|
.d#{$breakstring}-flex { display: flex !important; }
|
||||||
|
.d#{$breakstring}-inline-flex { display: inline-flex !important; }
|
||||||
|
|
||||||
|
.flex#{$breakstring}-row { flex-direction: row !important; }
|
||||||
|
.flex#{$breakstring}-column { flex-direction: column !important; }
|
||||||
|
|
||||||
|
.flex#{$breakstring}-wrap { flex-wrap: wrap !important; }
|
||||||
|
.flex#{$breakstring}-nowrap { flex-wrap: nowrap !important; }
|
||||||
|
|
||||||
|
.flex#{$breakstring}-justify-start { justify-content: flex-start !important; }
|
||||||
|
.flex#{$breakstring}-justify-end { justify-content: flex-end !important; }
|
||||||
|
.flex#{$breakstring}-justify-center { justify-content: center !important; }
|
||||||
|
.flex#{$breakstring}-justify-between { justify-content: space-between !important; }
|
||||||
|
.flex#{$breakstring}-justify-around { justify-content: space-around !important; }
|
||||||
|
|
||||||
|
.flex#{$breakstring}-items-start { align-items: flex-start !important; }
|
||||||
|
.flex#{$breakstring}-items-end { align-items: flex-end !important; }
|
||||||
|
.flex#{$breakstring}-items-center { align-items: center !important; }
|
||||||
|
.flex#{$breakstring}-items-baseline { align-items: baseline !important; }
|
||||||
|
.flex#{$breakstring}-items-stretch { align-items: stretch !important; }
|
||||||
|
|
||||||
|
.flex#{$breakstring}-content-start { align-content: flex-start !important; }
|
||||||
|
.flex#{$breakstring}-content-end { align-content: flex-end !important; }
|
||||||
|
.flex#{$breakstring}-content-center { align-content: center !important; }
|
||||||
|
.flex#{$breakstring}-content-between { align-content: space-between !important; }
|
||||||
|
.flex#{$breakstring}-content-around { align-content: space-around !important; }
|
||||||
|
.flex#{$breakstring}-content-stretch { align-content: stretch !important; }
|
||||||
|
|
||||||
|
// Item
|
||||||
|
.flex#{$breakstring}-auto { flex: 1 1 auto !important; }
|
||||||
|
.flex#{$breakstring}-shrink-0 { flex-shrink: 0 !important; }
|
||||||
|
|
||||||
|
.flex#{$breakstring}-self-auto { align-self: auto !important; }
|
||||||
|
.flex#{$breakstring}-self-start { align-self: flex-start !important; }
|
||||||
|
.flex#{$breakstring}-self-end { align-self: flex-end !important; }
|
||||||
|
.flex#{$breakstring}-self-center { align-self: center !important; }
|
||||||
|
.flex#{$breakstring}-self-baseline { align-self: baseline !important; }
|
||||||
|
.flex#{$breakstring}-self-stretch { align-self: stretch !important; }
|
||||||
|
|
||||||
|
// Shorthand for equal width and height cols
|
||||||
|
.flex#{$breakstring}-item-equal {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate basic flexbox classes
|
||||||
|
@include flexUtility();
|
||||||
|
|
||||||
|
// Loop through the breakpoint values to create responsive classes
|
||||||
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
|
||||||
|
// Loop through the spacer values
|
||||||
|
@include breakpoint($breakpoint) {
|
||||||
|
@include flexUtility($breakpoint);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
96
_sass/primer-utilities/lib/layout.scss
Normal file
96
_sass/primer-utilities/lib/layout.scss
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
// Layout
|
||||||
|
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||||
|
// stylelint-disable comment-empty-line-before
|
||||||
|
|
||||||
|
/* Set position to static */
|
||||||
|
.position-static { position: static !important; }
|
||||||
|
/* Set position to relative */
|
||||||
|
.position-relative { position: relative !important; }
|
||||||
|
/* Set position to absolute */
|
||||||
|
.position-absolute { position: absolute !important; }
|
||||||
|
/* Set position to fixed */
|
||||||
|
.position-fixed { position: fixed !important; }
|
||||||
|
|
||||||
|
/* Set top 0 */
|
||||||
|
.top-0 { top: 0 !important; }
|
||||||
|
/* Set right 0 */
|
||||||
|
.right-0 { right: 0 !important; }
|
||||||
|
/* Set bottom 0 */
|
||||||
|
.bottom-0 { bottom: 0 !important; }
|
||||||
|
/* Set left 0 */
|
||||||
|
.left-0 { left: 0 !important; }
|
||||||
|
|
||||||
|
/* Vertical align middle */
|
||||||
|
.v-align-middle { vertical-align: middle !important; }
|
||||||
|
/* Vertical align top */
|
||||||
|
.v-align-top { vertical-align: top !important; }
|
||||||
|
/* Vertical align bottom */
|
||||||
|
.v-align-bottom { vertical-align: bottom !important; }
|
||||||
|
/* Vertical align to the top of the text */
|
||||||
|
.v-align-text-top { vertical-align: text-top !important; }
|
||||||
|
/* Vertical align to the bottom of the text */
|
||||||
|
.v-align-text-bottom { vertical-align: text-bottom !important; }
|
||||||
|
|
||||||
|
// Overflow utilities
|
||||||
|
// overflow-hidden can also be used to create a new
|
||||||
|
// block formatting context or clear floats.
|
||||||
|
/* Set the overflow hidden */
|
||||||
|
.overflow-hidden { overflow: hidden !important; }
|
||||||
|
/* Set the overflow scroll */
|
||||||
|
.overflow-scroll { overflow: scroll !important; }
|
||||||
|
/* Set the overflow auto */
|
||||||
|
.overflow-auto { overflow: auto !important; }
|
||||||
|
|
||||||
|
// Clear floats
|
||||||
|
/* Clear floats around the element */
|
||||||
|
.clearfix {
|
||||||
|
@include clearfix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Floats
|
||||||
|
/* Float to the right */
|
||||||
|
.float-right { float: right !important; }
|
||||||
|
/* Float to the left */
|
||||||
|
.float-left { float: left !important; }
|
||||||
|
/* Don't float left or right */
|
||||||
|
.float-none { float: none !important; }
|
||||||
|
|
||||||
|
// Responsive float utlities
|
||||||
|
// .float-md-left, .float-lg-right, ...
|
||||||
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
@include breakpoint($breakpoint) {
|
||||||
|
/* Float to the left at the #{$breakpoint} breakpoint */
|
||||||
|
.float-#{$breakpoint}-left { float: left !important; }
|
||||||
|
/* Float to the right at the #{$breakpoint} breakpoint */
|
||||||
|
.float-#{$breakpoint}-right { float: right !important; }
|
||||||
|
/* No float at the #{$breakpoint} breakpoint */
|
||||||
|
.float-#{$breakpoint}-none { float: none !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Width and height utilities, helpful in combination
|
||||||
|
// with display-table utilities and images
|
||||||
|
/* Max width 100% */
|
||||||
|
.width-fit { max-width: 100% !important; }
|
||||||
|
/* Set the width to 100% */
|
||||||
|
.width-full { width: 100% !important; }
|
||||||
|
/* Set the height to 100% */
|
||||||
|
.height-full { height: 100% !important; }
|
||||||
|
|
||||||
|
/* Remove min-width from element */
|
||||||
|
.min-width-0 { min-width: 0 !important; }
|
||||||
|
|
||||||
|
// Direction utilities
|
||||||
|
|
||||||
|
.direction-rtl { direction: rtl !important; }
|
||||||
|
|
||||||
|
.direction-ltr { direction: ltr !important; }
|
||||||
|
|
||||||
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
@include breakpoint($breakpoint) {
|
||||||
|
/* Set the direction to ltr at the #{$breakpoint} breakpoint */
|
||||||
|
.direction-#{$breakpoint}-rtl { direction: rtl !important; }
|
||||||
|
/* Set the direction to ltr at the #{$breakpoint} breakpoint */
|
||||||
|
.direction-#{$breakpoint}-ltr { direction: ltr !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
70
_sass/primer-utilities/lib/margin.scss
Normal file
70
_sass/primer-utilities/lib/margin.scss
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
// Margin spacer utilities
|
||||||
|
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility, comment-empty-line-before
|
||||||
|
@for $i from 1 through length($spacers) {
|
||||||
|
$size: #{nth($spacers, $i)};
|
||||||
|
$scale: #{$i - 1};
|
||||||
|
|
||||||
|
/* Set a #{$size} margin to all sides */
|
||||||
|
.m-#{$scale} { margin : #{$size} !important; }
|
||||||
|
/* Set a #{$size} margin on the top */
|
||||||
|
.mt-#{$scale} { margin-top : #{$size} !important; }
|
||||||
|
/* Set a #{$size} margin on the right */
|
||||||
|
.mr-#{$scale} { margin-right : #{$size} !important; }
|
||||||
|
/* Set a #{$size} margin on the bottom */
|
||||||
|
.mb-#{$scale} { margin-bottom: #{$size} !important; }
|
||||||
|
/* Set a #{$size} margin on the left */
|
||||||
|
.ml-#{$scale} { margin-left : #{$size} !important; }
|
||||||
|
|
||||||
|
/* Set a #{$size} margin on the left & right */
|
||||||
|
.mx-#{$scale} {
|
||||||
|
margin-right: #{$size} !important;
|
||||||
|
margin-left : #{$size} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set a #{$size} margin on the top & bottom */
|
||||||
|
.my-#{$scale} {
|
||||||
|
margin-top : #{$size} !important;
|
||||||
|
margin-bottom: #{$size} !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loop through the breakpoint values
|
||||||
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
|
||||||
|
// Loop through the spacer values
|
||||||
|
@for $i from 1 through length($spacers) {
|
||||||
|
@include breakpoint($breakpoint) {
|
||||||
|
$size: #{nth($spacers, $i)}; // sm, md, lg, xl
|
||||||
|
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
|
||||||
|
|
||||||
|
/* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
|
||||||
|
.m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; }
|
||||||
|
/* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
|
||||||
|
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
|
||||||
|
/* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
|
||||||
|
.mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
|
||||||
|
/* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
|
||||||
|
.mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
|
||||||
|
/* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
|
||||||
|
.ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
|
||||||
|
|
||||||
|
/* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
|
||||||
|
.mx-#{$breakpoint}-#{$scale} {
|
||||||
|
margin-right: #{$size} !important;
|
||||||
|
margin-left: #{$size} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
|
||||||
|
.my-#{$breakpoint}-#{$scale} {
|
||||||
|
margin-top: #{$size} !important;
|
||||||
|
margin-bottom: #{$size} !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set an auto margin on left & right */
|
||||||
|
.mx-auto {
|
||||||
|
margin-right: auto !important;
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
67
_sass/primer-utilities/lib/padding.scss
Normal file
67
_sass/primer-utilities/lib/padding.scss
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
// Padding spacer utilities
|
||||||
|
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
|
||||||
|
// stylelint-disable comment-empty-line-before
|
||||||
|
@for $i from 1 through length($spacers) {
|
||||||
|
$size: #{nth($spacers, $i)};
|
||||||
|
$scale: #{$i - 1};
|
||||||
|
|
||||||
|
/* Set a #{$size} padding to all sides */
|
||||||
|
.p-#{$scale} { padding : #{$size} !important; }
|
||||||
|
/* Set a #{$size} padding to the top */
|
||||||
|
.pt-#{$scale} { padding-top : #{$size} !important; }
|
||||||
|
/* Set a #{$size} padding to the right */
|
||||||
|
.pr-#{$scale} { padding-right : #{$size} !important; }
|
||||||
|
/* Set a #{$size} padding to the bottom */
|
||||||
|
.pb-#{$scale} { padding-bottom: #{$size} !important; }
|
||||||
|
/* Set a #{$size} padding to the left */
|
||||||
|
.pl-#{$scale} { padding-left : #{$size} !important; }
|
||||||
|
|
||||||
|
/* Set a #{$size} padding to the left & right */
|
||||||
|
.px-#{$scale} {
|
||||||
|
padding-right: #{$size} !important;
|
||||||
|
padding-left: #{$size} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set a #{$size} padding to the top & bottom */
|
||||||
|
.py-#{$scale} {
|
||||||
|
padding-top: #{$size} !important;
|
||||||
|
padding-bottom: #{$size} !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive padding spacer utilities
|
||||||
|
|
||||||
|
// Loop through the breakpoint values
|
||||||
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
|
||||||
|
// Loop through the spacer values
|
||||||
|
@for $i from 1 through length($spacers) {
|
||||||
|
@include breakpoint($breakpoint) {
|
||||||
|
$size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
|
||||||
|
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
|
||||||
|
|
||||||
|
/* Set a #{$size} padding to all sides at the #{$breakpoint} breakpoint */
|
||||||
|
.p-#{$breakpoint}-#{$scale} { padding: #{$size} !important; }
|
||||||
|
/* Set a #{$size} padding to the top at the #{$breakpoint} breakpoint */
|
||||||
|
.pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
|
||||||
|
/* Set a #{$size} padding to the right at the #{$breakpoint} breakpoint */
|
||||||
|
.pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
|
||||||
|
/* Set a #{$size} padding to the bottom at the #{$breakpoint} breakpoint */
|
||||||
|
.pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
|
||||||
|
/* Set a #{$size} padding to the left at the #{$breakpoint} breakpoint */
|
||||||
|
.pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
|
||||||
|
|
||||||
|
/* Set a #{$size} padding to the left & right at the #{$breakpoint} breakpoint */
|
||||||
|
.px-#{$breakpoint}-#{$scale} {
|
||||||
|
padding-right: #{$size} !important;
|
||||||
|
padding-left: #{$size} !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set a #{$size} padding to the top & bottom at the #{$breakpoint} breakpoint */
|
||||||
|
.py-#{$breakpoint}-#{$scale} {
|
||||||
|
padding-top: #{$size} !important;
|
||||||
|
padding-bottom: #{$size} !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
211
_sass/primer-utilities/lib/typography.scss
Normal file
211
_sass/primer-utilities/lib/typography.scss
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after
|
||||||
|
// stylelint-disable comment-empty-line-before
|
||||||
|
// Type scale variables found in primer-support/lib/variables.scss
|
||||||
|
// $h00-size: 48px;
|
||||||
|
// $h0-size: 40px;
|
||||||
|
// $h1-size: 32px;
|
||||||
|
// $h2-size: 24px;
|
||||||
|
// $h3-size: 20px;
|
||||||
|
// $h4-size: 16px;
|
||||||
|
// $h5-size: 14px;
|
||||||
|
// $h6-size: 12px;
|
||||||
|
|
||||||
|
/* Set the font size to 26px */
|
||||||
|
.h1 {
|
||||||
|
font-size: 26px !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to 22px */
|
||||||
|
.h2 {
|
||||||
|
font-size: 22px !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to 18px */
|
||||||
|
.h3 {
|
||||||
|
font-size: 18px !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to #{$h4-size} */
|
||||||
|
.h4 {
|
||||||
|
font-size: $h4-size !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h4-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to #{$h5-size} */
|
||||||
|
.h5 { font-size: $h5-size !important; }
|
||||||
|
|
||||||
|
// Does not include color property like typography base
|
||||||
|
// styles, color should be applied with color utilities.
|
||||||
|
/* Set the font size to #{$h6-size} */
|
||||||
|
.h6 { font-size: $h6-size !important; }
|
||||||
|
|
||||||
|
// Heading utilities
|
||||||
|
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; }
|
||||||
|
|
||||||
|
// Type utilities that match type sale
|
||||||
|
/* Set the font size to 26px */
|
||||||
|
.f1 {
|
||||||
|
font-size: 26px !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to 22px */
|
||||||
|
.f2 {
|
||||||
|
font-size: 22px !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to 18px */
|
||||||
|
.f3 {
|
||||||
|
font-size: 18px !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to #{$h4-size} */
|
||||||
|
.f4 {
|
||||||
|
font-size: $h4-size !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h4-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to #{$h5-size} */
|
||||||
|
.f5 { font-size: $h5-size !important; }
|
||||||
|
/* Set the font size to #{$h6-size} */
|
||||||
|
.f6 { font-size: $h6-size !important; }
|
||||||
|
|
||||||
|
// Type utils with light weight that match type scale
|
||||||
|
/* Set the font size to 40px and weight to light */
|
||||||
|
.f00-light {
|
||||||
|
font-size: 40px !important;
|
||||||
|
font-weight: $font-weight-light !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h00-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to 32px and weight to light */
|
||||||
|
.f0-light {
|
||||||
|
font-size: 32px !important;
|
||||||
|
font-weight: $font-weight-light !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h0-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to 26px and weight to light */
|
||||||
|
.f1-light {
|
||||||
|
font-size: 26px !important;
|
||||||
|
font-weight: $font-weight-light !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set the font size to 22px and weight to light */
|
||||||
|
.f2-light {
|
||||||
|
font-size: 22px !important;
|
||||||
|
font-weight: $font-weight-light !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
// Same size and weight as .lead but without color property
|
||||||
|
/* Set the font size to 18px and weight to light */
|
||||||
|
.f3-light {
|
||||||
|
font-size: 18px !important;
|
||||||
|
font-weight: $font-weight-light !important;
|
||||||
|
|
||||||
|
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smallest text size
|
||||||
|
/* Set the font size to ${#h6-size} */
|
||||||
|
.text-small { font-size: $h6-size !important; } // 12px
|
||||||
|
|
||||||
|
/* Large leading paragraphs */
|
||||||
|
.lead {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: $h3-size;
|
||||||
|
font-weight: $font-weight-light;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Line-height variations
|
||||||
|
// Close to commonly used line-heights. Most line-heights
|
||||||
|
// combined with type size equate to whole pixels.
|
||||||
|
// Will be improved with future typography scale updates.
|
||||||
|
/* Set the line height to ultra condensed */
|
||||||
|
.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
|
||||||
|
/* Set the line height to condensed */
|
||||||
|
.lh-condensed { line-height: $lh-condensed !important; }
|
||||||
|
/* Set the line height to default */
|
||||||
|
.lh-default { line-height: $lh-default !important; }
|
||||||
|
|
||||||
|
// Text alignments
|
||||||
|
/* Text align to the right */
|
||||||
|
.text-right { text-align: right !important; }
|
||||||
|
/* Text align to the left */
|
||||||
|
.text-left { text-align: left !important; }
|
||||||
|
/* Text align to the center */
|
||||||
|
.text-center { text-align: center !important; }
|
||||||
|
|
||||||
|
// Responsive text alignment
|
||||||
|
// .text-md-left, .text-lg-right, ...
|
||||||
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
@include breakpoint($breakpoint) {
|
||||||
|
.text-#{$breakpoint}-right { text-align: right !important; }
|
||||||
|
.text-#{$breakpoint}-left { text-align: left !important; }
|
||||||
|
.text-#{$breakpoint}-center { text-align: center !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Text styles
|
||||||
|
/* Set the font weight to normal */
|
||||||
|
.text-normal { font-weight: normal !important; }
|
||||||
|
/* Set the font weight to bold */
|
||||||
|
.text-bold { font-weight: $font-weight-bold !important;}
|
||||||
|
/* Set the font to italic */
|
||||||
|
.text-italic { font-style: italic !important; }
|
||||||
|
/* Make text uppercase */
|
||||||
|
.text-uppercase { text-transform: uppercase !important; }
|
||||||
|
/* Underline text */
|
||||||
|
.no-underline { text-decoration: none !important; }
|
||||||
|
/* Don't wrap white space */
|
||||||
|
.no-wrap { white-space: nowrap !important; }
|
||||||
|
/* Allow long lines with no spaces to line break */
|
||||||
|
.wb-break-all { word-break: break-all !important; }
|
||||||
|
|
||||||
|
.text-emphasized {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
color: $text-gray-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
// List styles
|
||||||
|
.list-style-none { list-style: none !important; }
|
||||||
|
|
||||||
|
// Text Shadows
|
||||||
|
/* Add a dark text shadow */
|
||||||
|
.text-shadow-dark {
|
||||||
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px 25px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
/* Add a light text shadow */
|
||||||
|
.text-shadow-light {
|
||||||
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
88
_sass/primer-utilities/lib/visibility-display.scss
Normal file
88
_sass/primer-utilities/lib/visibility-display.scss
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
// Visibility and display utilities
|
||||||
|
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||||
|
// stylelint-disable comment-empty-line-before
|
||||||
|
|
||||||
|
// Visibility utilities
|
||||||
|
/* Visibility hidden */
|
||||||
|
.v-hidden { visibility: hidden !important; }
|
||||||
|
/* Visibility visible */
|
||||||
|
.v-visible { visibility: visible !important; }
|
||||||
|
|
||||||
|
// Display utilites
|
||||||
|
/* Set the display to table */
|
||||||
|
.d-table { display: table !important; }
|
||||||
|
/* Set the display to table-cell */
|
||||||
|
.d-table-cell { display: table-cell !important; }
|
||||||
|
/* Set the table-layout to fixed */
|
||||||
|
.table-fixed { table-layout: fixed !important; }
|
||||||
|
|
||||||
|
/* Set the display to block */
|
||||||
|
.d-block { display: block !important; }
|
||||||
|
/* Set the display to inline */
|
||||||
|
.d-inline { display: inline !important; }
|
||||||
|
/* Set the display to inline-block */
|
||||||
|
.d-inline-block { display: inline-block !important; }
|
||||||
|
/* Set the display to none */
|
||||||
|
.d-none { display: none !important; }
|
||||||
|
|
||||||
|
// Responsive display utlities
|
||||||
|
// .d-sm-none, .d-lg-inline, ...
|
||||||
|
@each $breakpoint in map-keys($breakpoints) {
|
||||||
|
@include breakpoint($breakpoint) {
|
||||||
|
/* Set the display to table at the #{$breakpoint} breakpoint */
|
||||||
|
.d-#{$breakpoint}-table { display: table !important; }
|
||||||
|
/* Set the display to table cell at the #{$breakpoint} breakpoint */
|
||||||
|
.d-#{$breakpoint}-table-cell { display: table-cell !important; }
|
||||||
|
/* Set the display to block at the #{$breakpoint} breakpoint */
|
||||||
|
.d-#{$breakpoint}-block { display: block !important; }
|
||||||
|
/* Set the display to inline at the #{$breakpoint} breakpoint */
|
||||||
|
.d-#{$breakpoint}-inline { display: inline !important; }
|
||||||
|
/* Set the display to inline block at the #{$breakpoint} breakpoint */
|
||||||
|
.d-#{$breakpoint}-inline-block { display: inline-block !important; }
|
||||||
|
/* Set the display to none at the #{$breakpoint} breakpoint */
|
||||||
|
.d-#{$breakpoint}-none { display: none !important; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide utilities for each breakpoint
|
||||||
|
// Each hide utility only applies to one breakpoint range.
|
||||||
|
@media (max-width: $width-sm) {
|
||||||
|
.hide-sm {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $width-sm) and (max-width: $width-md) {
|
||||||
|
.hide-md {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $width-md) and (max-width: $width-lg) {
|
||||||
|
.hide-lg {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $width-lg) {
|
||||||
|
.hide-xl {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only display content to screen readers
|
||||||
|
//
|
||||||
|
// See: http://a11yproject.com/posts/how-to-hide-content/
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
// Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631
|
||||||
|
word-wrap: normal;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
99
_sass/primer-utilities/package.json
Normal file
99
_sass/primer-utilities/package.json
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
{
|
||||||
|
"_args": [
|
||||||
|
[
|
||||||
|
"primer-utilities@^3.0.0",
|
||||||
|
"/Users/pmarsceill/_projects/just-the-docs/node_modules/stylelint-selector-no-utility"
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"_from": "primer-utilities@>=3.0.0 <4.0.0",
|
||||||
|
"_id": "primer-utilities@3.5.0",
|
||||||
|
"_inCache": true,
|
||||||
|
"_installable": true,
|
||||||
|
"_location": "/primer-utilities",
|
||||||
|
"_nodeVersion": "7.6.0",
|
||||||
|
"_npmOperationalInternal": {
|
||||||
|
"host": "packages-12-west.internal.npmjs.com",
|
||||||
|
"tmp": "tmp/primer-utilities-3.5.0.tgz_1487926737649_0.6362133936490864"
|
||||||
|
},
|
||||||
|
"_npmUser": {
|
||||||
|
"email": "yes@jonrohan.codes",
|
||||||
|
"name": "jonrohan"
|
||||||
|
},
|
||||||
|
"_npmVersion": "4.1.2",
|
||||||
|
"_phantomChildren": {},
|
||||||
|
"_requested": {
|
||||||
|
"name": "primer-utilities",
|
||||||
|
"raw": "primer-utilities@^3.0.0",
|
||||||
|
"rawSpec": "^3.0.0",
|
||||||
|
"scope": null,
|
||||||
|
"spec": ">=3.0.0 <4.0.0",
|
||||||
|
"type": "range"
|
||||||
|
},
|
||||||
|
"_requiredBy": [
|
||||||
|
"/stylelint-selector-no-utility"
|
||||||
|
],
|
||||||
|
"_resolved": "https://registry.npmjs.org/primer-utilities/-/primer-utilities-3.5.0.tgz",
|
||||||
|
"_shasum": "4b52d4bd376487952b094f458285268451fa906a",
|
||||||
|
"_shrinkwrap": null,
|
||||||
|
"_spec": "primer-utilities@^3.0.0",
|
||||||
|
"_where": "/Users/pmarsceill/_projects/just-the-docs/node_modules/stylelint-selector-no-utility",
|
||||||
|
"author": {
|
||||||
|
"name": "GitHub, Inc."
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/primer/primer-utilities/issues"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"primer-support": "*"
|
||||||
|
},
|
||||||
|
"description": "Immutable, atomic CSS classes to rapidly build product",
|
||||||
|
"devDependencies": {
|
||||||
|
"primer-module-build": "*",
|
||||||
|
"stylelint": "*",
|
||||||
|
"stylelint-config-primer": "*"
|
||||||
|
},
|
||||||
|
"directories": {},
|
||||||
|
"dist": {
|
||||||
|
"shasum": "4b52d4bd376487952b094f458285268451fa906a",
|
||||||
|
"tarball": "https://registry.npmjs.org/primer-utilities/-/primer-utilities-3.5.0.tgz"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"build",
|
||||||
|
"index.scss",
|
||||||
|
"lib"
|
||||||
|
],
|
||||||
|
"gitHead": "a3e4d5a9aed9d446588fe89273a80ebc9621c6bd",
|
||||||
|
"homepage": "http://primercss.io/",
|
||||||
|
"keywords": [
|
||||||
|
"css",
|
||||||
|
"github",
|
||||||
|
"primer",
|
||||||
|
"primercss"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"main": "build/index.js",
|
||||||
|
"maintainers": [
|
||||||
|
{
|
||||||
|
"name": "broccolini",
|
||||||
|
"email": "diana.mounter@gmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "jonrohan",
|
||||||
|
"email": "yes@jonrohan.codes"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"name": "primer-utilities",
|
||||||
|
"optionalDependencies": {},
|
||||||
|
"readme": "ERROR: No README data found!",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/primer/primer-utilities.git"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "primer-module-build index.scss",
|
||||||
|
"prepublish": "npm run build",
|
||||||
|
"test": "npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss"
|
||||||
|
},
|
||||||
|
"style": "index.scss",
|
||||||
|
"version": "3.5.0"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user