primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-14 03:54:54 +03:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/release-11.0.0' into marketing-position-utils-2018

Browse Source
This commit is contained in:
Shawn Allen 2019-01-23 14:16:36 -08:00
commit 1793d68963
40 changed files with 346 additions and 1030 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/pages/css/.gitignore vendored
View File

@ -35,7 +35,6 @@ utilities/layout.md
utilities/margin.md
utilities/marketing-borders.md
utilities/marketing-filters.md
utilities/marketing-layout.md
utilities/marketing-margin.md
utilities/marketing-padding.md
utilities/marketing-type.md

2
docs/src/SideNav.js
View File

@ -111,7 +111,7 @@ const Router = withRouter(({router, children}) => {
})
/**
* <RouteMatch> is just a way to conditonally render content without a wrapper
* <RouteMatch> is just a way to conditionally render content without a wrapper
* element when contained directly in a <Router>:
*
* ```jsx

1
docs/test/urls.js
View File

@ -30,6 +30,7 @@ const exceptions = {
'/packages/primer-product': removed,
'/principles/HTML': moved('/principles/html'),
'/principles/SCSS': moved('/principles/scss'),
'/utilities/marketing-layout': moved('/utilities/layout'),
'/whats_new': redirect('https://github.com/primer/primer/releases'),
'/whats_new/changelog': removed,
'/whats_new/changelog/archived_changelog': removed,

47
modules/primer-avatars/lib/avatar-stack.scss
View File

@ -1,52 +1,5 @@
// Stacked avatars can be used to show who is participating in thread when
// there is limited space available.
//
// No styleguide references
@warn ".avatar-stack will be deprecated in version 11. Use .AvatarStack instead.";
.avatar-stack {
display: inline-block;
white-space: nowrap;
.avatar {
position: relative;
z-index: 2;
display: inline-block;
width: 20px;
height: 20px;
box-sizing: content-box;
margin-right: -15px;
background-color: $bg-white;
border-right: 1px solid $white;
border-radius: 2px;
transition: margin 0.1s ease-in-out;
&:only-child {
background-color: transparent;
}
&:first-child {
z-index: 3;
}
&:last-child {
z-index: 1;
margin-right: 0;
border-right: 0;
}
}
// When more than one avatar, margin-left will animate from -15 to 2, and reveal the stack
&:hover .avatar {
margin-right: 3px;
&:last-child {
margin-right: 0;
}
}
}
// Refactored, new avatar stack:
.AvatarStack {
position: relative;

119
modules/primer-avatars/stories.js
View File

@ -1,117 +1,10 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
storiesOf('Avatars', module)
.add('avatar', () => (
<img className='avatar' alt='Uncle Cat' width='72' height='72' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
))
.add('avatar-small', () => (
<img className='avatar avatar-small' width='32' height='32' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
))
.add('avatar-parent-child', () => (
<div>
<div className='avatar-parent-child float-left'>
<img className='avatar'width='48' height='48' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar avatar-child' alt='Child cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
))
.add('avatar-stack', () => (
<div>
<div className='avatar-stack'>
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
const stories = storiesOf('Avatars', module)
))
.add('AvatarStack', () => (
<div>
<div className='AvatarStack AvatarStack-three-plus mb-2'>
<div className='AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1' aria-label='five avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<div className='avatar-more avatar'></div>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
<div className='AvatarStack AvatarStack-two mb-2'>
<div className='AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1' aria-label='two avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
<div className='AvatarStack AvatarStack-three-plus AvatarStack--right mb-2'>
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='five avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<div className='avatar-more avatar'></div>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
<div className='AvatarStack AvatarStack-two AvatarStack--right mb-2'>
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='two avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
</div>
))
.add('AvatarStack on blue background', () => (
<div className='border bg-blue-light p-4'>
<div className='AvatarStack flex-self-start'>
<div className='AvatarStack-body' aria-label='chesterbr'>
<a className='avatar' aria-describedby='hovercard-aria-description'>
<img height='20' width='20' alt='@github' src='https://avatars0.githubusercontent.com/github?s=60&amp;v=4' />
</a>
</div>
</div>
<div className='AvatarStack AvatarStack-two mt-2'>
<div className='AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1' aria-label='two avatars'>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
<img className='avatar' alt='Uncle Cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
</div>
</div>
</div>
))
.add('CircleBadge--small', () => (
<div>
<a className='CircleBadge CircleBadge--small' href='#url' title='Travis CI'>
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
</a>
</div>
))
.add('CircleBadge--medium', () => (
<div>
<a className='CircleBadge CircleBadge--medium' href='#url' title='Travis CI'>
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
</a>
</div>
))
.add('CircleBadge--large', () => (
<div>
<a className='CircleBadge CircleBadge--large' href='#url' title='Travis CI'>
<img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
</a>
</div>
))
.add('DashedConnection', () => (
<div className='DashedConnection'>
<ul className='d-flex list-style-none flex-justify-between' aria-label='A sample GitHub workflow'>
<li className='CircleBadge CircleBadge--small' aria-label='GitHub'>
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
</li>
<li className='CircleBadge CircleBadge--small' aria-label='Slack'>
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
</li>
<li className='CircleBadge CircleBadge--small' aria-label='Travis CI'>
<img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
</li>
</ul>
</div>
))
storiesFromMarkdown(require.context('.', true, /\.md$/))
.forEach(({title, story}) => {
stories.add(title, story)
})

2
modules/primer-base/lib/base.scss
View File

@ -64,7 +64,7 @@ th {
button {
cursor: pointer;
// Remove border radius added by Chroma macOS
// Remove border radius added by Chrome macOS
border-radius: 0;
}

13
modules/primer-buttons/lib/button-group.scss
View File

@ -2,7 +2,6 @@
//
// A button group is a series of buttons laid out next to each other, all part
// of one visual button, but separated by rules to be separate.
@warn ".BtnGroup-form will be deprecated in version 11. Use .BtnGroup-parent instead.";
.BtnGroup {
display: inline-block;
@ -40,15 +39,13 @@
border-right-width: $border-width;
+ .BtnGroup-item,
+ .BtnGroup-parent .BtnGroup-item,
+ .BtnGroup-form .BtnGroup-item {
+ .BtnGroup-parent .BtnGroup-item {
border-left-width: 0;
}
}
}
.BtnGroup-parent,
.BtnGroup-form {
.BtnGroup-parent {
float: left;
&:first-child .BtnGroup-item {
@ -76,8 +73,7 @@
}
+ .BtnGroup-item,
+ .BtnGroup-parent .BtnGroup-item,
+ .BtnGroup-form .BtnGroup-item {
+ .BtnGroup-parent .BtnGroup-item {
border-left-width: 0;
}
}
@ -85,8 +81,7 @@
// ensure that the focus ring sits above the adjacent buttons
.BtnGroup-item,
.BtnGroup-parent,
.BtnGroup-form {
.BtnGroup-parent {
&:focus,
&:active {
z-index: 1;

33
modules/primer-marketing-utilities/docs/layout.md
View File

@ -9,31 +9,6 @@ Marketing layout utilities build on top of [primer-core utilities](/css/utilitie
{:toc}
## Responsive position
Use responsive position utilities to adjust the position of an element at different breakpoints.
```html
<div class="position-relative p-6 bg-gray">
<div class="d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2">
.position-md-absolute
</div>
</div>
<div class="float-left border m-3" style="width:100px; height:100px;">
default
</div>
<div class="float-left position-lg-relative border m-3" style="width:100px; height:100px; top:12px; left:12px;">
.position-lg-relative
</div>
<div class="float-left border m-3" style="width:100px; height:100px;">
default
</div>
<div class="float-left border m-3" style="width:100px; height:100px;">
default
</div>
```
## Position elements with spacing utilities
Position elements from all four element edges (`top`, `right`, `bottom`, and `left`) using any spacing utility from the global spacing scale and the marketing spacing scale (from `$spacer-1` to `$spacer-12`), including negative and 0 values.
@ -43,9 +18,11 @@ Commonly used with `.position-absolute` to position decorative assets and shapes
In an effort to reduce css bloat, responsive breakpoints are only supported for `md` and `lg` breakpoints. There is no support for `sm` and `xl` breakpoints.
```html
<div className='position-relative p-6 bg-gray'>
<div className='position-absolute top-2 top-md-0 top-lg-8 border bg-white p-2'>
.position-absolute
<div class="position-relative p-6 bg-gray">
<div class="position-absolute top-2 top-md-0 top-lg-8 border bg-white p-2">
<span class="d-md-none">.top-2</span>
<span class="d-none d-md-inline d-lg-none">.top-md-0</span>
<span class="d-none d-lg-inline">.top-lg-8</span>
</div>
</div>
```

17
modules/primer-marketing-utilities/docs/padding.md
View File

@ -6,25 +6,34 @@ status: Stable
status_issue: https://github.com/github/design-systems/issues/378
---
Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the y-axis only. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the x and y axis. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
## Y-axis padding utilities
## Padding utilities
Use marketing padding utilities to apply padding to top, bottom, or both y-axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
Use marketing padding utilities to apply padding to top, right, bottom, left, x-axis, or y axis of an element. These utilities can change or override default padding, and can be used with a spacing scale of 7-12.
```html
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue pt-7">.pt-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue pr-7">.pr-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue pb-7">.pb-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue pl-7">.pl-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue px-7">.px-7</div>
</div>
<div class="margin-orange d-inline-block">
<div class="d-inline-block block-blue py-7">.py-7</div>
</div>
```
## Responsive y-axis padding utilities
## Responsive padding utilities
All marketing padding utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.

1
modules/primer-marketing-utilities/index.scss
View File

@ -3,6 +3,5 @@
// utilities
@import "./lib/filters.scss";
@import "./lib/borders.scss";
@import "./lib/layout.scss";
@import "./lib/margin.scss";
@import "./lib/padding.scss";

16
modules/primer-marketing-utilities/lib/padding.scss
View File

@ -5,10 +5,17 @@
$size: #{nth($marketingSpacers, $i)};
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
/* Set a #{$size} padding for all sides */
.p-#{$scale} { padding: #{$size} !important; }
/* Set a #{$size} padding to the top */
.pt-#{$scale} { padding-top : #{$size} !important; }
.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 top & bottom */
.py-#{$scale} {
@ -28,10 +35,17 @@
$size: #{nth($marketingSpacers, $i)}; // xs, sm, md, lg, xl
$scale: #{$i + 6}; // 7, 8, 9, 10, 11
/* 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 top & bottom at the #{$breakpoint} breakpoint */
.py-#{$breakpoint}-#{$scale} {

