Skip to content
Snippets Groups Projects
Unverified Commit 56955afa authored by Patrick Marsceill's avatar Patrick Marsceill
Browse files

Just the Docs build packaging

parent 642f1f8e
No related branches found
No related tags found
No related merge requests found
Showing
with 1364 additions and 0 deletions
# 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)
\ No newline at end of file
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.
# Primer CSS Support
[![NPM version](http://img.shields.io/npm/v/primer-support.svg)](https://www.npmjs.org/package/primer-support)
[![Build Status](https://travis-ci.org/primer/support.svg?branch=master)](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/
// 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";
// 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;
}
}
}
// 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: "";
}
}
// 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;
}
}
// 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; }
}
// 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;
{
"_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"
}
# 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)
\ No newline at end of file
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.
# Primer CSS Utilities
[![NPM version](http://img.shields.io/npm/v/primer-utilities.svg)](https://www.npmjs.org/package/primer-utilities)
[![Build Status](https://travis-ci.org/primer/utilities.svg?branch=master)](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) &copy; [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/
This diff is collapsed.
This diff is collapsed.
@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";
// 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);
}
}
// 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; }
// 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;
}
// 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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment