diff --git a/modules/primer-base/lib/normalize.scss b/modules/primer-base/lib/normalize.scss index bca298e757..8152aa3aed 100644 --- a/modules/primer-base/lib/normalize.scss +++ b/modules/primer-base/lib/normalize.scss @@ -89,13 +89,11 @@ template, /* 1 */ ========================================================================== */ /** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + * Remove the gray background on active links in IE 10. */ a { background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ } /** diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md index d9dbd04430..2c658735a6 100644 --- a/modules/primer-buttons/README.md +++ b/modules/primer-buttons/README.md @@ -42,41 +42,9 @@ status: Stable Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. -#### Buttons +{:toc} -```html - - - - - -
- - - - - -
- - - - - -
- - - - - -
- - - - - -``` - -#### Default buttons +## Default button Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site. @@ -94,7 +62,7 @@ You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`. ``` -#### Primary +## Primary button Primary buttons are green and are used to indicate the *primary* action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`. @@ -103,7 +71,7 @@ Primary buttons are green and are used to indicate the *primary* action on a pag ``` -#### Danger +## Danger button Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`. @@ -112,7 +80,7 @@ Danger buttons are red. They help reiterate that the intended action is importan ``` -#### Outline +## Outline button Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go. @@ -121,7 +89,7 @@ Outline buttons downplay an action as they appear like boxy links. Just add `.bt ``` -#### Large button +## Large button Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections. [Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size. @@ -146,7 +114,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz ``` -#### Disabled state +## Disabled state Disable `

``` -#### With counts +## Link button + +Create a button that looks like a link with `.btn-link`. Rather than using an `` to trigger JS, this style on a `

+``` + +## Button with counts You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button. @@ -221,7 +199,7 @@ You can also use the [counter](../../product/components/labels) component within ``` -#### Button groups +## Button groups Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically. @@ -258,7 +236,7 @@ Add `.BtnGroup-form` to `
`s within `.BtnGroup`s for proper spacing and rou ``` -#### Hidden text button +## Hidden text button Use `.hidden-text-expander` to indicate and toggle hidden text. @@ -271,7 +249,7 @@ Use `.hidden-text-expander` to indicate and toggle hidden text. You can also make the expander appear inline by adding `.inline`. -#### Using button styles with the details summary element +## Using button styles with the details summary element You can add `.btn` and `.btn-*` classes to any [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js index f38e95e422..d3aab39ae2 100644 --- a/modules/primer-buttons/stories.js +++ b/modules/primer-buttons/stories.js @@ -65,3 +65,8 @@ storiesOf('Button', module) )) + .add('btn-link', () => ( +
+ +
p { margin-top: $spacer-3; } diff --git a/modules/primer-marketing-utilities/README.md b/modules/primer-marketing-utilities/README.md index 16e247a335..fedcede0c3 100644 --- a/modules/primer-marketing-utilities/README.md +++ b/modules/primer-marketing-utilities/README.md @@ -33,7 +33,7 @@ $ npm run build ## Documentation - +You can read more about utilities in the [docs folder](./docs/) ## License diff --git a/modules/primer-marketing-utilities/docs/borders.md b/modules/primer-marketing-utilities/docs/borders.md index 4f50741df1..8f4e1b83d3 100644 --- a/modules/primer-marketing-utilities/docs/borders.md +++ b/modules/primer-marketing-utilities/docs/borders.md @@ -1,7 +1,6 @@ --- title: Borders status: New release -status_issue: https://github.com/github/design-systems/issues/325 --- The following border utilities are meant to used in addition to those within primer-core. @@ -17,3 +16,22 @@ Top, right, bottom, and left border utilities are can be used responsively to ad .border-top-0 ``` + +## Border Colors + +### White border with alpha transparency + +Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](/borders/#border-colors). + +```html +
+ + .border-white-fade .bg-gray-dark + +
+
+ + .border-white-fade .bg-blue + +
+``` diff --git a/modules/primer-marketing-utilities/docs/layout.md b/modules/primer-marketing-utilities/docs/layout.md new file mode 100644 index 0000000000..69adc135da --- /dev/null +++ b/modules/primer-marketing-utilities/docs/layout.md @@ -0,0 +1,33 @@ +--- +title: Layout +status: New release +--- + +Marketing layout utilities build on top of [primer-core utilities](/layout/#position), adding the option of responsive positioning. + +{:toc} + +## Responsive position + +Use responsive position utilities to adjust the position of an element at different breakpoints. + +```html +
+
+ .position-md-absolute +
+
+ +
+ default +
+
+ .position-lg-relative +
+
+ default +
+
+ default +
+``` diff --git a/modules/primer-marketing-utilities/index.scss b/modules/primer-marketing-utilities/index.scss index e605a72bcd..67a7d638fb 100644 --- a/modules/primer-marketing-utilities/index.scss +++ b/modules/primer-marketing-utilities/index.scss @@ -2,3 +2,4 @@ // utilities @import "./lib/filters.scss"; @import "./lib/borders.scss"; +@import "./lib/layout.scss"; diff --git a/modules/primer-marketing-utilities/lib/borders.scss b/modules/primer-marketing-utilities/lib/borders.scss index 12ed39167a..e4cb76576e 100644 --- a/modules/primer-marketing-utilities/lib/borders.scss +++ b/modules/primer-marketing-utilities/lib/borders.scss @@ -15,3 +15,6 @@ .border-#{$breakpoint}-left-0 { border-left: 0 !important; } } } + +/* Use with .border to turn the border rgba white 0.15 */ +.border-white-fade { border-color: $white-fade-15 !important; } diff --git a/modules/primer-marketing-utilities/lib/layout.scss b/modules/primer-marketing-utilities/lib/layout.scss new file mode 100644 index 0000000000..e2a24923b1 --- /dev/null +++ b/modules/primer-marketing-utilities/lib/layout.scss @@ -0,0 +1,15 @@ +// Layout utilities +// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before + +// Responsive position utilities + +@each $breakpoint in map-keys($breakpoints) { + @include breakpoint($breakpoint) { + /* Set position to relative */ + .position-#{$breakpoint}-relative { position: relative !important; } + /* Set position to absolute */ + .position-#{$breakpoint}-absolute { position: absolute !important; } + /* Set position to fixed */ + .position-#{$breakpoint}-fixed { position: fixed !important; } + } +} diff --git a/modules/primer-marketing-utilities/stories.js b/modules/primer-marketing-utilities/stories.js new file mode 100644 index 0000000000..b9d1394795 --- /dev/null +++ b/modules/primer-marketing-utilities/stories.js @@ -0,0 +1,21 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +storiesOf('Marketing Utilities', module) +.add('Responsive borders', () => ( +
.border-top-0
+)) +.add('border-white-fade', () => ( +
+ + .border-white-fade + +
+)) +.add('Responsive position', () => ( +
+
+ .position-md-absolute +
+
+)) diff --git a/modules/primer-utilities/docs/animations.md b/modules/primer-utilities/docs/animations.md index 8ee6b0d970..d9f4157030 100644 --- a/modules/primer-utilities/docs/animations.md +++ b/modules/primer-utilities/docs/animations.md @@ -16,6 +16,13 @@ The `.anim-fade-in` class is used to fade in an element on the page. This will r <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub! ``` +## Fade Out + +The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed. + +```html +<%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub! + ## Fade Up The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page. @@ -55,3 +62,13 @@ The `.anim-pulse` class will pulse an element infinitely. ```html <%= octicon("mark-github", :class => "anim-pulse") %> ``` + +## Hover animation + +The `.hover-grow` class will increase the scale of the element upon hover. + +```html +
+ <%= octicon("mark-github", :height => 32) %> +
+``` diff --git a/modules/primer-utilities/docs/borders.md b/modules/primer-utilities/docs/borders.md index b20eff9e9e..6aaec36760 100644 --- a/modules/primer-utilities/docs/borders.md +++ b/modules/primer-utilities/docs/borders.md @@ -109,7 +109,7 @@ Use `border-dashed` to give an element a dashed border. ## Rounded corners -Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. +Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles. ```html
@@ -118,7 +118,10 @@ Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1`
.rounded-1
-
+
.rounded-2
+
+ .circle +
``` diff --git a/modules/primer-utilities/docs/margin.md b/modules/primer-utilities/docs/margin.md index ed1447a205..7e8e61dde2 100644 --- a/modules/primer-utilities/docs/margin.md +++ b/modules/primer-utilities/docs/margin.md @@ -31,7 +31,7 @@ Since margin utilities have many variations and will be used in many places, we _**Note:** The blue in the examples represents the element, and the orange represents the margin_ -## Uniform spacing +## Uniform margins Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6. @@ -59,7 +59,7 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
``` -## Directional spacing +## Directional margins Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6. diff --git a/modules/primer-utilities/docs/padding.md b/modules/primer-utilities/docs/padding.md index 94289f01db..7395e25f5f 100644 --- a/modules/primer-utilities/docs/padding.md +++ b/modules/primer-utilities/docs/padding.md @@ -30,7 +30,7 @@ Since padding utilities have many variations and will be used in many places, we _**Note:** The blue in the examples below represents the element, and the green represents the padding._ -## Uniform spacing +## Uniform padding Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6. @@ -58,7 +58,7 @@ Use uniform spacing utilities to apply equal padding to all sides of an element.
``` -## Directional spacing +## Directional padding Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6. diff --git a/modules/primer-utilities/lib/animations.scss b/modules/primer-utilities/lib/animations.scss index ef751cc884..6847c80cda 100644 --- a/modules/primer-utilities/lib/animations.scss +++ b/modules/primer-utilities/lib/animations.scss @@ -1,7 +1,7 @@ // 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. + +/* Fade in an element */ .anim-fade-in { animation-name: fade-in; animation-duration: 1s; @@ -22,6 +22,27 @@ } } +/* Fade out an element */ +.anim-fade-out { + animation-name: fade-out; + animation-duration: 1s; + animation-timing-function: ease-out; + + &.fast { + animation-duration: 0.3s; + } +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + /* Fade in and slide up an element */ .anim-fade-up { opacity: 0; @@ -151,3 +172,12 @@ transform: scale3d(1, 1, 1); } } + +/* Increase scale of an element on hover */ +.hover-grow { + transition: transform 0.3s; + + &:hover { + transform: scale(1.025); + } +} diff --git a/modules/primer-utilities/lib/borders.scss b/modules/primer-utilities/lib/borders.scss index ead6f66acf..ec68185f04 100644 --- a/modules/primer-utilities/lib/borders.scss +++ b/modules/primer-utilities/lib/borders.scss @@ -61,3 +61,5 @@ .rounded-1 { border-radius: $border-radius !important; } /* Add a 2x border-radius to all corners */ .rounded-2 { border-radius: $border-radius * 2 !important; } +/* Add a 50% border-radius to make something into a circle */ +.circle { border-radius: 50% !important; } diff --git a/modules/primer-utilities/stories.js b/modules/primer-utilities/stories.js new file mode 100644 index 0000000000..d0f0319de3 --- /dev/null +++ b/modules/primer-utilities/stories.js @@ -0,0 +1,14 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +storiesOf('Utilities', module) +.add('hover-grow', () => ( +
+ .hover-grow +
+)) +.add('circle', () => ( +
+ .circle +
+))