mirror of
https://github.com/primer/css.git
synced 2024-12-01 04:21:12 +03:00
Shawn Allen
GitHub
commit
a95c6e1bc3
@ -1,5 +1,5 @@
|
||||
name: "lint, test, publish"
|
||||
on: [push]
|
||||
name: CI
|
||||
on: push
|
||||
jobs:
|
||||
all:
|
||||
runs-on: ubuntu-latest
|
||||
@ -16,6 +16,9 @@ jobs:
|
||||
run: npm --unsafe-perm test
|
||||
- name: prepublish
|
||||
run: script/prepublish
|
||||
- name: test deprecations
|
||||
if: startsWith(github.ref, 'refs/heads/release-')
|
||||
run: script/test-deprecations.js
|
||||
- uses: primer/publish@v1.1.0
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
@ -3,7 +3,6 @@
|
||||
"stylelint-config-primer"
|
||||
],
|
||||
"rules": {
|
||||
"primer/no-override": false,
|
||||
"primer/selector-no-utility": false
|
||||
"primer/no-override": false
|
||||
}
|
||||
}
|
||||
|
||||
26
CHANGELOG.md
26
CHANGELOG.md
@ -1,3 +1,29 @@
|
||||
# 13.0.0
|
||||
|
||||
### :boom: Breaking Change
|
||||
- Remove `.container`, `.columns`, `.column`, and related classes [#662](https://github.com/primer/css/pull/662)
|
||||
- Remove `.btn-purple` [#736](https://github.com/primer/css/pull/736) :wave: 💜
|
||||
- Remove `.text-pending` and `.bg-pending` [#888](https://github.com/primer/css/pull/888)
|
||||
- Remove `.dropdown-menu-content` [#884](https://github.com/primer/css/pull/884)
|
||||
|
||||
### :nail_care: Polish
|
||||
- Select menu improvements [#893](https://github.com/primer/css/pull/893)
|
||||
|
||||
### :memo: Documentation
|
||||
- The layout docs, formerly available at `/css/objects/layout`, are gone and will redirect to `/css/objects/grid`.
|
||||
|
||||
### :house: Internal
|
||||
- Add deprecations test script [#889](https://github.com/primer/css/pull/889)
|
||||
- Clean up scripts and dev dependencies [#890](https://github.com/primer/css/pull/890)
|
||||
- Upgrade stylelint-config-primer to v8.0.0 [#892](https://github.com/primer/css/pull/892)
|
||||
- Upgrade doctocat, live code wrappers [#895](https://github.com/primer/css/pull/895)
|
||||
|
||||
### Committers
|
||||
- [@jonrohan](https://github.com/jonrohan)
|
||||
- [@shawnbot](https://github.com/shawnbot)
|
||||
- [@simurai](https://github.com/simurai)
|
||||
- [@sophshep](https://github.com/sophshep)
|
||||
|
||||
# 12.7.0
|
||||
|
||||
### :rocket: Enhancement
|
||||
|
||||
@ -6,7 +6,19 @@
|
||||
const versionDeprecations = {
|
||||
'13.0.0': [
|
||||
{
|
||||
selectors: ['.btn-purple'],
|
||||
selectors: [
|
||||
'.btn-purple',
|
||||
'.btn-purple:focus',
|
||||
'.btn-purple.focus',
|
||||
'.btn-purple:hover',
|
||||
'.btn-purple.hover',
|
||||
'.btn-purple:active',
|
||||
'.btn-purple.selected',
|
||||
'[open]>.btn-purple',
|
||||
'.btn-purple:disabled',
|
||||
'.btn-purple.disabled',
|
||||
'.btn-purple .Counter'
|
||||
],
|
||||
message: `Please don't make purple buttons.`
|
||||
},
|
||||
{
|
||||
@ -19,7 +31,12 @@ const versionDeprecations = {
|
||||
},
|
||||
{
|
||||
selectors: [
|
||||
'.container',
|
||||
'.container::before',
|
||||
'.container::after',
|
||||
'.columns',
|
||||
'.columns::before',
|
||||
'.columns::after',
|
||||
'.column',
|
||||
'.one-third',
|
||||
'.two-thirds',
|
||||
@ -34,6 +51,14 @@ const versionDeprecations = {
|
||||
{
|
||||
selectors: ['.centered'],
|
||||
message: `You can use the "mx-auto" class to center any element.`
|
||||
},
|
||||
{
|
||||
selectors: [
|
||||
'.dropdown-menu-content',
|
||||
'.dropdown.active .dropdown-menu-content',
|
||||
'.dropdown-menu-content.anim-scale-in'
|
||||
],
|
||||
message: `The "dropdown-menu-content" class is unnecessary.`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
const {yellow, green, red} = require('colorette')
|
||||
|
||||
/**
|
||||
* Each exception type may resolve to either:
|
||||
*
|
||||
* 1. A string, which will be treated as a message listed alongside the
|
||||
* "excepted" path; or
|
||||
*
|
||||
* 2. A function in the form: `f(paths) : {pass:Boolean, message:String}`
|
||||
*
|
||||
* In the case of `moved(path)`, it returns a _function_ that checks for
|
||||
* whether the provided path exists in `paths` and returns the appropriate
|
||||
* status object with `pass` and `message` props.
|
||||
*/
|
||||
module.exports = {
|
||||
removed: red('removed'),
|
||||
deprecated: yellow('deprecated'),
|
||||
redirect: url => `${green('redirect')} → ${url}`,
|
||||
moved: path => paths => {
|
||||
if (paths.includes(path)) {
|
||||
return {pass: true, message: `→ ${green(path)}`}
|
||||
} else {
|
||||
return {pass: false, message: `→ ${red(path)} is missing`}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
|
||||
/components
|
||||
/components/alerts
|
||||
/components/avatars
|
||||
/components/blankslate
|
||||
/components/box
|
||||
/components/box-overlay
|
||||
/components/boxed-groups
|
||||
/components/branch-name
|
||||
/components/breadcrumb
|
||||
/components/buttons
|
||||
/components/dropdown
|
||||
/components/flash-banner
|
||||
/components/forms
|
||||
/components/labels
|
||||
/components/markdown
|
||||
/components/marketing-buttons
|
||||
/components/navigation
|
||||
/components/octicons
|
||||
/components/page-headers
|
||||
/components/page-sections
|
||||
/components/pagehead
|
||||
/components/pagination
|
||||
/components/popover
|
||||
/components/progress
|
||||
/components/select-menu
|
||||
/components/subhead
|
||||
/components/tables
|
||||
/components/tooltips
|
||||
/components/truncate
|
||||
/getting_started
|
||||
/getting_started/contributing
|
||||
/objects
|
||||
/objects/grid
|
||||
/objects/layout
|
||||
/objects/table-object
|
||||
/packages
|
||||
/packages/primer
|
||||
/packages/primer-core
|
||||
/packages/primer-marketing
|
||||
/packages/primer-product
|
||||
/principles
|
||||
/principles/HTML
|
||||
/principles/SCSS
|
||||
/principles/accessibility
|
||||
/support
|
||||
/support/breakpoints
|
||||
/support/color-system
|
||||
/support/marketing-variables
|
||||
/support/spacing
|
||||
/support/typography
|
||||
/tools
|
||||
/tools/atom-packages
|
||||
/tools/docset
|
||||
/tools/linting
|
||||
/tools/local-primer
|
||||
/tools/prototyping
|
||||
/tools/sketch-templates
|
||||
/tools/testing
|
||||
/utilities
|
||||
/utilities/animations
|
||||
/utilities/borders
|
||||
/utilities/box-shadow
|
||||
/utilities/colors
|
||||
/utilities/details
|
||||
/utilities/flexbox
|
||||
/utilities/layout
|
||||
/utilities/margin
|
||||
/utilities/marketing-borders
|
||||
/utilities/marketing-filters
|
||||
/utilities/marketing-layout
|
||||
/utilities/marketing-margin
|
||||
/utilities/marketing-padding
|
||||
/utilities/marketing-type
|
||||
/utilities/padding
|
||||
/utilities/typography
|
||||
/whats_new
|
||||
/whats_new/changelog
|
||||
/whats_new/changelog/archived_changelog
|
||||
/whats_new/status-key
|
||||
@ -59,7 +59,7 @@ Use `.btn-large` to increase the padding and border radius of a button. This is
|
||||
|
||||
```html live
|
||||
<p>
|
||||
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
|
||||
<a class="btn btn-large" href="#url" role="button">Large link button</a>
|
||||
<button class="btn btn-large" type="button">Large button button</button>
|
||||
</p>
|
||||
```
|
||||
@ -68,7 +68,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
|
||||
|
||||
```html live
|
||||
<p class="f3">
|
||||
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
|
||||
<a class="btn btn-large" href="#url" role="button">Large link button</a>
|
||||
<button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -30,11 +30,11 @@ Use a `<details>` element to toggle the Select Menu. The `<summary>` element can
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@ -69,11 +69,11 @@ In case the Select Menu should be aligned to the right, use `SelectMenu right-0`
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@ -106,7 +106,7 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon" %> -->
|
||||
<svg
|
||||
@ -172,7 +172,7 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
|
||||
</svg>
|
||||
Default state
|
||||
</button>
|
||||
</menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@ -204,7 +204,7 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
Text only
|
||||
</button>
|
||||
@ -241,7 +241,7 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
<h5>With a heading</h5>
|
||||
<span>and some longer description</span>
|
||||
</button>
|
||||
</menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@ -273,14 +273,14 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<div class="SelectMenu-divider">More options</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 4</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
</menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@ -317,7 +317,7 @@ Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for ad
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||
</form>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</a>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</a>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</a>
|
||||
@ -343,7 +343,7 @@ Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for ad
|
||||
<button class="SelectMenu-item" role="menuitem">Item 23</a>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 24</a>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 25</a>
|
||||
</menu>
|
||||
</div>
|
||||
<footer class="SelectMenu-footer">Showing 25 of 25</footer>
|
||||
</div>
|
||||
</div>
|
||||
@ -383,18 +383,18 @@ Sometimes you need two or more lists of items in your Select Menu, e.g. branches
|
||||
<button class="SelectMenu-tab" aria-selected="true">Branches</button>
|
||||
<button class="SelectMenu-tab">Tags</button>
|
||||
</nav>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Branch 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Branch 2</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Branch 3</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Branch 4</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Branch 5</button>
|
||||
</menu>
|
||||
<menu class="SelectMenu-list" hidden>
|
||||
</div>
|
||||
<div class="SelectMenu-list" hidden>
|
||||
<button class="SelectMenu-item" role="menuitem">Tag 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Tag 2</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Tag 3</button>
|
||||
</menu>
|
||||
</div>
|
||||
<footer class="SelectMenu-footer">Showing 5 of 5</footer>
|
||||
</div>
|
||||
</div>
|
||||
@ -427,12 +427,12 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<div class="SelectMenu-message border-bottom border-top bg-red-0 text-red p-2">Message goes here</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@ -467,7 +467,7 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter" />
|
||||
</form>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-loading">
|
||||
<!-- <%= octicon "octoface", class: "anim-pulse", width: 32 %> -->
|
||||
<svg
|
||||
@ -483,7 +483,7 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</menu>
|
||||
</div>
|
||||
<footer class="SelectMenu-footer">Loading...</footer>
|
||||
</div>
|
||||
</div>
|
||||
@ -516,7 +516,7 @@ Sometimes a Select Menu needs to communicate a "blank slate" where there's no co
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<menu class="SelectMenu-list">
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-blankslate">
|
||||
<!-- <%= octicon "repo", class: "color-gray-3", width: 24 %> -->
|
||||
<svg width="24 " height="32" viewBox="0 0 12 16" class="octicon octicon-repo color-gray-3" aria-hidden="true">
|
||||
@ -529,7 +529,7 @@ Sometimes a Select Menu needs to communicate a "blank slate" where there's no co
|
||||
<p class="mb-3 text-gray">We didn’t find any matching repositories that you can commit to.</p>
|
||||
<button type="button" class="btn btn-sm btn-primary">Create a repository</button>
|
||||
</div>
|
||||
</menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
---
|
||||
title: Layout
|
||||
path: objects/layout
|
||||
status: Deprecated
|
||||
status_issue: 'https://github.com/github/design-systems/issues/59'
|
||||
source: 'https://github.com/primer/css/tree/master/src/layout'
|
||||
bundle: layout
|
||||
---
|
||||
|
||||
Primer CSS's layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it's just containers, rows, and columns.
|
||||
|
||||
You can find all the below styles in `_layout.scss`.
|
||||
|
||||
#### Container
|
||||
|
||||
Center your page's contents with a `.container`.
|
||||
|
||||
```html live title="Container"
|
||||
<div class="container border">
|
||||
Container
|
||||
</div>
|
||||
```
|
||||
|
||||
The container applies `width: 980px;` and uses horizontal `margin`s to center it.
|
||||
|
||||
#### Grid
|
||||
|
||||
##### How it works
|
||||
|
||||
The grid is pretty standard—you create rows with `.columns` and individual columns with a column class and fraction class. Here's how it works:
|
||||
|
||||
- Add a `.container` to encapsulate everything and provide ample horizontal gutter space.
|
||||
- Create your outer row to clear the floated columns with `<div class="columns">`.
|
||||
- Add your columns with individual `<div class="column">`s.
|
||||
- Add your fractional width classes to set the width of the columns (e.g., `.one-fourth`).
|
||||
|
||||
##### Demo
|
||||
|
||||
In practice, your columns will look like the example below.
|
||||
|
||||
```html live title="Grid columns"
|
||||
<div class="container">
|
||||
<div class="columns mb-1">
|
||||
<div class="one-fifth column block-blue p-3 border">
|
||||
.one-fifth
|
||||
</div>
|
||||
<div class="four-fifths column block-blue p-3 border">
|
||||
.four-fifths
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns mb-1">
|
||||
<div class="one-fourth column block-blue p-3 border">
|
||||
.one-fourth
|
||||
</div>
|
||||
<div class="three-fourths column block-blue p-3 border">
|
||||
.three-fourths
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns mb-1">
|
||||
<div class="one-third column block-blue p-3 border">
|
||||
.one-third
|
||||
</div>
|
||||
<div class="two-thirds column block-blue p-3 border">
|
||||
.two-thirds
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="one-half column block-blue p-3 border">
|
||||
.one-half
|
||||
</div>
|
||||
<div class="one-half column block-blue p-3 border">
|
||||
.one-half
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### Centered
|
||||
|
||||
Columns can be centered by adding `.centered` to the `.column` class.
|
||||
|
||||
```html live title="Grid centered"
|
||||
<div class="columns">
|
||||
<div class="one-half column centered block-blue border p-3">
|
||||
.one-half
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
3247
docs/package-lock.json
generated
3247
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,7 +13,7 @@
|
||||
"@loadable/component": "^5.10.2",
|
||||
"@primer/components": "^13.2.0",
|
||||
"@primer/css": "^12.4.1",
|
||||
"@primer/gatsby-theme-doctocat": "^0.11.1",
|
||||
"@primer/gatsby-theme-doctocat": "^0.15.0",
|
||||
"@primer/octicons": "^9.1.1",
|
||||
"@primer/octicons-react": "^9.1.1",
|
||||
"@svgr/webpack": "^4.3.2",
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import React from 'react'
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/index.scss'
|
||||
import {Frame} from '@primer/gatsby-theme-doctocat'
|
||||
|
||||
function LivePreviewWrapper({children}) {
|
||||
return (
|
||||
<>
|
||||
<Frame>
|
||||
<link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
|
||||
<style>{primerStyles}</style>
|
||||
<div className="p-3">{children}</div>
|
||||
</>
|
||||
</Frame>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -56,8 +56,6 @@
|
||||
children:
|
||||
- title: Grid
|
||||
url: /objects/grid
|
||||
- title: Layout
|
||||
url: /objects/layout
|
||||
- title: Table object
|
||||
url: /objects/table-object
|
||||
- title: Components
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
/* eslint-disable no-console */
|
||||
const visit = require('unist-util-visit')
|
||||
const cache = new Map()
|
||||
const ERB_BLOCK_PATTERN = /<%=[^%]+%>/g
|
||||
|
||||
module.exports = options => {
|
||||
const convert = converter(options)
|
||||
return tree => {
|
||||
visit(tree, 'code', node => {
|
||||
const match = node.lang ? node.lang.match(/^[a-z]+/) : null
|
||||
const lang = match ? match[0] : null
|
||||
if (lang === 'erb' || lang === 'html') {
|
||||
const erb = node.value
|
||||
const html = convert(erb)
|
||||
const remaining = html ? html.match(ERB_BLOCK_PATTERN) : null
|
||||
if (html && !remaining) {
|
||||
node.value = html
|
||||
node.lang = node.lang.replace(/^erb/, 'html')
|
||||
} else if (remaining) {
|
||||
// console.warn(`Unable to convert ${remaining.length} ERB blocks:\n ${remaining.join(' \n')}`)
|
||||
} else {
|
||||
// console.warn(`No conversions made in: ${erb}`)
|
||||
}
|
||||
} else {
|
||||
// console.warn(`Unknown code block lang: ${node.lang}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function converter({methods = {}}) {
|
||||
return erb => {
|
||||
const blocks = erb.match(ERB_BLOCK_PATTERN)
|
||||
if (blocks && blocks.length) {
|
||||
let html = erb
|
||||
// console.warn(`Replacing ${blocks.length} ERB block(s)...`)
|
||||
for (const block of blocks) {
|
||||
const output = convert(block)
|
||||
if (output !== block) {
|
||||
// const count = html.split(block).length - 1
|
||||
// console.warn(` found ${count} instances of "${block}"`)
|
||||
html = replaceAll(html, block, output)
|
||||
// console.warn(html)
|
||||
}
|
||||
}
|
||||
return html
|
||||
}
|
||||
}
|
||||
|
||||
function convert(block) {
|
||||
if (cache.has(block)) {
|
||||
return cache.get(block)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, method, argString] = block.match(/<%= *(\w+)[ (]([^)]+)\)? *%>/)
|
||||
const parts = argString.split(/, */)
|
||||
const args = []
|
||||
const kwargs = {}
|
||||
let match
|
||||
for (const part of parts) {
|
||||
if ((match = part.match(/^:(.+) => (.+)$/))) {
|
||||
kwargs[unquote(match[1])] = unquote(match[2])
|
||||
} else if ((match = part.match(/^(.+): (.+)$/))) {
|
||||
kwargs[unquote(match[1])] = unquote(match[2])
|
||||
} else {
|
||||
args.push(unquote(part))
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof methods[method] === 'function') {
|
||||
let output = methods[method](args, kwargs)
|
||||
console.warn(`converted: ${block} -> ${output}`)
|
||||
const escaped = block.replace('<', '').replace('>', '')
|
||||
output = `<!--${escaped}-->\n${output}`
|
||||
cache.set(block, output)
|
||||
return output
|
||||
} else {
|
||||
console.warn(`No such ERB method implemented: "${method}"`)
|
||||
return block
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function replaceAll(str, input, output) {
|
||||
return str.split(input).join(output)
|
||||
}
|
||||
|
||||
function unquote(str) {
|
||||
return str.replace(/^\s*"([^"]+)"\s*$/, (_, value) => value)
|
||||
}
|
||||
10
now.json
10
now.json
@ -10,11 +10,19 @@
|
||||
}
|
||||
],
|
||||
"routes": [
|
||||
{"src": "/css(/.*)?", "dest": "/docs$1"},
|
||||
{
|
||||
"src": "/",
|
||||
"status": 301,
|
||||
"headers": {"Location": "/css"}
|
||||
},
|
||||
{
|
||||
"src": "/css/objects/layout/?",
|
||||
"status": 301,
|
||||
"headers": {"Location": "/css/objects/grid"}
|
||||
},
|
||||
{
|
||||
"src": "/css(/.*)?",
|
||||
"dest": "/docs$1"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
2291
package-lock.json
generated
2291
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
28
package.json
28
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "12.7.0",
|
||||
"version": "13.0.0",
|
||||
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
|
||||
"homepage": "https://primer.style/css",
|
||||
"author": "GitHub, Inc.",
|
||||
@ -23,14 +23,10 @@
|
||||
},
|
||||
"scripts": {
|
||||
"fresh": "rm -rf node_modules; npm install",
|
||||
"dist": "script/dist",
|
||||
"check-links": "script/check-links http://localhost:3000/css -v",
|
||||
"dist": "script/dist.js",
|
||||
"lint": "npm-run-all -s lint-css lint-js",
|
||||
"lint-css": "stylelint --quiet --syntax scss src/**/*.scss",
|
||||
"lint-js": "eslint script lib docs deprecations.js .storybook",
|
||||
"now-build": "npm run dist && next build",
|
||||
"now-start": "next start",
|
||||
"now-test": "npm-run-all -s now-build now-start",
|
||||
"lint-js": "eslint script docs deprecations.js lib .storybook",
|
||||
"postpublish": "script/postpublish",
|
||||
"prepublishOnly": "script/prepublish",
|
||||
"publish-storybook": "script/publish-storybook",
|
||||
@ -39,7 +35,7 @@
|
||||
"start-storybook": "start-storybook -p 8001",
|
||||
"build-storybook": "build-storybook -o .storybuild",
|
||||
"test": "npm-run-all -s test-urls test-migrate",
|
||||
"test-urls": "node docs-test/urls.js",
|
||||
"test-urls": "script/test-doc-urls.js",
|
||||
"test-migrate": "script/test-migrate"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -48,7 +44,6 @@
|
||||
"devDependencies": {
|
||||
"@storybook/addon-viewport": "5.0.11",
|
||||
"@storybook/react": "5.0.11",
|
||||
"action-status": "0.1.1",
|
||||
"autoprefixer": "9.4.7",
|
||||
"code-blocks": "^1.1.0",
|
||||
"colorette": "^1.0.7",
|
||||
@ -57,19 +52,13 @@
|
||||
"details-dialog-element": "^1.4.0",
|
||||
"eslint": "4.19.1",
|
||||
"eslint-plugin-github": "1.0.0",
|
||||
"execa": "^0.10.0",
|
||||
"filesize": "4.1.2",
|
||||
"fs-extra": "^4.0.2",
|
||||
"fx": "11.0.1",
|
||||
"gh-pages": "^1.0.0",
|
||||
"globby": "^6.1.0",
|
||||
"hast-util-to-html": "^5.0.0",
|
||||
"hast-util-to-string": "^1.0.1",
|
||||
"klaw": "3.0.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"minimist": "1.2.0",
|
||||
"node-fetch": "2.4.0",
|
||||
"now": "^12.1.8",
|
||||
"npm-run-all": "4.1.5",
|
||||
"postcss": "7.0.14",
|
||||
"postcss-load-config": "2.0.0",
|
||||
@ -77,21 +66,16 @@
|
||||
"postcss-node-sass": "2.1.8",
|
||||
"postcss-scss": "2.0.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"raw-loader": "0.5.1",
|
||||
"refractor": "^2.6.2",
|
||||
"semver": "5.7.1",
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "4.1.2",
|
||||
"stylelint": "9.10.1",
|
||||
"stylelint-config-primer": "7.0.1",
|
||||
"stylelint-config-primer": "^8.0.0",
|
||||
"table": "5.2.3",
|
||||
"tar": "4.4.8",
|
||||
"tree-model": "^1.0.7",
|
||||
"typographic-base": "^1.0.4",
|
||||
"unified": "^7.1.0",
|
||||
"unist-util-select": "^2.0.0",
|
||||
"unist-util-stringify-position": "^2.0.0",
|
||||
"unist-util-visit": "^1.4.0",
|
||||
"webpack": "4.20.2"
|
||||
"unist-util-visit": "^1.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
5
script/.eslintrc.json
Normal file
5
script/.eslintrc.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"rules": {
|
||||
"no-console": 0
|
||||
}
|
||||
}
|
||||
@ -35,9 +35,7 @@ if (ONLY_BUNDLES) {
|
||||
const only = new Set(ONLY_BUNDLES.trim().split(/\s*,\s*/))
|
||||
bundles = bundles.filter(bundle => only.has(bundle.name))
|
||||
} else if (!ALL_BUNDLES) {
|
||||
bundles = META_BUNDLES
|
||||
? bundles.filter(isMetaBundle)
|
||||
: bundles.filter(bundle => !isMetaBundle(bundle))
|
||||
bundles = META_BUNDLES ? bundles.filter(isMetaBundle) : bundles.filter(bundle => !isMetaBundle(bundle))
|
||||
}
|
||||
|
||||
Promise.all(
|
||||
@ -50,7 +48,7 @@ Promise.all(
|
||||
}
|
||||
return fetch(unpkgBaseURL + bundle.stats)
|
||||
.then(res => res.json())
|
||||
.catch(error => {
|
||||
.catch(() => {
|
||||
console.warn(`Unable to fetch old "${bundle.name}" stats from unpkg; assuming it's new!`)
|
||||
return cssstats('')
|
||||
})
|
||||
@ -4,7 +4,7 @@ const remark = require('remark-parse')
|
||||
const stringify = require('remark-stringify')
|
||||
const stringifyPosition = require('unist-util-stringify-position')
|
||||
const unified = require('unified')
|
||||
const {green, yellow, red} = require('colorette')
|
||||
const {green, yellow} = require('colorette')
|
||||
const {join} = require('path')
|
||||
const {readFile} = require('fs-extra')
|
||||
const {selectAll} = require('unist-util-select')
|
||||
@ -7,12 +7,6 @@ npm run --silent dist
|
||||
# run the bundle size and selector diff reports
|
||||
script/run-reports
|
||||
|
||||
# TODO: remove this in v13
|
||||
mkdir -p build
|
||||
cp dist/primer.css build/build.css
|
||||
cp dist/stats/primer.json build/build.json
|
||||
echo "module.exports = {cssstats: require('./build.json')}" > build/index.js
|
||||
|
||||
files=$(git ls-files src | sed -e 's#^src/##' | sed -e 's#/.*$##' | sort -u)
|
||||
echo $files > publish-files.log
|
||||
cd src
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
set -e
|
||||
|
||||
echo "Reporting bundle sizes..."
|
||||
script/bundle-size-report --all
|
||||
script/bundle-size-report.js --all
|
||||
|
||||
echo "Reporting selector diffs..."
|
||||
script/selector-diff-report
|
||||
|
||||
95
script/test-deprecations.js
Executable file
95
script/test-deprecations.js
Executable file
@ -0,0 +1,95 @@
|
||||
#!/usr/bin/env node
|
||||
const fetch = require('node-fetch')
|
||||
const minimist = require('minimist')
|
||||
const {basename} = require('path')
|
||||
const {green, red, yellow} = require('colorette')
|
||||
|
||||
const {versionDeprecations} = require('../deprecations')
|
||||
const X = red('𐄂')
|
||||
const I = yellow('i')
|
||||
const V = green('✓')
|
||||
|
||||
const args = minimist(process.argv.slice(2))
|
||||
if (args.help) {
|
||||
console.log(`
|
||||
script/${basename(__filename)} [options]
|
||||
|
||||
--version <version> The published version of @primer/css from which to
|
||||
fetch CSS selector stats; default: "latest".
|
||||
--bundle <bundle> The CSS bundle to compare; default: "primer".
|
||||
|
||||
Fetches the CSS selectors for the published package and checks that:
|
||||
|
||||
1. All selectors listed in deprecations.js for the current local version (in
|
||||
package.json) have been deleted.
|
||||
2. All selectors deleted in the current local version have been listed in
|
||||
deprecations.js.
|
||||
|
||||
If either check fails, the process exits with an error status (1).
|
||||
`)
|
||||
process.exit(0)
|
||||
}
|
||||
|
||||
checkDeprecations(args)
|
||||
|
||||
async function checkDeprecations(options = {}) {
|
||||
const {bundle = 'primer', version = 'latest'} = options
|
||||
|
||||
const currentVersion = require('../package.json').version
|
||||
const statsPath = `dist/stats/${bundle}.json`
|
||||
|
||||
const local = require(`../${statsPath}`)
|
||||
const remote = await fetch(`https://unpkg.com/@primer/css@${version}/${statsPath}`).then(res => res.json())
|
||||
|
||||
const {changed, added, removed} = diffLists(remote.selectors.values, local.selectors.values)
|
||||
if (changed === 0) {
|
||||
console.log(`no selectors added or removed in bundle "${bundle}"`)
|
||||
return
|
||||
}
|
||||
|
||||
const deprecations = versionDeprecations[currentVersion] || []
|
||||
const deprecatedSelectors = deprecations.reduce((list, deprecation) => list.concat(deprecation.selectors), [])
|
||||
console.log(`${I} ${removed.length} selectors removed locally (compared with ${version})`)
|
||||
console.log(`${I} ${deprecatedSelectors.length} selectors deprecated in v${currentVersion}`)
|
||||
if (added.length) {
|
||||
console.log(`${I} ${added.length} selectors added`)
|
||||
}
|
||||
|
||||
const errors = []
|
||||
for (const deprecation of deprecations) {
|
||||
for (const selector of deprecation.selectors) {
|
||||
if (!removed.includes(selector)) {
|
||||
const error = `"${selector}" deprecated, but not removed`
|
||||
errors.push(error)
|
||||
console.log(`${X} ${error}`)
|
||||
} else {
|
||||
console.log(`${V} "${selector}" is officially deprecated`)
|
||||
}
|
||||
deprecatedSelectors.push(selector)
|
||||
}
|
||||
}
|
||||
|
||||
for (const removedSelector of removed) {
|
||||
if (!deprecatedSelectors.includes(removedSelector)) {
|
||||
const error = `"${removedSelector}" has been removed, but was not listed in versionDeprecations['${currentVersion}']`
|
||||
errors.push(error)
|
||||
console.log(`${X} ${error}`)
|
||||
} else {
|
||||
// console.log(`${V} "${removedSelector}" removed and deprecated!`)
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length) {
|
||||
process.exitCode = 1
|
||||
}
|
||||
}
|
||||
|
||||
function diffLists(before, after) {
|
||||
const added = after.filter(value => !before.includes(value))
|
||||
const removed = before.filter(value => !after.includes(value))
|
||||
return {
|
||||
changed: added.length + removed.length,
|
||||
added,
|
||||
removed
|
||||
}
|
||||
}
|
||||
158
docs-test/urls.js → script/test-doc-urls.js
Normal file → Executable file
158
docs-test/urls.js → script/test-doc-urls.js
Normal file → Executable file
@ -1,10 +1,18 @@
|
||||
const execa = require('execa')
|
||||
#!/usr/bin/env node
|
||||
const klaw = require('klaw')
|
||||
const {basename, dirname, join, resolve} = require('path')
|
||||
const {promisify} = require('util')
|
||||
const {readFile, writeFile} = require('fs-extra')
|
||||
const {join} = require('path')
|
||||
const {bold, yellow, green, red} = require('colorette')
|
||||
const {deprecated, moved, redirect, removed} = require('./exceptions')
|
||||
|
||||
const deprecated = yellow('deprecated')
|
||||
const moved = path => paths => {
|
||||
if (paths.includes(path)) {
|
||||
return {pass: true, message: `→ ${green(path)}`}
|
||||
} else {
|
||||
return {pass: false, message: `→ ${red(path)} is missing`}
|
||||
}
|
||||
}
|
||||
const redirect = url => `${green('redirect')} → ${url}`
|
||||
const removed = red('removed')
|
||||
|
||||
/**
|
||||
* This is where we track "exceptions" to paths that don't have 1:1 matches
|
||||
@ -24,6 +32,7 @@ const exceptions = {
|
||||
'/components/tables': deprecated,
|
||||
'/getting_started': moved('/getting-started/contributing'),
|
||||
'/getting_started/contributing': moved('/getting-started/contributing'),
|
||||
'/objects/layout': removed,
|
||||
'/packages': removed,
|
||||
'/packages/primer': removed,
|
||||
'/packages/primer-core': removed,
|
||||
@ -35,16 +44,11 @@ const exceptions = {
|
||||
'/whats_new': redirect('https://github.com/primer/primer/releases'),
|
||||
'/whats_new/changelog': removed,
|
||||
'/whats_new/changelog/archived_changelog': removed,
|
||||
'/whats_new/status-key': moved('/status-key')
|
||||
'/whats_new/status-key': redirect('https://primer.style/doctocat/usage/front-matter#status')
|
||||
}
|
||||
|
||||
const log = console.warn
|
||||
|
||||
const STYLEGUIDE_ROOT = join(__dirname, '../../../../github/styleguide')
|
||||
const CACHE_FILE = join(__dirname, 'fixtures/path-cache.txt')
|
||||
const {CI} = process.env
|
||||
const CLEAN = process.argv.slice(2).includes('--clean')
|
||||
|
||||
Promise.all([getStyleguidePaths(), getLocalPaths()])
|
||||
.then(([before, after]) => {
|
||||
log(`Found ${before.length} paths in github/styleguide, ${after.length} here.\n`)
|
||||
@ -93,51 +97,99 @@ Promise.all([getStyleguidePaths(), getLocalPaths()])
|
||||
})
|
||||
|
||||
function getStyleguidePaths() {
|
||||
if (CI) {
|
||||
return readLines(CACHE_FILE)
|
||||
}
|
||||
return buildStyleguide()
|
||||
.then(getPathsFromStyleguide)
|
||||
.then(writeLines(CACHE_FILE))
|
||||
.catch(error => {
|
||||
/*
|
||||
* If _anything_ goes wrong (on CI, no styleguide repo), just get the list
|
||||
* of paths from the committed file.
|
||||
*/
|
||||
log(`${yellow('!!!')} Unable to get styleguide paths:\n\n ${error}\n`)
|
||||
log(`Using the paths in ${CACHE_FILE} instead...\n`)
|
||||
return readLines(CACHE_FILE)
|
||||
})
|
||||
}
|
||||
|
||||
function buildStyleguide() {
|
||||
if (CLEAN) {
|
||||
const cwd = STYLEGUIDE_ROOT
|
||||
return pathExists(cwd).then(exists => {
|
||||
if (exists) {
|
||||
return execa('script/bootstrap', {cwd}).then(() => execa('npm', ['run', 'build-site'], {cwd}))
|
||||
} else {
|
||||
throw new Error(`The styleguide root (${cwd}) doesn't exist`)
|
||||
}
|
||||
})
|
||||
}
|
||||
return Promise.resolve(true)
|
||||
}
|
||||
|
||||
function getPathsFromStyleguide() {
|
||||
return getPaths(join(STYLEGUIDE_ROOT, '_site/primer'))
|
||||
.then(paths => paths.filter(path => !path.includes('code_example.html')))
|
||||
.then(normalizePaths)
|
||||
return `
|
||||
/components
|
||||
/components/alerts
|
||||
/components/avatars
|
||||
/components/blankslate
|
||||
/components/box
|
||||
/components/box-overlay
|
||||
/components/boxed-groups
|
||||
/components/branch-name
|
||||
/components/breadcrumb
|
||||
/components/buttons
|
||||
/components/dropdown
|
||||
/components/flash-banner
|
||||
/components/forms
|
||||
/components/labels
|
||||
/components/markdown
|
||||
/components/marketing-buttons
|
||||
/components/navigation
|
||||
/components/octicons
|
||||
/components/page-headers
|
||||
/components/page-sections
|
||||
/components/pagehead
|
||||
/components/pagination
|
||||
/components/popover
|
||||
/components/progress
|
||||
/components/select-menu
|
||||
/components/subhead
|
||||
/components/tables
|
||||
/components/tooltips
|
||||
/components/truncate
|
||||
/getting_started
|
||||
/getting_started/contributing
|
||||
/objects
|
||||
/objects/grid
|
||||
/objects/layout
|
||||
/objects/table-object
|
||||
/packages
|
||||
/packages/primer
|
||||
/packages/primer-core
|
||||
/packages/primer-marketing
|
||||
/packages/primer-product
|
||||
/principles
|
||||
/principles/HTML
|
||||
/principles/SCSS
|
||||
/principles/accessibility
|
||||
/support
|
||||
/support/breakpoints
|
||||
/support/color-system
|
||||
/support/marketing-variables
|
||||
/support/spacing
|
||||
/support/typography
|
||||
/tools
|
||||
/tools/atom-packages
|
||||
/tools/docset
|
||||
/tools/linting
|
||||
/tools/local-primer
|
||||
/tools/prototyping
|
||||
/tools/sketch-templates
|
||||
/tools/testing
|
||||
/utilities
|
||||
/utilities/animations
|
||||
/utilities/borders
|
||||
/utilities/box-shadow
|
||||
/utilities/colors
|
||||
/utilities/details
|
||||
/utilities/flexbox
|
||||
/utilities/layout
|
||||
/utilities/margin
|
||||
/utilities/marketing-borders
|
||||
/utilities/marketing-filters
|
||||
/utilities/marketing-layout
|
||||
/utilities/marketing-margin
|
||||
/utilities/marketing-padding
|
||||
/utilities/marketing-type
|
||||
/utilities/padding
|
||||
/utilities/typography
|
||||
/whats_new
|
||||
/whats_new/changelog
|
||||
/whats_new/changelog/archived_changelog
|
||||
/whats_new/status-key
|
||||
`
|
||||
.trim()
|
||||
.split('\n')
|
||||
}
|
||||
|
||||
function getLocalPaths() {
|
||||
return getPaths(join(__dirname, '../pages/css')).then(normalizePaths)
|
||||
return getPaths(join(__dirname, '../docs/content')).then(normalizePaths)
|
||||
}
|
||||
|
||||
function getPaths(dir, options) {
|
||||
function getPaths(dir) {
|
||||
const paths = []
|
||||
return new Promise((resolve, reject) => {
|
||||
klaw(dir, options)
|
||||
klaw(dir)
|
||||
.on('data', item => paths.push(item.path.substr(dir.length)))
|
||||
.on('error', reject)
|
||||
.on('end', () => {
|
||||
@ -147,14 +199,6 @@ function getPaths(dir, options) {
|
||||
})
|
||||
}
|
||||
|
||||
function readLines(filename) {
|
||||
return readFile(filename, 'utf8').then(str => str.trim().split(/[\r\n]+/))
|
||||
}
|
||||
|
||||
function writeLines(filename) {
|
||||
return lines => writeFile(filename, lines.join('\n'), 'utf8').then(() => lines)
|
||||
}
|
||||
|
||||
function normalizePaths(paths) {
|
||||
const normal = paths.map(path => path.replace(/(\/index)?\.([a-z]+)$/, ''))
|
||||
return unique(normal).sort()
|
||||
@ -60,8 +60,6 @@
|
||||
|
||||
.btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
|
||||
.btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
|
||||
@warn ".btn-purple will be removed in 13.0.0. Please don't make buttons purple.";
|
||||
.btn-purple { @include btn-solid($text-white, lighten($purple-500, 5%), darken($purple-500, 5%)); }
|
||||
.btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
|
||||
.btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }
|
||||
|
||||
|
||||
@ -1,12 +1,5 @@
|
||||
.dropdown {
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
.dropdown-menu-content {
|
||||
display: block;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
@ -121,17 +114,6 @@
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
.dropdown-menu-content {
|
||||
display: none;
|
||||
|
||||
// stylelint-disable-next-line primer/no-override
|
||||
&.anim-scale-in {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item[aria-checked="false"] .octicon-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
// Grid system
|
||||
//
|
||||
// Create rows with `.columns` to clear the floated columns and outdent the
|
||||
// padding on `.column`s with negative margin for alignment.
|
||||
|
||||
@warn ".columns, .column, .one-third, .two-thirds, .one-fourth, .one-half, .three-fourths, .one-fifth, .four-fifths, .centered will be deprecated in 12.0.0 please migrate to grid.scss";
|
||||
|
||||
.columns {
|
||||
margin-right: -$grid-gutter;
|
||||
margin-left: -$grid-gutter;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Base class for every column (requires a column width from below)
|
||||
.column {
|
||||
float: left;
|
||||
padding-right: $grid-gutter;
|
||||
padding-left: $grid-gutter;
|
||||
}
|
||||
|
||||
// Column widths
|
||||
.one-third {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.two-thirds {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.one-fourth {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.one-half {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.three-fourths {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.one-fifth {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.four-fifths {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
// Centers content horizontally. Can be used inside or outside the grid.
|
||||
.centered {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -1,12 +1,4 @@
|
||||
// Fixed-width, centered column for site content.
|
||||
// This will be deprecated and replaced with container-lg in future
|
||||
.container {
|
||||
width: $container-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Handy container styles that match our breakpoints
|
||||
|
||||
// 544px
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@import "../support/index.scss";
|
||||
@import "./container.scss";
|
||||
@import "./columns.scss";
|
||||
@import "./grid.scss";
|
||||
@import "./grid-offset.scss";
|
||||
|
||||
@ -246,6 +246,8 @@
|
||||
@include breakpoint(sm) {
|
||||
flex: none;
|
||||
padding: $spacer-1 $spacer-3;
|
||||
border: $border-width $border-style transparent;
|
||||
border-bottom-width: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
@ -257,8 +259,7 @@
|
||||
box-shadow: 0 0 0 1px $border-color;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
border: $border;
|
||||
border-bottom-width: 0;
|
||||
border-color: $border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
|
||||
|
||||
@warn ".text-pending and .bg-pending will be deprecated in 13.0.0. Use .text-yellow and .bg-yellow-dark instead";
|
||||
|
||||
// background colors
|
||||
/* Set the background to $bg-white */
|
||||
.bg-white { background-color: $bg-white !important; }
|
||||
@ -80,12 +78,6 @@
|
||||
/* Set the text color to inherit */
|
||||
.text-inherit { color: inherit !important; }
|
||||
|
||||
// Pending states
|
||||
// This will be deprecated in the future, use .text-yellow instead
|
||||
.text-pending { color: $yellow-800 !important; }
|
||||
// This will be deprecated in the future, use .bg-yellow-dark instead
|
||||
.bg-pending { color: $yellow-700 !important; }
|
||||
|
||||
// Link colors
|
||||
// Sets the links color to $text-gray and $text-blue on hover
|
||||
.link-gray {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user