3
modules/primer-marketing/index.scss
View File

@ -17,7 +17,4 @@
// marketing specific css modules
@import "primer-marketing-type/index.scss";
@import "primer-marketing-buttons/index.scss";
@import "primer-page-headers/index.scss";
@import "primer-page-sections/index.scss";
@import "primer-tables/index.scss";
@import "primer-marketing-utilities/index.scss";

5
modules/primer-marketing/package.json
View File

@ -33,9 +33,6 @@
"primer-marketing-support": "1.5.6",
"primer-marketing-type": "1.4.13",
"primer-marketing-utilities": "1.7.3",
"primer-page-headers": "1.5.3",
"primer-page-sections": "1.5.3",
"primer-support": "4.7.2",
"primer-tables": "1.5.3"
"primer-support": "4.7.2"
}
}

2
modules/primer-page-headers/.npmignore
View File

@ -1,2 +0,0 @@
*.yml
.github

21
modules/primer-page-headers/LICENSE
View File

@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2019 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.

58
modules/primer-page-headers/README.md
View File

@ -1,58 +0,0 @@
# Primer Marketing CSS Page Headers
[![npm version](https://img.shields.io/npm/v/primer-page-headers.svg)](https://www.npmjs.org/package/primer-page-headers)
[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
> Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.
This repository is a module of the full [primer][primer] repository.
## Documentation
<!-- %docs
title: Page headers
status: Deprecated
-->
**This component will be removed, and the `primer-page-headers` npm package deprecated, in Primer version 11.**
<!-- %enddocs -->
## Install
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-page-headers` with this command.
```
$ npm install --save primer-page-headers
```
## 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-page-headers/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`
```
$ npm run build
```
## License
MIT &copy; [GitHub](https://github.com/)
[primer]: https://github.com/primer/primer
[primer-support]: https://github.com/primer/primer-support
[support]: https://github.com/primer/primer-support
[docs]: http://primer.github.io/
[npm]: https://www.npmjs.com/
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[sass]: http://sass-lang.com/

6
modules/primer-page-headers/index.scss
View File

@ -1,6 +0,0 @@
@warn "The entire primer-page-headers package will be removed in primer v11.0.0.";
// support files
@import "primer-support/index.scss";
@import "primer-marketing-support/index.scss";
@import "./lib/headers.scss";

68
modules/primer-page-headers/lib/headers.scss
View File

@ -1,68 +0,0 @@
.jumbotron {
position: relative;
padding-top: $spacer-6;
padding-bottom: $spacer-6;
@include breakpoint(sm) {
padding-top: $spacer-6 * 1.5;
padding-bottom: $spacer-6 * 1.5;
}
@include breakpoint(xl) {
padding-top: $spacer-6 * 3;
padding-bottom: $spacer-6 * 3;
}
}
.jumbotron-supertron {
@include breakpoint(lg) {
height: 45vw;
min-height: 590px;
max-height: 55vh;
padding-top: $spacer-6 + $spacer-6;
padding-bottom: $spacer-6 + $spacer-6;
}
}
.jumbotron-minitron {
padding-top: $spacer-4;
padding-bottom: $spacer-4;
@include breakpoint(sm) {
padding-top: $spacer-5;
padding-bottom: $spacer-5;
}
}
.jumbotron-shadow {
// Shadow
&::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
content: " ";
background-color: transparent;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
background-repeat: repeat-x;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
}
.jumbotron-photo {
position: relative;
background-color: $gray-dark;
background-size: cover;
&::before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: "";
background-color: rgba(0, 0, 0, 0.25);
}
}

46
modules/primer-page-headers/package.json
View File

@ -1,46 +0,0 @@
{
"version": "1.5.3",
"name": "primer-page-headers",
"description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.",
"homepage": "http://primer.github.io/",
"author": "GitHub, Inc.",
"license": "MIT",
"style": "build/build.css",
"sass": "index.scss",
"main": "build/index.js",
"primer": {
"category": "marketing",
"module_type": "components"
},
"files": [
"index.scss",
"lib",
"build"
],
"repository": "https://github.com/primer/primer/tree/master/modules/primer-page-headers",
"bugs": {
"url": "https://github.com/primer/primer/issues"
},
"scripts": {
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"postpublish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-support": "1.5.6",
"primer-support": "4.7.2"
},
"keywords": [
"css",
"flash",
"github",
"hero",
"jumbotron",
"primer",
"design-system",
"style"
]
}

2
modules/primer-page-sections/.npmignore
View File

@ -1,2 +0,0 @@
*.yml
.github

21
modules/primer-page-sections/LICENSE
View File

@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2019 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.

57
modules/primer-page-sections/README.md
View File

@ -1,57 +0,0 @@
# Primer Page Sections
[![npm version](https://img.shields.io/npm/v/primer-page-sections.svg)](https://www.npmjs.org/package/primer-page-sections)
[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
This repository is a module of the full [primer][primer] repository.
## Documentation
<!-- %docs
title: Page sections
status: Deprecated
-->
**This component will be removed, and the `primer-page-sections` npm package deprecated, in Primer version 11.**
<!-- %enddocs -->
## Install
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-page-sections` with this command.
```
$ npm install --save primer-page-sections
```
## 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-page-sections/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`
```
$ npm run build
```
## License
MIT &copy; [GitHub](https://github.com/)
[primer]: https://github.com/primer/primer
[primer-support]: https://github.com/primer/primer-support
[support]: https://github.com/primer/primer-support
[docs]: http://primer.github.io/
[npm]: https://www.npmjs.com/
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[sass]: http://sass-lang.com/

6
modules/primer-page-sections/index.scss
View File

@ -1,6 +0,0 @@
@warn "The entire primer-page-sections package will be removed in primer v11.0.0.";
// support files
@import "primer-support/index.scss";
@import "primer-marketing-support/index.scss";
@import "./lib/page-section.scss";

18
modules/primer-page-sections/lib/page-section.scss
View File

@ -1,18 +0,0 @@
// Styles for page sections
.page-section {
padding: $spacer-5 0;
margin-top: 0;
@include breakpoint(md) {
padding: $spacer-6 + $spacer-3 0;
}
}
// Adds a little extra headroom for sections linked to via in-page anchor links
.page-section-jumplink:target {
padding-top: ($spacer-6 * 2) + $spacer-5;
@include breakpoint(md) {
padding-top: $spacer-6 * 2;
}
}

45
modules/primer-page-sections/package.json
View File

@ -1,45 +0,0 @@
{
"version": "1.5.3",
"name": "primer-page-sections",
"description": "Styles to create distinct sections of marketing pages at GitHub.",
"homepage": "http://primer.github.io/",
"author": "GitHub, Inc.",
"license": "MIT",
"style": "build/build.css",
"sass": "index.scss",
"main": "build/index.js",
"primer": {
"category": "marketing",
"module_type": "components"
},
"files": [
"index.scss",
"lib",
"build"
],
"repository": "https://github.com/primer/primer/tree/master/modules/primer-page-sections",
"bugs": {
"url": "https://github.com/primer/primer/issues"
},
"scripts": {
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"postpublish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-support": "1.5.6",
"primer-support": "4.7.2"
},
"keywords": [
"css",
"github",
"page sections",
"primer",
"design-system",
"sections",
"style"
]
}

8
modules/primer-support/lib/variables/layout.scss
View File

@ -70,3 +70,11 @@ $responsive-variants: ("": "");
@each $key in map-keys($breakpoints) {
$responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}"));
}
// responive utility position values
$responsive-positions: (
static,
relative,
absolute,
fixed
) !default;

2
modules/primer-tables/.npmignore
View File

@ -1,2 +0,0 @@
*.yml
.github

21
modules/primer-tables/LICENSE
View File

@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2019 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.

57
modules/primer-tables/README.md
View File

@ -1,57 +0,0 @@
# Primer Marketing CSS Tables
[![npm version](https://img.shields.io/npm/v/primer-tables.svg)](https://www.npmjs.org/package/primer-tables)
[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
> Styles to display tabular data for marketing websites at GitHub.
This repository is a module of the full [primer][primer] repository.
## Documentation
<!-- %docs
title: Tables
status: Deprecated
-->
**This component will be removed, and the `primer-tables` npm package deprecated, in Primer version 11.**
<!-- %enddocs -->
## Install
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-tables` with this command.
```
$ npm install --save primer-tables
```
## 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-tables/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`
```
$ npm run build
```
## License
MIT &copy; [GitHub](https://github.com/)
[primer]: https://github.com/primer/primer
[primer-support]: https://github.com/primer/primer-support
[support]: https://github.com/primer/primer-support
[docs]: http://primer.github.io/
[npm]: https://www.npmjs.com/
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
[sass]: http://sass-lang.com/

6
modules/primer-tables/index.scss
View File

@ -1,6 +0,0 @@
@warn "The entire primer-tables package will be removed in primer v11.0.0.";
// support files
@import "primer-support/index.scss";
@import "primer-marketing-support/index.scss";
@import "./lib/tables.scss";

39
modules/primer-tables/lib/tables.scss
View File

@ -1,39 +0,0 @@
// stylelint-disable selector-max-type, selector-max-compound-selectors
.data-table {
width: 100%;
margin-top: $spacer-3;
border-collapse: collapse;
border: $border;
box-shadow: 0 1px 1px rgba($black, 0.05);
th {
font-weight: $font-weight-normal;
text-align: left;
}
td,
th {
padding: $spacer-3;
border-right: $border;
border-bottom: $border;
}
tbody {
th {
width: 25%;
}
th,
td {
border-bottom-color: $border-gray;
}
tr:last-child {
th,
td {
border-bottom: $border;
}
}
}
}

44
modules/primer-tables/package.json
View File

@ -1,44 +0,0 @@
{
"version": "1.5.3",
"name": "primer-tables",
"description": "Styles to display tabular data for marketing websites at GitHub.",
"homepage": "http://primer.github.io/",
"author": "GitHub, Inc.",
"license": "MIT",
"style": "build/build.css",
"sass": "index.scss",
"main": "build/index.js",
"primer": {
"category": "marketing",
"module_type": "components"
},
"files": [
"index.scss",
"lib",
"build"
],
"repository": "https://github.com/primer/primer/tree/master/modules/primer-tables",
"bugs": {
"url": "https://github.com/primer/primer/issues"
},
"scripts": {
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"postpublish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-support": "1.5.6",
"primer-support": "4.7.2"
},
"keywords": [
"css",
"github",
"primer",
"design-system",
"style",
"tables"
]
}

10
modules/primer-tables/stories.js
View File

@ -1,10 +0,0 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
const stories = storiesOf('Tables', module)
storiesFromMarkdown(require.context('.', true, /\.md$/))
.forEach(({title, story}) => {
stories.add(title, story)
})

35
modules/primer-tooltips/lib/tooltips.scss
View File

@ -277,38 +277,3 @@
}
}
}
// Alert tooltips
//
// Colors for different alert states.
@mixin colorizeTooltip($text-color, $background-color) {
&::after {
color: $text-color;
background: $background-color;
}
&.tooltipped-s,
&.tooltipped-se,
&.tooltipped-sw {
&::before {
border-bottom-color: $background-color;
}
}
&.tooltipped-n,
&.tooltipped-ne,
&.tooltipped-nw {
&::before {
border-top-color: $background-color;
}
}
&.tooltipped-e::before {
border-right-color: $background-color;
}
&.tooltipped-w::before {
border-left-color: $background-color;
}
}
@warn "the colorizeTooltip mixin will be deprecated in version 11.";

12
modules/primer-utilities/docs/layout.md
View File

@ -273,6 +273,18 @@ _Note: fixed positioning has been disabled here for demonstration only._
</div>
```
### Responsive position
Position utilities can be applied or changed per breakpoint in responsive layouts. Each responsive position utility is applied to the specified breakpoint and up, using the following formula: `position-[breakpoint]-[property]`. For example: `position-md-absolute`.
```html
<div style="height: 64px;">
<div class="border position-md-absolute top-0 right-0">
.position-md-absolute .top-0 .right-0
</div>
</div>
```
### Screen reader only
Use `.sr-only` to position an element outside of the viewport for screen reader access only. **Even though the element can't be seen, make sure it still has a sensible tab order.**

18
modules/primer-utilities/lib/layout.scss
View File

@ -2,14 +2,16 @@
// 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; }
// Loop through the breakpoint values
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@each $position in $responsive-positions {
.position#{$variant}-#{$position} {
position: $position !important;
}
}
}
}
/* Set top 0 */
.top-0 { top: 0 !important; }

3
modules/primer/package.json
View File

@ -49,8 +49,6 @@
"primer-marketing-type": "1.4.13",
"primer-marketing-utilities": "1.7.3",
"primer-navigation": "1.5.11",
"primer-page-headers": "1.5.3",
"primer-page-sections": "1.5.3",
"primer-pagination": "1.0.7",
"primer-popover": "0.1.8",
"primer-product": "5.8.3",
@ -58,7 +56,6 @@
"primer-subhead": "1.0.11",
"primer-support": "4.7.2",
"primer-table-object": "1.4.13",
"primer-tables": "1.5.3",
"primer-tooltips": "1.5.11",
"primer-truncate": "1.4.13",
"primer-utilities": "4.14.4"

494
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
script/notify
View File

@ -26,4 +26,5 @@ context="npm publish $name"
message="https://unpkg.com/$name@$version/"
echo "📡 Transmitting publish status for $context $name@$version..."
pwd
commit-status "$_status" "$context" "$name@$version" "$message"

16
tools/stylelint-selector-no-utility/classes.json
View File

@ -824,8 +824,24 @@
".pl-xl-6",
".position-absolute",
".position-fixed",
".position-lg-absolute",
".position-lg-fixed",
".position-lg-relative",
".position-lg-static",
".position-md-absolute",
".position-md-fixed",
".position-md-relative",
".position-md-static",
".position-relative",
".position-sm-absolute",
".position-sm-fixed",
".position-sm-relative",
".position-sm-static",
".position-static",
".position-xl-absolute",
".position-xl-fixed",
".position-xl-relative",
".position-xl-static",
".pr-0",
".pr-1",
".pr-2",