mirror of
https://github.com/primer/css.git
synced 2024-11-22 01:53:17 +03:00
Remove Gatsby docs site (#2484)
* upgrade * add all stories * new directory * move back to docs * remove from root * cleanup * try node 16 * adjust build script * try to fix build * try node 16 * maybe? * please * bye gatsby * fix button story * add info banner * add missing marketing docs
This commit is contained in:
Katie Langerman
GitHub
parent
acc29def37
commit
ad358f2087
2
.github/workflows/deploy_preview.yml
vendored
2
.github/workflows/deploy_preview.yml
vendored
@ -19,7 +19,7 @@ jobs:
|
||||
secrets:
|
||||
gh_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
with:
|
||||
node_version: 14
|
||||
node_version: 16
|
||||
install: yarn && cd docs && yarn && cd ..
|
||||
build: yarn build:docs:preview
|
||||
output_dir: docs/public
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
{
|
||||
"sourceType": "unambiguous",
|
||||
"presets": [
|
||||
"babel-preset-gatsby",
|
||||
"@babel/preset-react"
|
||||
"@babel/preset-react",
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"targets": {
|
||||
"chrome": 100
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
{
|
||||
"extends": [
|
||||
"plugin:react/recommended",
|
||||
"plugin:jsx-a11y/recommended"
|
||||
"plugin:jsx-a11y/recommended",
|
||||
"plugin:storybook/recommended"
|
||||
],
|
||||
"rules": {
|
||||
"import/no-namespace": 0,
|
||||
"no-unused-vars": ["error", {
|
||||
"no-unused-vars": [
|
||||
"error",
|
||||
{
|
||||
"ignoreRestSiblings": true
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
|
||||
@ -1,22 +1,29 @@
|
||||
module.exports = {
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
|
||||
const config = {
|
||||
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-essentials',
|
||||
options: {
|
||||
actions: false,
|
||||
controls: false,
|
||||
docs: true,
|
||||
viewport: true,
|
||||
},
|
||||
},
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-links',
|
||||
'@storybook/preset-scss',
|
||||
],
|
||||
framework: '@storybook/react',
|
||||
core: {
|
||||
builder: 'webpack5',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
'storybook-addon-pseudo-states',
|
||||
'@storybook/addon-storysource',
|
||||
'@geometricpanda/storybook-addon-badges',
|
||||
{
|
||||
name: '@storybook/addon-styling',
|
||||
options: {
|
||||
sass: {
|
||||
implementation: require('sass'),
|
||||
},
|
||||
staticDirs: ['../src/stories/static'],
|
||||
},
|
||||
},
|
||||
],
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: 'tag',
|
||||
},
|
||||
staticDirs: ['../stories/static'],
|
||||
}
|
||||
export default config
|
||||
|
||||
6
docs/.storybook/manager.js
Normal file
6
docs/.storybook/manager.js
Normal file
@ -0,0 +1,6 @@
|
||||
import {addons} from '@storybook/manager-api'
|
||||
import theme from './theme'
|
||||
|
||||
addons.setConfig({
|
||||
theme: theme,
|
||||
})
|
||||
@ -1,32 +1 @@
|
||||
<style>
|
||||
.story-wrap {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
|
||||
Helvetica Neue, sans-serif;
|
||||
color: var(--color-fg-default);
|
||||
background-color: var(--color-canvas-default);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.theme-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.theme-wrap .story-wrap {
|
||||
padding: 1rem;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.sb-main-padded .theme-wrap {
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.sb-main-fullscreen .theme-wrap .story-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sb-main-padded div:not(.theme-wrap) > [data-dark-theme] {
|
||||
margin: -1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
<link href="https://unpkg.com/@github/details-dialog-element/dist/index.css" rel="stylesheet" />
|
||||
|
||||
9
docs/.storybook/preview.css
Normal file
9
docs/.storybook/preview.css
Normal file
@ -0,0 +1,9 @@
|
||||
@import '@primer/primitives/tokens-next-private/css/base/size/size.css';
|
||||
@import '@primer/primitives/tokens-next-private/css/base/typography/typography.css';
|
||||
@import '@primer/primitives/tokens-next-private/css/functional/size/border.css';
|
||||
@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints.css';
|
||||
@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse.css';
|
||||
@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine.css';
|
||||
@import '@primer/primitives/tokens-next-private/css/functional/size/size.css';
|
||||
@import '@primer/primitives/tokens-next-private/css/functional/size/viewport.css';
|
||||
@import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css';
|
||||
@ -1,138 +1,54 @@
|
||||
import '../../src/docs.scss'
|
||||
import '../../src/index.scss'
|
||||
import '../../src/base/index.scss'
|
||||
// temporary import until primitives moves to core bundle
|
||||
// importing the index from /css didn't play nice with Storybook
|
||||
import '@primer/primitives/tokens-next-private/css/base/size/size.css'
|
||||
import '@primer/primitives/tokens-next-private/css/base/typography/typography.css'
|
||||
import '@primer/primitives/tokens-next-private/css/functional/size/border.css'
|
||||
import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints.css'
|
||||
import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse.css'
|
||||
import '@primer/primitives/tokens-next-private/css/functional/size/size-fine.css'
|
||||
import '@primer/primitives/tokens-next-private/css/functional/size/size.css'
|
||||
import '@primer/primitives/tokens-next-private/css/functional/size/viewport.css'
|
||||
import '@primer/primitives/tokens-next-private/css/functional/typography/typography.css'
|
||||
import './preview.css'
|
||||
import './storybook.css'
|
||||
import clsx from 'clsx'
|
||||
import {BADGE, BadgesConfig} from '@geometricpanda/storybook-addon-badges'
|
||||
|
||||
const customViewports = {
|
||||
minXS: {
|
||||
name: 'XS (min)',
|
||||
styles: {
|
||||
width: '320px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
medXS: {
|
||||
name: 'XS (med)',
|
||||
styles: {
|
||||
width: '375px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
maxXS: {
|
||||
name: 'XS (max)',
|
||||
styles: {
|
||||
width: '543px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
minSM: {
|
||||
name: 'SM (min)',
|
||||
styles: {
|
||||
width: '544px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
maxSM: {
|
||||
name: 'SM (max)',
|
||||
styles: {
|
||||
width: '767px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
minMD: {
|
||||
name: 'MD (min)',
|
||||
styles: {
|
||||
width: '768px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
maxMD: {
|
||||
name: 'MD (max)',
|
||||
styles: {
|
||||
width: '1011px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
minLG: {
|
||||
name: 'LG (min)',
|
||||
styles: {
|
||||
width: '1012px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
maxLG: {
|
||||
name: 'LG (max)',
|
||||
styles: {
|
||||
width: '1279px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
minXL: {
|
||||
name: 'XL (min)',
|
||||
styles: {
|
||||
width: '1280px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
medXL: {
|
||||
name: 'XL (med)',
|
||||
styles: {
|
||||
width: '1440px',
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const parameters = {
|
||||
/** @type { import('@storybook/react').Preview } */
|
||||
const preview = {
|
||||
parameters: {
|
||||
actions: {argTypesRegex: '^on[A-Z].*'},
|
||||
// docs: {
|
||||
// transformSource: (src, storyContext) => renderToHTML(storyContext.storyFn),
|
||||
// },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
expanded: true,
|
||||
},
|
||||
|
||||
layout: 'padded',
|
||||
html: {
|
||||
root: '#story', // target id for html tab (should be direct parent of <Story /> for easy copy/paste)
|
||||
},
|
||||
viewport: {viewports: customViewports},
|
||||
options: {
|
||||
storySort: (storyA, storyB) => {
|
||||
if (storyA[1].title.includes('Examples')) {
|
||||
// if both are stories, sort alphabetically
|
||||
if (storyB[1].title.includes('Examples')) return -1
|
||||
// if only 1 is a story, push the examples story down
|
||||
else return 1
|
||||
}
|
||||
// sort as usual = alphabetical
|
||||
return -1
|
||||
storySort: {
|
||||
order: ['Introduction', 'GettingStarting', 'Contributing', 'Utilities'],
|
||||
},
|
||||
},
|
||||
badgesConfig: {
|
||||
[BADGE.DEPRECATED]: {
|
||||
title: 'Deprecated',
|
||||
tooltip: {
|
||||
desc: 'Please use a Primer View Component instead',
|
||||
links: [{title: 'See docs', href: 'https://primer.style/design/components'}],
|
||||
},
|
||||
},
|
||||
[BADGE.OBSOLETE]: {
|
||||
title: 'Outdated',
|
||||
tooltip: {
|
||||
desc: 'Information in this document may be outdated.',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const themes = [
|
||||
'light',
|
||||
'light_colorblind',
|
||||
'light_high_contrast',
|
||||
'dark',
|
||||
'dark_dimmed',
|
||||
'dark_high_contrast',
|
||||
'dark_colorblind',
|
||||
const primerThemes = [
|
||||
{value: 'light', left: '☀️', title: 'Light'},
|
||||
{value: 'light_colorblind', left: '☀️', title: 'Light Protanopia & Deuteranopia'},
|
||||
{value: 'light_tritanopia', left: '☀️', title: 'Light Tritanopia'},
|
||||
{value: 'light_high_contrast', left: '☀️', title: 'Light High Contrast'},
|
||||
{value: 'dark', left: '🌗', title: 'Dark'},
|
||||
{value: 'dark_dimmed', left: '🌗', title: 'Dark Dimmed'},
|
||||
{value: 'dark_colorblind', left: '🌗', title: 'Dark Protanopia & Deuteranopia'},
|
||||
{value: 'dark_tritanopia', left: '🌗', title: 'Dark Tritanopia'},
|
||||
{value: 'dark_high_contrast', left: '🌗', title: 'Dark High Contrast'},
|
||||
]
|
||||
|
||||
export const globalTypes = {
|
||||
@ -141,33 +57,58 @@ export const globalTypes = {
|
||||
description: 'Switch themes',
|
||||
defaultValue: 'light',
|
||||
toolbar: {
|
||||
icon: 'circlehollow',
|
||||
items: [...themes, 'all'],
|
||||
icon: 'contrast',
|
||||
items: [...primerThemes, {value: 'all', left: '', title: 'All'}],
|
||||
showName: true,
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const decorators = [
|
||||
(Story, context) => {
|
||||
const {parameters} = context
|
||||
const defaultStoryType = 'banner'
|
||||
const storyType = parameters.storyType || defaultStoryType
|
||||
document.body.setAttribute('data-color-mode', context.globals.theme.startsWith('light') ? 'light' : 'dark')
|
||||
document.body.setAttribute(
|
||||
'data-light-theme',
|
||||
context.globals.theme.startsWith('light') ? context.globals.theme : undefined,
|
||||
)
|
||||
document.body.setAttribute(
|
||||
'data-dark-theme',
|
||||
context.globals.theme.startsWith('dark') ? context.globals.theme : undefined,
|
||||
)
|
||||
return (
|
||||
<div class="theme-wrap">
|
||||
{themes.map(theme => {
|
||||
if (context.globals.theme === theme || context.globals.theme === 'all') {
|
||||
return (
|
||||
<>
|
||||
{context.globals.theme === 'all' ? (
|
||||
primerThemes.map(({value: theme}) => (
|
||||
<div
|
||||
key={theme}
|
||||
id="story"
|
||||
className="story-wrap"
|
||||
className={clsx(context.globals.theme === 'all' && 'story-wrap-grid', 'story-wrap')}
|
||||
data-color-mode={theme.startsWith('dark') ? 'dark' : 'light'}
|
||||
data-light-theme={theme.startsWith('light') ? theme : undefined}
|
||||
data-dark-theme={theme.startsWith('dark') ? theme : undefined}
|
||||
>
|
||||
<Story {...context} />
|
||||
{context.globals.theme === 'all' && <p className="theme-name">{theme}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})}
|
||||
))
|
||||
) : (
|
||||
<div className="story-wrap">
|
||||
{/* {parameters.storyType === 'banner' && (
|
||||
<div className="color-fg-danger border rounded-2 color-bg-danger p-3 color-border-danger-emphasis mb-5">
|
||||
Note: For the most up to date component documentation and guidelines, please reference Primer's core
|
||||
documentation site at <a href="https://primer.style">primer.style</a>.
|
||||
</div>
|
||||
)} */}
|
||||
<Story {...context} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
},
|
||||
]
|
||||
|
||||
export default preview
|
||||
|
||||
60
docs/.storybook/storybook.css
Normal file
60
docs/.storybook/storybook.css
Normal file
@ -0,0 +1,60 @@
|
||||
.story-wrap {
|
||||
font-family: var(--fontStack-system);
|
||||
color: var(--fgColor-default);
|
||||
}
|
||||
|
||||
#storybook-preview-wrapper {
|
||||
background-color: var(--bgColor-default) !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.theme-wrap-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(var(--breakpoint-xsmall, 20rem), auto));
|
||||
grid-gap: 1px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.story-wrap-grid {
|
||||
outline: 1px solid #d4d4d8;
|
||||
padding-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: calc(20rem * 4)) {
|
||||
.theme-wrap-grid {
|
||||
grid-template-columns: repeat(3, minmax(var(--breakpoint-xsmall, 20rem), auto));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: calc(20rem * 3)) {
|
||||
.theme-wrap-grid {
|
||||
grid-template-columns: repeat(2, minmax(var(--breakpoint-xsmall, 20rem), auto));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: calc(20rem * 2)) {
|
||||
.theme-wrap-grid {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: var(--bgColor-muted);
|
||||
padding: var(--base-size-4) var(--base-size-8);
|
||||
font: var(--text-caption-shorthand);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.2em 0.4em;
|
||||
font-family: var(--fontStack-monospace);
|
||||
font-size: var(--text-codeInline-size);
|
||||
background-color: var(--bgColor-muted);
|
||||
border-radius: var(--borderRadius-small);
|
||||
font-weight: var(--base-text-weight-normal);
|
||||
}
|
||||
13
docs/.storybook/theme.js
Normal file
13
docs/.storybook/theme.js
Normal file
@ -0,0 +1,13 @@
|
||||
import {create} from '@storybook/theming'
|
||||
import packageJson from '../../package.json'
|
||||
|
||||
export default create({
|
||||
brandTitle: `
|
||||
<div style="display: grid; grid-template-columns: min-content auto; gap: 4px; align-items: center;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0.75C5.64625 0.75 0.5 5.89625 0.5 12.25C0.5 17.3387 3.79187 21.6369 8.36312 23.1606C8.93812 23.2612 9.15375 22.9162 9.15375 22.6144C9.15375 22.3412 9.13938 21.4356 9.13938 20.4725C6.25 21.0044 5.5025 19.7681 5.2725 19.1212C5.14313 18.7906 4.5825 17.77 4.09375 17.4969C3.69125 17.2812 3.11625 16.7494 4.07938 16.735C4.985 16.7206 5.63187 17.5687 5.8475 17.9137C6.8825 19.6531 8.53563 19.1644 9.19688 18.8625C9.2975 18.115 9.59938 17.6119 9.93 17.3244C7.37125 17.0369 4.6975 16.045 4.6975 11.6462C4.6975 10.3956 5.14312 9.36062 5.87625 8.55562C5.76125 8.26812 5.35875 7.08937 5.99125 5.50812C5.99125 5.50812 6.95438 5.20625 9.15375 6.68687C10.0738 6.42812 11.0513 6.29875 12.0288 6.29875C13.0063 6.29875 13.9838 6.42812 14.9038 6.68687C17.1031 5.19188 18.0662 5.50812 18.0662 5.50812C18.6987 7.08937 18.2962 8.26812 18.1812 8.55562C18.9144 9.36062 19.36 10.3812 19.36 11.6462C19.36 16.0594 16.6719 17.0369 14.1131 17.3244C14.53 17.6837 14.8894 18.3737 14.8894 19.4519C14.8894 20.99 14.875 22.2262 14.875 22.6144C14.875 22.9162 15.0906 23.2756 15.6656 23.1606C20.2081 21.6369 23.5 17.3244 23.5 12.25C23.5 5.89625 18.3538 0.75 12 0.75V0.75Z" fill="#0969DA"/>
|
||||
</svg>
|
||||
<span>${packageJson.name}@${packageJson.version}</span>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
@ -1,197 +0,0 @@
|
||||
---
|
||||
title: Alerts
|
||||
path: components/alerts
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/alerts'
|
||||
rails: 'https://primer.style/view-components/components/alpha/banner'
|
||||
bundle: alerts
|
||||
---
|
||||
|
||||
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
|
||||
|
||||
## Default
|
||||
|
||||
Flash messages start off looking decently neutral—they're just light blue rounded rectangles.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
|
||||
You can put multiple paragraphs of text in a flash message—the last paragraph's bottom `margin` will be automatically overridden.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
<p>
|
||||
This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more
|
||||
text, it'll eventually wrap to a new line.
|
||||
</p>
|
||||
<p>And this is another paragraph.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
Should the need arise, you can quickly space out your flash message from surrounding content with a `.flash-messages` wrapper. _Note the extra top and bottom margin in the example below._
|
||||
|
||||
```html live
|
||||
<div class="flash-messages">
|
||||
<div class="flash">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Colors
|
||||
|
||||
Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
|
||||
## With icon
|
||||
|
||||
Add an icon to the left of the flash message to give it some funky fresh attention.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
<!-- <%= octicon "alert" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
<!-- <%= octicon "stop" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.47.22A.75.75 0 015 0h6a.75.75 0 01.53.22l4.25 4.25c.141.14.22.331.22.53v6a.75.75 0 01-.22.53l-4.25 4.25A.75.75 0 0111 16H5a.75.75 0 01-.53-.22L.22 11.53A.75.75 0 010 11V5a.75.75 0 01.22-.53L4.47.22zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5H5.31zM8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 8a1 1 0 100-2 1 1 0 000 2z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
<!-- <%= octicon "check" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
```
|
||||
|
||||
When using a `24px` icon, add a `.v-align-bottom` class and increase the font-size with `.f4` for a more balanced alignment.
|
||||
|
||||
```html live
|
||||
<div class="flash flash-success f4">
|
||||
<!-- <%= octicon "shield-check" %> -->
|
||||
<svg class="octicon octicon-shield-check v-align-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9275 3.55567C11.9748 3.54134 12.0252 3.54134 12.0725 3.55567L19.3225 5.75264C19.4292 5.78497 19.5 5.88157 19.5 5.99039V11C19.5 13.4031 18.7773 15.3203 17.5164 16.847C16.246 18.3853 14.3925 19.5706 12.0703 20.4278C12.0253 20.4444 11.9746 20.4444 11.9297 20.4278C9.60747 19.5706 7.75398 18.3853 6.48358 16.847C5.2227 15.3203 4.5 13.4031 4.5 11L4.5 5.9904C4.5 5.88158 4.57082 5.78496 4.6775 5.75264L11.9275 3.55567ZM12.5075 2.12013C12.1766 2.01985 11.8234 2.01985 11.4925 2.12013L4.24249 4.3171C3.50587 4.54032 3 5.21807 3 5.9904L3 11C3 13.7306 3.83104 15.9908 5.32701 17.8022C6.81347 19.6021 8.91996 20.9157 11.4102 21.835C11.7904 21.9753 12.2095 21.9753 12.5897 21.835C15.08 20.9157 17.1865 19.6021 18.673 17.8022C20.169 15.9908 21 13.7306 21 11V5.99039C21 5.21804 20.4941 4.54031 19.7575 4.3171L12.5075 2.12013ZM16.2803 9.78033C16.5732 9.48744 16.5732 9.01256 16.2803 8.71967C15.9874 8.42678 15.5126 8.42678 15.2197 8.71967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L16.2803 9.78033Z"></path></svg>
|
||||
Flash message with a larger icon
|
||||
</div>
|
||||
```
|
||||
|
||||
## With dismiss
|
||||
|
||||
Add a close icon on the right to allow users to dismiss a flash message.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## With action button
|
||||
|
||||
A flash message with an action button.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
Flash message with action here.
|
||||
<button type="submit" class="btn btn-sm flash-action">Complete action</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm flash-action" type="submit">Complete action</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm flash-action" type="submit">
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
Complete action
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M5.75 7.5a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm5.25.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5z"></path><path fill-rule="evenodd" d="M6.25 0a.75.75 0 000 1.5H7.5v2H3.75A2.25 2.25 0 001.5 5.75V8H.75a.75.75 0 000 1.5h.75v2.75a2.25 2.25 0 002.25 2.25h8.5a2.25 2.25 0 002.25-2.25V9.5h.75a.75.75 0 000-1.5h-.75V5.75a2.25 2.25 0 00-2.25-2.25H9V.75A.75.75 0 008.25 0h-2zM3 5.75A.75.75 0 013.75 5h8.5a.75.75 0 01.75.75v6.5a.75.75 0 01-.75.75h-8.5a.75.75 0 01-.75-.75v-6.5z"></path></svg>
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm flash-action" type="submit">
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 010 1.5h-2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 010 1.5h-2.5A1.75 1.75 0 012 13.25V2.75zm10.44 4.5H6.75a.75.75 0 000 1.5h5.69l-1.97 1.97a.75.75 0 101.06 1.06l3.25-3.25a.75.75 0 000-1.06l-3.25-3.25a.75.75 0 10-1.06 1.06l1.97 1.97z"></path></svg>
|
||||
Complete action
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Full width flash
|
||||
|
||||
A flash message that is full width and removes border and border radius.
|
||||
|
||||
```html live
|
||||
<div class="flash flash-full">
|
||||
Full width flash message.
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flash banner
|
||||
|
||||
A flash message that is fixed positioned at the top of the page. Use for more global events where the content of the page is unknown.
|
||||
|
||||
```html live
|
||||
<div class="ml-n3" style="min-height: 50px;">
|
||||
<div class="flash flash-banner">
|
||||
Flash banner message.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,450 +0,0 @@
|
||||
---
|
||||
title: Autocomplete
|
||||
path: components/autocomplete
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/autocomplete'
|
||||
bundle: autocomplete
|
||||
---
|
||||
|
||||
A list of items used to show autocompleted results. Use the [`<auto-complete>`](https://github.com/github/auto-complete-element) element to add functionality.
|
||||
|
||||
## Default (stacked label)
|
||||
|
||||
```html live
|
||||
<div class="position-relative">
|
||||
<label for="input-0" class="autocomplete-label-stacked">Search by user</label>
|
||||
<span class="autocomplete-body">
|
||||
<input id="input-0" class="form-control" type="text" />
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Option 1</li>
|
||||
<li class="autocomplete-item">Option 2</li>
|
||||
<li class="autocomplete-item">Option 3</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 160px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Inline label
|
||||
|
||||
**Note**: On smaller screen sizes, the labels will be stacked.
|
||||
|
||||
```html live
|
||||
<div class="position-relative">
|
||||
<label for="input-1" class="autocomplete-label-inline">Search by team</label>
|
||||
<span class="autocomplete-body">
|
||||
<input id="input-1" class="form-control" type="text" />
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Team 1 (works on Ruby architecture)</li>
|
||||
<li class="autocomplete-item">Team 2 (works on frontend JS architecture)</li>
|
||||
<li class="autocomplete-item">Team 3 (this team works on design systems)</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 160px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Embedded icon with visible label
|
||||
|
||||
### Stacked label
|
||||
|
||||
```html live
|
||||
<div class="position-relative">
|
||||
<label for="input-2" class="autocomplete-label-stacked">Search by org</label>
|
||||
<span class="autocomplete-body">
|
||||
<div class="form-control autocomplete-embedded-icon-wrap">
|
||||
<svg
|
||||
class="octicon"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
|
||||
></path>
|
||||
</svg>
|
||||
<input id="input-2" class="form-control" type="text" />
|
||||
</div>
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Option 1</li>
|
||||
<li class="autocomplete-item">Option 2</li>
|
||||
<li class="autocomplete-item">Option 3</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Inline label
|
||||
|
||||
```html live
|
||||
<div class="position-relative">
|
||||
<label for="input-3" class="autocomplete-label-inline">Search by org</label>
|
||||
<span class="autocomplete-body">
|
||||
<div class="form-control autocomplete-embedded-icon-wrap">
|
||||
<svg
|
||||
class="octicon autocomplete-embedded-icon"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
|
||||
></path>
|
||||
</svg>
|
||||
<input id="input-3" class="form-control" type="text" />
|
||||
</div>
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Option 1</li>
|
||||
<li class="autocomplete-item">Option 2</li>
|
||||
<li class="autocomplete-item">Option 3</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 160px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Embedded icon with hidden label
|
||||
|
||||
```html live
|
||||
<div class="position-relative">
|
||||
<label for="input-4" class="autocomplete-label-stacked sr-only">Search by org</label>
|
||||
<span class="autocomplete-body">
|
||||
<div class="form-control autocomplete-embedded-icon-wrap">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="octicon autocomplete-embedded-icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
|
||||
></path>
|
||||
</svg>
|
||||
<input id="input-4" class="form-control" type="text" />
|
||||
</div>
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Option 1</li>
|
||||
<li class="autocomplete-item">Option 2</li>
|
||||
<li class="autocomplete-item">Option 3</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 160px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Within form group
|
||||
|
||||
```html live
|
||||
<div class="form-group">
|
||||
<div class="form-group-body">
|
||||
<div class="position-relative">
|
||||
<label for="input-5" class="autocomplete-label-stacked">Search by org</label>
|
||||
<span class="autocomplete-body">
|
||||
<div class="form-control autocomplete-embedded-icon-wrap">
|
||||
<svg
|
||||
class="octicon"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
|
||||
></path></svg>
|
||||
<input id="input-5" class="form-control" type="text" />
|
||||
</div>
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Option 1</li>
|
||||
<li class="autocomplete-item">Option 2</li>
|
||||
<li class="autocomplete-item">Option 3</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Within input group
|
||||
|
||||
When rendering `Autocomplete` with embedded icon within an [input group](https://primer.style/css/components/forms#input-group), add `.input-group-button--autocomplete-embedded-icon` to `.input-group-button`.
|
||||
|
||||
### Stacked
|
||||
|
||||
```html live
|
||||
<div class="input-group">
|
||||
<div class="position-relative">
|
||||
<label for="input-6" class="autocomplete-label-stacked">Search by org</label>
|
||||
<span class="autocomplete-body">
|
||||
<div class="form-control autocomplete-embedded-icon-wrap">
|
||||
<svg
|
||||
class="octicon"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
|
||||
></path></svg>
|
||||
<input id="input-6" class="form-control" type="text" />
|
||||
</div>
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Option 1</li>
|
||||
<li class="autocomplete-item">Option 2</li>
|
||||
<li class="autocomplete-item">Option 3</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
<span class="input-group-button input-group-button--autocomplete-embedded-icon">
|
||||
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Inline
|
||||
```html live
|
||||
<div class="input-group">
|
||||
<div class="position-relative">
|
||||
<label for="input-7" class="autocomplete-label-inline">Search by org</label>
|
||||
<span class="autocomplete-body">
|
||||
<div class="form-control autocomplete-embedded-icon-wrap">
|
||||
<svg
|
||||
class="octicon"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
|
||||
></path></svg>
|
||||
<input id="input-7" class="form-control" type="text" />
|
||||
</div>
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Option 1</li>
|
||||
<li class="autocomplete-item">Option 2</li>
|
||||
<li class="autocomplete-item">Option 3</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
<span class="input-group-button input-group-button--autocomplete-embedded-icon">
|
||||
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 160px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Container with `max-width`
|
||||
|
||||
```html live
|
||||
<div class="Box" style="max-width: 440px;">
|
||||
<div class="Box-body">
|
||||
<div class="form-group">
|
||||
<div class="form-group-body">
|
||||
<div class="position-relative">
|
||||
<label for="input-8" class="autocomplete-label-stacked">Search by org</label>
|
||||
<span class="autocomplete-body">
|
||||
<div class="form-control autocomplete-embedded-icon-wrap">
|
||||
<svg
|
||||
class="octicon"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
|
||||
></path></svg>
|
||||
<input id="input-8" class="form-control" type="text" />
|
||||
</div>
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">Option 1</li>
|
||||
<li class="autocomplete-item">Option 2</li>
|
||||
<li class="autocomplete-item">Option 3</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 220px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Additional content
|
||||
|
||||
Autocomplete items can contain additional content, like an `.avatar`. Or use utility classes to customize the text style.
|
||||
|
||||
```html live
|
||||
<div class="position-relative">
|
||||
<input class="form-control" type="text" aria-label="Search by user" placeholder="Search by user" />
|
||||
<ul role="listbox" aria-label="Results" class="autocomplete-results">
|
||||
<li class="autocomplete-item" aria-selected="true">
|
||||
<img src="https://github.com/github.png" width="20" class="avatar mr-1" alt="" />
|
||||
<span>GitHub Inc.</span>
|
||||
<span class="text-normal">@github</span>
|
||||
</li>
|
||||
<li class="autocomplete-item">
|
||||
<img src="https://github.com/hubot.png" width="20" class="avatar mr-1" alt="" />
|
||||
<span>Hubot</span>
|
||||
<span class="text-normal">@hubot</span>
|
||||
</li>
|
||||
<li class="autocomplete-item">
|
||||
<img src="https://github.com/octocat.png" width="20" class="avatar mr-1" alt="" />
|
||||
<span>Monalisa Octocat</span>
|
||||
<span class="text-normal">@octocat</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
width: 300px;
|
||||
height: 160px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Suggester
|
||||
|
||||
The `.suggester` component is meant for showing suggestions while typing in a larger text area. Use the [`<text-expander>`](https://github.com/github/text-expander-element) element to add functionality.
|
||||
|
||||
```html live
|
||||
<div class="form-group position-relative">
|
||||
<textarea class="form-control width-full" placeholder="Leave a comment" aria-label="Comment body">
|
||||
This is on top of #</textarea
|
||||
>
|
||||
<ul aria-label="Results" class="suggester suggester-container" role="listbox" style="top: 4px; left: 125px;">
|
||||
<li aria-selected="true">
|
||||
<svg
|
||||
class="octicon color-fg-subtle"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
|
||||
<path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
|
||||
</svg>
|
||||
<small>#924</small> <span>Markdown tables are inaccessible</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg
|
||||
class="octicon color-fg-success"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
|
||||
<path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
|
||||
</svg>
|
||||
<small>#980</small> <span>Use actual book emoji in Flexbox docs</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg
|
||||
class="octicon color-fg-attention"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
|
||||
<path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
|
||||
</svg>
|
||||
<small>#979</small> <span>Add `.radio-group` component</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg
|
||||
class="octicon color-fg-danger"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
|
||||
<path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
|
||||
</svg>
|
||||
<small>#925</small> <span>Release 14.0.0</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg class="octicon color-fg-done" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
|
||||
<path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
|
||||
</svg>
|
||||
<small>#978</small> <span>Add `.css-truncate-overflow`</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.frame-example {
|
||||
height: 260px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -1,152 +0,0 @@
|
||||
---
|
||||
title: AvatarStack
|
||||
path: components/avatar-stack
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/avatars'
|
||||
rails: 'https://primer.style/view-components/components/beta/avatarstack'
|
||||
bundle: avatars
|
||||
---
|
||||
|
||||
Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.
|
||||
|
||||
```html live
|
||||
<div class="AvatarStack AvatarStack--three-plus">
|
||||
<div
|
||||
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
|
||||
aria-label="octocat, octocat, and octocat"
|
||||
>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Based on the number of avatars in the stack, add these modifier classes:
|
||||
|
||||
- `AvatarStack--two` for 2 avatars.
|
||||
- `AvatarStack--three-plus` for 3 or more avatars.
|
||||
|
||||
If you have more than three avatars, add a div with the classes `avatar avatar-more` as the third avatar in the stack, as such:
|
||||
|
||||
```html live
|
||||
<div class="AvatarStack AvatarStack--three-plus">
|
||||
<div
|
||||
class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
|
||||
aria-label="octocat, octocat, octocat, octocat, and octocat"
|
||||
>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<div class="avatar avatar-more"></div>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also link individual avatars. To do this shift the `avatar` class over to the anchor:
|
||||
|
||||
```html live
|
||||
<div class="AvatarStack AvatarStack--two">
|
||||
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat and octocat">
|
||||
<a href="#" class="avatar">
|
||||
<img
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</a>
|
||||
<a href="#" class="avatar">
|
||||
<img
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.
|
||||
|
||||
```html live
|
||||
<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
|
||||
<div
|
||||
class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1"
|
||||
aria-label="octocat, octocat, and octocat"
|
||||
>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
<img
|
||||
class="avatar"
|
||||
height="20"
|
||||
alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
|
||||
width="20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,111 +0,0 @@
|
||||
---
|
||||
title: Avatars
|
||||
path: components/avatars
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/avatars'
|
||||
rails: 'https://primer.style/view-components/components/beta/avatar'
|
||||
bundle: avatars
|
||||
---
|
||||
|
||||
Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
|
||||
|
||||
## Basic example
|
||||
|
||||
Add `.avatar` to any `<img>` element to make it an avatar. This resets some key styles for alignment, address a Firefox image placeholder bug, and rounds the corners.
|
||||
|
||||
Be sure to set `width` and `height` attributes for maximum browser performance.
|
||||
|
||||
```html live
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
|
||||
```
|
||||
|
||||
### Small avatars
|
||||
|
||||
We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" />
|
||||
```
|
||||
|
||||
### Avatar sizes
|
||||
|
||||
Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only supported for the `20px` avatar size.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
|
||||
<img class="avatar avatar-2 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" />
|
||||
<img class="avatar avatar-3 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=48" />
|
||||
<img class="avatar avatar-4 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=56" />
|
||||
<img class="avatar avatar-5 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" />
|
||||
<img class="avatar avatar-6 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=80" />
|
||||
<img class="avatar avatar-7 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
|
||||
<img class="avatar avatar-8 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=128" />
|
||||
```
|
||||
|
||||
### Parent-child avatars
|
||||
|
||||
When you need a larger parent avatar, and a smaller child one, overlaid slightly, use the parent-child classes.
|
||||
|
||||
```html live
|
||||
<div class="avatar-parent-child d-inline-flex">
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
|
||||
<img class="avatar avatar-child" alt="josh" src="https://github.com/josh.png?v=3&s=40" width="20" height="20" />
|
||||
</div>
|
||||
```
|
||||
|
||||
## Circle badge
|
||||
|
||||
`.CircleBadge` allows for the display of badge-like icons or logos. They are used mostly with Octicons or partner integration icons.
|
||||
|
||||
`.CircleBadge` should have an `aria-label`, `title` (for a link), or an `alt` (for child `img` elements) attribute specified if there is no text-based alternative to describe it. If there is a text-based alternative or the icon has no semantic value, `aria-hidden="true"` or an empty `alt` attribute may be used.
|
||||
|
||||
### Small
|
||||
|
||||
```html live
|
||||
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small">
|
||||
<img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt="">
|
||||
</a>
|
||||
<a class="CircleBadge CircleBadge--small color-bg-done-muted" href="#small">
|
||||
<!-- <%= octicon "zap", class: "CircleBadge-icon color-fg-default" %> -->
|
||||
<svg class="CircleBadge-icon color-fg-default octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg>
|
||||
</a>
|
||||
```
|
||||
|
||||
### Medium
|
||||
|
||||
```html live
|
||||
<div class="CircleBadge CircleBadge--medium color-bg-subtle">
|
||||
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
|
||||
</div>
|
||||
```
|
||||
|
||||
### Large
|
||||
|
||||
```html live
|
||||
<div class="CircleBadge CircleBadge--large">
|
||||
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dashed connection
|
||||
|
||||
For specific cases where two badges or more need to be shown as related or connected (such as integrations or specific product workflows), a `DashedConnection` class was created. Use utility classes to ensure badges are spaced correctly.
|
||||
|
||||
```html live
|
||||
<div class="DashedConnection">
|
||||
<ul class="d-flex list-style-none flex-justify-between" aria-label="A sample GitHub workflow">
|
||||
<li class="CircleBadge CircleBadge--small" aria-label="GitHub">
|
||||
<!-- <%= octicon "mark-github", class: "width-full height-full" %> -->
|
||||
<svg class="octicon octicon-mark-github width-full height-full" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</li>
|
||||
|
||||
<li class="CircleBadge CircleBadge--small" aria-label="Slack">
|
||||
<img src="https://github.com/slackhq.png" alt="" class="CircleBadge-icon">
|
||||
</li>
|
||||
|
||||
<li class="CircleBadge CircleBadge--small" aria-label="Travis CI">
|
||||
<img src="https://github.com/travis-ci.png" alt="" class="CircleBadge-icon">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
@ -1,152 +0,0 @@
|
||||
---
|
||||
title: Blankslate
|
||||
path: components/blankslate
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/blankslate'
|
||||
rails: 'https://primer.style/view-components/components/beta/blankslate'
|
||||
bundle: blankslate
|
||||
---
|
||||
|
||||
Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there. Be sure to provide an action to add content as well.
|
||||
|
||||
## Basic example
|
||||
|
||||
Wrap some content in the outer `.blankslate` wrapper and add the `.blankslate-heading` class to headings to give it the blankslate appearance.
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<h3 class="blankslate-heading">This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## With Octicons
|
||||
|
||||
When it helps the message, include (relevant) icons in your blank slate. Add the `.blankslate-icon` class to give icons the proper styling.
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<!-- <%= octicon "octoface", :height = 24, :class => "blankslate-icon" %> -->
|
||||
<svg class="octicon octicon-octoface blankslate-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7.75 11c-.69 0-1.25.56-1.25 1.25v1.5a1.25 1.25 0 102.5 0v-1.5C9 11.56 8.44 11 7.75 11zm1.27 4.5a.469.469 0 01.48-.5h5a.47.47 0 01.48.5c-.116 1.316-.759 2.5-2.98 2.5s-2.864-1.184-2.98-2.5zm7.23-4.5c-.69 0-1.25.56-1.25 1.25v1.5a1.25 1.25 0 102.5 0v-1.5c0-.69-.56-1.25-1.25-1.25z"></path><path fill-rule="evenodd" d="M21.255 3.82a1.725 1.725 0 00-2.141-1.195c-.557.16-1.406.44-2.264.866-.78.386-1.647.93-2.293 1.677A18.442 18.442 0 0012 5c-.93 0-1.784.059-2.569.17-.645-.74-1.505-1.28-2.28-1.664a13.876 13.876 0 00-2.265-.866 1.725 1.725 0 00-2.141 1.196 23.645 23.645 0 00-.69 3.292c-.125.97-.191 2.07-.066 3.112C1.254 11.882 1 13.734 1 15.527 1 19.915 3.13 23 12 23c8.87 0 11-3.053 11-7.473 0-1.794-.255-3.647-.99-5.29.127-1.046.06-2.15-.066-3.125a23.652 23.652 0 00-.689-3.292zM20.5 14c.5 3.5-1.5 6.5-8.5 6.5s-9-3-8.5-6.5c.583-4 3-6 8.5-6s7.928 2 8.5 6z"></path></svg>
|
||||
<h3 class="blankslate-heading">This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## With graphic, button and link
|
||||
|
||||
Add a graphic, button and/or link to add additional information and provide users a way to add content to this page. Add the `.blankslate-image` class to the image, and the `.blankslate-action` to any button or link wrappers.
|
||||
|
||||
```html live
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Variations
|
||||
|
||||
Add an additional optional class to the `.blankslate` to change its appearance.
|
||||
|
||||
### Narrow
|
||||
|
||||
`.blankslate-narrow` narrows the blankslate container to not occupy the entire available width.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-narrow">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Large
|
||||
|
||||
`.blankslate-large` increases the size of the text in the blankslate
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-large">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Spacious
|
||||
|
||||
`.blankslate-spacious` significantly increases the vertical padding.
|
||||
|
||||
```html live
|
||||
<div class="blankslate blankslate-spacious">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Note**: It's possible to combine variations. Large and spacious (`blankslate blankslate-large blankslate-spacious`) is often used together.
|
||||
|
||||
### Add border
|
||||
|
||||
To add a border, wrap the blankslate component with the [Box component](/components/box).
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Capped
|
||||
|
||||
Removes the `border-radius` on the top corners.
|
||||
|
||||
```html live
|
||||
<div class="Box rounded-top-0">
|
||||
<div class="blankslate">
|
||||
<img src="https://ghicons.github.com/assets/images/blue/png/Pull%20request.png" alt="" class="blankslate-image" />
|
||||
<h3 class="blankslate-heading">You don’t seem to have any pull requests.</h3>
|
||||
<p>Pull requests help you discuss potential changes before they are merged into the base branch.</p>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn btn-primary" type="button">New pull request</button>
|
||||
</div>
|
||||
<div class="blankslate-action">
|
||||
<button class="btn-link" type="button">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,60 +0,0 @@
|
||||
---
|
||||
title: Box overlay
|
||||
path: components/box-overlay
|
||||
status: Alpha
|
||||
status_issue: 'https://github.com/github/design-systems/issues/374'
|
||||
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/box-overlay.scss'
|
||||
rails: 'https://primer.style/view-components/components/alpha/dialog'
|
||||
symbols: [Box--overlay, Box-header, Box-overlay--narrow, Box-overlay--wide]
|
||||
keywords: [box, overlay]
|
||||
---
|
||||
|
||||
Use the `Box--overlay` with the `<details>` and [`<details-dialog>`](https://github.com/github/details-dialog), and add the `details-overlay-dark` utility if you wish to apply a dark transparent background.
|
||||
|
||||
Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide.
|
||||
|
||||
```html live
|
||||
|
||||
<details class="details-reset details-overlay details-overlay-dark">
|
||||
<summary class="btn" aria-haspopup="dialog">Open dialog</summary>
|
||||
<details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast">
|
||||
<div class="Box-header">
|
||||
<button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
|
||||
</button>
|
||||
<h3 class="Box-title">Box title</h3>
|
||||
</div>
|
||||
<div class="overflow-auto">
|
||||
<div class="Box-body overflow-auto">
|
||||
<p>
|
||||
The quick brown fox jumps over the lazy dog and feels as if he were in the seventh heaven of typography together with Hermann Zapf, the most famous artist of the...
|
||||
</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
<img class="avatar v-align-middle mr-2" src="https://avatars.githubusercontent.com/broccolini?s=48" alt="broccolini" width="24" height="24">
|
||||
@broccolini
|
||||
</li>
|
||||
<li class="Box-row border-bottom">
|
||||
<img class="avatar v-align-middle mr-2" src="https://avatars.githubusercontent.com/jonrohan?s=48" alt="jonrohan" width="24" height="24">
|
||||
@jonrohan
|
||||
</li>
|
||||
<li class="Box-row border-bottom">
|
||||
<img class="avatar v-align-middle mr-2" src="https://avatars.githubusercontent.com/shawnbot?s=48" alt="shawnbot" width="24" height="24">
|
||||
@shawnbot
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="Box-footer">
|
||||
<button type="button" class="btn btn-block" data-close-dialog>Okidoki</button>
|
||||
</div>
|
||||
</details-dialog>
|
||||
</details>
|
||||
|
||||
<!-- Temporary overrides (don't use in production) -->
|
||||
<style> .frame-example { min-height: 500px; } </style>
|
||||
<link href="https://unpkg.com/@github/details-dialog-element/dist/index.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
[aria attributes]: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
|
||||
@ -1,579 +0,0 @@
|
||||
---
|
||||
title: Box
|
||||
path: components/box
|
||||
status_issue: 'https://github.com/github/design-systems/issues/198'
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/box'
|
||||
rails: 'https://primer.style/view-components/components/beta/borderbox'
|
||||
bundle: box
|
||||
---
|
||||
|
||||
The `.Box` component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
|
||||
|
||||
## Box
|
||||
|
||||
A `.Box` is a container with a white background, a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
This is a box.
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box elements
|
||||
|
||||
Box elements include `Box-header`, `Box-body`, and `Box-footer`. These elements include borders and consistent padding. Optionally, you can include use `Box-title` which applies a bold font-weight the heading.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Box row
|
||||
|
||||
Use `Box-row` to add rows with borders and maintain the same padding. Box rows have a lighter border to give contrast between the header and footer.
|
||||
|
||||
**Note:** Box rows have some reliance on markup structure in order to target the first and last rows, therefore using an unordered list is recommended. See [box row markup structure](#box-row-markup-structure) for more information.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row three
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row four
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
Rows can be used with or without `Box-header`, `Box-footer`, or `Box-body`.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
<strong>Box body</strong>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row three
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row four
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Box row markup structure
|
||||
|
||||
Box rows have some reliance on markup structure in order to target the first and last rows. Box rows are given a top border that is lighter in color than other box elements so the first row is targeted to apply a darker border color. An inner border-radius is applied to the first and last rows that row corners don't poke outside the `Box`, this can be particularly noticeable when using a highlight on box rows.
|
||||
|
||||
Using an unordered list is recommended in order to target the first and last rows, however, if you need to use a `<div>` for your rows, you may want to place your rows inside a parent `<div>` so that the first and last rows are styled appropriately.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<!-- This wrapping div ensures the first and last rows can be targeted for styling. -->
|
||||
<div>
|
||||
<div class="Box-row">Box row using a div</div>
|
||||
<div class="Box-row">Box row using a div</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box padding density
|
||||
|
||||
You can changed the padding density of the box component.
|
||||
|
||||
Use `Box--condensed` to apply a more condensed line-height and reduce the padding on the Y axis.
|
||||
|
||||
```html live
|
||||
<div class="Box Box--condensed">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `Box--spacious` to increase padding and increase the title font size.
|
||||
|
||||
You may want to increase the overall font size to work with the larger padding, in this example the default body font size is increased to 16px using the `f4` typography utility.
|
||||
|
||||
```html live
|
||||
<div class="Box Box--spacious f4">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Blue box theme
|
||||
|
||||
Use `Box--blue` to style the box borders and box header in blue.
|
||||
|
||||
```html live
|
||||
<div class="Box Box--blue">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
</ul>
|
||||
<div class="Box-footer">
|
||||
Box footer
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Blue box header theme
|
||||
|
||||
Use `Box-header--blue` to add to change the header border and background to blue.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header Box-header--blue">
|
||||
<h3 class="Box-title">Box with blue header</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box danger theme
|
||||
|
||||
Use `Box--danger` to apply a red border to the outside of the box. This theme is helpful for communicating destructive actions.
|
||||
|
||||
**Note:** `Box-danger` only works with either `Box-row`'s or `Box-body`.
|
||||
|
||||
```html live
|
||||
<div class="Box Box--danger">
|
||||
<div class="Box-row">
|
||||
Row one
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
Row two
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
`Box-danger` is often paired with a red heading. See the [subhead](./subhead) docs for more information.
|
||||
|
||||
```html live
|
||||
<div>
|
||||
<div class="Subhead border-bottom-0">
|
||||
<h2 class="Subhead-heading Subhead-heading--danger">Danger zone</h2>
|
||||
</div>
|
||||
|
||||
<div class="Box Box--danger">
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Row themes
|
||||
|
||||
You can change the background color for individual rows, or change the color on hover or navigation focus.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row Box-row--gray">
|
||||
.Box-row--gray
|
||||
</div>
|
||||
<div class="Box-row Box-row--hover-gray">
|
||||
.Box-row--hover-gray
|
||||
</div>
|
||||
<div class="Box-row Box-row--yellow">
|
||||
.Box-row--yellow
|
||||
</div>
|
||||
<div class="Box-row Box-row--hover-blue">
|
||||
.Box-row--hover-blue
|
||||
</div>
|
||||
<div class="Box-row Box-row--blue">
|
||||
.Box-row--blue
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `Box-row--focus-gray` or `Box-row--focus-blue` when using along-side `navigation-focus` if you want to highlight rows when using keyboard commands.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row Box-row--focus-gray navigation-focus">
|
||||
.Box-row--focus-gray and .navigation-focus
|
||||
</div>
|
||||
<div class="Box-row Box-row--focus-gray">
|
||||
.Box-row--focus-gray
|
||||
</div>
|
||||
<div class="Box-row Box-row--focus-blue navigation-focus">
|
||||
.Box-row--focus-blue and .navigation-focus
|
||||
</div>
|
||||
<div class="Box-row Box-row--focus-blue">
|
||||
.Box-row--focus-blue
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Box row unread
|
||||
|
||||
Use `.Box-row--unread` to apply a blue vertical line highlight for indicating a row contains unread items.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row">
|
||||
Box row
|
||||
</div>
|
||||
<div class="Box-row Box-row--unread">
|
||||
Box row unread
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
Box row
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Box row link
|
||||
|
||||
Use .`Box-row-link` when you want a link to appear dark gray and blue on hover on desktop, and remain a blue link on mobile. This is useful to indicate links on mobile without having hover styles.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row">
|
||||
<a class="Box-row-link" href="#box-row-link">Box row link</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Dashed border
|
||||
|
||||
Use the `border-dashed` utility to apply a dashed border to a box.
|
||||
|
||||
```html live
|
||||
<div class="Box border-dashed p-2">
|
||||
A box with a dashed border
|
||||
</div>
|
||||
```
|
||||
|
||||
## Boxes with flash alerts
|
||||
|
||||
Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`.
|
||||
|
||||
Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](./alerts) for more information.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<div class="flash flash-full">
|
||||
<button class="flash-close js-flash-close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
|
||||
</button>
|
||||
<span>Flash message with close button.</span>
|
||||
</div>
|
||||
<div class="flash flash-full flash-success">
|
||||
<!-- <%= octicon("check") %> -->
|
||||
<svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||
<span>Flash success with an icon.</span>
|
||||
</div>
|
||||
<div class="flash flash-full flash-warn">
|
||||
<!-- <%= octicon("alert") %> -->
|
||||
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
|
||||
<span>Flash warning with an icon.</span>
|
||||
</div>
|
||||
<div class="flash flash-full flash-error">
|
||||
Flash error inside a Box.
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Boxes with icons
|
||||
|
||||
Use `Box-btn-octicon` with `btn-octicon` when you want the icon to maintain the same padding as other box elements. This selector offsets margin to ensure it lines up on the left and right sides of the box so you may need to add padding neighboring elements.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-body">
|
||||
<span class="pr-2">Box body</span>
|
||||
<button href="#" class="Box-btn-octicon btn-octicon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
It's common to want to float icons to the far left or right and stop the `Box-title`from wrapping underneath. To do this you'll need to create a media object with utilities. Add `clearfix` to the surrounding div (this could be the header, body, or rows), add `overflow-hidden` to the title (or other text element), and float the icons as desired.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header clearfix">
|
||||
<button href="#" class="Box-btn-octicon btn-octicon float-right">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
|
||||
</button>
|
||||
<h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row clearfix">
|
||||
<button href="#" class="Box-btn-octicon btn-octicon float-left">
|
||||
<!-- <%= octicon "check" %> -->
|
||||
<svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||
</button>
|
||||
<p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Box headers with counters
|
||||
|
||||
Use a counter with a background that works against the contrast of the box header. The default counter colors do not stand out well against the header background so we suggest using one of the following styles:
|
||||
|
||||
Use `Counter--gray` for a counter with a gray background and dark gray text.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
<span class="Counter Counter--gray">12</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `Counter--gray-dark` for a counter with a dark gray background and white text.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
<span class="Counter Counter--gray-dark">12</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Form elements and buttons in boxes
|
||||
|
||||
To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
|
||||
|
||||
Use [flexbox utilities](/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
|
||||
|
||||
```html live
|
||||
<div class="Box Box--condensed">
|
||||
<div class="Box-header d-flex flex-items-center">
|
||||
<h3 class="Box-title overflow-hidden flex-auto">
|
||||
Box title
|
||||
</h3>
|
||||
<button class="btn btn-primary btn-sm">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
A similar approach can be used for buttons with multiple lines of text within a row.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small color-fg-subtle">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||
</div>
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small color-fg-subtle">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||
</div>
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small color-fg-subtle">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" name="button">View</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Using flexbox along with form, button, and link styles, you can create more complex box headers for things like bulk actions and sorting.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header d-flex flex-items-center">
|
||||
<form class="flex-auto">
|
||||
<label>
|
||||
<input class="mr-1" type="checkbox" />
|
||||
Check it
|
||||
</label>
|
||||
</form>
|
||||
<button class="btn-link select-menu-button Link--muted">
|
||||
Select menu
|
||||
</button>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
Box body
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can put forms in boxes. Often form submission buttons are aligned to the bottom right of the form which you can do with `text-right` instead of using floats.
|
||||
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Example form title
|
||||
</h3>
|
||||
</div>
|
||||
<form>
|
||||
<div class="Box-body">
|
||||
<div class="form-group">
|
||||
<div class="form-group-header"><label>Example label</label></div>
|
||||
<div class="form-group-body"><input class="form-control" type="text"></div>
|
||||
</div>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked="checked" />
|
||||
Yes please
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Box-footer text-right">
|
||||
<button class="btn btn-secondary mr-1">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
When a box is all by itself centered on a page you can use [column widths](/utilities/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/utilities/typography) instead of the built in box title styles.
|
||||
|
||||
```html live
|
||||
<div class="Box Box--spacious col-6 mx-auto text-center">
|
||||
<form>
|
||||
<div class="Box-body">
|
||||
<h3 class="f1-light">
|
||||
Example form
|
||||
</h3>
|
||||
<div class="form-group mb-4">
|
||||
<div class="form-group-header"><label>Example label</label></div>
|
||||
<div class="form-group-body"><input class="form-control" type="text" /></div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-block">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
Box patterns can also be made with, and modified with [border utilities](/utilities/borders).
|
||||
@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Branch name
|
||||
path: components/branch-name
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/branch-name'
|
||||
bundle: branch-name
|
||||
---
|
||||
|
||||
Branch names can be a link name or not:
|
||||
|
||||
```html live
|
||||
<span class="branch-name">a_new_feature_branch</span>
|
||||
```
|
||||
|
||||
```html live
|
||||
<a href="#url" class="branch-name">a_new_feature_branch</a>
|
||||
```
|
||||
|
||||
You may also include an octicon before the branch name text:
|
||||
|
||||
```html live
|
||||
<span class="branch-name">
|
||||
<!-- <%= octicon("git-branch", width:16, height:16) %> -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="octicon octicon-git-branch"><path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>
|
||||
a_new_feature_branch
|
||||
</span>
|
||||
```
|
||||
@ -1,34 +0,0 @@
|
||||
---
|
||||
title: Breadcrumbs
|
||||
path: components/breadcrumb
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/breadcrumb'
|
||||
rails: 'https://primer.style/view-components/components/beta/breadcrumbs'
|
||||
bundle: breadcrumb
|
||||
---
|
||||
|
||||
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
|
||||
|
||||
- Are many levels deep on a site
|
||||
- Do not have a section-level navigation
|
||||
- May need the ability to quickly go back to the previous (parent) page
|
||||
|
||||
All items must contain links, and the last item must be selected.
|
||||
|
||||
#### Usage
|
||||
|
||||
```html live
|
||||
<nav aria-label="Breadcrumb">
|
||||
<ol>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="https://github.com/business">Business</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="https://github.com/business/customers">Customers</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item breadcrumb-item-selected">
|
||||
<a href="https://github.com/business/customers/mailchimp" aria-current="page">MailChimp</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
```
|
||||
@ -1,47 +0,0 @@
|
||||
---
|
||||
title: Button group
|
||||
path: components/button-group
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/buttons'
|
||||
rails: 'https://primer.style/view-components/components/beta/buttongroup'
|
||||
bundle: buttons
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup d-block mb-2">
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
|
||||
</div>
|
||||
|
||||
<div class="BtnGroup d-block mb-2 ml-0">
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup">
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup">
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<form class="BtnGroup-parent">
|
||||
<button class="btn BtnGroup-item" type="button">Button in a form</button>
|
||||
</form>
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
<button class="btn BtnGroup-item" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
@ -1,257 +0,0 @@
|
||||
---
|
||||
title: Buttons
|
||||
path: components/buttons
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/buttons'
|
||||
rails: 'https://primer.style/view-components/components/beta/button'
|
||||
bundle: buttons
|
||||
---
|
||||
|
||||
Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
|
||||
|
||||
```html live
|
||||
<button class="btn" type="button">Button</button>
|
||||
```
|
||||
|
||||
Note: When using a `<button>` element, **always specify a `type`**.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">Button button</button>
|
||||
```
|
||||
|
||||
## Button types
|
||||
|
||||
### Default
|
||||
|
||||
Use the standard — yet classy — `.btn` for form actions and general page actions. These are used extensively around the site.
|
||||
|
||||
```html live
|
||||
<button class="btn" type="button">Default</button>
|
||||
```
|
||||
|
||||
### Primary
|
||||
|
||||
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`.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-primary" type="button">Primary</button>
|
||||
```
|
||||
|
||||
### Outline
|
||||
|
||||
Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-outline" type="button">Outline</button>
|
||||
```
|
||||
|
||||
### Danger
|
||||
|
||||
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`.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-danger" type="button">Danger</button>
|
||||
```
|
||||
|
||||
## Button states
|
||||
|
||||
### Selected
|
||||
|
||||
Adding an `aria-selected="true"` attribute will keep the button in a selected state. Typically used for [`BtnGroups`](#button-groups).
|
||||
|
||||
```html live
|
||||
<div class="BtnGroup d-block mb-2">
|
||||
<button class="BtnGroup-item btn" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn" type="button" aria-selected="true">Button</button>
|
||||
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
|
||||
</div>
|
||||
|
||||
<div class="BtnGroup d-block mb-2 ml-0">
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button" aria-selected="true">Button</button>
|
||||
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-primary mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-outline mr-2" type="button" aria-disabled="true">Disabled</button>
|
||||
<button class="btn btn-danger" type="button" aria-disabled="true">Disabled</button>
|
||||
```
|
||||
|
||||
## Button variations
|
||||
|
||||
### Sizes
|
||||
|
||||
Next to the default size there is also a `.btn-sm` (small) and `.btn-large` option. Use them to decrease or increase the button size. This is useful for fitting a button next to an input or turning a button into a prominent call to action in hero sections.
|
||||
|
||||
[Type scale utilities](/support/typography#type-scale) 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.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-sm mr-2" type="button">Small</button>
|
||||
<button class="btn mr-2" type="button">Default</button>
|
||||
<button class="btn btn-large" type="button">Large</button>
|
||||
```
|
||||
|
||||
Use `.btn-large` with a type scale utility to transform the text to a bigger size.
|
||||
|
||||
```html live
|
||||
<div class="f3">
|
||||
<button class="btn btn-large btn-outline mr-2" type="button">Large button button</button>
|
||||
<a class="btn btn-large" href="#url" role="button">Large link button</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Block button
|
||||
|
||||
Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-block mb-2" type="button">Block button</button>
|
||||
<button class="btn btn-sm btn-block" type="button">Small block button</button>
|
||||
```
|
||||
|
||||
### Link button
|
||||
|
||||
Create a button that looks like a link with `.btn-link`. Rather than using an `<a>` to trigger JS, this style on a `<button>` should be used for better accessibility.
|
||||
|
||||
**The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.**
|
||||
|
||||
```html live
|
||||
<button class="btn-link" type="button">Link button</button>
|
||||
```
|
||||
|
||||
### Invisible button
|
||||
|
||||
When you want a link, but you want it padded and line heightened like a button best for "cancel" actions on forms.
|
||||
|
||||
```html live
|
||||
<button class="btn btn-invisible" type="button">Cancel</button>
|
||||
<button class="btn" type="button">Submit</button>
|
||||
```
|
||||
|
||||
### Hidden text button
|
||||
|
||||
Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
```html live
|
||||
<span class="hidden-text-expander">
|
||||
<button type="button" class="ellipsis-expander" aria-expanded="false">…</button>
|
||||
</span>
|
||||
```
|
||||
|
||||
You can also make the expander appear inline by adding `.inline`.
|
||||
|
||||
## Button with icons
|
||||
|
||||
Icons can be added to any button.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">
|
||||
<!-- <%= octicon "search" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary mr-2" type="button">
|
||||
<!-- <%= octicon "download" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"></path></svg>
|
||||
<span>Clone</span>
|
||||
<span class="dropdown-caret"></span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-danger mr-2" type="button">
|
||||
<!-- <%= octicon "trashcan" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline mr-2" type="button">
|
||||
<!-- <%= octicon "device-desktop" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>
|
||||
<span>Open in Desktop</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" type="button" aria-label="Pencil icon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
### Icon-only button
|
||||
|
||||
Icon-only buttons `.btn-octicon` turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
|
||||
|
||||
```html live
|
||||
<button class="btn-octicon" type="button" aria-label="Desktop icon">
|
||||
<!-- <%= octicon "device-desktop" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Pencil icon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon btn-octicon-danger" type="button" aria-label="Trashcan icon">
|
||||
<!-- <%= octicon "trashcan" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Kebab icon">
|
||||
<!-- <%= octicon "kebab-horizontal" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
### Close button
|
||||
|
||||
When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
|
||||
|
||||
```html live
|
||||
<button class="close-button" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
## Button with counts
|
||||
|
||||
You can easily append a count to a **small button**. Add the `.btn-with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
|
||||
|
||||
**Be sure to clear the float added by the additional class.**
|
||||
|
||||
```html live
|
||||
<div class="clearfix">
|
||||
<a class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<!-- <%= octicon "eye" %> -->
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
|
||||
<span>Watch</span>
|
||||
</a>
|
||||
<a class="social-count" href="#url">6</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also use the [counter](./labels#counters) component within buttons:
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">
|
||||
Button <span class="Counter">12</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary mr-2" type="button">
|
||||
Button <span class="Counter">12</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-danger mr-2" type="button">
|
||||
Button <span class="Counter">12</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline" type="button">
|
||||
Button <span class="Counter">12</span>
|
||||
</button>
|
||||
```
|
||||
@ -1,48 +0,0 @@
|
||||
---
|
||||
title: Counter
|
||||
path: components/counter
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/labels'
|
||||
rails: 'https://primer.style/view-components/components/beta/counter'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations:
|
||||
|
||||
1. the default `Counter`,
|
||||
2. the `Counter--primary` with a stronger background color
|
||||
3. and `Counter--secondary` with a more subtle text color.
|
||||
|
||||
Note: When a counter is empty, its visibility will be hidden.
|
||||
|
||||
```html live
|
||||
<span class="Counter mr-1">1</span>
|
||||
<span class="Counter mr-1 Counter--primary">23</span>
|
||||
<span class="Counter mr-1 Counter--secondary">456</span>
|
||||
```
|
||||
|
||||
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
|
||||
|
||||
```html live
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</span></a>
|
||||
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also have icons and emojis in counters. Or use utilities for counters with different background colors.
|
||||
|
||||
```html live
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<span class="Counter mr-1">
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 color-bg-success-emphasis color-fg-on-emphasis">22</span>
|
||||
<span class="Counter mr-1 color-bg-danger-emphasis color-fg-on-emphasis">22</span>
|
||||
<span class="Counter mr-1 color-bg-accent-emphasis color-fg-on-emphasis">22</span>
|
||||
```
|
||||
@ -1,58 +0,0 @@
|
||||
---
|
||||
title: Dialog
|
||||
path: components/dialog
|
||||
status: Alpha
|
||||
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/experiments/modal-dialog.scss'
|
||||
bundle: dialog
|
||||
---
|
||||
|
||||
Please note that the `<div>` element with `id="fake-container"` is not included in the component.
|
||||
|
||||
```html live
|
||||
<div id="fake-container" style="height: 400px;">
|
||||
<button class="btn"><span>Open dialog</span></button>
|
||||
<div
|
||||
id="overlay-backdrop"
|
||||
class="Overlay-backdrop Overlay-backdrop--center"
|
||||
role="dialog"
|
||||
aria-labelledby="title-id"
|
||||
aria-describedby="description-id"
|
||||
data-focus-trap="active"
|
||||
>
|
||||
<div
|
||||
class="Overlay Overlay--width-medium Overlay--height-medium Overlay--motion-scaleFade"
|
||||
data-focus-trap="active"
|
||||
open=""
|
||||
>
|
||||
<header class="Overlay-header">
|
||||
<div class="Overlay-headerContentWrap">
|
||||
<div class="Overlay-titleWrap">
|
||||
<h1 id="title-id" class="Overlay-title">This is the title of the dialog</h1>
|
||||
<h2 id="description-id" class="Overlay-description">This is the subtitle of the dialog</h2>
|
||||
</div>
|
||||
<div class="Overlay-actionWrap">
|
||||
<button class="Overlay-closeButton" aria-label="Close">
|
||||
<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="Overlay-body">
|
||||
This is the body of the dialogThis is the body of the dialogThis is the body of the dialog This is the body of
|
||||
the dialog This is the body of the dialog This is the body of the dialog This is the body of the dialog This is
|
||||
the body of the dialog This is the body of the dialog
|
||||
</div>
|
||||
<footer class="Overlay-footer Overlay-footer--divided Overlay-footer--alignEnd">
|
||||
<button class="btn"><span>Continue</span></button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
[aria attributes]: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
|
||||
@ -1,204 +0,0 @@
|
||||
---
|
||||
title: Dropdown
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/dropdown'
|
||||
rails: 'https://primer.style/view-components/components/alpha/dropdown'
|
||||
---
|
||||
|
||||
Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
|
||||
|
||||
## Basic examples
|
||||
|
||||
Dropdowns should be triggered by a `<button>`. **[Each dropdown menu requires a directional class](#alignment)**, much like our tooltips.
|
||||
|
||||
Using a GitHub button:
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
Using a button customized with additional utilities:
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="color-fg-muted p-2 d-inline" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
### Alignment
|
||||
|
||||
Align the direction of dropdown menus and their arrows with modifier classes.
|
||||
|
||||
```html live
|
||||
<div style="margin-top: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-ne
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-ne">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-e
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-e">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 100px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-se
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 100px" class="d-flex flex-justify-center">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-s
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-s">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 100px" class="d-flex flex-justify-end">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-sw
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-sw">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 100px" class="d-flex flex-justify-end">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
.dropdown-w
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-w">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dividers
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 170px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-se">
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li class="dropdown-divider" role="separator"></li>
|
||||
<li><a class="dropdown-item" href="#url">Another item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">One more</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Headers
|
||||
|
||||
```html live
|
||||
<div style="margin-bottom: 126px">
|
||||
<details class="dropdown details-reset details-overlay d-inline-block">
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-se">
|
||||
<div class="dropdown-header">
|
||||
Dropdown header
|
||||
</div>
|
||||
<ul>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
@ -1,31 +0,0 @@
|
||||
---
|
||||
title: Filter list
|
||||
path: components/filter-list
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/navigation'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
|
||||
|
||||
```html live title="filter-list"
|
||||
<ul class="filter-list">
|
||||
<li>
|
||||
<a class="filter-item" href="#url" aria-current="page">
|
||||
First filter
|
||||
<span class="count">21</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="filter-item" href="#url">
|
||||
Second filter
|
||||
<span class="count">3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="filter-item" href="#url">
|
||||
Third filter
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
@ -1,422 +0,0 @@
|
||||
---
|
||||
title: Forms
|
||||
path: components/forms
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/forms'
|
||||
bundle: forms
|
||||
---
|
||||
|
||||
Style individual form controls and utilize common layouts.
|
||||
|
||||
Overview:
|
||||
|
||||
- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.
|
||||
- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.
|
||||
- Always declare a `type` on your `<button>`s.
|
||||
- Form layouts rely on form groups.
|
||||
|
||||
## Kitchen sink
|
||||
|
||||
All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
|
||||
|
||||
```html live
|
||||
<p>
|
||||
<button class="btn" type="button">Button</button>
|
||||
<button class="btn" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
<span class="dropdown-caret"></span>
|
||||
</button>
|
||||
<input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description" />
|
||||
<input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA" />
|
||||
<select class="form-select" aria-label="Important decision">
|
||||
<option>Select</option>
|
||||
<option value="option 2">Option 2</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="btn btn-sm" type="button">Small button</button>
|
||||
<button class="btn btn-sm" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
<span class="dropdown-caret">
|
||||
</button>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description" />
|
||||
<select class="form-select select-sm" aria-label="Important decision">
|
||||
<option>Select</option>
|
||||
<option value="option 1">Option 1</option>
|
||||
</select>
|
||||
</p>
|
||||
```
|
||||
|
||||
## Example form
|
||||
|
||||
Form controls in Primer CSS currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<label for="name">Name</label>
|
||||
<input class="form-control" type="text" id="name" />
|
||||
|
||||
<label for="email">Email address</label>
|
||||
<input class="form-control" type="email" id="email" />
|
||||
|
||||
<label> <input type="checkbox" /> Remember me </label>
|
||||
|
||||
<label> <input type="radio" id="potato" name="radio-group-example" checked /> Potato </label>
|
||||
<label> <input type="radio" id="tomato" name="radio-group-example" /> Tomato </label>
|
||||
|
||||
<button class="btn" type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Inputs
|
||||
|
||||
### Sizing
|
||||
|
||||
Make inputs smaller, larger, or full-width with an additional class.
|
||||
|
||||
#### Small
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Small input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Large
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-lg" type="text" placeholder="Large input" aria-label="Large input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Block
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control input-block" type="text" placeholder="Full-width input" aria-label="Full-width input" />
|
||||
</form>
|
||||
```
|
||||
|
||||
### Input group
|
||||
|
||||
Attached an input and button to one another.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" placeholder="Username" aria-label="Username">
|
||||
<span class="input-group-button">
|
||||
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||
<!-- <%= octicon "clippy" %> -->
|
||||
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
### Form contrast
|
||||
|
||||
Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
|
||||
<input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
|
||||
</form>
|
||||
```
|
||||
|
||||
### Disabled state
|
||||
|
||||
Add the `disabled` attribute to make a `.form-control` appear disabled.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
|
||||
</form>
|
||||
```
|
||||
|
||||
### Hide WebKit's contact info autofill icon
|
||||
|
||||
WebKit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input
|
||||
class="form-control input-hide-webkit-autofill"
|
||||
placeholder="Hide Webkit's contact autofill on this input"
|
||||
type="text"
|
||||
aria-label="Hide Webkit's contact autofill on this input"
|
||||
/>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Selects
|
||||
|
||||
Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<select class="form-select" aria-label="Preference">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Small
|
||||
|
||||
Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).
|
||||
|
||||
```html live
|
||||
<select class="form-select select-sm" aria-label="Preference">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
|
||||
<button class="btn btn-sm ml-1"> Small button</button>
|
||||
```
|
||||
|
||||
## Form groups
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<div class="form-group-header">
|
||||
<label for="example-text">Example Text</label>
|
||||
</div>
|
||||
<div class="form-group-body">
|
||||
<input class="form-control" type="text" value="Example Value" id="example-text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group-header">
|
||||
<label for="example-select">Example Select</label>
|
||||
</div>
|
||||
<div class="form-group-body">
|
||||
<select class="form-select" id="example-select">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group-header">
|
||||
<label for="example-textarea">Example Textarea</label>
|
||||
</div>
|
||||
<div class="form-group-body">
|
||||
<textarea class="form-control" id="example-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Form group validation (deprecated)
|
||||
|
||||
<Note>
|
||||
These form validation styles are deprecated. Please use the <a href="https://primer.style/view-components/components/alpha/textfield#with-a-validation-message">TextField</a> ViewComponent instead or refer to the <a href="https://primer.style/design/ui-patterns/forms#validation">design guidelines</a>.
|
||||
</Note>
|
||||
|
||||
Convey success, errors and warnings for form groups. For github.com consider using the [`<auto-check>`](https://github.github.io/web-systems-documentation/#custom-elements-auto-check-md) element to perform server-side validation on an input.
|
||||
|
||||
### Success
|
||||
|
||||
If the input is **valid**, add the `.successed` class to the `<div class="form-group">` element. Next add/update a success message to the `.note` element, as well as the `.success` class.
|
||||
|
||||
```html live
|
||||
<form class="pb-6">
|
||||
<div class="form-group successed">
|
||||
<div class="form-group-header">
|
||||
<label for="username-input">Username</label>
|
||||
</div>
|
||||
<div class="form-group-body">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
value="monalisa"
|
||||
id="username-input"
|
||||
aria-describedby="username-input-validation"
|
||||
/>
|
||||
</div>
|
||||
<p class="note success" id="username-input-validation">monalisa is available</p>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Error
|
||||
|
||||
If the input is **not valid**, add the `.errored` class to the `<div class="form-group">` element. Next add/update an error message to the `.note` element, as well as the `.error` class.
|
||||
|
||||
```html live
|
||||
<form class="pb-6">
|
||||
<div class="form-group errored">
|
||||
<div class="form-group-header">
|
||||
<label for="username-input">Username</label>
|
||||
</div>
|
||||
<div class="form-group-body">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
value="monalisa"
|
||||
id="username-input"
|
||||
aria-describedby="username-input-validation"
|
||||
/>
|
||||
</div>
|
||||
<p class="note error" id="username-input-validation">monalisa is not available. monalisa-beep, monalisa-cyber, or monalisa87 are available.</p>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Warning
|
||||
|
||||
If the input should show a **warning**, add the `.warn` class to the `<div class="form-group">` element. Next add/update a warning message to the `.note` element, as well as the `.warning` class.
|
||||
|
||||
```html live
|
||||
<form class="pb-6">
|
||||
<div class="form-group warn">
|
||||
<div class="form-group-header">
|
||||
<label for="username-input">Username</label>
|
||||
</div>
|
||||
<div class="form-group-body">
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
value="monalisa-monalisa-monalisa-monalisa-"
|
||||
id="username-input"
|
||||
aria-describedby="username-input-validation"
|
||||
/>
|
||||
</div>
|
||||
<p class="note warning" id="username-input-validation">36 of maximum 39 characters entered.</p>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Form actions
|
||||
|
||||
Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.
|
||||
|
||||
```html live
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn">Cancel</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Checkboxes and radios
|
||||
|
||||
Utilities to control alignment and styling of checkbox and radio controls.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked="checked" aria-describedby="help-text-for-checkbox" />
|
||||
Available for hire
|
||||
</label>
|
||||
<p class="note" id="help-text-for-checkbox">
|
||||
This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
You may also add emphasis to the label:
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked="checked" />
|
||||
<em class="highlight">Available for hire</em>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Toggle content visibility based on a checkbox or radio button state
|
||||
|
||||
Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="form-checkbox">
|
||||
<label>
|
||||
<input type="radio" name="hireme" />
|
||||
Not available for hire
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-checkbox">
|
||||
<label aria-live="polite">
|
||||
<input type="radio" class="form-checkbox-details-trigger" name="hireme" />
|
||||
Available for hire
|
||||
<span class="form-checkbox-details text-normal">
|
||||
<span class="d-block mb-1">Available hours per week</span>
|
||||
<input type="text" name="" class="form-control input-contrast" size="3" />
|
||||
<span class="text-small color-fg-muted pl-2">hours per week</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Radio group
|
||||
|
||||
Radio groups are tab like controls. Their blue border gives extra emphasis to what is selected.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="radio-group">
|
||||
<input class="radio-input" id="option-a" type="radio" name="options">
|
||||
<label class="radio-label" for="option-a">Option A</label>
|
||||
<input class="radio-input" id="option-b" type="radio" name="options">
|
||||
<label class="radio-label" for="option-b">Option B</label>
|
||||
<input class="radio-input" id="option-c" type="radio" name="options">
|
||||
<label class="radio-label" for="option-c">Option C</label>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
Adding `octicon` icons is also supported. To disable an option, use the `disabled` attribute.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<div class="radio-group">
|
||||
<input class="radio-input" id="option-a" type="radio" name="options">
|
||||
<label class="radio-label" for="option-a">
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
|
||||
Option A
|
||||
</label>
|
||||
<input class="radio-input" id="option-b" type="radio" name="options">
|
||||
<label class="radio-label" for="option-b">
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
|
||||
Option B
|
||||
</label>
|
||||
<input class="radio-input" id="option-c" type="radio" name="options" disabled>
|
||||
<label class="radio-label" for="option-c">
|
||||
<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
|
||||
Option C
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
@ -1,104 +0,0 @@
|
||||
---
|
||||
title: Header
|
||||
path: components/header
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/header'
|
||||
bundle: header
|
||||
---
|
||||
|
||||
Use the Header component to create a header that has all of its items aligned vertically with consistent horizontal spacing.
|
||||
|
||||
## Header
|
||||
|
||||
The `.Header` class is the wrapping class that aligns all the items properly and gives the header its dark background. Each direct child of the `.Header` component is expected to be a `.Header-item` component. The component utilizes flexbox CSS to align all these items properly and applies spacing scale margin.
|
||||
|
||||
```html live
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="Header-item">
|
||||
<input type="search" class="form-control Header-input" />
|
||||
</div>
|
||||
<div class="Header-item Header-item--full">
|
||||
Menu
|
||||
</div>
|
||||
<div class="Header-item mr-0">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://github.com/octocat.png" width="20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
## Header-item
|
||||
|
||||
All items directly under the `.Header` component should be a `.Header-item` component. Inside these components can be anything (text, forms, images...), and the `.Header-item` component will make sure these elements vertically align with each other.
|
||||
|
||||
`.Header-item` elements have a built-in margin that will need to be overridden with the `mr-0` utility class for the last element in the container. We relied on the utility classes here instead of `:last-child` because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints.
|
||||
|
||||
```html live
|
||||
<div class="Header">
|
||||
<!-- Text item -->
|
||||
<div class="Header-item">
|
||||
Text item
|
||||
</div>
|
||||
|
||||
<!-- Form item -->
|
||||
<div class="Header-item">
|
||||
<input class="form-control Header-input" type="text"/>
|
||||
</div>
|
||||
|
||||
<!-- Image item -->
|
||||
<div class="Header-item">
|
||||
<img class="avatar" height="20" alt="@octocat" src="https://github.com/octocat.png" width="20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Header-item--full
|
||||
|
||||
The `.Header-item` element has a modifier class, `.Header-item--full`, that stretches it to fill the available space and push any remaining items to the right.
|
||||
|
||||
```html live
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
Item 1
|
||||
</div>
|
||||
|
||||
<!-- Full item stretches across -->
|
||||
<div class="Header-item Header-item--full border">
|
||||
Item 2
|
||||
</div>
|
||||
|
||||
<div class="Header-item mr-0 ">
|
||||
Item 3
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
## Header-link
|
||||
|
||||
Add the `.Header-link` class to any anchor tags in the header to give them consistent styling and hover opacity. This class makes the links white, bold and 70% fade on hover.
|
||||
|
||||
```html live
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link">About</a>
|
||||
</div>
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link">Releases</a>
|
||||
</div>
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link">Team</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,9 +0,0 @@
|
||||
---
|
||||
title: Components
|
||||
path: components/index
|
||||
---
|
||||
|
||||
Components make it easier to mark up a set of elements that are commonly grouped together with similar visual styles. Their base styles are shared and variants are added with modifier classes, so usually components are comprised of multiple classes. Most importantly, components should be highly reusable across the site, rather than built for specific pages or features. To achieve this:
|
||||
|
||||
* **Separate structure and skin:** This means to define repeating visual features (like background and border styles) as separate “skins” that you can mix-and-match with your various components to achieve a large amount of visual variety without much code.
|
||||
* **Separate container and content:** Essentially, this means “rarely use location-dependent styles”. A component should look the same no matter where you put it.
|
||||
@ -1,101 +0,0 @@
|
||||
---
|
||||
title: Labels
|
||||
path: components/labels
|
||||
status_issue: 'https://github.com/github/design-systems/issues/332'
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/labels'
|
||||
rails: 'https://primer.style/view-components/components/beta/label'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
Labels add metadata or indicate status of items and navigational elements.
|
||||
|
||||
## Labels
|
||||
|
||||
The base label component styles the text, adds padding and rounded corners, and a border. Labels come in various themes which apply different colors.
|
||||
|
||||
GitHub also programmatically generates and applies a background color for labels on items such as issues and pull requests. Users are able to select any background color and the text color will adjust to work with light and dark background colors.
|
||||
|
||||
The base `Label` style does not apply a background color and only uses the default border:
|
||||
|
||||
```html live
|
||||
<span class="Label">design</span>
|
||||
```
|
||||
|
||||
### Label contrast
|
||||
|
||||
Use `Label--primary` to create a label with a stronger border. This label is also neutral in color, however, since its border is stronger it can stand out more compared to the default `Label`.
|
||||
|
||||
Use `Label--secondary` to create a label with a subtler text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
|
||||
|
||||
```html live
|
||||
<span class="Label">Default</span>
|
||||
<span class="Label Label--primary ml-1">Primary</span>
|
||||
<span class="Label Label--secondary ml-1">Secondary</span>
|
||||
```
|
||||
|
||||
### Colored labels
|
||||
|
||||
Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.
|
||||
|
||||
- `Label--accent`
|
||||
- `Label--success`
|
||||
- `Label--attention`
|
||||
- `Label--severe`
|
||||
- `Label--danger`
|
||||
- `Label--open`
|
||||
- `Label--closed`
|
||||
- `Label--done`
|
||||
- `Label--sponsors`
|
||||
|
||||
```html live
|
||||
<span class="Label mr-1 Label--accent">Accent</span>
|
||||
<span class="Label mr-1 Label--success">Success</span>
|
||||
<span class="Label mr-1 Label--attention">Attention</span>
|
||||
<span class="Label mr-1 Label--severe">Severe</span>
|
||||
<span class="Label mr-1 Label--danger">Danger</span>
|
||||
<span class="Label mr-1 Label--open">Open</span>
|
||||
<span class="Label mr-1 Label--closed">Closed</span>
|
||||
<span class="Label mr-1 Label--done">Done</span>
|
||||
<span class="Label mr-1 Label--sponsors">Sponsors</span>
|
||||
```
|
||||
|
||||
### Label sizes
|
||||
|
||||
If space allows, add the `Label--large` modifier to add a bit more padding to labels.
|
||||
|
||||
```html live
|
||||
<span class="Label Label--gray-darker mr-1">Default</span>
|
||||
<span class="Label Label--large Label--gray-darker mr-1">Large</span>
|
||||
```
|
||||
|
||||
### Inline labels
|
||||
|
||||
Sometimes when adding a label the line-height can be increased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.
|
||||
|
||||
```html live
|
||||
<p class="col-4">
|
||||
Lorem Ipsum is simply <span class="Label Label--inline">dummy text</span> of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text.
|
||||
</p>
|
||||
```
|
||||
|
||||
## Issue labels
|
||||
|
||||
Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
|
||||
|
||||
```html live
|
||||
<span class="IssueLabel color-bg-accent-emphasis color-fg-on-emphasis mr-1">Primer</span>
|
||||
<span class="IssueLabel color-bg-danger-emphasis color-fg-on-emphasis mr-1">bug 🐛</span>
|
||||
<span class="IssueLabel color-bg-success-emphasis color-fg-on-emphasis mr-1">help wanted</span>
|
||||
<span class="IssueLabel color-bg-attention-emphasis color-fg-on-emphasis mr-1">🚂 deploy: train</span>
|
||||
```
|
||||
|
||||
If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
|
||||
|
||||
```html live
|
||||
<span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-1">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big color-bg-danger-emphasis color-fg-on-emphasis mr-1">bug 🐛</span>
|
||||
<span class="IssueLabel IssueLabel--big color-bg-success-emphasis color-fg-on-emphasis mr-1">help wanted</span>
|
||||
<span class="IssueLabel IssueLabel--big color-bg-attention-emphasis color-fg-on-emphasis mr-1">🚂 deploy: train</span>
|
||||
```
|
||||
@ -1,267 +0,0 @@
|
||||
---
|
||||
title: Layout
|
||||
path: components/layout
|
||||
status: Alpha
|
||||
source: 'https://github.com/primer/css/tree/main/src/layout/layout.scss'
|
||||
rails: 'https://primer.style/view-components/components/alpha/layout'
|
||||
bundle: layout
|
||||
---
|
||||
|
||||
|
||||
Build responsive-friendly page layouts with 2 columns.
|
||||
|
||||
Use with .container-xx classes to limit the overall layout structure size.
|
||||
|
||||
## Elements
|
||||
|
||||
- `Layout-main`
|
||||
- `Layout-sidebar`
|
||||
- `Layout-divider`
|
||||
- `Layout-main-centered-md`
|
||||
- `Layout-main-centered-lg`
|
||||
- `Layout-main-centered-xl`
|
||||
|
||||
Use `Layout-main-centered-xx` to wrap `container-xx` elements inside
|
||||
`Layout-main` so the content remains centered on the screen regardless
|
||||
of the sidebar position.
|
||||
|
||||
## Default
|
||||
|
||||
```html live
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">
|
||||
.Layout-main
|
||||
</div>
|
||||
|
||||
<div class="Layout-sidebar border">
|
||||
.Layout-sidebar
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Dividers
|
||||
|
||||
Use `Layout--divided` in conjunction with a `Layout-divider` to show a divider between the main content and the sidebar.
|
||||
Flowing as row:
|
||||
- default: shows a `1px` line between main and sidebar
|
||||
- `Layout-divider--flowRow-shallow`: shows a filled `8px` divider.
|
||||
- `Layout-divider--flowRow-hidden`: hides the divider
|
||||
|
||||
|
||||
```html live
|
||||
<div class="Layout Layout--divided">
|
||||
<div class="Layout-main border">main content</div>
|
||||
<div class="Layout-divider"></div>
|
||||
<div class="Layout-sidebar border">divider shown</div>
|
||||
</div>
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">main content</div>
|
||||
<div class="Layout-divider"></div>
|
||||
<div class="Layout-sidebar border">divider hidden</div>
|
||||
</div>
|
||||
<div class="Layout Layout--divided">
|
||||
<div class="Layout-main border">main content</div>
|
||||
<div class="Layout-divider Layout-divider--flowRow-shallow"></div>
|
||||
<div class="Layout-sidebar border">flowRow shallow divider</div>
|
||||
</div>
|
||||
<div class="Layout Layout--divided">
|
||||
<div class="Layout-main border">main content</div>
|
||||
<div class="Layout-divider Layout-divider--flowRow-hidden"></div>
|
||||
<div class="Layout-sidebar border">flowRow hidden divider</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Centered content
|
||||
|
||||
```html live
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">
|
||||
<div class="Layout-main-centered-md">
|
||||
<div class="container-md border color-border-accent">
|
||||
centered md
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">
|
||||
<div class="Layout-main-centered-lg">
|
||||
<div class="container-lg border color-border-accent">
|
||||
centered lg
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">
|
||||
<div class="Layout-main-centered-xl">
|
||||
<div class="container-xl border color-border-accent">
|
||||
centered xl
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Modifiers
|
||||
|
||||
### Sidebar sizing
|
||||
|
||||
- Default: [md: 256px, lg: 296px]
|
||||
- `Layout--sidebar-narrow` [md: 240px, lg: 256px]
|
||||
- `Layout--sidebar-wide` [md: 296px, lg: 320px, xl: 344px]
|
||||
|
||||
```html live
|
||||
<div class="Layout Layout--sidebar-narrow">
|
||||
<div class="Layout-main border">
|
||||
Layout--sidebar-narrow
|
||||
</div>
|
||||
|
||||
<div class="Layout-sidebar border">
|
||||
sidebar
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout Layout--sidebar-wide">
|
||||
<div class="Layout-main border">
|
||||
Layout--sidebar-wide
|
||||
</div>
|
||||
|
||||
<div class="Layout-sidebar border">
|
||||
sidebar
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Column gutter
|
||||
|
||||
- Default: [md: 16px, lg: 24px]
|
||||
- `Layout--gutter-none`: 0px
|
||||
- `Layout--gutter-condensed` 16px
|
||||
- `Layout--gutter-spacious` [md: 16px, lg: 32px, xl: 40px]
|
||||
|
||||
```html live
|
||||
<div class="Layout Layout--gutter-none">
|
||||
<div class="Layout-main border">
|
||||
Layout--gutter-none
|
||||
</div>
|
||||
|
||||
<div class="Layout-sidebar border">
|
||||
sidebar
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout Layout--gutter-condensed">
|
||||
<div class="Layout-main border">
|
||||
Layout--gutter-condensed
|
||||
</div>
|
||||
|
||||
<div class="Layout-sidebar border">
|
||||
sidebar
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">
|
||||
Default
|
||||
</div>
|
||||
|
||||
<div class="Layout-sidebar border">
|
||||
sidebar
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout Layout--gutter-spacious">
|
||||
<div class="Layout-main border">
|
||||
Layout--gutter-spacious
|
||||
</div>
|
||||
|
||||
<div class="Layout-sidebar border">
|
||||
sidebar
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sidebar positioning
|
||||
|
||||
- `Layout--sidebarPosition-start` (default): sidebar to the left
|
||||
- `Layout--sidebarPosition-end`: sidebar to the right
|
||||
|
||||
```html live
|
||||
<div class="Layout Layout--sidebarPosition-start">
|
||||
<div class="Layout-main border">main</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
<div class="Layout Layout--sidebarPosition-end">
|
||||
<div class="Layout-main border">main</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sidebar positioning as rows
|
||||
|
||||
- `Layout--sidebarPosition-flowRow-start` (default): when stacked, render the sidebar first
|
||||
- `Layout--sidebarPosition-flowRow-end`: when stacked, render the sidebar last
|
||||
- `Layout--sidebarPosition-flowRow-none`: when stacked, hide the sidebar
|
||||
|
||||
```html live
|
||||
<div class="Layout Layout--sidebarPosition-flowRow-start">
|
||||
<div class="Layout-main border">main</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
<div class="Layout Layout--sidebarPosition-flowRow-end">
|
||||
<div class="Layout-main border">main</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
<div class="Layout Layout--sidebarPosition-flowRow-none">
|
||||
<div class="Layout-main border">main</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Layout stacking
|
||||
|
||||
- Default: stacks when container is `sm`.
|
||||
- `Layout--flowRow-until-md`: stacks when container is `md`.
|
||||
- `Layout--flowRow-until-lg`: stacks when container is `lg`.
|
||||
|
||||
```html live
|
||||
<div class="Layout Layout--flowRow-until-md">
|
||||
<div class="Layout-main border">main</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
<div class="Layout Layout--flowRow-until-lg">
|
||||
<div class="Layout-main border">main</div>
|
||||
<div class="Layout-sidebar border">sidebar</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Nesting Layouts
|
||||
|
||||
It is possible to nest `Layout` components to generate 3-column layouts.
|
||||
|
||||
```html live
|
||||
<div class="Layout">
|
||||
<div class="Layout-main ">
|
||||
<div class="Layout Layout--sidebarPosition-end Layout--sidebar-narrow">
|
||||
<div class="Layout-main border">main content</div>
|
||||
<div class="Layout-sidebar border">metadata sidebar</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout-sidebar border">default sidebar</div>
|
||||
</div>
|
||||
<div class="Layout">
|
||||
<div class="Layout-main ">
|
||||
<div class="Layout Layout--sidebarPosition-end Layout--flowRow-until-lg Layout--sidebar-narrow">
|
||||
<div class="Layout-main border">main content</div>
|
||||
<div class="Layout-sidebar border">metadata sidebar</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Layout-sidebar border">default sidebar</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Accessibility and keyboard navigation
|
||||
|
||||
Keyboard navigation follows the markup order. Decide carefully how the
|
||||
focus order should be be by deciding whether `Layout-main` or `Layout-sidebar`
|
||||
comes first in code. The code order won’t affect the visual position.
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
title: Links
|
||||
path: components/links
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/links'
|
||||
rails: 'https://primer.style/view-components/components/beta/link'
|
||||
bundle: links
|
||||
---
|
||||
|
||||
By default `<a>` elements already use the right link color and apply an underline on hover. So in most cases the `.Link` class is not really needed.
|
||||
|
||||
```html live
|
||||
Some text with a <a href="#url">link</a>
|
||||
Some text with a <a href="#url" class="Link">link</a>
|
||||
```
|
||||
|
||||
If you like to override the default link styles you can do so with the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
|
||||
|
||||
## Primary link
|
||||
|
||||
Use `.Link--primary` to turn the link color to blue only on hover.
|
||||
|
||||
```html live
|
||||
<p class="color-fg-muted">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
|
||||
```
|
||||
|
||||
## Secondary link
|
||||
|
||||
Use `.Link--secondary` for a more subtle link color that turns blue on hover.
|
||||
|
||||
```html live
|
||||
Some text with a <a class="Link--secondary" href="#url">Link--secondary</a>
|
||||
```
|
||||
|
||||
## Muted link
|
||||
|
||||
Use `.Link--muted` also removes the underline on hover. Tip: You can also use the `.no-underline` utility to do the same for `.Link--primary`.
|
||||
|
||||
```html live
|
||||
<p>Some text with a <a class="Link--secondary no-underline" href="#url">Link--muted</a></p>
|
||||
<p>Some text with a <a class="Link--primary no-underline" href="#url">Link--primary no-underline</a></p>
|
||||
```
|
||||
|
||||
## On hover link
|
||||
|
||||
Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
|
||||
|
||||
```html live
|
||||
<a class="color-fg-muted no-underline" href="#url">
|
||||
A link with a partial <span class="Link--onHover">Link--onHover</span>
|
||||
</a>
|
||||
```
|
||||
|
||||
## Nested link
|
||||
|
||||
The `.Link` class can be nested inside an `<a>` element if only part of it should be styled like a link.
|
||||
|
||||
```html live
|
||||
<a class="color-fg-default no-underline" href="#url">
|
||||
A nested <span class="Link">Link</span>
|
||||
</a>
|
||||
```
|
||||
|
||||
## Link and color utilities
|
||||
|
||||
Link classes in combination with [color utilities](../utilities/colors) lets you colorize information separately inside of a link but have all of the link turn into one color on hover.
|
||||
|
||||
```html live
|
||||
<a class="Link--primary text-bold" href="#url">
|
||||
<svg class="octicon octicon-flame color-fg-danger" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
|
||||
Hot
|
||||
<span class="color-fg-muted">potato</span>
|
||||
</a>
|
||||
```
|
||||
@ -1,26 +0,0 @@
|
||||
---
|
||||
title: Loaders
|
||||
path: components/loaders
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/loaders'
|
||||
bundle: loaders
|
||||
---
|
||||
|
||||
Loaders inform users that an action is still in progress and might take a while to complete.
|
||||
|
||||
## Animated ellipsis
|
||||
|
||||
Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
|
||||
|
||||
```html live
|
||||
<span>Loading</span><span class="AnimatedEllipsis"></span>
|
||||
```
|
||||
|
||||
It can also be used in combination with other components.
|
||||
|
||||
```html live
|
||||
<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
|
||||
<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
|
||||
<span class="Label mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
|
||||
<button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button>
|
||||
```
|
||||
@ -1,493 +0,0 @@
|
||||
---
|
||||
title: Markdown
|
||||
path: components/markdown
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/markdown'
|
||||
bundle: markdown
|
||||
---
|
||||
|
||||
|
||||
```html live
|
||||
<div class="markdown-body">
|
||||
<p>Text can be <b>bold</b>, <i>italic</i>, or <s>strikethrough</s>. <a href="https://github.com">Links </a> should be blue with no underlines (unless hovered over).</p>
|
||||
|
||||
<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>
|
||||
|
||||
<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>There should be no margin above this first sentence.</p>
|
||||
<p>Blockquotes should be a lighter gray with a gray border along the left side.</p>
|
||||
<p>There should be no margin below this final sentence.</p>
|
||||
</blockquote>
|
||||
|
||||
<h1>Header 1</h1>
|
||||
|
||||
<p>This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.</p>
|
||||
|
||||
<h2>Header 2</h2>
|
||||
|
||||
<blockquote>This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.</blockquote>
|
||||
|
||||
<h3>Header 3</h3>
|
||||
|
||||
<pre><code>This is a code block following a header.</code></pre>
|
||||
|
||||
<h4>Header 4</h4>
|
||||
|
||||
<ul>
|
||||
<li>This is an unordered list following a header.</li>
|
||||
<li>This is an unordered list following a header.</li>
|
||||
<li>This is an unordered list following a header.</li>
|
||||
</ul>
|
||||
|
||||
<h5>Header 5</h5>
|
||||
|
||||
<ol>
|
||||
<li>This is an ordered list following a header.</li>
|
||||
<li>This is an ordered list following a header.</li>
|
||||
<li>This is an ordered list following a header.</li>
|
||||
</ol>
|
||||
|
||||
<h6>Header 6</h6>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>What</th>
|
||||
<th>Follows</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A table</td>
|
||||
<td>A header</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A table</td>
|
||||
<td>A header</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A table</td>
|
||||
<td>A header</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>There's a horizontal rule above and below this.</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>Here is an unordered list:</p>
|
||||
|
||||
<ul>
|
||||
<li>Salt-n-Pepa</li>
|
||||
<li>Bel Biv DeVoe</li>
|
||||
<li>Kid 'N Play</li>
|
||||
</ul>
|
||||
|
||||
<p>And an ordered list:</p>
|
||||
|
||||
<ol>
|
||||
<li>Michael Jackson</li>
|
||||
<li>Michael Bolton</li>
|
||||
<li>Michael Bublé</li>
|
||||
</ol>
|
||||
|
||||
<p>And an unordered task list:</p>
|
||||
|
||||
<ul>
|
||||
<li><input type="checkbox" checked> Create a sample markdown document</li>
|
||||
<li><input type="checkbox"> Add task lists to it</li>
|
||||
<li><input type="checkbox"> Take a vacation</li>
|
||||
</ul>
|
||||
|
||||
<p>And a "mixed" task list:</p>
|
||||
|
||||
<ul>
|
||||
<li><input type="checkbox"> Steal underpants</li>
|
||||
<li>?</li>
|
||||
<li><input type="checkbox"> Profit!</li>
|
||||
</ul>
|
||||
|
||||
And a nested list:
|
||||
|
||||
<ul>
|
||||
<li>Jackson 5
|
||||
<ul>
|
||||
<li>Michael</li>
|
||||
<li>Tito</li>
|
||||
<li>Jackie</li>
|
||||
<li>Marlon</li>
|
||||
<li>Jermaine</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>TMNT
|
||||
<ul>
|
||||
<li>Leonardo</li>
|
||||
<li>Michelangelo</li>
|
||||
<li>Donatello</li>
|
||||
<li>Raphael</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Definition lists can be used with HTML syntax. Definition terms are bold and italic.</p>
|
||||
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>Tables should have bold headings and alternating shaded rows.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>David Bowie</td>
|
||||
<td>Scary Monsters</td>
|
||||
<td>1980</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prince</td>
|
||||
<td>Purple Rain</td>
|
||||
<td>1982</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beastie Boys</td>
|
||||
<td>License to Ill</td>
|
||||
<td>1986</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Janet Jackson</td>
|
||||
<td>Rhythm Nation 1814</td>
|
||||
<td>1989</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Year</th>
|
||||
<th>Label</th>
|
||||
<th>Songs</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>David Bowie</td>
|
||||
<td>Scary Monsters</td>
|
||||
<td>1980</td>
|
||||
<td>RCA Records</td>
|
||||
<td>It's No Game (No. 1), Up the Hill Backwards, Scary Monsters (And Super Creeps), Ashes to Ashes, Fashion, Teenage Wildlife, Scream Like a Baby, Kingdom Come, Because You're Young, It's No Game (No. 2)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prince</td>
|
||||
<td>Purple Rain</td>
|
||||
<td>1982</td>
|
||||
<td>Warner Brothers Records</td>
|
||||
<td>Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beastie Boys</td>
|
||||
<td>License to Ill</td>
|
||||
<td>1986</td>
|
||||
<td>Def Jam</td>
|
||||
<td>Rhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, Fight for Your Right, No Sleep till Brooklyn, Paul Revere, "Hold It Now, Hit It", Brass Monkey, Slow and Low, Time to Get Ill</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Janet Jackson</td>
|
||||
<td>Rhythm Nation 1814</td>
|
||||
<td>1989</td>
|
||||
<td>A&M</td>
|
||||
<td>Interlude: Pledge, Rhythm Nation, Interlude: T.V., State of the World, Interlude: Race, The Knowledge, Interlude: Let's Dance, Miss You Much, Interlude: Come Back, Love Will Never Do (Without You), Livin' in a World (They Didn't Make), Alright, Interlude: Hey Baby, Escapade, Interlude: No Acid, Black Cat, Lonely, Come Back to Me, Someday Is Tonight, Interlude: Livin'...In Complete Darkness</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>Code snippets like <code>var foo = "bar";</code> can be shown inline.</p>
|
||||
|
||||
<p>Also, <code>this should vertically align</code> <s><code>with this</code></s> <s>and this</s>.</p>
|
||||
|
||||
<p>Code can also be shown in a block element.</p>
|
||||
|
||||
<pre><code>var foo = "bar";</code></pre>
|
||||
|
||||
<p>Code can also use syntax highlighting.</p>
|
||||
|
||||
<pre><code class="prism-code language-javascript">var foo = "bar";</code></pre>
|
||||
|
||||
<pre><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
|
||||
|
||||
<pre><code class="prism-code language-javascript">var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";</code></pre>
|
||||
|
||||
<p>Inline code inside table cells should still be distinguishable.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Language</th>
|
||||
<th>Code</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>JavasScript</td>
|
||||
<td><code>var foo = "bar";</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ruby</td>
|
||||
<td><code>foo = "bar"</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>The <code>samp</code> HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Here an example of an error message: <samp>File not found</samp></p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>Small images should be shown at their actual size.</p>
|
||||
|
||||
<p><img src="http://placekitten.com/g/300/200/"></p>
|
||||
|
||||
<p>Large images should always scale down and fit in the content container.</p>
|
||||
|
||||
<p><img src="http://placekitten.com/g/1200/800/"></p>
|
||||
|
||||
<p>
|
||||
Here's a simple footnote,<sup><a href="#user-content-fn-1-12345" id="user-content-fnref-1-12345" data-footnote-ref="" aria-describedby="footnote-label">1</a></sup> and here's a longer one.<sup><a href="#user-content-fn-bignote-12345" id="user-content-fnref-bignote-12345" data-footnote-ref="" aria-describedby="footnote-label">2</a></sup>
|
||||
</p>
|
||||
|
||||
<section data-footnotes="" class="footnotes">
|
||||
<h2 id="footnote-label" class="sr-only">Footnotes</h2>
|
||||
<ol>
|
||||
<li id="user-content-fn-1-12345">
|
||||
<p>This is the first footnote. <a href="#user-content-fnref-1-12345" data-footnote-backref="" class="data-footnote-backref" aria-label="Back to content"><g-emoji class="g-emoji" alias="leftwards_arrow_with_hook" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/21a9.png">↩</g-emoji></a></p>
|
||||
</li>
|
||||
<li id="user-content-fn-bignote-12345">
|
||||
<p>Here's one with multiple paragraphs and code.</p>
|
||||
<p>Indent paragraphs to include them in the footnote.</p>
|
||||
<p><code>{ my code }</code></p>
|
||||
<p>Add as many paragraphs as you like. <a href="#user-content-fnref-bignote-12345" data-footnote-backref="" class="data-footnote-backref" aria-label="Back to content"><g-emoji class="g-emoji" alias="leftwards_arrow_with_hook" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/21a9.png">↩</g-emoji></a></p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
<!-- Source MD (update when making changes to the HTML) -->
|
||||
|
||||
<!--
|
||||
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).
|
||||
|
||||
There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.
|
||||
|
||||
There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.
|
||||
|
||||
> There should be no margin above this first sentence.
|
||||
>
|
||||
> Blockquotes should be a lighter gray with a gray border along the left side.
|
||||
>
|
||||
> There should be no margin below this final sentence.
|
||||
|
||||
# Header 1
|
||||
|
||||
This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.
|
||||
|
||||
## Header 2
|
||||
|
||||
> This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.
|
||||
|
||||
### Header 3
|
||||
|
||||
```
|
||||
This is a code block following a header.
|
||||
```
|
||||
|
||||
#### Header 4
|
||||
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
* This is an unordered list following a header.
|
||||
|
||||
##### Header 5
|
||||
|
||||
1. This is an ordered list following a header.
|
||||
2. This is an ordered list following a header.
|
||||
3. This is an ordered list following a header.
|
||||
|
||||
###### Header 6
|
||||
|
||||
| What | Follows |
|
||||
|-----------|-----------------|
|
||||
| A table | A header |
|
||||
| A table | A header |
|
||||
| A table | A header |
|
||||
|
||||
----------------
|
||||
|
||||
There's a horizontal rule above and below this.
|
||||
|
||||
----------------
|
||||
|
||||
Here is an unordered list:
|
||||
|
||||
* Salt-n-Pepa
|
||||
* Bel Biv DeVoe
|
||||
* Kid 'N Play
|
||||
|
||||
And an ordered list:
|
||||
|
||||
1. Michael Jackson
|
||||
2. Michael Bolton
|
||||
3. Michael Bublé
|
||||
|
||||
And an unordered task list:
|
||||
|
||||
- [x] Create a sample markdown document
|
||||
- [x] Add task lists to it
|
||||
- [ ] Take a vacation
|
||||
|
||||
And a "mixed" task list:
|
||||
|
||||
- [ ] Steal underpants
|
||||
- ?
|
||||
- [ ] Profit!
|
||||
|
||||
And a nested list:
|
||||
|
||||
* Jackson 5
|
||||
* Michael
|
||||
* Tito
|
||||
* Jackie
|
||||
* Marlon
|
||||
* Jermaine
|
||||
* TMNT
|
||||
* Leonardo
|
||||
* Michelangelo
|
||||
* Donatello
|
||||
* Raphael
|
||||
|
||||
Definition lists can be used with HTML syntax. Definition terms are bold and italic.
|
||||
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Godzilla</dd>
|
||||
<dt>Born</dt>
|
||||
<dd>1952</dd>
|
||||
<dt>Birthplace</dt>
|
||||
<dd>Japan</dd>
|
||||
<dt>Color</dt>
|
||||
<dd>Green</dd>
|
||||
</dl>
|
||||
|
||||
----------------
|
||||
|
||||
Tables should have bold headings and alternating shaded rows.
|
||||
|
||||
| Artist | Album | Year |
|
||||
|-------------------|-----------------|------|
|
||||
| Michael Jackson | Thriller | 1982 |
|
||||
| Prince | Purple Rain | 1984 |
|
||||
| Beastie Boys | License to Ill | 1986 |
|
||||
|
||||
If a table is too wide, it should condense down and/or scroll horizontally.
|
||||
|
||||
| Artist | Album | Year | Label | Awards | Songs |
|
||||
|-------------------|-----------------|------|-------------|----------|-----------|
|
||||
| Michael Jackson | Thriller | 1982 | Epic Records | Grammy Award for Album of the Year, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Selling Album, Grammy Award for Best Engineered Album, Non-Classical | Wanna Be Startin' Somethin', Baby Be Mine, The Girl Is Mine, Thriller, Beat It, Billie Jean, Human Nature, P.Y.T. (Pretty Young Thing), The Lady in My Life |
|
||||
| Prince | Purple Rain | 1984 | Warner Brothers Records | Grammy Award for Best Score Soundtrack for Visual Media, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Soundtrack/Cast Recording, Grammy Award for Best Rock Performance by a Duo or Group with Vocal | Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain |
|
||||
| Beastie Boys | License to Ill | 1986 | Mercury Records | noawardsbutthistablecelliswide | Rhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, (You Gotta) Fight for Your Right, No Sleep Till Brooklyn, Paul Revere, Hold It Now, Hit It, Brass Monkey, Slow and Low, Time to Get Ill |
|
||||
|
||||
----------------
|
||||
|
||||
Code snippets like `var foo = "bar";` can be shown inline.
|
||||
|
||||
Also, `this should vertically align` ~~`with this`~~ ~~and this~~.
|
||||
|
||||
Code can also be shown in a block element.
|
||||
```
|
||||
var foo = "bar";
|
||||
```
|
||||
|
||||
Code can also use syntax highlighting.
|
||||
```javascript
|
||||
var foo = "bar";
|
||||
```
|
||||
|
||||
```
|
||||
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
|
||||
```
|
||||
|
||||
```javascript
|
||||
var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";
|
||||
```
|
||||
|
||||
Inline code inside table cells should still be distinguishable.
|
||||
|
||||
| Language | Code |
|
||||
|-------------|--------------------|
|
||||
| JavaScript | `var foo = "bar";` |
|
||||
| Ruby | `foo = "bar"` |
|
||||
|
||||
----------------
|
||||
|
||||
The `<samp>` HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Here an example of an error message: <samp>File not found</samp>
|
||||
|
||||
----------------
|
||||
|
||||
Small images should be shown at their actual size.
|
||||
|
||||
|
||||
|
||||
Large images should always scale down and fit in the content container.
|
||||
|
||||
|
||||
|
||||
Here's a simple footnote,[^1] and here's a longer one.[^bignote]
|
||||
|
||||
[^1]: This is the first footnote.
|
||||
|
||||
[^bignote]: Here's one with multiple paragraphs and code.
|
||||
|
||||
Indent paragraphs to include them in the footnote.
|
||||
|
||||
`{ my code }`
|
||||
|
||||
Add as many paragraphs as you like.
|
||||
|
||||
```
|
||||
This is the final element on the page and there should be no margin below this.
|
||||
```
|
||||
|
||||
-->
|
||||
@ -1,83 +0,0 @@
|
||||
---
|
||||
title: Marketing buttons
|
||||
path: components/marketing-buttons
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/marketing/buttons'
|
||||
bundle: marketing-buttons
|
||||
---
|
||||
|
||||
Marketing buttons come in a few different colors and sizes that can be produced by combining the base class `btn-mktg` with a set of modifier classes.
|
||||
|
||||
## Button types
|
||||
|
||||
Marketing buttons can be solid (default), outlined (`muted`), borderless (`subtle`), or green (`signup`, only used for signing up).
|
||||
|
||||
```html live
|
||||
<button class="btn-mktg mr-3" type="button">Get started</button>
|
||||
<button class="btn-mktg btn-muted-mktg mr-3" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-subtle-mktg mr-3" type="button">Contact us</button>
|
||||
<button class="btn-mktg btn-signup-mktg" type="button">Sign up</button>
|
||||
```
|
||||
|
||||
## Sizes
|
||||
|
||||
Marketing buttons can be set to three different sizes:
|
||||
|
||||
- Small: `btn-small-mktg`
|
||||
- Medium (default)
|
||||
- Large: `btn-large-mktg`
|
||||
|
||||
```html live
|
||||
<button class="btn-mktg btn-small-mktg mr-3" type="button">Get started</button>
|
||||
<button class="btn-mktg btn-muted-mktg btn-small-mktg mr-3" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-subtle-mktg btn-small-mktg mr-3" type="button">Contact us</button>
|
||||
<button class="btn-mktg btn-signup-mktg btn-small-mktg" type="button">Sign up</button>
|
||||
<hr>
|
||||
<button class="btn-mktg mr-3" type="button">Get started</button>
|
||||
<button class="btn-mktg btn-muted-mktg mr-3" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-subtle-mktg mr-3" type="button">Contact us</button>
|
||||
<button class="btn-mktg btn-signup-mktg" type="button">Sign up</button>
|
||||
<hr>
|
||||
<button class="btn-mktg btn-large-mktg mr-3" type="button">Get started</button>
|
||||
<button class="btn-mktg btn-muted-mktg btn-large-mktg mr-3" type="button">Learn more</button>
|
||||
<button class="btn-mktg btn-subtle-mktg btn-large-mktg mr-3" type="button">Contact us</button>
|
||||
<button class="btn-mktg btn-signup-mktg btn-large-mktg" type="button">Sign up</button>
|
||||
```
|
||||
|
||||
## Animated arrow symbol
|
||||
|
||||
Marketing buttons can include an animated arrow symbol, by adding a class `arrow-target-mktg` and including the SVG symbol:
|
||||
|
||||
```html live
|
||||
<button class="btn-mktg arrow-target-mktg mr-3" type="button">
|
||||
Get started
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-mktg arrow-target-mktg btn-muted-mktg mr-3" type="button">
|
||||
Learn more
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-mktg arrow-target-mktg btn-subtle-mktg mr-3" type="button">
|
||||
Contact us
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-mktg arrow-target-mktg btn-signup-mktg" type="button">
|
||||
Sign up
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
```
|
||||
@ -1,76 +0,0 @@
|
||||
---
|
||||
title: Marketing links
|
||||
path: components/marketing-links
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/marketing/links'
|
||||
bundle: marketing-links
|
||||
---
|
||||
|
||||
Marketing links can be produced by combining the base class `link-mktg` with a set of modifier classes to control the size and color.
|
||||
|
||||
|
||||
## Link sizes
|
||||
|
||||
The marketing link size is defined with utility classes and come in large (`.f3-mktg`) and small (`.f4-mktg`):
|
||||
|
||||
```html live
|
||||
<a href="#" class="link-mktg arrow-target-mktg text-semibold f3-mktg">
|
||||
Call to action
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
```
|
||||
|
||||
```html live
|
||||
<a href="#" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
|
||||
Call to action
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
```
|
||||
|
||||
## Link with emphasis
|
||||
|
||||
Add class `link-emphasis-mktg` to the link, to give it a pale underline, that will fill up on hover.
|
||||
|
||||
```html live
|
||||
<a href="#" class="link-mktg arrow-target-mktg link-emphasis-mktg text-semibold f3-mktg">
|
||||
Call to action
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
```
|
||||
|
||||
|
||||
## Link colors
|
||||
|
||||
The link color is controlled with the [Primer color classes](/utilities/colors), while the symbol and underline styling will follow:
|
||||
|
||||
```html live
|
||||
<a href="#" class="link-mktg arrow-target-mktg text-semibold f3-mktg color-fg-default mr-4">
|
||||
Call to action
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="link-mktg arrow-target-mktg link-emphasis-mktg text-semibold f4-mktg color-fg-default">
|
||||
Call to action
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
|
||||
<path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</a>
|
||||
```
|
||||
@ -1,86 +0,0 @@
|
||||
---
|
||||
title: Menu
|
||||
path: components/menu
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/navigation'
|
||||
rails: 'https://primer.style/view-components/components/alpha/menu'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
The menu is a vertical list of navigational links. **A menu's width and placement must be set by you.** If you like, just use our grid columns as a parent. Otherwise, apply a custom `width`.
|
||||
|
||||
```html live title="Menu"
|
||||
<nav class="menu" aria-label="Person settings">
|
||||
<a class="menu-item" href="#url" aria-current="page">Account</a>
|
||||
<a class="menu-item" href="#url">Profile</a>
|
||||
<a class="menu-item" href="#url">Emails</a>
|
||||
<a class="menu-item" href="#url">Notifications</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
There are a few subcomponents and add-ons that work well with the menu, including avatars, counters, and Octicons.
|
||||
|
||||
```html live
|
||||
<nav class="menu" aria-label="Person settings">
|
||||
<a class="menu-item" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "tools" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-tools" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
|
||||
/>
|
||||
</svg>
|
||||
Account
|
||||
</a>
|
||||
<a class="menu-item" href="#url">
|
||||
<!-- <%= octicon "person" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-person" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"
|
||||
/>
|
||||
</svg>
|
||||
Profile
|
||||
</a>
|
||||
<a class="menu-item" href="#url">
|
||||
<!-- <%= octicon "mail" %>-->
|
||||
<svg version="1.1" width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-mail" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"
|
||||
/>
|
||||
</svg>
|
||||
Emails
|
||||
</a>
|
||||
<a class="menu-item" href="#url">
|
||||
<!-- <%= octicon "radio-tower" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-radio-tower"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.79 6.11c.25-.25.25-.67 0-.92-.32-.33-.48-.76-.48-1.19 0-.43.16-.86.48-1.19.25-.26.25-.67 0-.92a.613.613 0 0 0-.45-.19c-.16 0-.33.06-.45.19-.57.58-.85 1.35-.85 2.11 0 .76.29 1.53.85 2.11.25.25.66.25.9 0zM2.33.52a.651.651 0 0 0-.92 0C.48 1.48.01 2.74.01 3.99c0 1.26.47 2.52 1.4 3.48.25.26.66.26.91 0s.25-.68 0-.94c-.68-.7-1.02-1.62-1.02-2.54 0-.92.34-1.84 1.02-2.54a.66.66 0 0 0 .01-.93zm5.69 5.1A1.62 1.62 0 1 0 6.4 4c-.01.89.72 1.62 1.62 1.62zM14.59.53a.628.628 0 0 0-.91 0c-.25.26-.25.68 0 .94.68.7 1.02 1.62 1.02 2.54 0 .92-.34 1.83-1.02 2.54-.25.26-.25.68 0 .94a.651.651 0 0 0 .92 0c.93-.96 1.4-2.22 1.4-3.48A5.048 5.048 0 0 0 14.59.53zM8.02 6.92c-.41 0-.83-.1-1.2-.3l-3.15 8.37h1.49l.86-1h4l.84 1h1.49L9.21 6.62c-.38.2-.78.3-1.19.3zm-.01.48L9.02 11h-2l.99-3.6zm-1.99 5.59l1-1h2l1 1h-4zm5.19-11.1c-.25.25-.25.67 0 .92.32.33.48.76.48 1.19 0 .43-.16.86-.48 1.19-.25.26-.25.67 0 .92a.63.63 0 0 0 .9 0c.57-.58.85-1.35.85-2.11 0-.76-.28-1.53-.85-2.11a.634.634 0 0 0-.9 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="Counter">3</span>
|
||||
Notifications
|
||||
</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
You can also add optional headings to a menu. Feel free to use nearly any semantic element with the `.menu-heading` class, including inline elements, headings, and more.
|
||||
|
||||
```html live title="Menu with heading"
|
||||
<nav class="menu" aria-labelledby="menu-heading">
|
||||
<span class="menu-heading" id="menu-heading">Menu heading</span>
|
||||
<a class="menu-item" href="#url" aria-current="page">Account</a>
|
||||
<a class="menu-item" href="#url">Profile</a>
|
||||
<a class="menu-item" href="#url">Emails</a>
|
||||
<a class="menu-item" href="#url">Notifications</a>
|
||||
</nav>
|
||||
```
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
title: Navigation
|
||||
path: components/navigation
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/navigation'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
Primer CSS comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
|
||||
|
||||
- [Menu](./menu)
|
||||
- [Underline nav](./underline-nav)
|
||||
- [Side nav](./side-nav)
|
||||
- [Tabnav](./tabnav)
|
||||
- [Filter list](./filter-list)
|
||||
- [Sub navigation](./subnav)
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
title: Pagination
|
||||
path: components/pagination
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/pagination'
|
||||
bundle: pagination
|
||||
---
|
||||
|
||||
Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
|
||||
|
||||
## Previous/next pagination
|
||||
|
||||
You can make a very simple pagination container with just the Previous and Next buttons. Add the `aria-disabled="true"` attribute to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
|
||||
|
||||
```html live
|
||||
<nav class="paginate-container" aria-label="Pagination">
|
||||
<div class="pagination">
|
||||
<span class="previous_page" aria-disabled="true">Previous</span>
|
||||
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## Numbered pagination
|
||||
|
||||
For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.
|
||||
|
||||
To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the `aria-disabled="true"` attribute to the Previous button if you're on the first page. Apply the `aria-current="page"` attribute to the current numbered page.
|
||||
|
||||
As always, make sure to include the appropriate `aria` attributes to make the element accessible.
|
||||
|
||||
- Add `aria-label="Pagination"` to the `paginate-container` element.
|
||||
- Add `aria-label="Page X"` to each anchor link.
|
||||
|
||||
```html live
|
||||
<nav class="paginate-container" aria-label="Pagination">
|
||||
<div class="pagination">
|
||||
<span class="previous_page" aria-disabled="true">Previous</span>
|
||||
<em aria-current="page">1</em>
|
||||
<a href="#url" aria-label="Page 2">2</a>
|
||||
<a href="#url" aria-label="Page 3">3</a>
|
||||
<span class="gap">…</span>
|
||||
<a href="#url" aria-label="Page 8">8</a>
|
||||
<a href="#url" aria-label="Page 9">9</a>
|
||||
<a href="#url" aria-label="Page 10">10</a>
|
||||
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
@ -1,241 +0,0 @@
|
||||
---
|
||||
title: Popover
|
||||
path: components/popover
|
||||
status: Alpha
|
||||
source: 'https://github.com/primer/css/tree/main/src/popover'
|
||||
storybook: 'https://primer.style/css/storybook/?path=/story/components-popover--playground'
|
||||
rails: 'https://primer.style/view-components/components/beta/popover'
|
||||
bundle: popover
|
||||
---
|
||||
|
||||
|
||||
Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
|
||||
|
||||
| Class | Description |
|
||||
| :- | :- |
|
||||
| `Popover` | Block element, position absolute |
|
||||
| `Popover-message` | Child element, content and caret |
|
||||
|
||||
In the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.
|
||||
|
||||
The `Popover-message` element also supports several modifiers. By default, the caret is shown on the top edge of the message, horizontally centered. To change the caret's position, use one of the following modifiers.
|
||||
|
||||
### Variants
|
||||
|
||||
| Class | Description |
|
||||
| :- | :- |
|
||||
| `Popover-message--bottom` | Caret bottom |
|
||||
| `Popover-message--right` | Caret right |
|
||||
| `Popover-message--left` | Caret left |
|
||||
| `Popover-message--bottom-left` | Caret bottom left |
|
||||
| `Popover-message--bottom-right` | Caret bottom right |
|
||||
| `Popover-message--left-bottom` | Caret left bottom |
|
||||
| `Popover-message--left-top` | Caret left top |
|
||||
| `Popover-message--right-bottom` | Caret right bottom |
|
||||
| `Popover-message--right-top` | Caret right top |
|
||||
| `Popover-message--top-left` | Caret top left |
|
||||
| `Popover-message--top-right` | Caret top right |
|
||||
| `Popover-message--large` | Larger width on screens wider than 544px |
|
||||
|
||||
### Notes
|
||||
|
||||
The samples below include optional markup, like:
|
||||
- An outermost container that establishes stacking context (e.g. `position-relative`).
|
||||
- A choice piece of user interface (a button, in this case) to relate the popover to.
|
||||
- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested "Got it!" button.
|
||||
|
||||
For screen sizes smaller than 767px, `Popover` will appear full-width and without a caret.
|
||||
|
||||
## Basic example
|
||||
Defaults to caret oriented top-center.
|
||||
|
||||
```html live title="Default (top-center)"
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<div class="Popover-message text-left p-4 mt-2 mx-auto Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Large example
|
||||
|
||||
```html live title="Large"
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Bottom
|
||||
|
||||
```html live title="Bottom"
|
||||
<div class="position-relative text-center">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Bottom-right
|
||||
|
||||
```html live title="Bottom-right"
|
||||
<div class="position-relative text-right pr-2">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Bottom-left
|
||||
|
||||
```html live title="Bottom-left"
|
||||
<div class="Popover position-relative pl-2">
|
||||
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Left
|
||||
|
||||
```html live title="Left"
|
||||
<div class="d-flex flex-justify-center flex-items-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Left-bottom
|
||||
|
||||
```html live title="Left-bottom"
|
||||
<div class="d-flex flex-justify-center flex-items-end">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left-bottom p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Left-top
|
||||
|
||||
```html live title="Left-top"
|
||||
<div class="d-flex flex-justify-center flex-items-start">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--left-top p-4 ml-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Right
|
||||
|
||||
```html live title="Right"
|
||||
<div class="d-flex flex-justify-center flex-items-center">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Right-bottom
|
||||
|
||||
```html live title="Right-bottom"
|
||||
<div class="d-flex flex-justify-center flex-items-end">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right-bottom p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Right-top
|
||||
|
||||
```html live title="Right-top"
|
||||
<div class="d-flex flex-justify-center flex-items-start">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--right-top p-4 mr-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Top-left
|
||||
|
||||
```html live title="Top-left"
|
||||
<div class="position-relative pl-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Top-right
|
||||
|
||||
```html live title="Top-right"
|
||||
<div class="position-relative text-right pr-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 position-relative">
|
||||
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box color-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
title: Progress
|
||||
path: components/progress
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/progress'
|
||||
rails: 'https://primer.style/view-components/components/beta/progressbar'
|
||||
bundle: progress
|
||||
---
|
||||
|
||||
Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children (`Progress-item`) should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
|
||||
|
||||
```html live
|
||||
<span class="Progress">
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Large progress
|
||||
|
||||
Large progress bars are slightly taller than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--large">
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Small progress
|
||||
|
||||
Small progress bars are shorter than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--small">
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Inline progress
|
||||
|
||||
For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:
|
||||
|
||||
```html live
|
||||
<span class="text-small color-fg-muted mr-2">4 of 16</span>
|
||||
<span class="Progress d-inline-flex" style="width: 160px">
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 25%"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
In cases where it's not possible to describe the progress in text, provide an `aria-label` attribute that does so:
|
||||
|
||||
```html live
|
||||
<div aria-label="tasks: 8 of 10 complete">
|
||||
<span class="Progress">
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 80%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Progress with multiple values
|
||||
|
||||
To show the progress of tasks in multiple states (such as "done", "in progress", and "open"), add the `Progress-item` class and a distinct background color utility. Then give each one a percentage width proportional to the total number. Children are stacked from left to right, so if your widths add up to 100%, your bars will too. Note that items with very low percentage values might not be visible if they are smaller than `1px` in width.
|
||||
|
||||
```html live
|
||||
<div class="tooltipped tooltipped-n" aria-label="tasks: 80 done, 14 in progress, 6 open">
|
||||
<span class="Progress">
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-attention-emphasis" style="width: 25%;"></span>
|
||||
<span class="Progress-item color-bg-danger-emphasis" style="width: 15%;"></span>
|
||||
<span class="Progress-item color-bg-accent-emphasis" style="width: 10%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
@ -1,880 +0,0 @@
|
||||
---
|
||||
title: Select menu (deprecated)
|
||||
path: components/select-menu
|
||||
status: Deprecated
|
||||
source: 'https://github.com/github/github/blob/main/app/assets/stylesheets/components/select-menu.scss'
|
||||
symbols: [active, close-button, css-truncate-target, description, description-inline, description-warning, disabled, filterable-empty, has-error, hidden-select-button-text, icon-only, indeterminate, is-loading, is-showing-new-item-form, label-select-menu, last-visible, menu-active, modal-backdrop, navigation-focus, octicon, octicon-check, octicon-dash, octicon-octoface, octicon-x, opaque, primary, select-menu, select-menu-action, select-menu-blankslate, select-menu-button, select-menu-button-gravatar, select-menu-button-large, select-menu-clear-item, select-menu-divider, select-menu-error, select-menu-filters, select-menu-header, select-menu-item, select-menu-item-gravatar, select-menu-item-heading, select-menu-item-icon, select-menu-item-parent, select-menu-item-template, select-menu-item-text, select-menu-list, select-menu-loading-overlay, select-menu-modal, select-menu-modal-holder, select-menu-modal-narrow, select-menu-modal-right, select-menu-new-item-form, select-menu-no-results, select-menu-tab, select-menu-tab-bucket, select-menu-tab-nav, select-menu-tabs, select-menu-text-filter, select-menu-title, selected, spinner]
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note that the `.select-menu` component is **deprecated**. Use the [`.SelectMenu`](select-menu) instead.
|
||||
</Note>
|
||||
|
||||
## Migration guide
|
||||
|
||||
Here are a few tips on how to migrate an existing `.select-menu` to `.SelectMenu`.
|
||||
|
||||
1. Use a `<details>` element to toggle the Select Menu.
|
||||
2. Use a [`<details-menu>`](https://github.com/github/details-menu-element) element to add JS behaviour. The older `.js-select-menu` is not compatible.
|
||||
3. In case custom styling is needed, use [utility classes](https://primer.style/css/utilities) if possible.
|
||||
|
||||
Below is a comparison between class names:
|
||||
|
||||
`.select-menu` | `.SelectMenu`
|
||||
--- | ---
|
||||
`select-menu` | -
|
||||
`select-menu-button` | -
|
||||
`select-menu-modal-holder` | -
|
||||
`select-menu-modal` | `SelectMenu`
|
||||
`select-menu-modal-right` | `SelectMenu right-0`
|
||||
- | `SelectMenu-modal`
|
||||
`select-menu-loading-overlay` | `SelectMenu-loading`
|
||||
`select-menu-item-icon` | `SelectMenu-icon`
|
||||
`select-menu-header` | `SelectMenu-header`
|
||||
`select-menu-title` | `SelectMenu-title`
|
||||
`close-button` | `SelectMenu-closeButton`
|
||||
`select-menu-filters` | -
|
||||
`select-menu-text-filter` | `SelectMenu-filter`
|
||||
- | `SelectMenu-input`
|
||||
`select-menu-tabs` | `SelectMenu-tabs`
|
||||
`select-menu-tab` | `SelectMenu-tab`
|
||||
`select-menu-tab-nav` | -
|
||||
`select-menu-list` | `SelectMenu-list`
|
||||
`select-menu-item` | `SelectMenu-item`
|
||||
`select-menu-item-text` | -
|
||||
`select-menu-no-results` | `SelectMenu-message`
|
||||
`select-menu-blankslate` | `SelectMenu-blankslate`
|
||||
`selected` | `aria-checked="true"`
|
||||
|
||||
|
||||
---
|
||||
|
||||
The select menu provides advanced support for navigation, filtering, and more. Any popover within a select menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
|
||||
|
||||
{:toc}
|
||||
|
||||
## Basic example
|
||||
|
||||
Select menus should be trigged by a `<button>`. In the markup below, all classes prefixed with `select-menu` and `.js-` are required.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Choose an item
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Menu contents
|
||||
|
||||
The contents of a select menu are easily customized with support for headers, footers, tabbed lists, and live filtering.
|
||||
|
||||
### Headers
|
||||
|
||||
Add a header to any select menu's popover to house a clear title and a dismiss button.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Choose an item
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### List items
|
||||
|
||||
The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). [List items are also customizable](#menu-list-items) with options for avatars, additional icons, and multiple lines of text.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Choose an item
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<button type="button" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||
</button>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item" href="#url">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Filter
|
||||
|
||||
Enable live filtering of list items within a `.select-menu-list` with a search input. Only a handful of changes to your menu's markup are required:
|
||||
|
||||
- Add the text input, housed in `.select-menu-filters`, before the `.select-menu-list`.
|
||||
- Add two attributes, `data-filterable-for` and `data-filterable-type`, to the `.select-menu-list` to scope the filter to the list.
|
||||
|
||||
There are no required changes for the `.select-menu-item`s.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<i>Label:</i>
|
||||
<span class="js-select-button">Choose an item</span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder js-menu-content js-navigation-container">
|
||||
<div class="select-menu-modal">
|
||||
<div class="select-menu-header" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="js-select-menu-deferred-content">
|
||||
<div class="select-menu-filters">
|
||||
<div class="select-menu-text-filter">
|
||||
<input type="text" id="example-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter this list" aria-label="Type to filter" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="select-menu-list" data-filterable-for="example-filter-field" data-filterable-type="substring">
|
||||
<input hidden="checkbox" name="example" value="">
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Test element
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Filter to this
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
More content
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Something else
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
One more thing
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Tabs
|
||||
|
||||
Sometimes you need two or more lists of items in your select menu, e.g. branches and tags. Select menu lists can be tabbed with the addition of the tab toggles at the top of the menu and a few changes to the `.select-menu-list`.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<i>Label:</i>
|
||||
<span class="js-select-button">Choose an item</span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder js-menu-content js-navigation-container">
|
||||
<div class="select-menu-modal">
|
||||
<div class="select-menu-header" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="js-select-menu-deferred-content">
|
||||
<div class="select-menu-filters">
|
||||
<div class="select-menu-tabs">
|
||||
<ul>
|
||||
<li class="select-menu-tab">
|
||||
<a href="#url" data-tab-filter="branches" data-filter-placeholder="Filter for " class="js-select-menu-tab" aria-current="false">Branches</a>
|
||||
</li>
|
||||
<li class="select-menu-tab">
|
||||
<a href="#url" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab selected" aria-current="true">Tags</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket selected" data-filterable-for="example-filter-field" data-filterable-type="substring" data-tab-filter="branches" role="menu">
|
||||
<input hidden="checkbox" name="example" value="">
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 1
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 2
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 3
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 4
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 5
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-filterable-for="example-filter-field" data-filterable-type="substring" data-tab-filter="tags" role="menu">
|
||||
<input hidden="checkbox" name="example" value="">
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 1
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 2
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 3
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 4
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 5
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Filter and tabs
|
||||
|
||||
Show a filter and tabs in a single select menu.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<i>Label:</i>
|
||||
<span class="js-select-button">Choose an item</span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder js-menu-content js-navigation-container">
|
||||
<div class="select-menu-modal">
|
||||
<div class="select-menu-header" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="js-select-menu-deferred-content">
|
||||
<div class="select-menu-filters">
|
||||
<div class="select-menu-text-filter">
|
||||
<input type="text" id="example-filter-field-2" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter labels" aria-label="Type or choose a label" autocomplete="off">
|
||||
</div>
|
||||
<div class="select-menu-tabs">
|
||||
<ul>
|
||||
<li class="select-menu-tab">
|
||||
<a href="#url" data-tab-filter="branches" data-filter-placeholder="Filter for " class="js-select-menu-tab" aria-current="false">Branches</a>
|
||||
</li>
|
||||
<li class="select-menu-tab">
|
||||
<a href="#url" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab selected" aria-current="true">Tags</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket selected" data-filterable-for="example-filter-field" data-filterable-type="substring" data-tab-filter="branches" role="menu">
|
||||
<input hidden="checkbox" name="example" value="">
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 1
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 2
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 3
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 4
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Branch 5
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-filterable-for="example-filter-field" data-filterable-type="substring" data-tab-filter="tags" role="menu">
|
||||
<input hidden="checkbox" name="example" value="">
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 1
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 2
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 3
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 4
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text js-select-button-text">
|
||||
Tag 5
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Blankslate
|
||||
|
||||
Sometimes a select menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.select-menu-list` with the `.select-menu-blankslate` and customize its contents as needed.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Choose an item
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<div class="select-menu-blankslate">
|
||||
<%= octicon("check", :height => 32) %>
|
||||
<h3>Select menu blankslate</h3>
|
||||
<p>Some text here to describe why you're seeing a blankslate and how to go about fixing that up.</p>
|
||||
<button type="button" class="btn btn-sm btn-primary mt-3 mb-3">Deal with it</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Menu list items
|
||||
|
||||
Select menu list items have a few options available to them for more complex information patterns.
|
||||
|
||||
### Multi-line text
|
||||
|
||||
Sometimes the contents of your select menu list require a heading and a description instead of just a string. Select menus come with some default styles for such situations with the addition of a few classes and wrapping `<span>`s.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<i>Multi line:</i>
|
||||
<span class="js-select-button">Choose an item</span>
|
||||
</button>
|
||||
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal subscription-menu-modal js-menu-content" aria-hidden="false">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Notifications</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container js-active-navigation-container" role="menu">
|
||||
<a href="#url" class="select-menu-item js-navigation-item selected" role="menuitem">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text">
|
||||
<span class="select-menu-item-heading">Not watching</span>
|
||||
<span class="description">Be notified when participating or @mentioned.</span>
|
||||
<span class="js-select-button-text hidden-select-button-text">
|
||||
Watch
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item" role="menuitem">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text">
|
||||
<span class="select-menu-item-heading">Watching</span>
|
||||
<span class="description">Be notified of all conversations.</span>
|
||||
<span class="js-select-button-text hidden-select-button-text">
|
||||
Stop watching
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item" role="menuitem">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<div class="select-menu-item-text">
|
||||
<span class="select-menu-item-heading">Ignoring</span>
|
||||
<span class="description">Never be notified.</span>
|
||||
<span class="js-select-button-text hidden-select-button-text">
|
||||
Stop ignoring
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### With avatars
|
||||
|
||||
Add avatars to a select menu to help indicate when a menu list item represents a user.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Choose an item
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-gravatar">
|
||||
<%= avatar_for(current_user, 20, :alt => "") %>
|
||||
</span>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
probot
|
||||
</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-gravatar">
|
||||
<%= avatar_for(current_user, 20, :alt => "") %>
|
||||
</span>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
probot
|
||||
</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-gravatar">
|
||||
<%= avatar_for(current_user, 20, :alt => "") %>
|
||||
</span>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
probot
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### With dismiss icon
|
||||
|
||||
Indicate how to toggle the selected state on a select menu list item with the addition of a dismiss icon.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Choose an item
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<button type="button" class="select-menu-item selected js-navigation-item width-full">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
<%= octicon("x", :"aria-label" => "Click to remove") %>
|
||||
Item 1
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" class="select-menu-item js-navigation-item width-full">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
<%= octicon("x", :"aria-label" => "Click to remove") %>
|
||||
Item 2
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" class="select-menu-item js-navigation-item width-full">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
<%= octicon("x", :"aria-label" => "Click to remove") %>
|
||||
Item 3
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Menu alignment
|
||||
|
||||
By default select menus are automatically aligned to the top left corner of an element, but you can also customize that with a few utilities or custom display.
|
||||
|
||||
### Right aligned menus
|
||||
|
||||
When select menus are right aligned, you can also right-align the select menu's popover with `.select-menu-modal-right`.
|
||||
|
||||
```erb
|
||||
<div class="select-menu float-right select-menu-modal-right js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Choose an item
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Button options
|
||||
|
||||
Customize the select menu's trigger button by changing the button modifier class, enabling stateful text, and more.
|
||||
|
||||
### Style options
|
||||
|
||||
Since select menus are powered by JavaScript behaviors, the specific display of your select menu button is up to you and your use case.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Default button
|
||||
</button>
|
||||
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn btn-primary select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Primary button
|
||||
</button>
|
||||
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn btn-outline select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Outline button
|
||||
</button>
|
||||
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn-link select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
Link button
|
||||
</button>
|
||||
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 1</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 2</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">Item 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Stateful text
|
||||
|
||||
Select menu buttons have the option of showing the current selection in the button itself. Wrap the string you intend to update with a `.js-select-button` and the select menu JavaScript will automatically update the contents of that element with the selected item's text.
|
||||
|
||||
Open the select menu below and click different options to see it in action.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="js-select-button">main</span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">main</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">feature-branch</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">refactor-component-name</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Emphasized text
|
||||
|
||||
You may want to include an emphasized label in the select menu. For example, you may want to include the word `Branch:` in front of the current branch on a repository **Code** page. To do this, within the button, wrap the string in an `<i>` element.
|
||||
|
||||
As shown below, emphasized text works well with the stateful text functionality mentioned above.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<i>Branch:</i>
|
||||
<span class="js-select-button">main</span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">main</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">feature-branch</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-text js-select-button-text">refactor-component-name</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Button avatars
|
||||
|
||||
Add an avatar to the button, like, for example, in the context switcher in the signed in dashboard.
|
||||
|
||||
```erb
|
||||
<div class="select-menu js-menu-container js-select-menu">
|
||||
<button class="btn select-menu-button js-menu-target" type="button" aria-haspopup="true" aria-expanded="false">
|
||||
<div class="select-menu-button-gravatar js-select-button-gravatar">
|
||||
<%= avatar_for(current_user, 20, :"aria-label" => "") %>
|
||||
</div>
|
||||
<span class="js-select-button css-truncate css-truncate-target">probot</span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder">
|
||||
<div class="select-menu-modal js-menu-content">
|
||||
<div class="select-menu-header js-navigation-enable" tabindex="-1">
|
||||
<button class="btn-link close-button js-menu-close" type="button"><%= octicon("x", :"aria-label" => "Close menu") %></button>
|
||||
<span class="select-menu-title">Options</span>
|
||||
</div>
|
||||
<div class="select-menu-list js-navigation-container">
|
||||
<a href="#url" class="select-menu-item selected js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-gravatar">
|
||||
<%= avatar_for(current_user, 20, :"aria-label" => "") %>
|
||||
</span>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
probot
|
||||
</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-gravatar">
|
||||
<%= avatar_for(current_user, 20, :"aria-label" => "") %>
|
||||
</span>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
probot
|
||||
</span>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<%= octicon("check", :class => "select-menu-item-icon") %>
|
||||
<span class="select-menu-item-gravatar">
|
||||
<%= avatar_for(current_user, 20, :"aria-label" => "") %>
|
||||
</span>
|
||||
<span class="select-menu-item-text js-select-button-text">
|
||||
probot
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,623 +0,0 @@
|
||||
---
|
||||
title: Select menu
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/select-menu'
|
||||
bundle: select-menu
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note that this is a newer version and uses the `.SelectMenu` class instead of the <a href="/css/components/select-menu-deprecated">deprecated select menu</a> class. Check the <a href="/css/components/select-menu-deprecated">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
|
||||
The `SelectMenu` component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
|
||||
|
||||
## Basic example
|
||||
|
||||
Use a `<details>` element to toggle the select menu. The `<summary>` element can be styled in many ways. In the example below it's a `.btn`.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 120px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
Add a `.SelectMenu-header` to house a clear title and a close button. Note that the close button is only shown on narrow screens (mobile).
|
||||
|
||||
## Right aligned
|
||||
|
||||
In case the select menu should be aligned to the right, use `SelectMenu right-0`.
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-end position-relative">
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu right-0">
|
||||
<div class="SelectMenu-modal">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Selected state
|
||||
|
||||
If the `SelectMenu` should show a check icon for selected items, use the `SelectMenu-icon SelectMenu-icon--check` classes. It will make the check icon show when `aria-checked="true"` is set.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 200px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Borderless
|
||||
|
||||
Use the `.SelectMenu-list--borderless` modifier to remove the borders between list items. Note: It's better to keep the borders if a list contains items with multiple lines of text. It will make it easier to see where the items start and end.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<div class="SelectMenu-list SelectMenu-list--borderless">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 120px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Header
|
||||
|
||||
Add a `.SelectMenu-header` at the top to house a clear title and a close button.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## List items
|
||||
|
||||
The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). List items are also customizable with options for avatars, additional icons, and multiple lines of text. Use utility classes in case more custom styling is needed.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
Text only
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
<!-- <%= octicon "pin", class: "SelectMenu-icon" %> -->
|
||||
<svg class="SelectMenu-icon octicon octicon-pin" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1.2V2l.5 1L6 6H2.2c-.44 0-.67.53-.34.86L5 10l-4 5 5-4 3.14 3.14a.5.5 0 00.86-.34V10l3-4.5 1 .5h.8c.44 0 .67-.53.34-.86L10.86.86a.5.5 0 00-.86.34z"></path></svg>
|
||||
With an icon
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
<img
|
||||
class="avatar avatar-small mr-2"
|
||||
src="https://avatars.githubusercontent.com/hubot?s=40"
|
||||
alt="hubot"
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
With an avatar
|
||||
</button>
|
||||
<button class="SelectMenu-item flex-justify-between" role="menuitem">
|
||||
With a status icon
|
||||
<!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2" %> -->
|
||||
<svg
|
||||
width="8"
|
||||
height="16"
|
||||
viewBox="0 0 8 16"
|
||||
class="octicon octicon-primitive-dot color-green-5 ml-2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="SelectMenu-item d-block" role="menuitem">With a <span class="Label">label</span></button>
|
||||
<button class="SelectMenu-item" role="menuitem">
|
||||
With a counter <span class="Counter ml-1">16</span>
|
||||
</button>
|
||||
<button class="SelectMenu-item d-block" role="menuitem">
|
||||
<h5>With a heading</h5>
|
||||
<span>and some longer description</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 320px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Divider
|
||||
|
||||
The select menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`. It can be a `<div>` with text/content. Or just an `<hr>` to add a visual separator.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<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>
|
||||
<hr class="SelectMenu-divider">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 300px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
Dividers are also supported when using the `.SelectMenu-list--borderless` modifier.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list SelectMenu-list--borderless">
|
||||
<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>
|
||||
<hr class="SelectMenu-divider">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 300px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Footer
|
||||
|
||||
Use a `.SelectMenu-footer` at the bottom for additional information. As a side effect it can greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<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>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 4</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
</div>
|
||||
<footer class="SelectMenu-footer">Footer</footer>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 260px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Filter
|
||||
|
||||
If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the select menu to the top of the screen. This makes sure the filter input stays at the same position while typing.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu SelectMenu--hasFilter">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter">
|
||||
</form>
|
||||
<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>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 4</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 6</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 7</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 8</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 9</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 10</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 11</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 12</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 13</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 14</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 15</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 16</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 17</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 18</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 19</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 20</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 21</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 22</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 23</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 24</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 25</button>
|
||||
</div>
|
||||
<footer class="SelectMenu-footer">Showing 25 of 25</footer>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
|
||||
<div class="d-none d-sm-block" style="height: 500px"> <!-- min height for > sm --> </div>
|
||||
```
|
||||
|
||||
## Tabs
|
||||
|
||||
Sometimes you need two or more lists of items in your select menu, e.g. branches and tags. Select menu lists can be tabbed with the addition of `.SelectMenu-tabs` above the menu.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu SelectMenu--hasFilter">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter" />
|
||||
</form>
|
||||
<nav class="SelectMenu-tabs">
|
||||
<button class="SelectMenu-tab" aria-selected="true">Branches</button>
|
||||
<button class="SelectMenu-tab">Tags</button>
|
||||
</nav>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<footer class="SelectMenu-footer">Showing 5 of 5</footer>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 380px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Message
|
||||
|
||||
A `SelectMenu-message` can be used to show different kind of messages to a user. Use utility classes to further style the message.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-message color-bg-danger color-fg-danger">Message goes here</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 200px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Loading
|
||||
|
||||
When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-loading">
|
||||
<!-- <%= octicon "octoface", class: "anim-pulse", width: 32 %> -->
|
||||
<svg
|
||||
width="32 "
|
||||
height="32"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-octoface anim-pulse"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="SelectMenu-footer">Loading...</footer>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 220px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Disabled
|
||||
|
||||
To disable a list item, use the `disabled` attribute for `<button>`s. For `<a>`s replace the `href` with an `aria-disabled="true"` attribute. Note: If not obvious, try to communicate to the user why an item is disabled.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem" disabled>Item 2 (disabled)</button>
|
||||
<a class="SelectMenu-item" role="menuitem" href="#">Item 3</a>
|
||||
<a class="SelectMenu-item" role="menuitem" aria-disabled="true">Item 4 (disabled)</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 160px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Blankslate
|
||||
|
||||
Sometimes a select menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<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">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"
|
||||
/>
|
||||
</svg>
|
||||
<h4 class="my-2">No repositories</h4>
|
||||
<p class="mb-3 color-fg-muted">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 260px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## github.com usage
|
||||
|
||||
When adding the `.SelectMenu` component on github.com, use the [`<details-menu>`](https://github.com/github/details-menu-element) element. It will magically make the `.SelectMenu` work. Here a basic example:
|
||||
|
||||
```erb
|
||||
<details class="details-reset details-overlay" id="my-select-menu">
|
||||
<summary class="btn">
|
||||
<span>Choose</span>
|
||||
<span class="dropdown-caret"></span>
|
||||
</summary>
|
||||
<details-menu class="SelectMenu" role="menu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<span class="SelectMenu-title">My Select Menu</span>
|
||||
<button class="SelectMenu-closeButton" type="button" data-toggle-for="my-select-menu">
|
||||
<%= octicon("x", "aria-label": "Close menu") %>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<a class="SelectMenu-item" href="" role="menuitem">Item 1</a>
|
||||
<a class="SelectMenu-item" href="" role="menuitem">Item 2</a>
|
||||
<a class="SelectMenu-item" href="" role="menuitem">Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
</details-menu>
|
||||
</details>
|
||||
```
|
||||
|
||||
If loading content should be deferred, use the [`<include-fragment>`](https://github.com/github/details-menu-element) element:
|
||||
|
||||
```erb
|
||||
<details-menu class="SelectMenu" src="/my-menu" preload>
|
||||
<div class="SelectMenu-modal">
|
||||
<include-fragment class="SelectMenu-loading" aria-label="Menu is loading">
|
||||
<%= octicon("octoface", class: "anim-pulse", :height => 32) %>
|
||||
</include-fragment>
|
||||
</div>
|
||||
</details-menu>
|
||||
```
|
||||
|
||||
It will add a pulsing "octoface" icon while the content is loading.
|
||||
@ -1,112 +0,0 @@
|
||||
---
|
||||
title: SideNav
|
||||
path: components/side-nav
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/navigation'
|
||||
rails: 'https://primer.style/view-components/components/alpha/navlist'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **Side Nav elements have no default width or positioning**. We suggest using [column grid](../utilities/grid) classes or an inline `width` style for sizing, and [flexbox utilities](../utilities/flexbox) for positioning alongside content.
|
||||
|
||||
- You can use a **border** if the parent element doesn't have it already.
|
||||
- Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`.
|
||||
|
||||
```html live
|
||||
<nav class="SideNav border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">Account</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">Profile</a>
|
||||
<a class="SideNav-item" href="#url">Emails</a>
|
||||
<a class="SideNav-item" href="#url">Notifications</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
|
||||
|
||||
```html live
|
||||
<nav class="SideNav border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
Text only
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<img
|
||||
class="avatar avatar-small mr-2"
|
||||
src="https://avatars.githubusercontent.com/hubot?s=40"
|
||||
alt="hubot"
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
With an avatar
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
|
||||
<svg class="SideNav-icon octicon octicon-octoface" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
|
||||
With an icon
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a status icon
|
||||
<!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2 float-right" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="8"
|
||||
height="16"
|
||||
viewBox="0 0 8 16"
|
||||
class="octicon octicon-primitive-dot color-green-5 ml-2 float-right"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a label <span class="Label">label</span>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a counter <span class="Counter ml-1">16</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<h5>With a heading</h5>
|
||||
<span>and some longer description</span>
|
||||
</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
|
||||
|
||||
```html live
|
||||
<aside class="color-bg-subtle border p-3" style="max-width: 360px">
|
||||
<h5 class="color-fg-muted mb-2 pb-1 border-bottom">Menu</h5>
|
||||
<nav class="SideNav">
|
||||
<a class="SideNav-subItem" href="#url">Account</a>
|
||||
<a class="SideNav-subItem" href="#url" aria-current="page">Profile</a>
|
||||
<a class="SideNav-subItem" href="#url">Emails</a>
|
||||
<a class="SideNav-subItem" href="#url">Notifications</a>
|
||||
</nav>
|
||||
</aside>
|
||||
```
|
||||
|
||||
Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.
|
||||
|
||||
```html live
|
||||
<nav class="SideNav border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "person", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-person SideNav-icon" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true"> <path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z" /> </svg>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-octoface SideNav-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<nav class="SideNav color-bg-default border-top py-3" style="padding-left: 44px">
|
||||
<a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
|
||||
<a class="SideNav-subItem" href="#url">Sub item 2</a>
|
||||
<a class="SideNav-subItem" href="#url">Sub item 3</a>
|
||||
</nav>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "mail", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-mail SideNav-icon" width="14" height="16" viewBox="0 0 14 16" aria-hidden="true"> <path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z" /> </svg>
|
||||
<span>Emails</span>
|
||||
</a>
|
||||
</nav>
|
||||
```
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
title: State
|
||||
path: components/state
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/labels'
|
||||
rails: 'https://primer.style/view-components/components/state'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
Use state labels to inform users of an item's status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
|
||||
- `State`
|
||||
- `State State--draft`
|
||||
- `State State--open`
|
||||
- `State State--merged`
|
||||
- `State State--closed`
|
||||
|
||||
```html live
|
||||
<span class="State State--draft mr-2">Draft</span>
|
||||
|
||||
<span class="State State--open mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
|
||||
<span class="State State--merged mr-2">
|
||||
<!-- <%= octicon "git-merge" %> -->
|
||||
<svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>
|
||||
Merged
|
||||
</span>
|
||||
|
||||
<span class="State State--closed mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Small states
|
||||
|
||||
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
|
||||
|
||||
```html live
|
||||
<span class="State State--small mr-2">Default</span>
|
||||
<span class="State State--small State--open mr-2">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--small State--closed mr-2">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
@ -1,80 +0,0 @@
|
||||
---
|
||||
title: Subhead
|
||||
path: components/subhead
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/101'
|
||||
source: 'https://github.com/primer/css/tree/main/src/subhead'
|
||||
rails: 'https://primer.style/view-components/components/subhead'
|
||||
bundle: subhead
|
||||
---
|
||||
|
||||
|
||||
The basic Subhead consists of a `.Subhead` container, which has a light gray bottom border. Use `.Subhead-heading` for the heading itself. It is styled as an `<h2>` sized heading with normal font-weight.
|
||||
|
||||
Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
|
||||
|
||||
```html live title="Subhead"
|
||||
<div class="Subhead">
|
||||
<h2 class="Subhead-heading">Plain subhead</h2>
|
||||
</div>
|
||||
```
|
||||
|
||||
To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page.
|
||||
|
||||
```html live title="Spacious Subhead"
|
||||
<div class="Subhead Subhead--spacious">
|
||||
<h2 class="Subhead-heading">Spacious subhead</h2>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can add a one line description to the subhead with `.Subhead-description`.
|
||||
|
||||
```html live title="Subhead with description"
|
||||
<div class="Subhead">
|
||||
<h2 class="Subhead-heading">Subhead with description</h2>
|
||||
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
For longer descriptions, it is recommended that you use a paragraph below the Subhead.
|
||||
|
||||
```html live title="Subhead with longer description"
|
||||
<div class="Subhead">
|
||||
<h2 class="Subhead-heading">Plain subhead</h2>
|
||||
</div>
|
||||
<p>
|
||||
This is a longer description that is sitting below the Subheader. It's much longer than a description that could sit comfortably in the Subhead. It might even have <strong>bold</strong> text. <a href="#">Click to learn more.</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
You can add a button or something to the right of `.Subhead-heading` with the `.Subhead-actions` element.
|
||||
|
||||
```html live title="Subhead with actions"
|
||||
<div class="Subhead">
|
||||
<h2 class="Subhead-heading">Subhead with button</h2>
|
||||
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||
</div>
|
||||
|
||||
<div class="Subhead Subhead--spacious">
|
||||
<h2 class="Subhead-heading">Subhead with link</h2>
|
||||
<div class="Subhead-actions"><a href="#url">Learn more</a></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use all the elements together to create a Subhead with actions and a description.
|
||||
|
||||
```html live title="Subhead with actions and description"
|
||||
<div class="Subhead">
|
||||
<h2 class="Subhead-heading">Subhead with actions and description</h2>
|
||||
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
|
||||
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use the `.Subhead-heading--danger` modifier to make the text bold and red. This is useful for warning users.
|
||||
|
||||
```html live title="Subhead danger"
|
||||
<div class="Subhead">
|
||||
<h2 class="Subhead-heading Subhead-heading--danger">Danger zone</h2>
|
||||
</div>
|
||||
```
|
||||
@ -1,59 +0,0 @@
|
||||
---
|
||||
title: Sub navigation
|
||||
path: components/subnav
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/navigation'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
`.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
|
||||
|
||||
```html live title="subnav"
|
||||
<nav class="subnav" aria-label="Repository">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
|
||||
<a class="subnav-item" href="#url">Item 2</a>
|
||||
<a class="subnav-item" href="#url">Item 3</a>
|
||||
</nav>
|
||||
```
|
||||
|
||||
You can have `subnav-search` in the subnav bar.
|
||||
|
||||
```html live
|
||||
<div class="subnav">
|
||||
<nav class="subnav-links" aria-label="Repository">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
|
||||
<a class="subnav-item" href="#url">Item 2</a>
|
||||
<a class="subnav-item" href="#url">Item 3</a>
|
||||
</nav>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also use a `subnav-search-context` to display search help in a select menu.
|
||||
|
||||
```html live
|
||||
<div class="subnav">
|
||||
<nav class="subnav-links">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Item 1</a>
|
||||
<a class="subnav-item" href="#url">Item 2</a>
|
||||
<a class="subnav-item" href="#url">Item 3</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="subnav">
|
||||
<div class="float-left subnav-search-context">
|
||||
<button class="btn" type="button" name="button" aria-expanded="false" aria-haspopup="true">
|
||||
Filters
|
||||
<span class="dropdown-caret"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", class: "subnav-search-icon" %> -->
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,92 +0,0 @@
|
||||
---
|
||||
title: Tabnav
|
||||
path: components/tabnav
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/navigation'
|
||||
rails: 'https://primer.style/view-components/components/alpha/tabnav'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
When you need to toggle between different views, consider using a tabnav. It'll give you a left-aligned horizontal row of... tabs!
|
||||
|
||||
```html live title="tabnav"
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Foo tab</a>
|
||||
<a class="tabnav-tab" href="#url">Bar tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
Tabs can also contain icons and counters.
|
||||
|
||||
```html live
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "comment-discussion" %> -->
|
||||
<svg class="octicon octicon-comment-discussion" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.75C1.5 2.6837 1.52634 2.62011 1.57322 2.57322C1.62011 2.52634 1.6837 2.5 1.75 2.5H10.25C10.3163 2.5 10.3799 2.52634 10.4268 2.57322C10.4737 2.62011 10.5 2.6837 10.5 2.75V8.25C10.5 8.3163 10.4737 8.37989 10.4268 8.42678C10.3799 8.47366 10.3163 8.5 10.25 8.5H6.75C6.55115 8.50017 6.36052 8.57931 6.22 8.72L3.5 11.44V9.25C3.5 9.05109 3.42098 8.86032 3.28033 8.71967C3.13968 8.57902 2.94891 8.5 2.75 8.5H1.75C1.6837 8.5 1.62011 8.47366 1.57322 8.42678C1.52634 8.37989 1.5 8.3163 1.5 8.25V2.75ZM1.75 1C1.28587 1 0.840752 1.18437 0.512563 1.51256C0.184374 1.84075 0 2.28587 0 2.75L0 8.25C0 9.216 0.784 10 1.75 10H2V11.543C2.0001 11.8311 2.08561 12.1127 2.24571 12.3522C2.40581 12.5917 2.63333 12.7784 2.8995 12.8886C3.16567 12.9988 3.45854 13.0277 3.74111 12.9715C4.02367 12.9153 4.28324 12.7767 4.487 12.573L7.061 10H10.25C10.7141 10 11.1592 9.81563 11.4874 9.48744C11.8156 9.15925 12 8.71413 12 8.25V2.75C12 2.28587 11.8156 1.84075 11.4874 1.51256C11.1592 1.18437 10.7141 1 10.25 1H1.75ZM14.5 4.75C14.5 4.6837 14.4737 4.62011 14.4268 4.57322C14.3799 4.52634 14.3163 4.5 14.25 4.5H13.75C13.5511 4.5 13.3603 4.42098 13.2197 4.28033C13.079 4.13968 13 3.94891 13 3.75C13 3.55109 13.079 3.36032 13.2197 3.21967C13.3603 3.07902 13.5511 3 13.75 3H14.25C15.216 3 16 3.784 16 4.75V10.25C16 10.7141 15.8156 11.1592 15.4874 11.4874C15.1592 11.8156 14.7141 12 14.25 12H14V13.543C13.9999 13.8311 13.9144 14.1127 13.7543 14.3522C13.5942 14.5917 13.3667 14.7784 13.1005 14.8886C12.8343 14.9988 12.5415 15.0277 12.2589 14.9715C11.9763 14.9153 11.7168 14.7767 11.513 14.573L9.22 12.28C9.14631 12.2113 9.08721 12.1285 9.04622 12.0365C9.00523 11.9445 8.98318 11.8452 8.98141 11.7445C8.97963 11.6438 8.99816 11.5438 9.03588 11.4504C9.0736 11.357 9.12974 11.2722 9.20096 11.201C9.27218 11.1297 9.35701 11.0736 9.4504 11.0359C9.54379 10.9982 9.64382 10.9796 9.74452 10.9814C9.84523 10.9832 9.94454 11.0052 10.0365 11.0462C10.1285 11.0872 10.2113 11.1463 10.28 11.22L12.5 13.44V11.25C12.5 11.0511 12.579 10.8603 12.7197 10.7197C12.8603 10.579 13.0511 10.5 13.25 10.5H14.25C14.3163 10.5 14.3799 10.4737 14.4268 10.4268C14.4737 10.3799 14.5 10.3163 14.5 10.25V4.75Z"></path></svg>
|
||||
<span>Conversation</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "git-commit" %> -->
|
||||
<svg class="octicon octicon-git-commit" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 7.75C10.5 8.41305 10.2366 9.04893 9.76777 9.51777C9.29893 9.98661 8.66304 10.25 8 10.25C7.33696 10.25 6.70107 9.98661 6.23223 9.51777C5.76339 9.04893 5.5 8.41305 5.5 7.75C5.5 7.08696 5.76339 6.45108 6.23223 5.98224C6.70107 5.5134 7.33696 5.25 8 5.25C8.66304 5.25 9.29893 5.5134 9.76777 5.98224C10.2366 6.45108 10.5 7.08696 10.5 7.75ZM11.93 8.5C11.7554 9.41441 11.2674 10.2393 10.5501 10.8327C9.83272 11.426 8.93093 11.7506 8 11.7506C7.06907 11.7506 6.16728 11.426 5.44994 10.8327C4.73259 10.2393 4.2446 9.41441 4.07 8.5H0.75C0.551088 8.5 0.360322 8.42099 0.21967 8.28033C0.0790176 8.13968 0 7.94892 0 7.75C0 7.55109 0.0790176 7.36033 0.21967 7.21967C0.360322 7.07902 0.551088 7 0.75 7H4.07C4.2446 6.0856 4.73259 5.26069 5.44994 4.66736C6.16728 4.07403 7.06907 3.7494 8 3.7494C8.93093 3.7494 9.83272 4.07403 10.5501 4.66736C11.2674 5.26069 11.7554 6.0856 11.93 7H15.25C15.4489 7 15.6397 7.07902 15.7803 7.21967C15.921 7.36033 16 7.55109 16 7.75C16 7.94892 15.921 8.13968 15.7803 8.28033C15.6397 8.42099 15.4489 8.5 15.25 8.5H11.93Z"></path></svg>
|
||||
<span>Commits</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "checklist" %> -->
|
||||
<svg class="octicon octicon-checklist" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 1.75C2.5 1.61193 2.61193 1.5 2.75 1.5H11.25C11.3881 1.5 11.5 1.61193 11.5 1.75V9.48645C11.5 9.90067 11.8358 10.2365 12.25 10.2365C12.6642 10.2365 13 9.90067 13 9.48645V1.75C13 0.783502 12.2165 0 11.25 0H2.75C1.7835 0 1 0.783502 1 1.75V13.25C1 14.2165 1.7835 15 2.75 15H5.92083C6.33504 15 6.67083 14.6642 6.67083 14.25C6.67083 13.8358 6.33504 13.5 5.92083 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25V1.75ZM4.75 4C4.33579 4 4 4.33579 4 4.75C4 5.16421 4.33579 5.5 4.75 5.5H9.25C9.66421 5.5 10 5.16421 10 4.75C10 4.33579 9.66421 4 9.25 4H4.75ZM4 7.75C4 7.33579 4.33579 7 4.75 7H6.75C7.16421 7 7.5 7.33579 7.5 7.75C7.5 8.16421 7.16421 8.5 6.75 8.5H4.75C4.33579 8.5 4 8.16421 4 7.75ZM15.774 11.2866C16.0703 10.9972 16.076 10.5223 15.7866 10.226C15.4972 9.92965 15.0223 9.92402 14.726 10.2134L10.7003 14.1447L9.28127 12.7206C8.98889 12.4272 8.51402 12.4264 8.22061 12.7187C7.9272 13.0111 7.92636 13.486 8.21873 13.7794L10.1618 15.7294C10.4521 16.0207 10.9229 16.0239 11.2171 15.7366L15.774 11.2866Z"></path></svg>
|
||||
<span>Checks</span>
|
||||
<span class="Counter">27</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "diff" %> -->
|
||||
<svg class="octicon octicon-diff" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 1.5C2.61193 1.5 2.5 1.61193 2.5 1.75V14.25C2.5 14.3881 2.61193 14.5 2.75 14.5H13.25C13.3881 14.5 13.5 14.3881 13.5 14.25V4.66421C13.5 4.59791 13.4737 4.53432 13.4268 4.48744L10.5126 1.57322C10.4657 1.52634 10.4021 1.5 10.3358 1.5H2.75ZM1 1.75C1 0.783502 1.7835 0 2.75 0H10.3358C10.7999 0 11.245 0.184374 11.5732 0.512563L14.4874 3.42678C14.8156 3.75497 15 4.20008 15 4.66421V14.25C15 15.2165 14.2165 16 13.25 16H2.75C1.7835 16 1 15.2165 1 14.25V1.75ZM8 3.25C8.41421 3.25 8.75 3.58579 8.75 4V5.5H10.25C10.6642 5.5 11 5.83579 11 6.25C11 6.66421 10.6642 7 10.25 7H8.75V8.5C8.75 8.91421 8.41421 9.25 8 9.25C7.58579 9.25 7.25 8.91421 7.25 8.5V7H5.75C5.33579 7 5 6.66421 5 6.25C5 5.83579 5.33579 5.5 5.75 5.5H7.25V4C7.25 3.58579 7.58579 3.25 8 3.25ZM5 11.25C5 10.8358 5.33579 10.5 5.75 10.5H10.25C10.6642 10.5 11 10.8358 11 11.25C11 11.6642 10.6642 12 10.25 12H5.75C5.33579 12 5 11.6642 5 11.25Z"></path></svg>
|
||||
<span>Files changed</span>
|
||||
<span class="Counter">6</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.float-right` to align additional elements in the `.tabnav`:
|
||||
|
||||
```html live title="tabnav with buttons"
|
||||
<div class="tabnav">
|
||||
<a class="btn btn-sm float-right" href="#url" role="button">Button</a>
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
|
||||
<a class="tabnav-tab" href="#url">Bar Tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
Additional bits of text and links can be styled for optimal placement with `.tabnav-extra`:
|
||||
|
||||
```html live title="tabnav-extra"
|
||||
<div class="tabnav">
|
||||
<div class="tabnav-extra float-right">Tabnav widget text here.</div>
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
|
||||
<a class="tabnav-tab" href="#url">Bar Tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live title="tabnav with everything"
|
||||
<div class="tabnav">
|
||||
<div class="float-right">
|
||||
<a class="tabnav-extra" href="#url">Tabnav extra link</a>
|
||||
<a class="tabnav-extra" href="#url">Tabnav extra link</a>
|
||||
</div>
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Foo Tab</a>
|
||||
<a class="tabnav-tab" href="#url">Bar Tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
@ -1,190 +0,0 @@
|
||||
---
|
||||
title: Timeline
|
||||
path: components/timeline
|
||||
status: Alpha
|
||||
status_issue: 'https://github.com/github/design-systems/issues/101'
|
||||
source: 'https://github.com/primer/css/tree/main/src/timeline'
|
||||
rails: 'https://primer.style/view-components/components/timelineitem'
|
||||
bundle: timeline
|
||||
---
|
||||
|
||||
The `TimelineItem` component is used to display items on a vertical timeline, connected by `TimelineItem-badge` elements.
|
||||
|
||||
```html live
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge">
|
||||
<!-- octicon("flame") -->
|
||||
<svg class="octicon octicon-flame" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
|
||||
</div>
|
||||
|
||||
<div class="TimelineItem-body">
|
||||
<a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
|
||||
<a href="#" class="text-bold Link--primary">hot potato</a>
|
||||
<a href="#" class="Link--secondary">Just now</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## TimelineItem-badge
|
||||
|
||||
The default TimelineItem-badge color is dark text on a light gray background.
|
||||
|
||||
```html live
|
||||
<!-- Default TimelineItem Badge -->
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
Default badge color
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Adding color to TimelineItem-badge
|
||||
|
||||
To have color variants, use the [color utilities](/utilities/colors) on the badge. Be cautious with color choices. We typically use them in the timeline to give meaning to the event in context of the timeline.
|
||||
|
||||
```html live
|
||||
<!-- Colorful TimelineItem Badge -->
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-danger-emphasis color-fg-on-emphasis">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
Red background used when closed events occur
|
||||
</div>
|
||||
</div>
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-success-emphasis color-fg-on-emphasis">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
Green background when opened or passed events occur
|
||||
</div>
|
||||
</div>
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-done-emphasis color-fg-on-emphasis">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
Purple background used when pull requests are merged
|
||||
</div>
|
||||
</div>
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-accent-emphasis color-fg-on-emphasis">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
Blue background to indicate new events below
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## TimelineItem--condensed
|
||||
|
||||
TimelineItem has a condensed variant that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits.
|
||||
|
||||
```html live
|
||||
<div class="TimelineItem TimelineItem--condensed">
|
||||
<div class="TimelineItem-badge">
|
||||
<svg class="octicon octicon-git-commit" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
This is the message of a condensed TimelineItem
|
||||
</div>
|
||||
</div>
|
||||
<div class="TimelineItem TimelineItem--condensed">
|
||||
<div class="TimelineItem-badge">
|
||||
<svg class="octicon octicon-git-commit" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
This is the message of a condensed TimelineItem
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## TimelineItem-avatar
|
||||
|
||||
Sometimes you want to give ownership to an event by displaying an [Avatar]() of the author. To do this, you'll need to wrap the TimelineItem in a `<div>` and give it space for the avatar. `ml-6 pl-3` This is `40px`, the size of the image, and `16px` space for the gutter.
|
||||
|
||||
```html live
|
||||
<div class="ml-6 pl-3">
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-avatar">
|
||||
<img class="avatar" height="40" width="40" alt="@octocat"
|
||||
src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png" />
|
||||
</div>
|
||||
|
||||
<div class="TimelineItem-badge">
|
||||
<!-- octicon("flame") -->
|
||||
<svg class="octicon octicon-flame" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
|
||||
</div>
|
||||
|
||||
<div class="TimelineItem-body">
|
||||
<a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
|
||||
<a href="#" class="text-bold Link--primary">hot potato</a>
|
||||
<a href="#" class="Link--secondary">Just now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## TimelineItem-break
|
||||
|
||||
To create a visual break in the timeline, use `TimelineItem-break`. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs.
|
||||
|
||||
```html live
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-danger-emphasis color-fg-on-emphasis">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
Red background used when closed events occur
|
||||
</div>
|
||||
</div>
|
||||
<div class="TimelineItem-break ml-0"></div>
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-success-emphasis color-fg-on-emphasis">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="TimelineItem-body">
|
||||
Green background when opened or passed events occur
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Target TimelineItem
|
||||
|
||||
```html live
|
||||
<div class="TimelineItem" id="1">
|
||||
<a href="#1" class="TimelineItem-badge">
|
||||
<!-- octicon("flame") -->
|
||||
<svg class="octicon octicon-flame" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg>
|
||||
</a>
|
||||
|
||||
<div class="TimelineItem-body">
|
||||
<a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
|
||||
<a href="#" class="text-bold Link--primary">hot potato</a>
|
||||
<a href="#1" class="Link--secondary">Just now</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,227 +0,0 @@
|
||||
---
|
||||
title: Toasts
|
||||
path: components/toasts
|
||||
status: Alpha
|
||||
status_issue: 'https://github.com/github/design-systems/issues/101'
|
||||
source: ''
|
||||
bundle: toasts
|
||||
---
|
||||
|
||||
Toasts are used to show live, time-sensitive feedback to users.
|
||||
|
||||
## Default
|
||||
|
||||
To create a default toast, use `.Toast`. Always use the `info` icon for default messages.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %>-->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
The Toast content is formattable. We recommend keeping your message under 140 characters.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
<strong>Aenean commodo ligula eget dolor.</strong> Aenean massa. Cum sociis <em>natoque</em> penatibus et ma
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Variations
|
||||
|
||||
Use the success, warning, and error modifiers to communicate different states.
|
||||
|
||||
Always use the `check` octicon for success states.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--success">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "check" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Success message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Always use the `alert` octicon for warning states.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--warning">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "alert" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Warning message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Always use the `stop` octicon for error states.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--error">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "stop" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-stop" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Error message goes here</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast with dismiss
|
||||
|
||||
Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">This toast is dismissable.</span>
|
||||
<button class="Toast-dismissButton">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast with link
|
||||
|
||||
Include a link to allow users to take actions within a Toast.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here<a href="#">Action.</a></span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast animation in
|
||||
|
||||
The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--animateIn">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast with loading animation
|
||||
|
||||
Add the `Toast--spinner` modifier class on the `Toast-icon` `svg` to communicate a loading state.
|
||||
|
||||
```html live
|
||||
<div class="p-1">
|
||||
<div class="Toast Toast--loading">
|
||||
<span class="Toast-icon">
|
||||
<svg class="Toast--spinner" viewBox="0 0 32 32" width="18" height="18">
|
||||
<path
|
||||
fill="#959da5"
|
||||
d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"
|
||||
/>
|
||||
<path fill="#ffffff" d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Toast position
|
||||
|
||||
Use the `position-fixed bottom-0 left-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport.
|
||||
|
||||
```html live
|
||||
<div style="height:150px">
|
||||
<div class="position-fixed bottom-0 left-0 mb-3 ml-3">
|
||||
<div class="Toast">
|
||||
<span class="Toast-icon">
|
||||
<!-- <%= octicon "info" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="Toast-content">Toast message goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,124 +0,0 @@
|
||||
---
|
||||
title: Tooltips
|
||||
path: components/tooltips
|
||||
status: Deprecated
|
||||
source: 'https://github.com/primer/css/tree/main/src/tooltips'
|
||||
rails: 'https://primer.style/view-components/components/alpha/tooltip'
|
||||
bundle: tooltips
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note that the `.tooltipped` component is **deprecated**. We recommend using the [Tooltip component](https://primer.style/view-components/components/alpha/tooltip) instead.
|
||||
</Note>
|
||||
|
||||
Add tooltips built entirely in CSS to appropriate elements.
|
||||
|
||||
## Implementation and accessibility
|
||||
|
||||
Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.
|
||||
|
||||
Before adding a tooltip, please consider: Is this information essential and necessary* Can the UI be made clearer? Can the information be shown on the page by default? And check out [alternatives to Tooltips](https://primer.style/design/accessibility/tooltip-alternatives) to explore your options.
|
||||
|
||||
### Attention
|
||||
|
||||
- **Never** use tooltips on static elements. They should only be used on interactive elements, because users cannot tab-focus into static elements, which may make the content inaccessible for keyboard-only users and screen readers.
|
||||
- we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content such as an icon-only button.
|
||||
- Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.
|
||||
|
||||
## Tooltip direction
|
||||
Specify the direction of a tooltip with north, south, east, and west directions:
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<button type="button" class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
|
||||
.tooltipped-nw
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
|
||||
.tooltipped-n
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
|
||||
.tooltipped-ne
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<button type="button" class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
|
||||
.tooltipped-w
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
|
||||
.tooltipped-e
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center pb-4">
|
||||
<button type="button" class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
|
||||
.tooltipped-sw
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
|
||||
.tooltipped-s
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
|
||||
.tooltipped-se
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltip alignment
|
||||
Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<button type="button" class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
.tooltipped-nw .tooltipped-align-right-1
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||
.tooltipped-ne .tooltipped-align-left-1
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<button type="button" class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
.tooltipped-nw .tooltipped-align-right-2
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||
.tooltipped-ne .tooltipped-align-left-2
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<button type="button" class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||
.tooltipped-sw .tooltipped-align-right-1
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
|
||||
.tooltipped-se .tooltipped-align-left-1
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center pb-4">
|
||||
<button type="button" class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||
.tooltipped-sw .tooltipped-align-right-2
|
||||
</button>
|
||||
<button type="button" class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
|
||||
.tooltipped-se .tooltipped-align-left-2
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltips with multiple lines
|
||||
Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`.
|
||||
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center pt-6">
|
||||
<button type="button" class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||
.tooltipped-multiline
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltips with no delay
|
||||
|
||||
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<button type="button" class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
|
||||
.tooltipped-no-delay
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
@ -1,88 +0,0 @@
|
||||
---
|
||||
title: Truncate
|
||||
path: components/truncate
|
||||
status: Alpha
|
||||
source: 'https://github.com/primer/css/tree/main/src/truncate'
|
||||
rails: 'https://primer.style/view-components/components/beta/truncate'
|
||||
bundle: truncate
|
||||
---
|
||||
|
||||
When text reaches lengths larger than existing container, shorten with ellipses.
|
||||
|
||||
## Truncate
|
||||
|
||||
Adding the `.Truncate` class and wrapping the inner text with `.Truncate-text` will truncate the text. `.Truncate-text` must be a direct descendant of `.Truncate`.
|
||||
|
||||
```html live
|
||||
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||
<span class="Truncate">
|
||||
<span class="Truncate-text">branch-name-that-is-really-long</span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Truncate multiple items
|
||||
|
||||
You can add multiple `.Truncate-text` items in the same row and they will truncate evenly. If you want to make one of the items the primary text that doesn't truncate first, add the class `.Truncate-text--primary` class.
|
||||
|
||||
```html live
|
||||
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||
<span class="Truncate">
|
||||
<span class="Truncate-text">really-long-repository-owner-name</span>
|
||||
<span class="Truncate-text Truncate-text--primary text-bold">
|
||||
<span class="text-normal">/</span> really-long-repository-name
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
`.Truncate-text--primary` doesn't need to be the last item in the list or only have one instance. Consider this breadcrumb example where we want to highlight the Repository name and the Issue title. The rest of the breadcrumb will truncate and leave the name and title untruncated until we run out of space.
|
||||
|
||||
```html live
|
||||
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||
<ol class="Truncate">
|
||||
<li class="Truncate-text">primer</li>
|
||||
<li class="Truncate-text Truncate-text--primary">/ css</li>
|
||||
<li class="Truncate-text">/ Issues</li>
|
||||
<li class="Truncate-text">/ #123 —</li>
|
||||
<li class="Truncate-text Truncate-text--primary">
|
||||
Visual bug on primer.style found in lists
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Expand on hover or focus
|
||||
|
||||
When there are multiple items in a list, you can add the `.Truncate-text--expandable` class to the `.Truncate-text` items and they will grow when `:hover` or `:focus` state is applied to them.
|
||||
|
||||
```html live
|
||||
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||
<span class="Truncate">
|
||||
<a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
|
||||
<a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
|
||||
<a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
|
||||
<a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Custom max widths
|
||||
|
||||
It is recommended to use `max-width` as an inline style when you would like to have control over how far something can grow, even when there's enough space available.
|
||||
|
||||
```html live
|
||||
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||
<div class="Truncate">
|
||||
<span class="Truncate-text Truncate-text--expandable" style="max-width: 300px;">branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="Truncate">
|
||||
<span class="Truncate-text Truncate-text--expandable" style="max-width: 200px;">branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="Truncate">
|
||||
<span class="Truncate-text Truncate-text--expandable" style="max-width: 100px;">branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,121 +0,0 @@
|
||||
---
|
||||
title: UnderlineNav
|
||||
path: components/underline-nav
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/navigation'
|
||||
rails: 'https://primer.style/view-components/components/alpha/underlinenav'
|
||||
bundle: navigation
|
||||
---
|
||||
|
||||
Use `.UnderlineNav` to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page. This component comes with variations to accommodate icons, containers and other content.
|
||||
|
||||
To add a selected state to an item, use:
|
||||
|
||||
- `role="tab"` and `aria-selected="true"` if it's a button
|
||||
- `aria-current="page"` if it's a link
|
||||
|
||||
```html live title="UnderlineNav"
|
||||
<nav class="UnderlineNav">
|
||||
<div class="UnderlineNav-body" role="tablist">
|
||||
<button class="UnderlineNav-item" role="tab" type="button" aria-selected="true">Item 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Item 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Item 3</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Item 4</button>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
Use `.UnderlineNav-actions` to place another element, such as a button, to the opposite side of the navigation items.
|
||||
|
||||
```html live title="UnderlineNav-actions"
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 2</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 3</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 4</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
Use `.UnderlineNav--right` to right align the navigation.
|
||||
|
||||
```html live title="UnderlineNav--right"
|
||||
<nav class="UnderlineNav UnderlineNav--right">
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 2</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 3</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 4</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
`.UnderlineNav--right` also works with when used with `.UnderlineNav-actions`.
|
||||
|
||||
```html live title="UnderlineNav--right with actions"
|
||||
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 2</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 3</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 4</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
<!-- Update wording here -->
|
||||
|
||||
`.Counters` and `.octicons` can be used with navigation items. Use `.UnderlineNav-octicon` to add color and hover styles.
|
||||
|
||||
```html live
|
||||
<nav class="UnderlineNav" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 1</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 2</span>
|
||||
<span class="Counter">10</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 3</span>
|
||||
</a>
|
||||
<a class="UnderlineNav-item" href="#url">
|
||||
<!-- <%= octicon "tools", class: "UnderlineNav-octicon" %> -->
|
||||
<svg class="UnderlineNav-octicon octicon octicon-tools" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z" /></svg>
|
||||
<span>Item 4</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNav-container` to make navigation fill the width of the container.
|
||||
|
||||
```html live title="UnderlineNav--full"
|
||||
<nav class="UnderlineNav UnderlineNav--full" aria-label="Foo bar">
|
||||
<div class="container-lg UnderlineNav-container">
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 2<span class="Counter">10</span></a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 3</a>
|
||||
<a class="UnderlineNav-item" href="#url">Item 4</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
@ -1,113 +0,0 @@
|
||||
---
|
||||
title: Contributing
|
||||
description: Guidelines for contributing to GitHub's CSS
|
||||
---
|
||||
|
||||
While this contributing guide is for GitHub employees, all contributions from the community are welcome.
|
||||
|
||||
## Decision process for adding new styles
|
||||
|
||||
### Components
|
||||
|
||||
[Components](/components) are frequently used visual patterns we've abstracted into a set of convenient styles, that would be otherwise difficult to achieve with utilities.
|
||||
|
||||
Decisions to add new components are made on a case-by-case basis, with help from the GitHub Design Systems team. Some questions that we use to guide these decisions include:
|
||||
|
||||
- How often is this pattern used across the site?
|
||||
- Could these styles be achieved with existing components and utilities?
|
||||
- If your design is difficult to compose with current styles, does this highlight problems with existing components (such as overly-specific components, or missing utilities)?
|
||||
- Is this a totally new pattern or should it be an extension of an existing component?
|
||||
- How is this pattern being implemented currently - have you identified problems with it’s current implementation that can be improved with adding a new pattern?
|
||||
- Is the desire for this new pattern a side-effect of lacking documentation or misunderstanding of use with current styles?
|
||||
- Are there special factors that need to be considered as to why the this pattern needs it’s own styles? Such legal issues, usability issues, or branding and trademarks?
|
||||
- Is this something that would be better handled by other front-end code rather than CSS?
|
||||
- Every new addition of CSS means we ask our users to download a larger CSS file, and we increase the maintenance work of our CSS framework. Does the convenience of adding these new styles outweigh those costs?
|
||||
|
||||
### Utilities
|
||||
|
||||
Many of the same questions can be applied to utilities, however the purpose of these styles is different:
|
||||
|
||||
[Utilities](/utilities) do one thing well and one thing only. These styles are immutable and therefore often use the `!important` tag. For this reason we aim not to change the properties of utilities very often. They often form the building blocks of our pages and when we introduce new ones we need to do so with care as we'll likely need to live with these styles for a long time. When assessing whether there is a need to add a new utility, consider these additional questions:
|
||||
- How does this new utility fit within our existing set of utilities? If it is an addition to an existing set then it should follow the same naming convention.
|
||||
- Is it for a property that would likely need to be changed at different breakpoints? If so it may need responsive options.
|
||||
- If this style is part of a family of properties, do we need to consider adding the full set? Reasons for adding a full set could be that the other property values are often used, or that there would be a need to switch the property on and off (such as display or visibility).
|
||||
- Does introducing this new utility cause any clashes or potential confusion with the use of existing utilities? If so, what steps can we take to avoid those issues.
|
||||
- Does the utility have a connection with a set of variables? If so do the corresponding variables need to be updated?
|
||||
|
||||
## Step-by-step instructions for adding new styles
|
||||
|
||||
### Step 1: Open an issue
|
||||
|
||||
It's usually better to open an issue before investing time in spiking out a new pattern. This gives the design systems team a heads up and allows other designers to share thoughts. Here's an outline of what's helpful to include in a new style issue:
|
||||
|
||||
1. What the pattern is, and how it's being used on GitHub.com. Post screenshots and/or URLs whenever possible. If you need help identifying where the pattern is used, call that out in the issue.
|
||||
2. Why you think a new pattern is needed (this should answer the relevant questions above).
|
||||
3. If you intend to work on these new styles yourself, let us know what your timeline and next steps are. If you need help and this is a dependency for shipping another project, please make that clear here and what the timeline is.
|
||||
4. Add the appropriate label(s):
|
||||
- `Type: Enhancement` for new styles
|
||||
- `Type: Bug Fix` for—you guessed it!—bug fixes
|
||||
- `Type: Polish` for refactors of existing styles
|
||||
- `Type: Breaking Change` for any change that [removes CSS selectors or SCSS variables](#removing-styles-and-variables)
|
||||
|
||||
### Step 2: Design and build the new styles
|
||||
|
||||
- You may want to explore the visual design for a new component before spiking it out in code. If so, continue in the issue and post your design mockups. Using our [CodePen template](https://codepen.io/team/GitHub/pen/xYLdZd) could also be a good option, it pulls in Primer CSS so you can explore options in isolation before jumping into production code.
|
||||
- When you're ready, spike out a branch and build out your new component, object, or utilities according to the style guide principles, ensuring you follow our naming convention for each of the styles.
|
||||
- Refactor parts of the product where you think those new styles could be used to test they work for each use case. This does not mean for every instance, but enough of the key use cases to be sure the styles are flexible enough. To avoid blowing out your initial pull request we recommend you do larger amounts of refactoring in an additional branch.
|
||||
- When you're ready for review, add the `status: review needed` and the `design-systems` labels to your pull request. Follow the [ship checklist](#ship-checklist) for additional shipping steps.
|
||||
|
||||
### Step 3: Follow up with refactoring
|
||||
|
||||
New styles we add should be used in as many places as makes sense to in production. Often it takes time to refactor all instances to use the new styles in one pr, but you should ensure this is followed up on.
|
||||
|
||||
- Add a tracking issue to the design systems repo with the label `type: refactor`. Add a task list with links to the code or pages that need updating. If you need help, request help in this issue.
|
||||
- Follow up with as many refactoring pull requests as you can make time for. This is an important part of the process and helps us reduce CSS bloat. Think of it as the project isn't finished until the new styles are being used everywhere they should be in production.
|
||||
|
||||
### Step 4: Feel awesome
|
||||
|
||||
If you get to this step you've helped contribute to a style guide that many of your colleagues use on a daily basis, you've contributed to an open source project that's referenced and used by many others, and you've helped improve the usability and consistency of GitHub for our users. Thank you!
|
||||
|
||||
[Please open an issue](#step-1-open-an-issue) if we can improve these guidelines and make following this process any easier.
|
||||
|
||||
|
||||
## Documentation structure
|
||||
|
||||
- Our documentation site for Primer CSS is built using [Doctocat](https://primer.style/doctocat) and deployed with [Vercel](https://vercel.com/). Our site is built from the `docs` folder and uses [MDX](https://mdxjs.com) to render markdown.
|
||||
|
||||
- Documentation for Primer CSS modules should live in the corresponding `.md` or `.mdx` file for that module in the `/docs/content` folder.
|
||||
|
||||
- There are separate folders in `/docs/content` for component, object, support, and utilities docs, as well as separate folders for more general documentation such as principles and tooling.
|
||||
|
||||
- Documents in `docs/content/` automatically become pages with URLs based on their path relative to `content/`. For example, `docs/content/components/box.md` creates a `/components/box` page.
|
||||
|
||||
- To add new documentation, locate the appropriate folder and create a new `.md` or `.mdx` file. Be sure to include the proper front matter (at minimum, title and status). For example:
|
||||
|
||||
```
|
||||
---
|
||||
title: Alerts
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/alerts'
|
||||
---
|
||||
```
|
||||
|
||||
### Table of contents
|
||||
|
||||
A table of contents is automatically inserted at the top of every page published on [primer.style/css](https://primer.style/css).
|
||||
|
||||
### Navigation
|
||||
|
||||
For new components or doc pages, add the title and url to [nav.yml](https://github.com/primer/css/blob/main/docs/src/%40primer/gatsby-theme-doctocat/nav.yml).
|
||||
|
||||
### Live code
|
||||
|
||||
Check out Doctocat's [live code](https://primer.style/doctocat/usage/live-code) documentation for more information about creating live code examples.
|
||||
|
||||
### Versioning
|
||||
|
||||
Primer CSS follows [semantic versioning](http://semver.org/) conventions. This helps others know when a change is a patch, minor, or breaking change.
|
||||
|
||||
To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so we recommend reviewing [semver](http://semver.org/) and/or asking the team by [opening an issue](#step-1-open-an-issue).
|
||||
|
||||
[semantic versioning]: https://semver.org
|
||||
[script/test-deprecations.js]: https://github.com/primer/css/tree/main/script/test-deprecations.js
|
||||
[deprecations.js]: https://github.com/primer/css/tree/main/deprecations.js
|
||||
@ -1,126 +0,0 @@
|
||||
---
|
||||
title: Getting started
|
||||
path: getting-started/index
|
||||
---
|
||||
|
||||
Primer CSS is [open-sourced on GitHub](https://github.com/primer/css) and [available on npm](https://www.npmjs.com/package/@primer/css).
|
||||
|
||||
## Installing via npm
|
||||
|
||||
We recommend installing Primer CSS with npm: `npm install --save @primer/css`.
|
||||
|
||||
### Before you start
|
||||
|
||||
Primer CSS requires npm version 3 or above. You can check which version you have by running `npm -v`. If you have a version that's older than 3.0, you can update it with `npm install npm@latest -g`. For more info, read the [npm install docs](https://docs.npmjs.com/getting-started/installing-node).
|
||||
|
||||
### Initialize npm project
|
||||
|
||||
Begin by initializing your project with a `package.json` file. You can read more on how to do this [in the npm documentation](https://docs.npmjs.com/getting-started/using-a-package.json#creating-a-packagejson).
|
||||
|
||||
### Install Primer CSS
|
||||
|
||||
Install the Primer CSS npm package modules by running `npm install @primer/css`. This will install all of the SCSS source files into the `node_modules/@primer/css` directory.
|
||||
|
||||
```shell
|
||||
npm install @primer/css --save
|
||||
```
|
||||
|
||||
### Paths
|
||||
|
||||
Here's what you need to know about how the files are structured in both git and in the published npm module:
|
||||
|
||||
- In git, all of the SCSS source files live in the `src/` directory.
|
||||
- When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
|
||||
|
||||
```scss
|
||||
@import '@primer/css/utilities/index.scss';
|
||||
```
|
||||
|
||||
- All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
|
||||
|
||||
### For a Jekyll site
|
||||
|
||||
Make sure you have [Jekyll](https://jekyllrb.com/) version `3.3.1` or greater with:
|
||||
|
||||
```shell
|
||||
jekyll -v
|
||||
```
|
||||
|
||||
If you have an older version, follow the instructions in the [upgrading docs](https://jekyllrb.com/docs/upgrading/).
|
||||
|
||||
Once you have Jekyll up and running, you will need to add this configuration to your `_config.yml` file. This let's the sass compiler know where your code lives.
|
||||
|
||||
```yml
|
||||
sass:
|
||||
# Where you keep your scss files
|
||||
sass_dir: assets/css/
|
||||
# Where sass should look for other scss
|
||||
load_paths:
|
||||
- node_modules/
|
||||
```
|
||||
|
||||
It's best practice to import all of this scss into one file, usually named `index.scss`. From this file you'll import one or more Primer CSS bundles and any other custom code you write.
|
||||
|
||||
```scss
|
||||
@import '@primer/css/core/index.scss';
|
||||
// These files live in the same directory as the index file.
|
||||
@import './custom-1.scss';
|
||||
@import './custom-2.scss';
|
||||
```
|
||||
|
||||
Here's an example of how it might look if you installed only a few Primer CSS components with some custom variable overrides. The `$blue` uses the default primer blue in the text utilities, then the new blue in `"custom-that-uses-primer-variables.scss"` and `.foo`.
|
||||
|
||||
```scss
|
||||
@import '@primer/css/utilities/index.scss';
|
||||
@import 'primer-buttons/index.scss';
|
||||
|
||||
// Import color variables for custom code
|
||||
@import 'primer-support/index.scss';
|
||||
|
||||
// Override default blue
|
||||
$blue: #0000ff;
|
||||
|
||||
@import './custom-that-uses-primer-variables.scss';
|
||||
|
||||
.foo {
|
||||
background: $blue;
|
||||
font-size: $h2-size;
|
||||
color: $text-gray;
|
||||
}
|
||||
```
|
||||
|
||||
Don't forget to add the compiled CSS to the `<head>` section of your page.
|
||||
|
||||
```html
|
||||
<link href="path/to/style.css" rel="stylesheet" />
|
||||
```
|
||||
### Troubleshooting Jekyll errors
|
||||
|
||||
Currently [jekyll-sass-converter](https://github.com/jekyll/jekyll-sass-converter) uses the [deprecated `LibSass` library](https://github.com/jekyll/jekyll-sass-converter#sass-implementations). Due to this you might run into issues. One way to deal with this is to use an experimental version of `jekyll-sass-converter` which uses [dart sass](https://sass-lang.com/dart-sass).
|
||||
|
||||
1. Add `jekyll-sass-converter` and `sass-embedded` to `Gemfile`:
|
||||
```ruby
|
||||
group :jekyll_plugins do
|
||||
gem 'jekyll-sass-converter', github: 'jekyll/jekyll-sass-converter'
|
||||
gem 'sass-embedded'
|
||||
end
|
||||
```
|
||||
2. Run `bundle install`
|
||||
```bash
|
||||
$ bundle install
|
||||
```
|
||||
3. Update your `_config.yml`:
|
||||
```yml
|
||||
sass:
|
||||
implementation: sass-embedded
|
||||
```
|
||||
|
||||
Since GitHub pages is currently [locked to version `1.5.2` of `jekyll-sass-converter`](https://pages.github.com/versions/). If you run into errors you should look into [using the built CSS](#using-primer-css-on-a-static-site).
|
||||
|
||||
## Using Primer CSS on a static site
|
||||
|
||||
You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML:
|
||||
|
||||
```html
|
||||
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
|
||||
```
|
||||
@ -1,99 +0,0 @@
|
||||
---
|
||||
title: Primer CSS
|
||||
---
|
||||
|
||||
import {HeroLayout} from '@primer/gatsby-theme-doctocat'
|
||||
import {Grid, Box, Heading, Text, ButtonOutline, BorderBox} from '@primer/components'
|
||||
import {Link} from 'gatsby'
|
||||
import utilitiesImage from '../src/utilities-image.svg'
|
||||
import componentsImage from '../src/components-image.svg'
|
||||
import typographyImage from '../src/typography-image.png'
|
||||
import colorImage from '../src/color-image.svg'
|
||||
import spacingImage from '../src/spacing-image.svg'
|
||||
|
||||
export default HeroLayout
|
||||
|
||||
# Introduction
|
||||
|
||||
Our goal is to create a system that enables us to build consistent user experiences with ease, yet with enough flexibility to support the broad spectrum of GitHub websites. This goal is embedded in our design and code decisions. Our approach to CSS is influenced by Object Oriented CSS principles, functional CSS, and BEM architecture.
|
||||
|
||||
## Highly reusable, flexible styles
|
||||
|
||||
Styles can be mixed and matched to achieve many different layouts, independent of their location. These styles fall into two categories:
|
||||
|
||||
<Grid gridTemplateColumns={['1fr', '1fr', 'repeat(2, 1fr)']} gridGap={5} my={5}>
|
||||
{[
|
||||
{
|
||||
name: 'Utilities',
|
||||
description: 'Single purpose, immutable styles, that do one thing well.',
|
||||
image: utilitiesImage
|
||||
},
|
||||
{name: 'Components', description: 'Abstracted patterns for frequently used visual styles.', image: componentsImage}
|
||||
].map(({name, description, image}) => (
|
||||
<Box>
|
||||
<img src={image} alt={name} height="60" />
|
||||
<Heading as="h3" pt={3} pb={2} fontSize={3}>
|
||||
{name}
|
||||
</Heading>
|
||||
<p>{description}</p>
|
||||
</Box>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
## Systematically designed for GitHub
|
||||
|
||||
Primer CSS is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other.
|
||||
|
||||
<Box my={5}>
|
||||
{[
|
||||
{
|
||||
name: 'Highly composable spacing scale',
|
||||
description:
|
||||
'The base-8 spacing scale is highly composable and works with the density of GitHub’s content. Margin and padding spacers bring consistency to vertical and horizontal rhythm, while remaining flexible so you can tweak layouts to work for every context.',
|
||||
image: spacingImage
|
||||
},
|
||||
{
|
||||
name: 'Customizable typography',
|
||||
description:
|
||||
'Font size and line-height options work together to result in more sensible numbers. Font styles come in a range of weights and sizes so that we can style appropriately for content and readability. Type utilities allow us to change the visual styles while keeping markup semantic.',
|
||||
image: typographyImage
|
||||
},
|
||||
{
|
||||
name: 'Meaningful color',
|
||||
description:
|
||||
'The color system allows us to add meaningful signals to content and interactions. Color variables and utilities offer thematic styling options without being tied to structure. Text and background colors come in a range of accessible combinations to ensure we build inclusive interfaces.',
|
||||
image: colorImage
|
||||
}
|
||||
].map(({name, description, image}) => (
|
||||
<Grid gridTemplateColumns={['1fr', '1fr', '70px 1fr']} gridGap={5} mb={4} style={{alignItems: 'center'}}>
|
||||
<img src={image} width="70" alt={name} />
|
||||
<Box>
|
||||
<Heading as="h3" pb={2} fontSize={3}>
|
||||
{name}
|
||||
</Heading>
|
||||
<p>{description}</p>
|
||||
</Box>
|
||||
</Grid>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
## Structure
|
||||
|
||||
Primer CSS is published to npm as `@primer/css`. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
|
||||
|
||||
- **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
|
||||
- **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
|
||||
- **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
|
||||
|
||||
<BorderBox bg="gray.1" p={5} mt={5}>
|
||||
<Heading as="h2" fontSize={3} pb={2}>
|
||||
Use Primer CSS in your project
|
||||
</Heading>
|
||||
<Text as="p" m={0}>
|
||||
Pick and choose what you need. Install the entire Primer CSS bundle or import individual folders.
|
||||
</Text>
|
||||
<br/>
|
||||
<ButtonOutline as={Link} to="/getting-started" mt={4} style={{textDecoration: 'none'}}>
|
||||
Installation instructions
|
||||
</ButtonOutline>
|
||||
</BorderBox>
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Marketing
|
||||
path: marketing/index
|
||||
---
|
||||
|
||||
The marketing components and utilities are meant for marketing pages. Note that on github.com they are not available for product pages.
|
||||
@ -1,191 +0,0 @@
|
||||
---
|
||||
title: Accessibility
|
||||
path: principles/accessibility
|
||||
---
|
||||
|
||||
Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers.
|
||||
|
||||
|
||||
|
||||
## Overview
|
||||
|
||||
Our products should be accessible to all. At minimum, features should comply to the requirements listed in [508 Reference Guide - 1194.22](https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22) from the US Access Board, and conform to [Web Content Accessibility Guidelines 2.0](https://www.w3.org/TR/WCAG20/#conformance) at Level AA.
|
||||
|
||||
Making our products accessible benefits everyone, not just people with disabilities. Below are some examples of use cases in which accessibility is important:
|
||||
|
||||
- **Visual**: blindness, low vision, color blindness, using a screen reader or related assistive tech for lifestyle reasons (e.g. long car commute), machine readability and screen scraping technologies
|
||||
|
||||
- **Hearing**: deafness, hearing impairment, speech impairment, using closed captioning or other assistive features for lifestyle reasons (e.g. coworking in a loud coffee shop)
|
||||
|
||||
- **Cognitive**: including short-term memory issues, dyslexia, learning disabilities, trying to work or consume content while distracted or multitasking, etc.
|
||||
|
||||
- **Mobility**: mobility impairments, repetitive stress injuries, power users who love keyboard shortcuts, busy parents holding a sleeping child while trying to operate a computer with one hand, etc.
|
||||
|
||||
## General guidelines
|
||||
|
||||
### Semantic markup
|
||||
|
||||
Always use semantic HTML elements, like `button`, `ul`, `nav`. Most modern browsers implement the accessibility features outlined in the specs for these elements; without them, elements will need additional [ARIA attributes and roles](https://www.w3.org/WAI/PF/aria) to be recognized by assistive technologies.
|
||||
|
||||
Elements like `h1`-`h6`, `nav`, `footer`, `header` have [meaningful roles](https://www.w3.org/WAI/PF/aria/roles) assigned, so use them carefully. This can help assistive technologies read the page better and help users find information quicker.
|
||||
|
||||
Only use a `div` or a `span` to markup up content when there isn't another HTML element that would semantically be more appropriate, or when an element is needed exclusively for applying CSS styles or JS behaviors.
|
||||
|
||||
```html
|
||||
<!-- Do: Button can be focused and tabbed to. -->
|
||||
<button type="button" class="btn">Send</button>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Don't: Button can't be focused and tabbed to. -->
|
||||
<span class="btn">Send</span>
|
||||
```
|
||||
|
||||
> More on semantic markup:
|
||||
>
|
||||
> - [Semantic Structure – WebAIM](http://webaim.org/techniques/semanticstructure/)
|
||||
|
||||
### Keyboard accessibility
|
||||
|
||||
Make sure elements can be reached via tabbing, and actions can be triggered with a keyboard. Using semantic markup is especially important in this case as it ensures that actionable elements are tabbable and triggerable without a mouse. Note that elements positioned off-screen are still tabbable, but those hidden with `display: none` or `visibility: hidden` are effectively removed from content since they are neither read by screen readers nor reachable by keyboard.
|
||||
|
||||
Tab order is determined by the order of elements in the DOM, and not by their visual positioning on the page after CSS is applied. CSS properties `float` and `order` for flex items are two common sources for disconnection between visual and DOM order.
|
||||
|
||||
The `tabindex` attribute should only be used when absolutely necessary.
|
||||
|
||||
- `tabindex=0/-1` makes an element focusable, while `tabindex=0` also includes the element in the normal tab order. In both cases, keyboard triggers of the element still require scripting, so where possible, use [interactive content](http://w3c.github.io/html/dom.html#kinds-of-content-interactive-content) instead.
|
||||
|
||||
- `tabindex=1+` takes an element to the very front of the default tab order. When it's applied, the element's visual positioning is no longer indicative of its tab order, and the only way to find out where an element is would be by tabbing through the page. Therefore, unless a page is carefully designed around elements with positive tabindex, it is very error-prone, and thus currently prohibited in github.com.
|
||||
|
||||
Finally, bear in mind that some assistive technologies have keyboard combinations of their own that will override the combination on the web page, so don't rely on keyboard shortcuts as the only alternative to mouse actions.
|
||||
|
||||
```html
|
||||
<!-- Do: Tab order can be guessed. -->
|
||||
<button type="button" class="btn">1</button>
|
||||
<button type="button" class="btn">2</button>
|
||||
<button type="button" class="btn">3</button>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Don't: The second button's tab order is unexpected. -->
|
||||
<button type="button" class="btn">1</button>
|
||||
<button type="button" class="btn" tabindex="1">2</button>
|
||||
<button type="button" class="btn">3</button>
|
||||
```
|
||||
|
||||
> More on keyboard accessibility:
|
||||
>
|
||||
> - [Focus Order – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html)
|
||||
> - [Time to revisit accesskey? by Léonie Watson](http://tink.uk/time-to-revisit-accesskey/)
|
||||
> - [Flexbox & the keyboard navigation disconnect by Léonie Watson](http://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
|
||||
|
||||
### Visual accessibility
|
||||
|
||||
Be mindful when using small font size, thin font weight, low contrast colors in designs as it can severely affect usability.
|
||||
|
||||
Instead of relying solely on color to communicate information, always combine color with another factor, like shape or position change. This is important because some colors can be hard to tell apart due to color blindness or weak eyesight.
|
||||
|
||||
> More on visual accessibility:
|
||||
>
|
||||
> - [Use of Color – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html)
|
||||
> - [Contrast – Understanding WCAG 2.0](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
|
||||
|
||||
### Text and labels
|
||||
|
||||
Make sure text-based alternative is always available when using icons, images, and graphs, and that the text by itself presents meaningful information.
|
||||
|
||||
```html
|
||||
<!-- Do: Link text communicates destination. -->
|
||||
<p>Find out more about <a href="#url">GitHub Enterprise pricing</a>.<br></p>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Don't: "Click here" is not meaningful. -->
|
||||
<p>To find out more about GitHub Enterprise pricing, <a href="#url">click here</a>.</p>
|
||||
```
|
||||
|
||||
Use `aria-label` when there is no text.
|
||||
|
||||
```html
|
||||
<a href="https://help.github.com/"><%= octicon("question", :"aria-label" => "Help") %></a>
|
||||
```
|
||||
|
||||
### Link responsibly
|
||||
|
||||
Navigating from a list of all the links on a given web page is very common for assistive technology users. We should make sure that the link text itself is meaningful and unique, and there should be as few duplicated references as possible.
|
||||
|
||||
> More on link responsibly:
|
||||
>
|
||||
> - [Link Purpose – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html)
|
||||
|
||||
### Dynamic content
|
||||
|
||||
When using JavaScript to change the content on the page, always make sure that screen reader users are informed about the change. This can be done with `aria-live`, or focus management.
|
||||
|
||||
> More on dynamic content:
|
||||
>
|
||||
> - [ARIA Live Regions – MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
|
||||
|
||||
### Focus management
|
||||
|
||||
Focus management is useful for informing users about updated content, and for making sure users land on the next useful section after performing an action. This means using scripts to change user’s currently focused element, and when focus changes, screen readers will read out change.
|
||||
|
||||
### Accessible forms
|
||||
|
||||
It is common for assistive technology users to jump straight to a form when using a website, so make sure most relevant information is in the form and is labelled properly. Labels and inputs should be associated with the `label[for]` and `input[id]`, and help texts should either be part of the label or be associated with `aria-describedby`.
|
||||
|
||||
```html
|
||||
<!-- Do: Click "Email" label to focus on the input, and help text is read out by screen readers when focusing on the input. -->
|
||||
<label for="test_input">Email</label><br>
|
||||
<input id="test_input" aria-describedby="test_input_help_good" class="width-full my-1" type="email">
|
||||
<div id="test_input_help_good" class="f6">Please enter an email ending with @github.com.</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Don't: Input and label are not associated, and help text is not read out by screen reader when focusing on the input. -->
|
||||
<label>Email</label><br>
|
||||
<input type="email" class="width-full my-1">
|
||||
<div id="test_input_help_bad" class="f6">Please enter an email ending with @github.com.</div>
|
||||
```
|
||||
|
||||
## Development tools
|
||||
|
||||
### Linting
|
||||
|
||||
We currently run basic linting [against positive `tabindex`](https://github.com/github/github/blob/8546895623677abc70f61951642f32c16de231a1/test/fast/linting/accessible_tabindex_test.rb) and [anchor links with `href="#"`](https://github.com/github/github/blob/8546895623677abc70f61951642f32c16de231a1/test/rubocop/cop/rails/link_href.rb).
|
||||
|
||||
We do client side scanning of inaccessible elements in development environment. The inaccessible elements will be styled with red borders with an onclick alert and console warnings.
|
||||
|
||||
### External tools
|
||||
|
||||
- Google Chrome provides an [Accessibility Developer Tools extension](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb). Once installed, go to Audits tab in developer tools, tick Accessibility. It scans the page for violations and suggests solutions.
|
||||
|
||||
- If you're working on a design that uses color to communicate something, grab the [Chromatic Vision Simulator app](https://itunes.apple.com/tw/app/chromatic-vision-simulator/id389310222?mt=8), this will let you use your iPhone camera to see what a colorblind person would see.
|
||||
|
||||
- Check out [the Web Accessibility showcase on GitHub](https://github.com/showcases/web-accessibility). GitHubbers are free to add more projects to the showcase.
|
||||
|
||||
## Manual testing
|
||||
|
||||
### Screen reader
|
||||
|
||||
To use VoiceOver, the built-in screen reader for Mac, just hit <kbd>⌘</kbd> + <kbd>F5</kbd>. This will start voice narration and display most of the spoken information in a text box.
|
||||
|
||||
Use <kbd>alt</kbd> + <kbd>control</kbd> + <kbd>left/right</kbd> to navigate a web page. <kbd>alt</kbd> + <kbd>control</kbd> + <kbd>space</kbd> to click on an element. For more help with VoiceOver, check out the built-in tutorial in `System Preferences > Accessibility > VoiceOver > Open VoiceOver Training`.
|
||||
|
||||
Keep in mind that behaviors in different screen readers can differ when navigating the same web page; just like designing for different browsers, when it comes to accessibility, it is not just the implementation of the browsers that can be different, but also the ones of assistive softwares.
|
||||
|
||||
## Internal resources
|
||||
|
||||
1. You can mention these teams when looking for help:
|
||||
|
||||
- [@github/accessibility](https://github.com/orgs/github/teams/accessibility): GitHubbers interested in accessibility related topics and work on website accessibility issues.
|
||||
- [@github/colorblind](https://github.com/orgs/github/teams/colorblind): GitHubbers who are interested in accessibility for colorblindness.
|
||||
|
||||
2. Go to #accessibility Slack channel to ask questions or discuss accessibility issues.
|
||||
3. Check [github/accessibility repository](https://github.com/github/accessibility) for information on events or learning resources.
|
||||
|
||||
## User support
|
||||
|
||||
Accessibility is a priority for us, if you ever encounter accessibility related issues when using github.com, please don’t hesitate to reach out to us via [the contact page](https://github.com/contact) or email us at [support@github.com](mailto:support@github.com), we will try our best to assist.
|
||||
|
||||
For information about the accessibility compliance of GitHub products, please refer to our [VPAT report, outlining §508 accessibility information for GitHub.com, GitHub Enterprise, and GitHub Desktop](https://government.github.com/accessibility/).
|
||||
@ -1,85 +0,0 @@
|
||||
---
|
||||
title: HTML
|
||||
path: principles/html
|
||||
---
|
||||
|
||||
|
||||
|
||||
## General formatting
|
||||
|
||||
* Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person's environment.
|
||||
* Paragraphs of text should always be placed in a `<p>` tag. Never use multiple `<br>` tags.
|
||||
* Items in list form should always be in `<ul>`, `<ol>`, or `<dl>`. Never use a set of `<div>` or `<p>`.
|
||||
* Every form input that has text attached should utilize a `<label>` tag. **Especially radio or checkbox elements.**
|
||||
* Even though quotes around attributes is optional, always put quotes around attributes for readability.
|
||||
* Avoid writing closing tag comments, like `<!-- /.element -->`. This just adds to page load time. Plus, most editors have indentation guides and open-close tag highlighting.
|
||||
* Avoid trailing slashes in self-closing elements. For example, `<br>`, `<hr>`, `<img>`, and `<input>`.
|
||||
* Don't set `tabindex` manually—rely on the browser to set the order.
|
||||
|
||||
```html inert=true
|
||||
<p class="line-note m-0" data-attribute="106">
|
||||
This is my paragraph of special text.
|
||||
</p>
|
||||
```
|
||||
|
||||
## Boolean attributes
|
||||
|
||||
Many attributes don't require a value to be set, like `checked`, so don't set them.
|
||||
|
||||
```html inert=true
|
||||
<input type="checkbox" value="1" checked>
|
||||
|
||||
<select>
|
||||
<option value="1" selected>1</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
For more information, [read the WhatWG section](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes).
|
||||
|
||||
## Lean markup
|
||||
|
||||
Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. For example:
|
||||
|
||||
```html inert=true
|
||||
<!-- Not so great -->
|
||||
<span class="avatar">
|
||||
<img src="https://github.com/github.png">
|
||||
</span>
|
||||
|
||||
<!-- Better -->
|
||||
<img class="avatar" src="https://github.com/github.png">
|
||||
```
|
||||
|
||||
## Forms
|
||||
|
||||
* Lean towards radio or checkbox lists instead of select menus.
|
||||
* Wrap radio and checkbox inputs and their text in `<label>`s. No need for `for` attributes here—the wrapping automatically associates the two.
|
||||
* Form buttons should always include an explicit `type`. Use primary buttons for the `type="submit"` button and regular buttons for `type="button"`.
|
||||
* The primary form button must come first in the DOM, especially for forms with multiple submit buttons. The visual order should be preserved with `float: right;` on each button.
|
||||
|
||||
## Tables
|
||||
|
||||
Make use of `<thead>`, `<tfoot>`, `<tbody>`, and `<th>` tags (and `scope` attribute) when appropriate. (Note: `<tfoot>` goes above `<tbody>` for speed reasons. You want the browser to load the footer before a table full of data.)
|
||||
|
||||
```html inert=true
|
||||
<table summary="This is a chart of invoices for 2011.">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Table header 1</th>
|
||||
<th scope="col">Table header 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Table footer 1</td>
|
||||
<td>Table footer 2</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Table data 1</td>
|
||||
<td>Table data 2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
@ -1,207 +0,0 @@
|
||||
---
|
||||
title: Principles
|
||||
path: principles/index
|
||||
---
|
||||
|
||||
The CSS styleguide enables us to create a consistent user experience across GitHub, manage CSS bloat, and make our CSS easier to maintain. These principles should serve as guidelines for how we write and use CSS.
|
||||
|
||||
|
||||
|
||||
|
||||
## Styleguide driven design and development
|
||||
|
||||
Every time new CSS is added it increases our CSS bloat, CSS maintenance, and can add to inconsistencies in the user experience of our site. If we follow a practice of designing with styles in the styleguide first and try to implement our designs with only styles in the style guide first, we reduce the risk of deviating away from these styles.
|
||||
|
||||
_If new styles are needed:_
|
||||
* Use global variables where appropriate, such as spacing, typography, and color variables.
|
||||
* Write styles in a way that can be folded back into the global style guide should it become a common pattern, i.e. following our principles for naming conventions, components, and utilities as listed below.
|
||||
|
||||
|
||||
## Obvious and transparent
|
||||
|
||||
Many designers and developers will edit and add to our CSS. Write CSS in a way that make it obvious and transparent what the CSS does, and support with comments wherever needed.
|
||||
|
||||
**Class names:**
|
||||
|
||||
* Use class names that make it easy to understand what styles are being applied.
|
||||
* Keep naming conventions consistent so that it's easier to internalize and understand class names. For components follow the [BEM-style syntax](#bem-style-naming-and-structure) described below.
|
||||
* Don't use class names that suggest the styles do one thing, but instead have hidden properties.
|
||||
* Use presentational or functional class names and avoid tying class names for global styles to as specific page or feature.
|
||||
|
||||
```scss
|
||||
// Do
|
||||
.bg-white { background-color: #fff; }
|
||||
|
||||
.box {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
// Don't
|
||||
.bg-white {
|
||||
color: #111;
|
||||
background-color: #fff;
|
||||
border: #ccc;
|
||||
}
|
||||
|
||||
.teams-side-panel {
|
||||
width: 330px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
**Sass:**
|
||||
|
||||
* Choose verbose over clever. A little duplication is worthwhile if it adds clarity.
|
||||
* Don't prioritize being DRY if it means it's hard to read and understand, creates dependencies, or hides what the code is really doing.
|
||||
* Avoid overusing pre-processor features that make the code less approachable. Keep it CSS'y and limit the use of Sass features like nesting, variables, functions. For more detail on this check out our [Sass guidelines and lint rules](/principles/scss).
|
||||
|
||||
|
||||
## Components
|
||||
|
||||
Components make it easier to mark up a set of elements that are commonly grouped together with similar visual styles. Their base styles are shared and variants are added with modifier classes, so usually components are comprised of multiple classes. Most importantly, components should be highly reusable across the site, rather than built for specific pages or features. To achieve this:
|
||||
|
||||
* **Separate structure and skin:** This means to define repeating visual features (like background and border styles) as separate “skins” that you can mix-and-match with your various components to achieve a large amount of visual variety without much code.
|
||||
* **Separate container and content:** Essentially, this means “rarely use location-dependent styles”. A component should look the same no matter where you put it.
|
||||
|
||||
```scss
|
||||
// structure
|
||||
.flash {...}
|
||||
|
||||
// skin
|
||||
.flash-error {...}
|
||||
```
|
||||
|
||||
## BEM-style naming and structure
|
||||
|
||||
Components should follow the [Block Element Modifier](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) (BEM) model in terms of structure. We've chosen to use a modified form of BEM syntax using [uppercase](https://en.wikipedia.org/wiki/Uppercase) for the block name, hyphens and lowercase for elements, and double-hyphens and lowercase for modifiers. When a block class requires two words use [Pascal case](https://en.wikipedia.org/wiki/PascalCase), for example `ProgressBar`. When an element or modifier class requires two words use [camel case](https://en.wikipedia.org/wiki/camelCase), for example `[Component]-closeButton` or `[Component]--extraLarge`.
|
||||
|
||||
* **Block**: A block includes all of the base styles you want shared across every variation of a component. Minimal thematic styling should be applied to blocks, particularly when variations of a component include visual variations. Apply additional styles with modifiers rather than overriding base styles.
|
||||
* **Element**: An element is part of a component. Elements should work together with other elements and can have modifiers. Element styles should not override block styles - this often results in applying more styles directly to elements rather than having styles flow down from the parent level.
|
||||
* **Modifier**: A modifier is a variation that can be applied to the base component or to an element within the component. Modifiers shouldn't override block styles, they should add onto them.
|
||||
|
||||
```scss
|
||||
// block
|
||||
.Box {...}
|
||||
|
||||
// elements
|
||||
.Box-header {...}
|
||||
.Box-body {...}
|
||||
.Box-footer {...}
|
||||
.Box-closeButton {...}
|
||||
|
||||
// modifiers
|
||||
.Box--blue {...}
|
||||
.Box--large {...}
|
||||
.Box--extraLarge {...}
|
||||
```
|
||||
|
||||
## Property order
|
||||
For base styles and components follow the following property order.
|
||||
|
||||
```scss
|
||||
.element {
|
||||
// 1. Positioning
|
||||
// 2. Box model (display, float, width, etc)
|
||||
// 3. Typography (font, line-height, text-*)
|
||||
// 4. Visuals (background, border, opacity)
|
||||
// 5. Misc (CSS3 properties)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Utilities
|
||||
Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles. When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.
|
||||
|
||||
* Utilities should do one job well and one job only, are immutable, and on occasion are an acceptable approach to overriding component styles.
|
||||
* Utility class-names should be transparent and clearly describe the job they do.
|
||||
|
||||
Examples:
|
||||
|
||||
```scss
|
||||
.text-white { color: #fff !important; }
|
||||
|
||||
.bg-gray-light { background-color: #ddd !important; }
|
||||
|
||||
.mr-1 { margin-right: $spacer !important; }
|
||||
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
|
||||
.rounded { border-radius: 3px !important; }
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Feature-specific Sass
|
||||
|
||||
It's inevitable that we'll need to write some custom styles for new features on occasion. This should only be done when implementing the design cannot be achieved with utility or component styles. Follow these guidelines when writing custom Sass:
|
||||
|
||||
* Don't override global component and utility styles.
|
||||
* Name-space to the feature at the beginning of the classname and follow with the element description.
|
||||
* Write custom styles in a way that may be folded back into the styleguide should the pattern become useful across the site, i.e. follow BEM structure for building components.
|
||||
|
||||
```scss
|
||||
// Do
|
||||
// Custom background for Git Merge ad
|
||||
.git-merge-box {
|
||||
padding: $spacer-6;
|
||||
background-color: #222;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
// Don't
|
||||
.git-merge-box {
|
||||
.boxed-group {
|
||||
padding: 48px;
|
||||
background-color: #222;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Inline styles
|
||||
|
||||
Inline styles are performant and deal with one off use cases that don't need to live in CSS. Sometimes it will make more sense to add an inline style than write a new line of CSS that will live on in our codebase longer than the markup will.
|
||||
|
||||
The most common use case is for applying widths and heights to images. Other use cases might be to apply a custom width to a div to work with it's content.
|
||||
|
||||
```html
|
||||
<!-- Image width and height -->
|
||||
<img width="20" height="20" src="https://github.com/github.png">
|
||||
|
||||
<!-- Custom width for a div that is not a repeated pattern -->
|
||||
<div class="d-table-cell py-3 pr-3" style="width: 72px">
|
||||
```
|
||||
|
||||
## Further reading
|
||||
|
||||
There's a lot happening in the world of front-end web development! To help you understand our principles better, we've put together a list articles that reflect our thinking and influenced our decisions.
|
||||
|
||||
**[About HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)**<br/>
|
||||
This article contains a collection of thoughts on HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. Many of the concepts covered here have been adopted as best practices in modern front-end development. This is a must read!
|
||||
|
||||
**[BEMantic: DRY Like You Mean It](https://medium.com/@stowball/bemantic-dry-like-you-mean-it-133ea3843d98#.snpgwck6f)**<br/>
|
||||
A case for taking an object oriented approach to writing CSS using Sass and BEM.
|
||||
|
||||
**[The media object saves hundreds of lines of code](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)**<br/>
|
||||
The media object—a block with an image on the left and content on the right—is an extremely common pattern on web pages. This article explores ways to write a flexible and versatile media object, and is a great example of how an object oriented CSS approach can help you write more reusable code.
|
||||
|
||||
**[OOCSS wiki](https://github.com/stubbornella/oocss/wiki)**<br/>
|
||||
The Object Oriented CSS framework is a collection of code that’s built using the OOCSS approach. The OOCSS approach is a way of writing CSS that’s fast, maintainable, and standards-based. This framework can help you get started.
|
||||
|
||||
**[The Importance of !important: Forcing Immutability in CSS](http://csswizardry.com/2016/05/the-importance-of-important/)**<br/>
|
||||
This article is a case for using the `!important` flag in CSS, and describes the best ways to use it.
|
||||
|
||||
**[The Specificity Graph](http://csswizardry.com/2014/10/the-specificity-graph/)**<br/>
|
||||
This is a guide to organizing your project's CSS selectors by specificity. Using the specificity graph, you can plot the health of a project's CSS and identify areas with higher-than-ideal specificity.
|
||||
|
||||
**[CSS Guidelines](http://cssguidelin.es/)**<br/>
|
||||
High-level advice and guidelines for writing sane, manageable, scalable CSS.
|
||||
|
||||
**[WTF, HTML and CSS?](http://wtfhtmlcss.com/)**<br/>
|
||||
A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.
|
||||
|
||||
**[Solved by flexbox](https://philipwalton.github.io/solved-by-flexbox/)**<br/>
|
||||
A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
title: SCSS
|
||||
path: principles/scss
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Spacing
|
||||
|
||||
* Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person's environment.
|
||||
* Put spaces after `:` in property declarations.
|
||||
* Put spaces before `{` in rule declarations.
|
||||
* Put line breaks between rulesets.
|
||||
* When grouping selectors, keep individual selectors to a single line.
|
||||
* Place closing braces of declaration blocks on a new line.
|
||||
* Each declaration should appear on its own line for more accurate error reporting.
|
||||
|
||||
## Formatting
|
||||
|
||||
* Use hex color codes `#000` unless using `rgba()` in raw CSS (the SCSS `rgba()` function is overloaded to accept hex colors, as in `rgba(#000, .5)`).
|
||||
* Use `//` for comment blocks (instead of `/* */`).
|
||||
* Avoid specifying units for zero values, e.g., `margin: 0;` instead of `margin: 0px;`.
|
||||
* Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values.
|
||||
|
||||
## Guidelines for using Sass features (WIP)
|
||||
_When and when not to create:_
|
||||
|
||||
* Variables
|
||||
* Mixins
|
||||
* Functions
|
||||
|
||||
## Lint rules (WIP)
|
||||
|
||||
As a rule of thumb, avoid unnecessary nesting in SCSS. At most, aim for three levels. If you cannot help it, step back and rethink your overall strategy (either the specificity needed, or the layout of the nesting).
|
||||
|
||||
* Nesting depth: 3
|
||||
* Extends: no
|
||||
* Duplicated properties: no
|
||||
* Final new lines: yes
|
||||
* Hex length: 6
|
||||
* ID selectors: no
|
||||
* Leading zero: yes
|
||||
* Naming format: lowercase-with-hyphens
|
||||
* Property order: see [HTML property order](./html)
|
||||
* Selector depth: 3
|
||||
* Single line properties: yes
|
||||
|
||||
## Examples
|
||||
|
||||
Here are some good examples that apply the above guidelines:
|
||||
|
||||
```scss
|
||||
// Example of good basic formatting practices
|
||||
.styleguide-format {
|
||||
color: #000;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
border: 1px solid #0f0;
|
||||
}
|
||||
|
||||
// Example of individual selectors getting their own lines (for error reporting)
|
||||
.multiple,
|
||||
.classes,
|
||||
.get-new-lines {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Avoid unnecessary shorthand declarations
|
||||
.not-so-good {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.good {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
```
|
||||
@ -1,216 +0,0 @@
|
||||
---
|
||||
title: Sticker Sheet
|
||||
path: stickersheet/
|
||||
---
|
||||
|
||||
### Light/Dark
|
||||
|
||||
```html live
|
||||
|
||||
<div class="d-flex overflow-x-auto">
|
||||
<div class="flex-1 p-4 overflow-x-auto" data-color-mode="light">
|
||||
|
||||
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> Icon
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 Counter">1.5K</span> Counter
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2">Label</span>
|
||||
<span class="Label mr-2 Label--red" >Danger</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 IssueLabel color-bg-accent-emphasis color-fg-on-emphasis">IssueLabel</span>
|
||||
<span class="mr-2 IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis">IssueLabel</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<button class="mr-2 btn" type="button">Button</button>
|
||||
<button class="mr-2 btn btn-primary" type="button">Primary</button>
|
||||
<div class="my-2"></div>
|
||||
<button class="mr-2 btn btn-outline" type="button">Outline</button>
|
||||
<button class="mr-2 btn btn-danger" type="button">Danger</button>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<select class="form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<input class="form-control" type="text" placeholder="Input" />
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="flash">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div><!-- end light -->
|
||||
<div class="flex-1 p-4 overflow-x-auto" data-color-mode="dark"><!-- ------------------------ -->
|
||||
|
||||
|
||||
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> Icon
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 Counter">1.5K</span> Counter
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2">Label</span>
|
||||
<span class="Label mr-2 Label--red" >Danger</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 IssueLabel color-bg-accent-emphasis color-fg-on-emphasis">IssueLabel</span>
|
||||
<span class="mr-2 IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis">IssueLabel</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<button class="mr-2 btn" type="button">Button</button>
|
||||
<button class="mr-2 btn btn-primary" type="button">Primary</button>
|
||||
<div class="my-2"></div>
|
||||
<button class="mr-2 btn btn-outline" type="button">Outline</button>
|
||||
<button class="mr-2 btn btn-danger" type="button">Danger</button>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<select class="form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<input class="form-control" type="text" placeholder="Input" />
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<nav class="UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="flash">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div><!-- end dark -->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Temporary overrides (don't use in production) -->
|
||||
<style> .frame-example { padding: 0 !important; } </style>
|
||||
<link href="https://unpkg.com/@github/details-dialog-element/dist/index.css" rel="stylesheet" />
|
||||
|
||||
```
|
||||
@ -1,130 +0,0 @@
|
||||
---
|
||||
title: Labels
|
||||
path: stickersheet/labels
|
||||
status: Deprecated
|
||||
source: 'https://github.com/primer/css/tree/main/src/labels'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
```html live
|
||||
<p class="mb-4 col-4">
|
||||
The base <span class="Label Label--inline"> label </span> component styles the text, adds <span class="Label Label--inline">padding</span> and rounded corners, and a border. Labels come in various themes which apply different colors.
|
||||
</p>
|
||||
|
||||
<div class="mb-4">Hello <span class="Label mr-1">world</span></div>
|
||||
|
||||
<div class="mb-2 f6">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f5">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f4">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f3">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f2">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f1">Hello <span class="Label mr-1">world</span></div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2 Label--gray">Gray</span>
|
||||
<span class="Label mr-2">Default</span>
|
||||
<span class="Label mr-2 Label--gray-darker">Dark gray</span>
|
||||
<span class="Label mr-2 Label--yellow">Pending</span>
|
||||
<span class="Label mr-2 Label--orange">Warning</span>
|
||||
<span class="Label mr-2 Label--red" >Error</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label Label--large mr-2 Label--gray">Gray</span>
|
||||
<span class="Label Label--large mr-2">Default</span>
|
||||
<span class="Label Label--large mr-2 Label--gray-darker">Dark gray</span>
|
||||
<span class="Label Label--large mr-2 Label--yellow">Pending</span>
|
||||
<span class="Label Label--large mr-2 Label--orange">Warning</span>
|
||||
<span class="Label Label--large mr-2 Label--red" >Error</span>
|
||||
<span class="Label Label--large mr-2 Label--green" >Success</span>
|
||||
<span class="Label Label--large mr-2 Label--blue" >Info</span>
|
||||
|
||||
<hr class="my-4"><!-- Divider ------------------------ -->
|
||||
|
||||
<span class="IssueLabel color-bg-accent-emphasis color-fg-on-emphasis mr-2">Primer</span>
|
||||
<span class="IssueLabel mr-2" style="background-color: #e5bffc;">
|
||||
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
|
||||
</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis mr-2">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big mr-2" style="background-color: #e5bffc;">
|
||||
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
|
||||
</span>
|
||||
```
|
||||
|
||||
### States
|
||||
|
||||
```html live
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State State--small mr-2">Default</span>
|
||||
<span class="State State--small State--green mr-2">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--small State--red mr-2">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Counters
|
||||
|
||||
```html live
|
||||
<span class="Counter mr-1">1</span>
|
||||
<span class="Counter mr-1 Counter--gray-light">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<span class="Counter mr-1">
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 color-bg-danger-emphasis color-fg-on-emphasis">22</span>
|
||||
<span class="Counter mr-1 color-bg-success-emphasis color-fg-on-emphasis">22</span>
|
||||
<span class="Counter mr-1 color-bg-accent-emphasis color-fg-on-emphasis">22</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Counter mr-1 Counter--gray-light">1</span>
|
||||
<span class="Counter mr-1">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<div class="my-2"></div>
|
||||
<span class="Counter Counter--small mr-1 Counter--gray-light">1</span>
|
||||
<span class="Counter Counter--small mr-1">23</span>
|
||||
<span class="Counter Counter--small mr-1 Counter--gray">456</span>
|
||||
<span class="Counter Counter--small mr-1">1.5K</span>
|
||||
```
|
||||
@ -1,95 +0,0 @@
|
||||
---
|
||||
title: Sticker Sheet
|
||||
path: stickersheet/sizes
|
||||
---
|
||||
|
||||
### Sizes
|
||||
|
||||
```html live
|
||||
|
||||
<span class="d-inline-block col-1 color-fg-subtle">16px</span>
|
||||
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-fg-subtle">20px</span>
|
||||
<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label">Label</span>
|
||||
<span class="mr-3 IssueLabel color-bg-accent-emphasis color-fg-on-emphasis">IssueLabel</span>
|
||||
<span class="mr-3 Counter">1.5K</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-fg-subtle">24px</span>
|
||||
<img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label Label--large">Label</span>
|
||||
<span class="mr-3 IssueLabel IssueLabel--big color-bg-accent-emphasis color-fg-on-emphasis">IssueLabel</span>
|
||||
<span class="mr-3 State State--small">State</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-fg-subtle">28px</span>
|
||||
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn btn-sm" type="button">Button</button>
|
||||
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-fg-subtle">32px</span>
|
||||
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn" type="button">Button</button>
|
||||
<input class="mr-3 form-control" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
<nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
<span class="mr-3 State">State</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-fg-subtle">40px</span>
|
||||
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
|
||||
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 4</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-fg-subtle">48px</span>
|
||||
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
|
||||
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-fg-subtle">64px</span>
|
||||
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
|
||||
<div class="mr-3 Header d-inline-block v-align-middle">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
@ -1,139 +0,0 @@
|
||||
---
|
||||
title: Breakpoints
|
||||
path: support/breakpoints
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/main/src/support/variables/layout.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
Our breakpoints are based on screen widths where our content starts to break. **Our breakpoints may change as we move more of the product into responsive layouts.**
|
||||
|
||||
We use abbreviations for each breakpoint to keep the class names concise. This abbreviated syntax is used consistently across responsive styles. Responsive styles allow you to change the styles properties at each breakpoint. For example, when using column widths for grid layouts, you can specify that the width is 12 columns wide by default, 8 columns from the medium breakpoint, and 4 columns wide from the extra large breakpoint: `<div class="col-12 col-md-8 col-xl-4">...</div>`.
|
||||
|
||||
| Breakpoint | Syntax | Breaks at |
|
||||
| ----------- | ------ | ----------|
|
||||
| Small | sm | `544px` |
|
||||
| Medium | md | `768px` |
|
||||
| Large | lg | `1012px` |
|
||||
| Extra-large | xl | `1280px` |
|
||||
|
||||
Responsive styles are available for [margin](/utilities/margin#responsive-margins), [padding](/utilities/padding#responsive-padding), [layout](/utilities/layout), [flexbox](/utilities/flexbox#responsive-flex-utilities), the [grid](/utilities/grid#responsive-grids) system, and many more.
|
||||
|
||||
## Breakpoint and up... 🛫
|
||||
|
||||
In most cases, breakpoints get used with the `min-width` media query. This means that when using a responsive utility class, the class becomes "enabled" from the breakpoint on upwards. Or from the browser's perspective, when the browser's width **is** the breakpoint or **wider**.
|
||||
|
||||
| Breakpoint | Syntax | Is enabled... |
|
||||
| ----------- | ------ | -------------------------|
|
||||
| None | | from `0px` upwards -> |
|
||||
| Small | sm | from `544px` upwards -> |
|
||||
| Medium | md | from `768px` upwards -> |
|
||||
| Large | lg | from `1012px` upwards -> |
|
||||
| Extra-large | xl | from `1280px` upwards -> |
|
||||
|
||||
A responsive utility class stays enabled **unless** it gets overridden with another responsive utility class that has a higher breakpoint. Here the example from above `<div class="col-12 col-md-8 col-xl-4">...</div>` visualized:
|
||||
|
||||
```
|
||||
| 0px ->
|
||||
| 544px ->
|
||||
| sm
|
||||
| 768px ->
|
||||
| md
|
||||
| 1012px ->
|
||||
| lg
|
||||
| 1280px ->
|
||||
| xl
|
||||
|
||||
| col-12 ---------> | col-md-8 ----------> | col-xl-4 ->
|
||||
```
|
||||
|
||||
Using breakpoints with the `min-width` media query works great for "mobile first". Design for mobile devices as a default, then if needed, tweak it for wider desktop screens using responsive utility classes.
|
||||
|
||||
Note: The [responsive hide](/utilities/layout#responsive-hide) utilities are an exception and use a range between two breakpoints. They also go the other direction "breakpoint and down... 🛬". For example `.hide-md` hides an element if the browser's width is between `sm <-> md` (`544px - 767px`).
|
||||
|
||||
## Breakpoint variables
|
||||
|
||||
The above values are defined as variables, and then put into a Sass map that generates the media query mixin.
|
||||
|
||||
```scss
|
||||
// breakpoints
|
||||
$width-xs: 0;
|
||||
$width-sm: 544px;
|
||||
$width-md: 768px;
|
||||
$width-lg: 1012px;
|
||||
$width-xl: 1280px;
|
||||
|
||||
$breakpoints: (
|
||||
// Small screen / phone
|
||||
sm: $width-sm,
|
||||
// Medium screen / tablet
|
||||
md: $width-md,
|
||||
// Large screen / desktop (980 + (12 * 2)) <= container + gutters
|
||||
lg: $width-lg,
|
||||
// Extra large screen / wide desktop
|
||||
xl: $width-xl
|
||||
) !default;
|
||||
```
|
||||
|
||||
## Media query mixins
|
||||
|
||||
Use media query mixins when you want to change CSS properties at a particular breakpoint. The media query mixin works by passing in a breakpoint value, such as `breakpoint(md)`.
|
||||
|
||||
Media queries are scoped from each breakpoint and upwards. In the example below, the font size is `28px` until the viewport size meets the `md` breakpoint, from there upwards—including through the `xl` breakpoint—the font size will be `32px`.
|
||||
|
||||
```scss
|
||||
.styles {
|
||||
font-size: 28px;
|
||||
@include breakpoint(md) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Responsive variants
|
||||
|
||||
The `$responsive-variants` variable is a mapping of breakpoints to classname variants, and should be used like so:
|
||||
|
||||
```scss
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
// Note: the first iteration gets `$variant == ""`
|
||||
.overflow#{$variant}-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The resulting CSS would be:
|
||||
|
||||
```css
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
@media (min-width: 544px) {
|
||||
.overflow-sm-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.overflow-md-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1012px) {
|
||||
.overflow-lg-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.overflow-xl-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Caution!**
|
||||
|
||||
1. Don't precede the `#{$variation}` interpolation with a hyphen because the first value of `$variant` will be an empty string.
|
||||
1. For consistency, please put the `@include breakpoint($breakpoint)` call directly inside the `$responsive-variants` loop. This will help keep file sizes small by "batching" selectors in shared `@media` queries.
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
title: Support
|
||||
path: support/index
|
||||
source: 'https://github.com/primer/css/tree/main/src/support'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
|
||||
Primer CSS is built on systems that form the foundation of our styles, and inform the way we write and organize our CSS. Building upon systems helps us make styles consistent and interoperable with each other, and assists us with visual hierarchy and vertical rhythm.
|
||||
|
||||
We use Sass variables to keep color, typography, spacing, and other foundations of our system consistent. Occasionally we use Sass mixins to apply multiple CSS properties, they are a convenient solution for frequently-used verbose patterns.
|
||||
|
||||
We've documented variables, mixins, and the systems they are built on for the following:
|
||||
|
||||
- [Breakpoints](/support/breakpoints)
|
||||
- [Spacing](/support/spacing)
|
||||
- [Theming](/support/theming)
|
||||
- [Typography](/support/typography)
|
||||
@ -1,57 +0,0 @@
|
||||
---
|
||||
title: Spacing
|
||||
path: support/spacing
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/main/src/support/variables/layout.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
import {Text} from '@primer/components'
|
||||
|
||||
## Spacing scale
|
||||
|
||||
The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
|
||||
|
||||
| Variable | Scale | Value |
|
||||
| ----------- | ----- | ----- |
|
||||
| `$spacer-0` | 0 | 0 |
|
||||
| `$spacer-1` | 1 | 4px |
|
||||
| `$spacer-2` | 2 | 8px |
|
||||
| `$spacer-3` | 3 | 16px |
|
||||
| `$spacer-4` | 4 | 24px |
|
||||
| `$spacer-5` | 5 | 32px |
|
||||
| `$spacer-6` | 6 | 40px |
|
||||
|
||||
These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities.
|
||||
|
||||
### Extended spacing scale
|
||||
|
||||
These are primarily useful for achieving bigger vertical spacing between sections. This scale first steps up with `8px` for spacer 7, then steps in increments of `16px` from spacer 8 up to 12.
|
||||
|
||||
| Variable | Scale | Value |
|
||||
| ------------ |-------|-------|
|
||||
| `$spacer-7` | 7 | 48px |
|
||||
| `$spacer-8` | 8 | 64px |
|
||||
| `$spacer-9` | 9 | 80px |
|
||||
| `$spacer-10` | 10 | 96px |
|
||||
| `$spacer-11` | 11 | 112px |
|
||||
| `$spacer-12` | 12 | 128px |
|
||||
|
||||
The extended spacing scale is used for [margin](/utilities/margin) and [padding](/utilities/padding) utilities along the Y-axis, as well as for single side spacing utilities (top, right, bottom, left).
|
||||
|
||||
## Em-based spacing
|
||||
|
||||
Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.
|
||||
|
||||
We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in <Text color="red.5">red</Text> below.
|
||||
|
||||
| Variable | Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
|
||||
| -------------- | -------- | -------------- | -------------------------------- | -------------------- |
|
||||
| `$em-spacer-1` | 1/16 | .0625 | <Text color="red.5">22.75</Text> | 26 |
|
||||
| `$em-spacer-2` | 1/8 | .125 | <Text color="red.5">24.5</Text> | 28 |
|
||||
| `$em-spacer-3` | 1/4 | .25 | 28 | 32 |
|
||||
| `$em-spacer-4` | 3/8 | .375 | <Text color="red.5">31.5</Text> | 36 |
|
||||
| `$em-spacer-5` | 1/2 | .5 | 35 | 40 |
|
||||
| `$em-spacer-6` | 3/4 | .75 | 42 | 48 |
|
||||
|
||||
The variables listed above are preferred for use within components and custom CSS. To calculate values with other font-sizes or em values, we suggest using [Formula](https://jxnblk.github.io/formula/).
|
||||
@ -1,115 +0,0 @@
|
||||
---
|
||||
title: Theming
|
||||
path: getting-started/theming
|
||||
---
|
||||
|
||||
Primer CSS offers multiple color themes for components and utilities. The colors change based on the active theme and color mode. When nothing is specified, Primer CSS uses the `light` theme.
|
||||
|
||||
## Set a theme
|
||||
|
||||
Configure Primer CSS to use a certain theme by setting HTML attributes.
|
||||
|
||||
Theme | data attributes
|
||||
--- | ---
|
||||
Light | `data-color-mode="light" data-light-theme="light"`
|
||||
Dark | `data-color-mode="dark" data-dark-theme="dark"`
|
||||
Dark Dimmed | `data-color-mode="dark" data-dark-theme="dark_dimmed"`
|
||||
Dark High Contrast | `data-color-mode="dark" data-dark-theme="dark_high_contrast"`
|
||||
|
||||
Typically these attributes are added to the document root (`<html>`) to use on the entire page:
|
||||
|
||||
```html
|
||||
<html data-color-mode="dark" data-dark-theme="dark_dimmed">
|
||||
```
|
||||
|
||||
Below an example of all themes to compare:
|
||||
|
||||
```html live
|
||||
<div data-color-mode="light" data-light-theme="light" class="p-3">
|
||||
<h4>Light</h4>
|
||||
<code class="d-block mt-1 mb-3 color-fg-muted">
|
||||
data-color-mode="light" data-light-theme="light"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" class="p-3">
|
||||
<h4>Dark</h4>
|
||||
<code class="d-block mt-1 mb-3 color-fg-muted">
|
||||
data-color-mode="dark" data-dark-theme="dark"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<h4>Dark Dimmed</h4>
|
||||
<code class="d-block mt-1 mb-3 color-fg-muted">
|
||||
data-color-mode="dark" data-dark-theme="dark_dimmed"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark_high_contrast" class="p-3">
|
||||
<h4>Dark High Contrast</h4>
|
||||
<code class="d-block mt-1 mb-3 color-fg-muted">
|
||||
data-color-mode="dark" data-dark-theme="dark_high_contrast"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Sync to the system
|
||||
|
||||
If the theme should be synced to the OS's color mode, use `data-color-mode="auto"` and set a `data-light-theme` as well as a `data-dark-theme`.
|
||||
|
||||
```html live
|
||||
<div data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<h4>Synced to system</h4>
|
||||
<code class="d-block mt-1 mb-3 color-fg-muted">
|
||||
data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed"
|
||||
</code>
|
||||
<button class="btn">Button</button>
|
||||
<span class="Label ml-2">Label</span>
|
||||
<span class="Counter ml-2">123</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
Change the color mode of your OS to see the switch between the `data-light-theme="light"` and `data-dark-theme="dark_dimmed"`.
|
||||
|
||||
## Custom color variables
|
||||
|
||||
It's recommended to use the [functional variables](https://primer.style/primitives/colors#functional-variables) as much as possible. It will guarantee that the variables will work as expected with any new theme that might get added in the future. Sometimes you might still need a custom variable that changes based on the color mode. You can create a custom variable with the `color-variables` mixin.
|
||||
|
||||
```css
|
||||
@include color-variables(
|
||||
("custom-css-variable-1": (
|
||||
light: var(--color-scale-gray-3),
|
||||
dark: var(--color-scale-gray-5)
|
||||
),
|
||||
"custom-css-variable-2": (
|
||||
light: var(--color-scale-gray-2),
|
||||
dark: var(--color-scale-gray-6)
|
||||
),
|
||||
"custom-css-variable-3": (
|
||||
light: var(--color-scale-gray-2),
|
||||
dark: var(--color-scale-gray-6)
|
||||
)
|
||||
));
|
||||
```
|
||||
|
||||
The custom variables will be prefixed with `--color-` and can be used in the same way as other functional variables.
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
color: var(--color-custom-css-variable-1);
|
||||
background-color: var(--color-custom-css-variable-2);
|
||||
border-color: var(--color-custom-css-variable-2);
|
||||
}
|
||||
```
|
||||
@ -1,94 +0,0 @@
|
||||
---
|
||||
title: Typography
|
||||
path: support/typography
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/329'
|
||||
source: 'https://github.com/primer/css/blob/main/src/support/variables/typography.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
## Type scale
|
||||
|
||||
The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
|
||||
|
||||
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./breakpoints) to be larger on desktop.
|
||||
|
||||
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
|
||||
| ----- | ----------------- | ------------------ | ---------------- | --------------- |
|
||||
| 00 | 40px | 48px | 60 | 72 |
|
||||
| 0 | 32px | 40px | 50 | 60 |
|
||||
| 1 | 26px | 32px | 40 | 48 |
|
||||
| 2 | 22px | 24px | 30 | 36 |
|
||||
| 3 | 18px | 20px | 25 | 30 |
|
||||
| 4 | 16px | 16px | 20 | 24 |
|
||||
| 5 | 14px | 14px | 17.5 | 21 |
|
||||
| 6 | 12px | 12px | 15 | 18 |
|
||||
|
||||
The typography scale is used to create [typography utilities](/utilities/typography).
|
||||
|
||||
## Typography variables
|
||||
|
||||
### Font size variables
|
||||
|
||||
```scss
|
||||
// Heading sizes - mobile
|
||||
// h4—h6 remain the same size on both mobile & desktop
|
||||
$h00-size-mobile: 40px;
|
||||
$h0-size-mobile: 32px;
|
||||
$h1-size-mobile: 26px;
|
||||
$h2-size-mobile: 22px;
|
||||
$h3-size-mobile: 18px;
|
||||
|
||||
// Heading sizes - desktop
|
||||
$h00-size: 48px;
|
||||
$h0-size: 40px;
|
||||
$h1-size: 32px;
|
||||
$h2-size: 24px;
|
||||
$h3-size: 20px;
|
||||
$h4-size: 16px;
|
||||
$h5-size: 14px;
|
||||
$h6-size: 12px;
|
||||
```
|
||||
|
||||
### Font weight variables
|
||||
|
||||
```scss
|
||||
$font-weight-bold: 600 !default;
|
||||
$font-weight-light: 300 !default;
|
||||
```
|
||||
|
||||
### Line height variables
|
||||
|
||||
```scss
|
||||
$lh-condensed-ultra: 1 !default;
|
||||
$lh-condensed: 1.25 !default;
|
||||
$lh-default: 1.5 !default;
|
||||
```
|
||||
|
||||
## Typography mixins
|
||||
|
||||
Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/utilities/typography#heading-utilities). which requires no additional CSS.
|
||||
|
||||
Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
|
||||
|
||||
```scss
|
||||
.styles {
|
||||
@include h1;
|
||||
}
|
||||
```
|
||||
|
||||
Responsive heading mixins can be used to adjust the font-size between the `sm` and `lg` breakpoint. Only headings 1—3 are responsive. Heading 4—6 are small enough to remain the same between mobile and desktop. Responsive heading mixins include the font-size and font-weight as well as the media query. To use a responsive heading mixin, postfix the heading with `-responsive`:
|
||||
|
||||
```scss
|
||||
.styles {
|
||||
@include h1-responsive;
|
||||
}
|
||||
```
|
||||
|
||||
Responsive type scale mixins are also available. Type scale mixins apply a font-size that gets slightly bigger at the `lg` breakpoint. They do not apply a font-weight. Like the responsive heading mixins, they are only available for size `f1` to `f3` and are postfixed with `-responsive` as in the example below:
|
||||
|
||||
```scss
|
||||
.style {
|
||||
@include f1-responsive;
|
||||
}
|
||||
```
|
||||
@ -1,15 +0,0 @@
|
||||
---
|
||||
title: Variables
|
||||
path: support/variables
|
||||
status: Stable
|
||||
---
|
||||
|
||||
import {Variables, DeprecationIcon} from '../../src/variables'
|
||||
|
||||
<Variables>
|
||||
|
||||
The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/main/src/support/variables).
|
||||
|
||||
Variables with a <DeprecationIcon /> are planned for [deprecation](../tools/deprecations) in a future version of `@primer/css`, and should be avoided.
|
||||
|
||||
</Variables>
|
||||
@ -1,82 +0,0 @@
|
||||
---
|
||||
title: Deprecation data
|
||||
---
|
||||
|
||||
As of version 12.7.0, we publish CSS selector and SCSS variable deprecation data (as of 14.0.0) with `@primer/css`. You can access the data via the [Node API](#node) or as [JSON](#json).
|
||||
|
||||
To deprecate a class, variable, or mixin, add the element to the [deprecations.js](https://github.com/primer/css/blob/main/deprecations.js) file with it's replacement value.
|
||||
|
||||
The replacement can be:
|
||||
|
||||
* A `String` for a direct replacement.
|
||||
* An `Array` for multiple replacement options.
|
||||
* `null` to indicate there is no replacement.
|
||||
|
||||
This could look something like this:
|
||||
|
||||
```js
|
||||
const deprecations = {
|
||||
"deprecated-1": "replacement",
|
||||
"deprecated-2": ["replacement-1", "replacement-2"],
|
||||
"deprecated-3": null
|
||||
}
|
||||
```
|
||||
|
||||
## JSON
|
||||
|
||||
The JSON data is available in the unpacked node module's `dist/deprecations.json`, and is an object with the following structure:
|
||||
|
||||
```json
|
||||
{
|
||||
"selectors" {...},
|
||||
"variables": {...},
|
||||
"mixins": {...}
|
||||
}
|
||||
```
|
||||
|
||||
* `selectors` is an object mapping CSS selectors to their replacements. If the replacement is an Array, then there's multiple options. If the replacement is null then there are no replacements.
|
||||
|
||||
```json
|
||||
{
|
||||
"selectors": {
|
||||
"deprecated-class": "replacement-class"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* `variables` is an object mapping SCSS variables to their replacement SCSS variable.
|
||||
|
||||
```json
|
||||
{
|
||||
"variables": {
|
||||
"$deprecated-variable": "$replacement-variable"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* `mixins` is an object mapping SCSS mixins to their replacement SCSS mixins.
|
||||
|
||||
```json
|
||||
{
|
||||
"mixins": {
|
||||
"deprecated-mixin": "replacement-mixin"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Node
|
||||
|
||||
The Node API for selector deprecations is available at
|
||||
`@primer/css/deprecations`.
|
||||
|
||||
### Example:
|
||||
|
||||
```js
|
||||
const {
|
||||
deprecatedSelectors,
|
||||
deprecatedSassVariables,
|
||||
deprecatedSassMixins
|
||||
} = require('@primer/css/deprecations')
|
||||
|
||||
```
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Tools
|
||||
path: tools/index
|
||||
---
|
||||
|
||||
Design and development tools for working with the GitHub CSS toolkit.
|
||||
@ -1,99 +0,0 @@
|
||||
---
|
||||
title: Linting
|
||||
path: tools/linting
|
||||
---
|
||||
|
||||
We use linters to enforce [coding principles and standards](/principles). On every pull request we run the linters on the code to make sure any changes meet our standards. When a commit contains code that doesn't meet the standards, the build fails which blocks merging into main and deploying to production.
|
||||
|
||||
For teams working on `github/github` this configuration is all setup for you. While we do recommend you also [setup a plugin](#plugins) in your editor, this is not required.
|
||||
|
||||
For everyone else we encourage you to adopt all or some of these tools in your workflow.
|
||||
|
||||
## CSS
|
||||
|
||||
We use [stylelint](http://stylelint.io/) to lint our CSS. If you are working on `github/github` you don't need to do any setup because stylelint comes bundled within the repository. If you are working on other properties, you may need to setup stylelint. You can install stylelint via npm:
|
||||
|
||||
```
|
||||
npm install -g stylelint
|
||||
```
|
||||
|
||||
Whether you work on `github/github` or not, it's useful to see lint errors locally. The easiest way to lint your code is to install a [plugin](#plugins) in your workflow. If you prefer to run stylelint manually, pass it a glob pattern of the files you want to lint. If you work on `github/github`, you can run stylelint from the command line:
|
||||
|
||||
```
|
||||
bin/stylelint "app/assets/stylesheets/**/*.scss"
|
||||
```
|
||||
|
||||
For more advanced usage, we recommend reading the [stylelint user guide](http://stylelint.io/user-guide/) and checking out our [primer stylelint configuration](https://github.com/primer/stylelint-config).
|
||||
|
||||
### Configuration
|
||||
|
||||
Stylelint is [configured by a JSON file](http://stylelint.io/user-guide/configuration/) that specifies which linter rules we enforce. If you are working on `github/github`, you don't need to do any setup because the configuration is included within the repository bundle.
|
||||
|
||||
We have extracted out our configuration file into a separate repository [primer/stylelint-config](https://github.com/primer/stylelint-config). This gives us a central source where we can keep the configuration up-to-date and distribute easily across all our projects.
|
||||
|
||||
To [use the configuration](https://github.com/primer/stylelint-config#usage) in your project, install the config `npm install --save @primer/stylelint-config` via npm, and extend the config in your `.stylelintrc` file. Put the file in the root directory of your project.
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "@primer/stylelint-config"
|
||||
}
|
||||
```
|
||||
|
||||
A list of all the specific rules we have enabled are documented in [the package README](https://github.com/primer/stylelint-config#documentation).
|
||||
|
||||
### Disabling
|
||||
|
||||
We use linters to help ensure our CSS is written according to our principles. On occasion it's necessary to break those principles and disable a linter. This is usually because of one of the following scenarios:
|
||||
|
||||
- There is no other way to achieve the desired style due to other code limitations, such as the way the views are rendered or the way the content is output (such as rendered markdown).
|
||||
- There is no other way to achieve the desired style due to conflicts with existing styles that would require considerable effort to fix.
|
||||
- Breaking a lint rule offers an improvement to code readability and/or maintainability (this is often the case when writing components and supporting SCSS, such as mixins and functions).
|
||||
|
||||
To disable a linter, place a `// stylelint-disable` comment around the specific block of CSS that you need to override. For example:
|
||||
|
||||
```scss
|
||||
// When a branch name is a link
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
a.branch-name {
|
||||
color: $brand-blue;
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
```
|
||||
|
||||
**If you choose to disable a linting rule...**
|
||||
|
||||
1. You'll need to specify a reason for disabling the lint.
|
||||
2. Say what lint you're disabling, this example has `selector-no-qualifying-type`.
|
||||
3. Make sure to `disable` then `enable` the lint again after your code block. This ensures that the rule is re-enabled for any code after the block in question.
|
||||
|
||||
When you disable a linter on GitHub, [Sentinel](https://github.com/github/sentinel) will post a comment on your pull request notifying the Design Systems team of this override. This is because disabled lints act as a signal that there may be issues with Primer and/or the CSS in question.
|
||||
|
||||
While linters shouldn't be disabled without consideration, essentially they act as a guide to how we write CSS rather than steadfast rules. For more info on disabling configuration, visit the [stylelint docs](http://stylelint.io/user-guide/configuration/#turning-rules-off-from-within-your-css).
|
||||
|
||||
### Plugins
|
||||
|
||||
Our linter runs on every commit, but finding you have a lint error after a push can be frustrating and waste time. To avoid this, a [collection of editor plugins](https://stylelint.io/user-guide/integrations/editor) are available to help you lint while you code.
|
||||
|
||||
## HTML
|
||||
|
||||
A custom Rails test called `styles_match_markup_test.rb` runs for our `.html.erb` files and checks for unused selectors. The test collects a list of all the class names used in our markup, JavaScript and documentation, then compares that with a list of all our class names in our `.scss` files.
|
||||
|
||||
This test isn't smart enough to know about CSS inheritance, but will help you catch any dead CSS in your markup or styles. Run the test locally with this command.
|
||||
|
||||
```
|
||||
bin/testrb test/fast/linting/styles_match_markup_test.rb
|
||||
```
|
||||
|
||||
Sometimes you will have generated class names that the test misses. Adding these class names to the regular expression enabled `selectors_match_markup_whitelist.yml` file will quiet the tests.
|
||||
|
||||
## Files
|
||||
|
||||
We enforce `.scss` file naming to be lowercase, only use `-` hyphens and no leading `_` underscores. Removing underscores from the files is an anti-pattern for Sass, but we're doing this because we're proactively moving away from Sass to match CSS web standards.
|
||||
|
||||
## Octicons
|
||||
|
||||
We test for the proper use of the [Octicons helper](https://github.com/primer/octicons/tree/master/lib/octicons_helper#readme) in our templates and make sure that the symbols used are valid octicons.
|
||||
|
||||
## IE rule limit
|
||||
|
||||
We check that our compiled CSS assets don't contain more selectors than the [IE CSS selector limits](https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/).
|
||||
@ -1,38 +0,0 @@
|
||||
---
|
||||
title: Prototyping
|
||||
path: tools/prototyping
|
||||
---
|
||||
|
||||
You're welcome to use whatever prototyping tool suits your needs, however we've set up some options that will help you get started quickly.
|
||||
|
||||
The power of prototyping in code is that you can create clickable mocks that can be shared via a URL. This can be useful for exploring designs and interactions or for user research sessions. Prototypes can be throw-away, or part of your process for building out new features since you can work with the same CSS we use in production.
|
||||
|
||||
## Simple HTML prototype with Primer CSS
|
||||
|
||||
Copy the code below and paste it in a HTML file. The CDN link is always linked to the most up to date version of Primer CSS and includes all of the modules in the core, product, and marketing packages.
|
||||
|
||||
This method requires no dev environment set up and is useful for when you want to create simple prototypes using Primer CSS.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Note that the above loads a specific version of Primer CSS. You can also load the "latest" version with `https://unpkg.com/@primer/css/dist/primer.css`. Just be aware that it could include breaking changes. So for prototypes meant to last for a long time it's better to lock Primer CSS to a specific version.
|
||||
|
||||
## Jekyll prototyping with GitHub CSS and JavaScript
|
||||
|
||||
The [Jekyll](http://jekyllrb.com) based prototyping tool pulls in all of GitHub's CSS, which includes all the Primer CSS modules as well as custom CSS modules. It includes GitHub JavaScript and octicons too.
|
||||
|
||||
This tool is useful for when you want to build a more complex prototype with multiple pages, interactions and flows, or need to work with GitHub CSS. You can take advantage of everything you get with [Jekyll](http://jekyllrb.com/docs/home/), such as layout templates, includes, and collections.
|
||||
|
||||
The [prototype](https://ghe.io/github/prototype) tool lives on our enterprise install. All you need to do is fork the repository to your account and [follow the instructions](https://ghe.io/github/prototype#basics) for publishing.
|
||||
|
||||
Having the repository on our enterprise install has the added benefit of making the mocks password protected, but they don't have to be. If you want to publish something publicly you can change configuration and publish to github.com.
|
||||
@ -1,20 +0,0 @@
|
||||
---
|
||||
title: Testing resources
|
||||
path: tools/testing
|
||||
---
|
||||
|
||||
At GitHub we use a staging environment called review-lab for testing with production data. Deploying a branch to [review-lab](https://github.com/github/github/blob/master/docs/deployment.md#test-in-lab-environments) for testing is one of the best ways to test your work with real production data prior to an actual production deployment.
|
||||
|
||||
To make testing on review-lab for extended periods of time easier, you can use the [Redirector](https://chrome.google.com/webstore/detail/redirector/pajiegeliagebegjdhebejdlknciafen) extension for Chrome to redirect all GitHub.com traffic to your review-lab deploy URL.
|
||||
|
||||
## How to use it
|
||||
|
||||
1. Install the [extension](https://chrome.google.com/webstore/detail/redirector/pajiegeliagebegjdhebejdlknciafen)
|
||||
2. Open the extension options panel from the icon in Chrome
|
||||
3. In the "From" field, enter: `https:\/\/github\.com\/?(.+)?`
|
||||
4. In the "To" field, enter: `https://branchname.review-lab.github.com/$1` where `branchname` is the name of your branch.
|
||||
|
||||
## Tips
|
||||
|
||||
- You'll need to remove your rule or simply disable the extension when you want to stop redirecting to your branch.
|
||||
- If you're trying to reach GitHub.com or your review-lab URL but are getting a "This page isn't working" message in your browser, that means your review-lab deploy has gone stale and needs to be redeployed.
|
||||
@ -1,108 +0,0 @@
|
||||
---
|
||||
title: Animations
|
||||
path: utilities/animations
|
||||
example_layout: toggle
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/animations.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
|
||||
|
||||
|
||||
|
||||
## Fade in
|
||||
|
||||
The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.
|
||||
|
||||
```html live
|
||||
<span class="anim-fade-in">
|
||||
<!-- <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
Hello from GitHub!
|
||||
</span>
|
||||
```
|
||||
|
||||
## 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 live
|
||||
<span class="anim-fade-out">
|
||||
<!-- <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
Hello from GitHub!
|
||||
</span>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```html live
|
||||
<div class="anim-fade-up">
|
||||
<!-- <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
Hello from GitHub!
|
||||
</div>
|
||||
```
|
||||
|
||||
## Fade down
|
||||
|
||||
The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
|
||||
|
||||
```html live
|
||||
<div class="anim-fade-down">
|
||||
<!-- <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
Hello from GitHub!
|
||||
</div>
|
||||
```
|
||||
|
||||
## Scale in
|
||||
|
||||
The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
|
||||
|
||||
```html live
|
||||
<div class="anim-scale-in color-bg-accent-emphasis color-fg-on-emphasis p-2">
|
||||
<!-- <%= octicon("mark-github", :height => 32) %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Grow x
|
||||
|
||||
The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
|
||||
|
||||
```html live
|
||||
<div class="anim-grow-x py-2 color-bg-success-emphasis"></div>
|
||||
```
|
||||
|
||||
## Pulse
|
||||
|
||||
The `.anim-pulse` class will pulse an element infinitely.
|
||||
|
||||
```html live
|
||||
<!-- <%= octicon("mark-github",:height => 32, :class => "anim-pulse") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github anim-pulse" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
```
|
||||
|
||||
## Hover animation
|
||||
|
||||
The `.anim-hover-grow` class will increase the scale of the element upon hover.
|
||||
|
||||
```html live
|
||||
<div class="Box anim-hover-grow m-3 p-4">
|
||||
<!-- <%= octicon("mark-github", :height => 32) %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Rotation
|
||||
|
||||
The `.anim-rotate` class will rotate the element indefinitely around the coordinate specified by `transform-origin`. Most elements have a default of `transform-origin: 50% 50%` and will rotate around the center.
|
||||
|
||||
```html live
|
||||
<!-- <%= octicon("mark-github",:height => 32, :class => "anim-rotate") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github anim-rotate" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
```
|
||||
@ -1,124 +0,0 @@
|
||||
---
|
||||
title: Borders
|
||||
path: utilities/borders
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/72'
|
||||
source: 'https://github.com/primer/css/tree/main/src/utilities/borders.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Utilities for borders, and border radius.
|
||||
|
||||
## Default border
|
||||
|
||||
The default border utility applies a solid, 1px border, with a default gray color.
|
||||
|
||||
```html live
|
||||
<div class="border">
|
||||
.border
|
||||
</div>
|
||||
```
|
||||
|
||||
Borders can be applied to a specific edge or to the X and Y axes individually:
|
||||
|
||||
```html live
|
||||
<div class="d-flex mb-3">
|
||||
<div class="border-left col-3">
|
||||
.border-left
|
||||
</div>
|
||||
<div class="border-top col-3">
|
||||
.border-top
|
||||
</div>
|
||||
<div class="border-bottom col-3">
|
||||
.border-bottom
|
||||
</div>
|
||||
<div class="border-right col-3">
|
||||
.border-right
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-x">
|
||||
.border-x
|
||||
</div>
|
||||
<div class="border-y">
|
||||
.border-y
|
||||
</div>
|
||||
```
|
||||
|
||||
Remove borders from all sides or a single side with `.border-0`, `.border-top-0`, `.border-right-0`, `.border-bottom-0`, `.border-left-0`.
|
||||
|
||||
```html live
|
||||
<div class="Box border-top-0">
|
||||
.border-top-0
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border style
|
||||
|
||||
Use `border-dashed` to give an element a dashed border.
|
||||
|
||||
```html live
|
||||
<div class="border border-dashed p-2">
|
||||
.border-dashed
|
||||
</div>
|
||||
```
|
||||
|
||||
## Rounded corners
|
||||
|
||||
Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 4px, `rounded-2` applies a border radius of 6px, and `rounded-3` applies a border radius of 8px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
|
||||
|
||||
```html live
|
||||
<div class="border rounded-0 p-2 mb-2">
|
||||
.rounded-0
|
||||
</div>
|
||||
<div class="border rounded-1 p-2 mb-2">
|
||||
.rounded-1
|
||||
</div>
|
||||
<div class="border rounded-2 p-2 mb-2">
|
||||
.rounded-2
|
||||
</div>
|
||||
<div class="border rounded-3 p-2 mb-2">
|
||||
.rounded-3
|
||||
</div>
|
||||
<div class="border circle p-3" style="width: 100px; height: 100px;">
|
||||
.circle
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
|
||||
|
||||
```html live
|
||||
<div class="border rounded-top-2 p-2 mb-2">
|
||||
.rounded-top-2
|
||||
</div>
|
||||
<div class="border rounded-right-2 p-2 mb-2">
|
||||
.rounded-right-2
|
||||
</div>
|
||||
<div class="border rounded-bottom-2 p-2 mb-2">
|
||||
.rounded-bottom-2
|
||||
</div>
|
||||
<div class="border rounded-left-2 p-2 mb-2">
|
||||
.rounded-left-2
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive borders
|
||||
|
||||
You can adjust border widths on all sides or each side individually with responsive border utilities:
|
||||
|
||||
- `border-(sm|md|lg|xl)` adds borders on all sides at and above the breakpoint. The `border-(sm|md|lg|xl)` shorthand is also supported.
|
||||
- `border-(sm|md|lg|xl)-0` removes borders from all sides at and above the breakpoint.
|
||||
- `border-(sm|md|lg|xl)-(top|right|bottom|left)` adds a border on the given side at and above the breakpoint.
|
||||
- `border-(sm|md|lg|xl)-(top|right|bottom|left)-0` the border from the given side at and above the breakpoint.
|
||||
|
||||
```html live
|
||||
<div class="border-top border-sm-right border-md-bottom border-md-top-0">
|
||||
.border-top
|
||||
<span class="d-none d-sm-inline">.border-sm-right </span>
|
||||
<span class="d-none d-md-inline">.border-md-bottom </span>
|
||||
<span class="d-none d-lg-inline">.border-md-top-0 </span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Border colors are documented on the [colors utilities page](../utilities/colors#border).
|
||||
@ -1,119 +0,0 @@
|
||||
---
|
||||
title: Box shadow
|
||||
path: utilities/box-shadow
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/269'
|
||||
source: 'https://github.com/primer/css/tree/main/src/utilities/box-shadow.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
|
||||
|
||||
## Small
|
||||
|
||||
Small shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
|
||||
|
||||
```html live
|
||||
<div class="color-shadow-small p-3">
|
||||
.color-shadow-small
|
||||
</div>
|
||||
```
|
||||
|
||||
These types of shadows are typically applied to elements with borders, such as the [Box component](/components/box).
|
||||
|
||||
```html live
|
||||
<div class="col-6">
|
||||
<div class="Box color-shadow-small">
|
||||
<div class="Box-row">
|
||||
<h3 class="m-0">Organization</h3>
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
<p class="mb-0 color-fg-muted">
|
||||
Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled
|
||||
church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
|
||||
</p>
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
<button type="button" name="Create an organization" class="btn btn-primary btn-block">
|
||||
Create an organization
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Medium
|
||||
|
||||
Medium box shadows are more diffused and slightly larger than small box shadows.
|
||||
|
||||
```html live
|
||||
<div class="color-shadow-medium p-3">
|
||||
.color-shadow-medium
|
||||
</div>
|
||||
```
|
||||
|
||||
Medium box shadows are typically used on editorialized content that needs to appear elevated. Most of the time, the elements using this level of shadow will be clickable.
|
||||
|
||||
```html live
|
||||
<div class="col-6">
|
||||
<a class="d-block color-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
|
||||
<div class="position-absolute top-0 left-0 py-1 width-full"></div>
|
||||
<h3 class="color-fg-default">Serverless architecture</h3>
|
||||
<p class="color-fg-muted">
|
||||
Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
|
||||
</p>
|
||||
<ul class="position-absolute bottom-0 pb-3 text-small color-fg-muted list-style-none ">
|
||||
<li class="d-inline-block mr-1">
|
||||
<!-- <%= octicon "repo", :class => "mr-1" %> -->
|
||||
<svg class="octicon octicon-repo mr-1" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
|
||||
12 Repositories
|
||||
</li>
|
||||
<li class="d-inline-block">
|
||||
<!-- <%= octicon "code", :class => "mr-1" %> -->
|
||||
<svg class="octicon octicon-code mr-1" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
|
||||
5 Languages
|
||||
</li>
|
||||
</ul>
|
||||
</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Large
|
||||
|
||||
Large box shadows are very diffused and used sparingly in the product UI.
|
||||
|
||||
```html live
|
||||
<div class="color-shadow-large p-3">
|
||||
.color-shadow-large
|
||||
</div>
|
||||
```
|
||||
|
||||
These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.
|
||||
|
||||
```html live
|
||||
<div class="color-shadow-large rounded-2 overflow-hidden">
|
||||
<img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub" />
|
||||
</div>
|
||||
```
|
||||
|
||||
## Extra large
|
||||
|
||||
Extra large box shadows are even more diffused.
|
||||
|
||||
```html live
|
||||
<div class="color-shadow-extra-large p-3">
|
||||
.color-shadow-extra-large
|
||||
</div>
|
||||
```
|
||||
|
||||
These shadows are used for marketing content and content that appears on top of other page elements.
|
||||
|
||||
## Remove a box shadow
|
||||
|
||||
Additionally there is a `box-shadow-none` class that removes `box-shadow`:
|
||||
|
||||
```html live
|
||||
<div class="color-shadow-large box-shadow-none p-3">
|
||||
.box-shadow-none
|
||||
</div>
|
||||
```
|
||||
@ -1,121 +0,0 @@
|
||||
---
|
||||
title: Colors
|
||||
description: 'Immutable, atomic CSS classes to rapidly build product'
|
||||
status: Beta
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer CSS v18 has changed the naming of these color classes. Check the <a href="/css/support/v18-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Use color utilities to apply color to the background of elements, text, and borders. These utilities should only be used where color is not provided by a component. To learn more about how to apply color, read the [color documentation](https://primer.style/design/foundations/color) in the [interface guidelines](https://primer.style/design/).
|
||||
|
||||
## Text
|
||||
|
||||
Use text color utilities to set text to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
|
||||
```html live
|
||||
<div class="color-fg-default mb-1">.color-fg-default</div>
|
||||
<div class="color-fg-muted mb-1">.color-fg-muted</div>
|
||||
<div class="color-fg-subtle mb-4">.color-fg-subtle</div>
|
||||
|
||||
<div class="color-fg-accent mb-1">.color-fg-accent</div>
|
||||
<div class="color-fg-success mb-1">.color-fg-success</div>
|
||||
<div class="color-fg-attention mb-1">.color-fg-attention</div>
|
||||
<div class="color-fg-severe mb-1">.color-fg-severe</div>
|
||||
<div class="color-fg-danger mb-1">.color-fg-danger</div>
|
||||
<div class="color-fg-open mb-1">.color-fg-open</div>
|
||||
<div class="color-fg-closed mb-1">.color-fg-closed</div>
|
||||
<div class="color-fg-done mb-1">.color-fg-done</div>
|
||||
<div class="color-fg-sponsors mb-4">.color-fg-sponsors</div>
|
||||
|
||||
<div class="color-fg-on-emphasis color-bg-accent-emphasis p-2 rounded">.color-fg-on-emphasis</div>
|
||||
```
|
||||
|
||||
You can set the color inheritance on an element by using the `color-fg-inherit` class.
|
||||
|
||||
```html live
|
||||
<div class="color-fg-success">This text is green, <a href="#" class="color-fg-inherit">including the link</a></div>
|
||||
```
|
||||
|
||||
## Background
|
||||
|
||||
Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
||||
|
||||
```html live
|
||||
<div class="color-bg-default p-2 rounded mb-2">.color-bg-default</div>
|
||||
<div class="color-bg-overlay p-2 rounded mb-2">.color-bg-overlay</div>
|
||||
<div class="color-bg-inset p-2 rounded mb-2">.color-bg-inset</div>
|
||||
<div class="color-bg-subtle p-2 rounded mb-2">.color-bg-subtle</div>
|
||||
<div class="color-bg-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-emphasis</div>
|
||||
|
||||
<div class="color-bg-accent p-2 rounded mb-2">.color-bg-accent</div>
|
||||
<div class="color-bg-accent-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-accent-emphasis</div>
|
||||
|
||||
<div class="color-bg-success p-2 rounded mb-2">.color-bg-success</div>
|
||||
<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-success-emphasis</div>
|
||||
|
||||
<div class="color-bg-attention p-2 rounded mb-2">.color-bg-attention</div>
|
||||
<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-attention-emphasis</div>
|
||||
|
||||
<div class="color-bg-severe p-2 rounded mb-2">.color-bg-severe</div>
|
||||
<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-severe-emphasis</div>
|
||||
|
||||
<div class="color-bg-danger p-2 rounded mb-2">.color-bg-danger</div>
|
||||
<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-danger-emphasis</div>
|
||||
|
||||
<div class="color-bg-open p-2 rounded mb-2">.color-bg-open</div>
|
||||
<div class="color-bg-open-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-open-emphasis</div>
|
||||
|
||||
<div class="color-bg-closed p-2 rounded mb-2">.color-bg-closed</div>
|
||||
<div class="color-bg-closed-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-closed-emphasis</div>
|
||||
|
||||
<div class="color-bg-done p-2 rounded mb-2">.color-bg-done</div>
|
||||
<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-done-emphasis</div>
|
||||
|
||||
<div class="color-bg-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
|
||||
<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</div>
|
||||
|
||||
<div class="color-bg-transparent p-2 rounded mb-2">.color-bg-transparent</div>
|
||||
```
|
||||
|
||||
## Border
|
||||
|
||||
Override default border colors with the following utilities.
|
||||
|
||||
```html live
|
||||
<div class="border color-border-default p-2 rounded mb-2">.color-border-default</div>
|
||||
<div class="border color-border-muted p-2 rounded mb-2">.color-border-muted</div>
|
||||
<div class="border color-border-subtle p-2 rounded mb-4">.color-border-subtle</div>
|
||||
|
||||
<div class="border color-border-accent p-2 rounded mb-2">.color-border-accent</div>
|
||||
<div class="border color-border-accent-emphasis p-2 rounded mb-4">.color-border-accent-emphasis</div>
|
||||
|
||||
<div class="border color-border-success p-2 rounded mb-2">.color-border-success</div>
|
||||
<div class="border color-border-success-emphasis p-2 rounded mb-4">.color-border-success-emphasis</div>
|
||||
|
||||
<div class="border color-border-attention p-2 rounded mb-2">.color-border-attention</div>
|
||||
<div class="border color-border-attention-emphasis p-2 rounded mb-4">.color-border-attention-emphasis</div>
|
||||
|
||||
<div class="border color-border-severe p-2 rounded mb-2">.color-border-severe</div>
|
||||
<div class="border color-border-severe-emphasis p-2 rounded mb-4">.color-border-severe-emphasis</div>
|
||||
|
||||
<div class="border color-border-danger p-2 rounded mb-2">.color-border-danger</div>
|
||||
<div class="border color-border-danger-emphasis p-2 rounded mb-4">.color-border-danger-emphasis</div>
|
||||
|
||||
<div class="border color-border-open p-2 rounded mb-2">.color-border-open</div>
|
||||
<div class="border color-border-open-emphasis p-2 rounded mb-4">.color-border-open-emphasis</div>
|
||||
|
||||
<div class="border color-border-closed p-2 rounded mb-2">.color-border-closed</div>
|
||||
<div class="border color-border-closed-emphasis p-2 rounded mb-4">.color-border-closed-emphasis</div>
|
||||
|
||||
<div class="border color-border-done p-2 rounded mb-2">.color-border-done</div>
|
||||
<div class="border color-border-done-emphasis p-2 rounded mb-4">.color-border-done-emphasis</div>
|
||||
|
||||
<div class="border color-border-sponsors p-2 rounded mb-2">.color-border-sponsors</div>
|
||||
<div class="border color-border-sponsors-emphasis p-2 rounded">.color-border-sponsors-emphasis</div>
|
||||
```
|
||||
|
||||
## Link
|
||||
|
||||
You can use the [Link](../components/links) component to change the link colors.
|
||||
@ -1,65 +0,0 @@
|
||||
---
|
||||
title: Details
|
||||
path: utilities/details
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/details.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Details classes are created to enhance the native behaviors of `<details>`.
|
||||
|
||||
## Fullscreen click area
|
||||
|
||||
Use `.details-overlay` to expand the click area of `<summary>` to cover the full screen, so user can click anywhere on a page to close `<details>`.
|
||||
|
||||
```html live
|
||||
<details class="details-overlay">
|
||||
<summary class="btn">More</summary>
|
||||
<div class="border p-3 mt-2">Hidden text</div>
|
||||
</details>
|
||||
```
|
||||
|
||||
## Darkened fullscreen click area
|
||||
|
||||
Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
|
||||
|
||||
```html live
|
||||
<details class="details-overlay details-overlay-dark">
|
||||
<summary class="btn">More</summary>
|
||||
<div class="position-relative color-bg-default rounded p-3 mt-2" style="z-index: 112;">
|
||||
Hidden text
|
||||
</div>
|
||||
</details>
|
||||
```
|
||||
|
||||
## Custom caret
|
||||
|
||||
Use `.details-reset` to remove the default caret (that little triangle on the left). You then can add the `.dropdown-caret` on the right of the text.
|
||||
|
||||
```html live
|
||||
<details class="details-reset">
|
||||
<summary class="btn">More <span class="dropdown-caret"></summary>
|
||||
<div class="border p-3 mt-2">Hidden text</div>
|
||||
</details>
|
||||
```
|
||||
|
||||
## Using button styles with the details summary element
|
||||
|
||||
You can add `.btn` and `.btn-*` classes to any
|
||||
[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
|
||||
element so that it gains the appearance of a button, and
|
||||
selected/active styles when the parent
|
||||
[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
|
||||
element is open.
|
||||
|
||||
```html live
|
||||
<details>
|
||||
<summary class="btn btn-primary">More</summary>
|
||||
<div class="border p-3 mt-2">Hidden text</div>
|
||||
</details>
|
||||
|
||||
<details class="details-reset mt-3">
|
||||
<summary class="btn-link">More <span class="dropdown-caret"></summary>
|
||||
<div class="border p-3 mt-2">Hidden text</div>
|
||||
</details>
|
||||
```
|
||||
@ -1,786 +0,0 @@
|
||||
---
|
||||
title: Flexbox
|
||||
path: utilities/flexbox
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/157'
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/flexbox.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Flex utilities can be used to apply `flexbox` behaviors to elements by using utility classes.
|
||||
|
||||
|
||||
|
||||
## Required reading
|
||||
|
||||
Before using these utilities, **you should be familiar with CSS3 Flexible Box spec**. If you are not, check out MDN's guide:
|
||||
|
||||
📖 **[Using CSS Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)**
|
||||
|
||||
## Flex container
|
||||
|
||||
Use these classes to make an element lay out its content using the flexbox model. Each **direct** child of the flex container will become a flex item.
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.d-flex { display: flex; }
|
||||
.d-inline-flex { display: inline-flex; }
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.d-flex` | The element behaves like a block and lays out its content using the flexbox model. |
|
||||
| `.d-inline-flex` | The element behaves like an inline element and lays out its content using the flexbox model. |
|
||||
|
||||
### Example using `.d-flex`
|
||||
|
||||
```html live
|
||||
<!-- flex container -->
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle">flex item 1</div>
|
||||
<div class="p-5 border color-bg-subtle">flex item 2</div>
|
||||
<div class="p-5 border color-bg-subtle">flex item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Example using `.d-inline-flex`
|
||||
|
||||
```html live
|
||||
<!-- inline-flex container -->
|
||||
<div class="border d-inline-flex">
|
||||
<div class="p-5 border color-bg-subtle">flex item 1</div>
|
||||
<div class="p-5 border color-bg-subtle">flex item 2</div>
|
||||
<div class="p-5 border color-bg-subtle">flex item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flex direction
|
||||
|
||||
Use these classes to define the orientation of the main axis (`row` or `column`). By default, flex items will display in a row. Use `.flex-column` to change the direction of the main axis to vertical.
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-row-reverse { flex-direction: row-reverse; }
|
||||
.flex-column { flex-direction: column; }
|
||||
.flex-column-reverse { flex-direction: column-reverse; }
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-row` | The main axis runs left to right (default). |
|
||||
| `.flex-row-reverse` | The main axis runs right to left. |
|
||||
| `.flex-column` | The main axis runs top to bottom. |
|
||||
| `.flex-column-reverse` | The main axis runs bottom to top. |
|
||||
|
||||
### Example using `.flex-column`
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column">
|
||||
<div class="p-5 border color-bg-subtle">Item 1</div>
|
||||
<div class="p-5 border color-bg-subtle">Item 2</div>
|
||||
<div class="p-5 border color-bg-subtle">Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Example using `.flex-column-reverse`
|
||||
|
||||
This example uses the responsive variant `.flex-sm-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-sm-column-reverse">
|
||||
<div class="p-5 border color-bg-subtle">Item 1</div>
|
||||
<div class="p-5 border color-bg-subtle">Item 2</div>
|
||||
<div class="p-5 border color-bg-subtle">Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Example using `.flex-row`
|
||||
|
||||
This example uses the responsive variant `.flex-sm-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-sm-row">
|
||||
<div class="p-5 border color-bg-subtle">Item 1</div>
|
||||
<div class="p-5 border color-bg-subtle">Item 2</div>
|
||||
<div class="p-5 border color-bg-subtle">Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Example using `.flex-row-reverse`
|
||||
|
||||
This example uses the responsive variant `.flex-sm-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-sm-row-reverse">
|
||||
<div class="p-5 border color-bg-subtle">Item 1</div>
|
||||
<div class="p-5 border color-bg-subtle">Item 2</div>
|
||||
<div class="p-5 border color-bg-subtle">Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flex wrap
|
||||
|
||||
You can choose whether flex items are forced into a single line or wrapped onto multiple lines.
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-wrap` | Flex items will break onto multiple lines |
|
||||
| `.flex-nowrap` | Flex items are laid out in a single line, even if they overflow (default) |
|
||||
| `.flex-wrap-reverse` | Behaves the same as wrap but cross-start and cross-end are permuted. |
|
||||
|
||||
### `flex-wrap` example
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-wrap">
|
||||
<div class="p-5 px-6 border color-bg-subtle">1</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">2</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">3</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">4</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">5</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">6</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">7</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">8</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">9</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### `flex-nowrap` example
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-nowrap">
|
||||
<div class="p-5 px-6 border color-bg-subtle">1</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">2</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">3</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">4</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">5</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">6</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">7</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">8</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">9</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### `flex-wrap-reverse` example
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-wrap-reverse">
|
||||
<div class="p-5 px-6 border color-bg-subtle">1</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">2</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">3</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">4</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">5</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">6</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">7</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">8</div>
|
||||
<div class="p-5 px-6 border color-bg-subtle">9</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Justify content
|
||||
|
||||
Use these classes to distribute space between and around flex items along the **main axis** of the container.
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.flex-justify-start { justify-content: flex-start; }
|
||||
.flex-justify-end { justify-content: flex-end; }
|
||||
.flex-justify-center { justify-content: center; }
|
||||
.flex-justify-between { justify-content: space-between; }
|
||||
.flex-justify-around { justify-content: space-around; }
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
| Class | Default behavior |
|
||||
| --- | --- |
|
||||
| `.flex-justify-start` | Justify all items to the left |
|
||||
| `.flex-justify-end` | Justify all items to the right |
|
||||
| `.flex-justify-center` | Justify items to the center of the container |
|
||||
| `.flex-justify-between` | Distribute items evenly. First item is on the start line, last item is on the end line. |
|
||||
| `.flex-justify-around` | Distribute items evenly with equal space around them |
|
||||
|
||||
### flex-justify-start
|
||||
|
||||
Use `.flex-justify-start` to align items to the start line. By default this will be on the left side of the container. If you are using `.flex-column`, the start line will be at the top of the container.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-start">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-justify-end
|
||||
|
||||
Use `.flex-justify-end` to align items to the end line. By default this will be on the right side of the container. If you are using `.flex-column`, the end line will be at the bottom of the container.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-end">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-justify-center
|
||||
|
||||
Use `.flex-justify-center` to align items in the middle of the container.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-center">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-justify-between
|
||||
|
||||
Use `.flex-justify-between` to distribute items evenly in the container. The first items will be on the start line and the last item will be on the end line.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-between">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-justify-around
|
||||
|
||||
Use `.flex-justify-around` to distribute items evenly, with an equal amount of space around them. Visually the spaces won't look equal, since each item has the same unit of space around it. For example, the first item only has one unit of space between it and the start line, but it has two units of space between it and the next item.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-around">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align items
|
||||
|
||||
Use these classes to align items on the **cross axis**.
|
||||
|
||||
The cross axis runs perpendicular to the main axis. By default the main axis runs horizontally, so your items will align vertically on the cross axis. If you use [flex-column](#flex-direction) to make the main axis run vertically, your items will be aligned horizontally.
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.flex-items-start { align-items: flex-start; }
|
||||
.flex-items-end { align-items: flex-end; }
|
||||
.flex-items-center { align-items: center; }
|
||||
.flex-items-baseline { align-items: baseline; }
|
||||
.flex-items-stretch { align-items: stretch; }
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
| Class | Behavior |
|
||||
| --- | --- |
|
||||
| `.flex-items-start` | Align items to the start of the cross axis |
|
||||
| `.flex-items-end` | Align items to the end of the cross axis |
|
||||
| `.flex-items-center` | Align items to the center of the cross axis |
|
||||
| `.flex-items-baseline` | Align items along their baselines |
|
||||
| `.flex-items-stretch` | Stretch items from start of cross axis to end of cross axis |
|
||||
|
||||
### flex-items-start
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-items-end
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-end">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-items-center
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-center">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-items-baseline
|
||||
|
||||
With `.flex-items-baseline`, items will be aligned along their baselines even if they have different font sizes.
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-baseline">
|
||||
<div class="p-5 border color-bg-subtle f1">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle f3">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-items-stretch
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-stretch">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align content
|
||||
|
||||
When the main axis wraps, this creates multiple main axis lines and adds extra space in the cross axis. Use these classes to align the lines of the main axis on the cross axis.
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.flex-content-start { align-content: flex-start; }
|
||||
.flex-content-end { align-content: flex-end; }
|
||||
.flex-content-center { align-content: center; }
|
||||
.flex-content-between { align-content: space-between; }
|
||||
.flex-content-around { align-content: space-around; }
|
||||
.flex-content-stretch { align-content: stretch; }
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-content-start` | Align content to the start of the cross axis |
|
||||
| `.flex-content-end` | Align content to the end of the cross axis |
|
||||
| `.flex-content-center` | Align content to the center of the cross axis |
|
||||
| `.flex-content-between` | Distribute content evenly. First line is on the start of the cross axis, last line is on the end of the cross axis. |
|
||||
| `.flex-content-around` | Stretch items from the start of the cross axis to the end of the cross axis. |
|
||||
| `.flex-content-stretch` | Lines stretch to occupy available space. |
|
||||
|
||||
### flex-content-start
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-start">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
<div class="p-5 border color-bg-subtle">5</div>
|
||||
<div class="p-5 border color-bg-subtle">6</div>
|
||||
<div class="p-5 border color-bg-subtle">7</div>
|
||||
<div class="p-5 border color-bg-subtle">8</div>
|
||||
<div class="p-5 border color-bg-subtle">9</div>
|
||||
<div class="p-5 border color-bg-subtle">10</div>
|
||||
<div class="p-5 border color-bg-subtle">11</div>
|
||||
<div class="p-5 border color-bg-subtle">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-content-end
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-end">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
<div class="p-5 border color-bg-subtle">5</div>
|
||||
<div class="p-5 border color-bg-subtle">6</div>
|
||||
<div class="p-5 border color-bg-subtle">7</div>
|
||||
<div class="p-5 border color-bg-subtle">8</div>
|
||||
<div class="p-5 border color-bg-subtle">9</div>
|
||||
<div class="p-5 border color-bg-subtle">10</div>
|
||||
<div class="p-5 border color-bg-subtle">11</div>
|
||||
<div class="p-5 border color-bg-subtle">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-content-center
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-center">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
<div class="p-5 border color-bg-subtle">5</div>
|
||||
<div class="p-5 border color-bg-subtle">6</div>
|
||||
<div class="p-5 border color-bg-subtle">7</div>
|
||||
<div class="p-5 border color-bg-subtle">8</div>
|
||||
<div class="p-5 border color-bg-subtle">9</div>
|
||||
<div class="p-5 border color-bg-subtle">10</div>
|
||||
<div class="p-5 border color-bg-subtle">11</div>
|
||||
<div class="p-5 border color-bg-subtle">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-content-between
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-between">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
<div class="p-5 border color-bg-subtle">5</div>
|
||||
<div class="p-5 border color-bg-subtle">6</div>
|
||||
<div class="p-5 border color-bg-subtle">7</div>
|
||||
<div class="p-5 border color-bg-subtle">8</div>
|
||||
<div class="p-5 border color-bg-subtle">9</div>
|
||||
<div class="p-5 border color-bg-subtle">10</div>
|
||||
<div class="p-5 border color-bg-subtle">11</div>
|
||||
<div class="p-5 border color-bg-subtle">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-content-around
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-around">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
<div class="p-5 border color-bg-subtle">5</div>
|
||||
<div class="p-5 border color-bg-subtle">6</div>
|
||||
<div class="p-5 border color-bg-subtle">7</div>
|
||||
<div class="p-5 border color-bg-subtle">8</div>
|
||||
<div class="p-5 border color-bg-subtle">9</div>
|
||||
<div class="p-5 border color-bg-subtle">10</div>
|
||||
<div class="p-5 border color-bg-subtle">11</div>
|
||||
<div class="p-5 border color-bg-subtle">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-content-stretch
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-stretch">
|
||||
<div class="p-5 border color-bg-subtle">1</div>
|
||||
<div class="p-5 border color-bg-subtle">2</div>
|
||||
<div class="p-5 border color-bg-subtle">3</div>
|
||||
<div class="p-5 border color-bg-subtle">4</div>
|
||||
<div class="p-5 border color-bg-subtle">5</div>
|
||||
<div class="p-5 border color-bg-subtle">6</div>
|
||||
<div class="p-5 border color-bg-subtle">7</div>
|
||||
<div class="p-5 border color-bg-subtle">8</div>
|
||||
<div class="p-5 border color-bg-subtle">9</div>
|
||||
<div class="p-5 border color-bg-subtle">10</div>
|
||||
<div class="p-5 border color-bg-subtle">11</div>
|
||||
<div class="p-5 border color-bg-subtle">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flex
|
||||
|
||||
Use this class to specify the ability of a flex item to alter its dimensions to fill available space.
|
||||
|
||||
```css
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-auto { flex: auto; }
|
||||
.flex-grow-0 { flex-grow: 0; }
|
||||
.flex-shrink-0 { flex-shrink: 0; }
|
||||
```
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-1` | Fills available space |
|
||||
| `.flex-auto` | Fills available space and auto-sizes based on the content |
|
||||
| `.flex-grow-0` | Prevents growing of a flex item |
|
||||
| `.flex-shrink-0` | Prevents shrinking of a flex item |
|
||||
|
||||
### flex-1
|
||||
|
||||
Adding `.flex-1` makes the item grow in size to take up all the space that is available.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle">flex item</div>
|
||||
<div class="p-5 border color-bg-subtle flex-1">.flex-1</div>
|
||||
<div class="p-5 border color-bg-subtle">flex item</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Adding `.flex-1` to all flex items results in each item having the same size.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle flex-1">.flex-1</div>
|
||||
<div class="p-5 border color-bg-subtle flex-1">.flex-1</div>
|
||||
<div class="p-5 border color-bg-subtle flex-1">.flex-1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-auto
|
||||
|
||||
Using `.flex-auto` fills the available space but also takes the size of the content into account. Type in the editor below to see the effect.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle flex-1">.flex-1</div>
|
||||
<div class="p-5 border color-bg-subtle flex-auto">.flex-auto with a bit more text</div>
|
||||
<div class="p-5 border color-bg-subtle flex-1">.flex-1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-grow-0
|
||||
|
||||
Add `.flex-grow-0` to prevent an item from growing. This can be useful when used as a responsive variant. For example to stop growing when the viewport gets wider.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle">flex item</div>
|
||||
<div class="p-5 border color-bg-subtle flex-auto flex-sm-grow-0">.flex-auto .flex-sm-grow-0</div>
|
||||
<div class="p-5 border color-bg-subtle">flex item</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-shrink-0
|
||||
|
||||
Add `.flex-shrink-0` to prevent an item from shrinking. Note that for example text will not wrap and the flex items start to overflow if there is not enough space.
|
||||
|
||||
```html live
|
||||
<div class="p-2 border d-flex" style="max-width: 340px">
|
||||
<div class="p-5 border color-bg-subtle">flex item</div>
|
||||
<div class="p-5 border color-bg-subtle flex-shrink-0">.flex-shrink-0</div>
|
||||
<div class="p-5 border color-bg-subtle">flex item</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align self
|
||||
|
||||
Use these classes to adjust the alignment of an individual flex item on the cross axis. This overrides any `align-items` property applied to the flex container.
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.flex-self-auto { align-self: auto; }
|
||||
.flex-self-start { align-self: flex-start; }
|
||||
.flex-self-end { align-self: flex-end; }
|
||||
.flex-self-center { align-self: center; }
|
||||
.flex-self-baseline { align-self: baseline; }
|
||||
.flex-self-stretch { align-self: stretch; }
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-self-auto` | Inherit alignment from parent |
|
||||
| `.flex-self-start` | Align to the start of the cross axis |
|
||||
| `.flex-self-end` | Align to the end of the cross axis |
|
||||
| `.flex-self-center` | Align to center of cross axis |
|
||||
| `.flex-self-baseline` | Align baseline to the start of the cross axis |
|
||||
| `.flex-self-stretch` | Stretch item from start of cross axis to end of cross axis. |
|
||||
|
||||
### flex-self-auto
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle flex-self-auto">.flex-self-auto</div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-self-start
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle flex-self-start">.flex-self-start</div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-self-end
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle flex-self-end">.flex-self-end</div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-self-center
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle flex-self-center">.flex-self-center</div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-self-baseline
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-end">
|
||||
<div class="p-5 border color-bg-subtle flex-self-baseline f4">.flex-self-baseline</div>
|
||||
<div class="p-5 border color-bg-subtle f1">item</div>
|
||||
<div class="p-5 border color-bg-subtle f00">item</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-self-stretch
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start">
|
||||
<div class="p-5 border color-bg-subtle flex-self-stretch">.flex-self-stretch</div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Order
|
||||
|
||||
Use these classes to change the order of flex items. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.flex-order-1 { order: 1; }
|
||||
.flex-order-2 { order: 2; }
|
||||
.flex-order-none { order: inherit; }
|
||||
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-order-1` | Set order to be 1 |
|
||||
| `.flex-order-2` | Set order to be 2 |
|
||||
| `.flex-order-none` | Remove order (typically used with responsive variants) |
|
||||
|
||||
### flex-order (1+2)
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle flex-order-2">1. .flex-order-2</div>
|
||||
<div class="p-5 border color-bg-subtle">2.</div>
|
||||
<div class="p-5 border color-bg-subtle flex-order-1">3. .flex-order-1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### flex-order-none
|
||||
|
||||
Resize window to see the effect.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-subtle flex-order-1 flex-sm-order-none">1. .flex-order-1 .flex-sm-order-none</div>
|
||||
<div class="p-5 border color-bg-subtle">2.</div>
|
||||
<div class="p-5 border color-bg-subtle">3.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive flex utilities
|
||||
|
||||
All flexbox utilities can be adjusted per [breakpoint](/utilities/grid#breakpoints) using the following formulas:
|
||||
|
||||
- `d-[breakpoint]-[property]` for `display`
|
||||
- `flex-[breakpoint]-[property]-[behavior]` for various flex properties
|
||||
|
||||
Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
### Example classes
|
||||
|
||||
```css
|
||||
/* Example classes */
|
||||
|
||||
.d-sm-flex {}
|
||||
.d-md-inline-flex {}
|
||||
|
||||
.flex-lg-row {}
|
||||
.flex-xl-column {}
|
||||
|
||||
.flex-sm-wrap {}
|
||||
.flex-lg-nowrap {}
|
||||
|
||||
.flex-lg-self-start {}
|
||||
```
|
||||
|
||||
### Example usage
|
||||
|
||||
Mixing flex properties:
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start flex-sm-items-center flex-justify-start flex-lg-justify-between">
|
||||
<div class="p-5 border color-bg-subtle flex-sm-self-stretch">.flex-self-stretch</div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
<div class="p-5 border color-bg-subtle"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Example components
|
||||
|
||||
The flex utilities can be used to create a number of components. Here are some examples.
|
||||
|
||||
### Media object
|
||||
|
||||
You can use flex utilities to make a simple media object, like this:
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-items-center p-4">
|
||||
<div class="p-5 border color-bg-subtle">image</div>
|
||||
<p class="pl-4 m-0"><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive media object
|
||||
|
||||
Here is an example of a media object that is **vertically centered on large screens**, but converts to a stacked column layout on small screens.
|
||||
|
||||
```html live
|
||||
<div class="border p-3 d-flex flex-column flex-sm-row flex-sm-items-center">
|
||||
<div class="pr-0 pr-sm-3 mb-3 mb-sm-0 d-flex flex-justify-center flex-sm-justify-start">
|
||||
<img style="max-width:100px; max-height:100px;" src="https://github.com/github.png" />
|
||||
</div>
|
||||
<div class="d-flex text-center text-sm-left">
|
||||
<p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
|
||||
</div>
|
||||
<div class="ml-sm-3 d-flex flex-justify-center">
|
||||
<!-- <%= octicon "mark-github", :height => '32' %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flexbox bugs
|
||||
|
||||
This section lists flexbox bugs that affect [browsers we currently support](https://github.com/primer/css/blob/main/.browserslistrc).
|
||||
|
||||
1. **Minimum content sizing of flex items not honored.** Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using `d-flex`. This can be applied with the `flex-shrink-0` utility. For more information read [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored).
|
||||
|
||||
9. **Some elements can't be flex containers.** Specifically, `<button>`, `<fieldset>`, and `<summary>` elements cannot be styled with `display: flex` in Safari. Instead of using `class="d-flex"` on these elements, you should nest an element within them, e.g. `<summary><div class="d-flex">...</div></summary>`.
|
||||
@ -1,445 +0,0 @@
|
||||
---
|
||||
title: Grid
|
||||
path: utilities/grid
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/88'
|
||||
source: 'https://github.com/primer/css/tree/main/src/layout/grid.scss'
|
||||
bundle: layout
|
||||
---
|
||||
|
||||
The grid is 12 columns and percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. The grid system works with a variety of layout utilities to achieve different results.
|
||||
|
||||
## Flexbox grids
|
||||
|
||||
You can use [flex utilities](/utilities/flexbox) on the container and columns to create a flexbox grid.
|
||||
|
||||
This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.
|
||||
|
||||
```html live title="Flexbox grid"
|
||||
<div class="d-flex flex-column flex-md-row flex-items-center flex-md-items-center">
|
||||
<div class="col-2 d-flex flex-items-center flex-items-center flex-md-items-start">
|
||||
<img class="width-full avatar mb-2 mb-md-0" src="https://github.com/github.png" alt="github" />
|
||||
</div>
|
||||
<div class="col-12 col-md-10 d-flex flex-column flex-justify-center flex-items-center flex-md-items-start pl-md-4">
|
||||
<h1 class="text-normal lh-condensed">GitHub</h1>
|
||||
<p class="h4 color-fg-muted text-normal mb-2">How people build software.</p>
|
||||
<a class="color-fg-muted text-small" href="#url">https://github.com/about</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Float based grid
|
||||
|
||||
Use `.clearfix` on the container and float utilities with columns for a floated grid layout.
|
||||
|
||||
```html live title="Float based grid"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-4 float-left border p-4">
|
||||
My column
|
||||
</div>
|
||||
<div class="col-4 float-left border p-4">
|
||||
Looks better
|
||||
</div>
|
||||
<div class="col-4 float-left border p-4">
|
||||
Than your column
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Reversed float grid
|
||||
|
||||
To reverse the order of columns, use `float-right` to float columns to the right.
|
||||
|
||||
```html live title="Float grid reversed"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-4 float-right border p-4">
|
||||
One
|
||||
</div>
|
||||
<div class="col-4 float-right border p-4">
|
||||
Two
|
||||
</div>
|
||||
<div class="col-4 float-right border p-4">
|
||||
Three
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Nesting
|
||||
|
||||
You can infinitely nest grid layouts within other columns since the column widths are percentage based. With great flexibility comes great responsibility - be sensible with how far you nest!
|
||||
|
||||
```html live title="Nesting grids"
|
||||
<div class="clearfix">
|
||||
<div class="col-6 float-left px-1">
|
||||
<div class="border p-1">Unnested</div>
|
||||
</div>
|
||||
<div class="col-6 float-left">
|
||||
<div class="clearfix">
|
||||
<div class="col-6 float-left px-1">
|
||||
<div class="border p-1">1 x Nested</div>
|
||||
</div>
|
||||
<div class="col-6 float-left">
|
||||
<div class="col-6 float-left px-1">
|
||||
<div class="border p-1">2 x Nested</div>
|
||||
</div>
|
||||
<div class="col-6 float-left px-1">
|
||||
<div class="border p-1">2 x Nested</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Centering a column
|
||||
|
||||
Use `.mx-auto` to center columns within a container.
|
||||
|
||||
```html live title="Centering a column"
|
||||
<div class="border">
|
||||
<div class="col-6 p-2 mx-auto border">
|
||||
This column is the center of my world.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Column widths
|
||||
|
||||
Column widths can be used with any other block or inline-block elements to add percentage-based widths.
|
||||
|
||||
```html live
|
||||
<div>
|
||||
<div class="col-4 float-right p-2 border color-fg-danger">
|
||||
<!-- <%= octicon "heart" %> -->
|
||||
<svg class="octicon octicon-heart" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z"></path></svg>
|
||||
<span>Don't go bacon my heart.<span>
|
||||
</div>
|
||||
<p>T-bone drumstick alcatra ribeye. Strip steak chuck andouille tenderloin bacon tri-tip ball tip beef capicola rump. Meatloaf bresaola drumstick ball tip salami. Drumstick ham bacon alcatra pig porchetta, spare ribs leberkas pork belly.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Offset columns
|
||||
|
||||
Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](#responsive-grids).
|
||||
|
||||
```html live title="Offset columns"
|
||||
<div class="clearfix">
|
||||
<div class="offset-1 col-3 border p-3">.offset-1</div>
|
||||
<div class="offset-2 col-3 border p-3">.offset-2</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Gutters
|
||||
|
||||
Use gutter styles or padding utilities to create gutters. You can use the default gutter style, `gutter`, or either of its modifiers, `gutter-condensed` or `gutter-spacious`. Gutter styles also support responsive breakpoint modifiers. Gutter styles add padding to the left and right side of each column and apply a negative margin to the container to ensure content inside each column lines up with content outside of the grid.
|
||||
|
||||
```html live title="Gutters"
|
||||
<div class="clearfix gutter-md-spacious border">
|
||||
<div class="col-3 float-left">
|
||||
<div class="border p-3">.col-md-3</div>
|
||||
</div>
|
||||
<div class="col-3 float-left">
|
||||
<div class="border p-3">.col-md-3</div>
|
||||
</div>
|
||||
<div class="col-3 float-left">
|
||||
<div class="border p-3">.col-md-3</div>
|
||||
</div>
|
||||
<div class="col-3 float-left">
|
||||
<div class="border p-3">.col-md-3</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use padding utilities to create gutters for more customized layouts.
|
||||
|
||||
```html live title="Gutters with padding"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-3 float-left pr-2 mb-3">
|
||||
<div class="border color-bg-attention">.pr-2</div>
|
||||
</div>
|
||||
<div class="col-3 float-left px-2 mb-3">
|
||||
<div class="border color-bg-attention">.px-2</div>
|
||||
</div>
|
||||
<div class="col-3 float-left px-2 mb-3">
|
||||
<div class="border color-bg-attention">.px-2</div>
|
||||
</div>
|
||||
<div class="col-3 float-left pl-2 mb-3">
|
||||
<div class="border color-bg-attention">.pl-2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-3 float-left pr-2">
|
||||
<div class="border color-bg-attention">.pr-2</div>
|
||||
</div>
|
||||
<div class="col-9 float-left pl-2">
|
||||
<div class="border color-bg-attention">.pl-2</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Inline-block grids
|
||||
|
||||
Use column widths with `d-inline-block` as an alternative to floated grids.
|
||||
|
||||
```html live title="Inline-block grid"
|
||||
<div>
|
||||
<div class="col-4 d-inline-block border">
|
||||
.col-4 .d-inline-block
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-inline-block border">
|
||||
.col-4 .d-inline-block
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-inline-block border">
|
||||
.col-4 .d-inline-block
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can use column widths and other utilities on elements such as lists to create the layout you need while keeping the markup semantically correct.
|
||||
|
||||
```html live title="Inline-block grid list"
|
||||
<ul class="list-style-none">
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/broccolini.png" alt="broccolini" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/jonrohan.png" alt="jonrohan" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/muan.png" alt="muan" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/pmarsceill.png" alt="pmarsceill" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/sophshep.png" alt="sophshep" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/cmwinters.png" alt="cmwinters" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2">
|
||||
<img class="width-full avatar" src="https://github.com/jeejkang.png" alt="jeejkang" />
|
||||
</li>
|
||||
<!--
|
||||
-->
|
||||
<li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/mdo.png" alt="mdo" /></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Display table grids
|
||||
|
||||
Using [display table utilities](/utilities/layout#display) with columns gives you some alternative layout options.
|
||||
|
||||
A useful example is being able to keep the height of the container equal across a row when the length of content may differ.
|
||||
|
||||
```html live title="Table grid"
|
||||
<div class="d-table col-12">
|
||||
<div class="col-4 d-table-cell border p-2">
|
||||
Bacon ipsum dolor amet leberkas pork pig kielbasa shankle ribeye meatball, salami alcatra venison.
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-table-cell border p-2">
|
||||
Pork chop cupim cow turkey frankfurter, landjaeger fatback hamburger meatball salami spare ribs. Rump tenderloin
|
||||
salami, hamburger frankfurter landjaeger andouille.
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-table-cell border p-2">
|
||||
Brisket tongue frankfurter cupim strip steak rump picanha pancetta pork pig kevin pastrami biltong. Shankle venison
|
||||
meatball swine sausage ground round. Tail pork loin ribeye kielbasa short ribs pork chop.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also create an alternative [media object](/utilities/layout#the-media-object) layout with `.display-table` and column widths.
|
||||
|
||||
```html live title="Table grid alternative"
|
||||
<div class="d-table col-12">
|
||||
<div class="col-2 d-table-cell v-align-middle">
|
||||
<img class="width-full avatar" src="https://github.com/github.png" alt="github" />
|
||||
</div>
|
||||
<div class="col-10 d-table-cell v-align-middle pl-4">
|
||||
<h1 class="text-normal lh-condensed">GitHub</h1>
|
||||
<p class="h4 color-fg-muted text-normal mb-2">How people build software.</p>
|
||||
<a class="color-fg-muted text-small" href="#url">https://github.com/about</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Note that table cells will fill the width of their container even when the total columns doesn't add up to 12.
|
||||
|
||||
```html live title="Table grid cells"
|
||||
<div class="d-table col-12">
|
||||
<div class="col-4 d-table-cell border">
|
||||
.col-4 .d-table-cell
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-4 d-table-cell border">
|
||||
.col-4 .d-table-cell
|
||||
</div>
|
||||
<!--
|
||||
-->
|
||||
<div class="col-2 d-table-cell border">
|
||||
.col-2 .d-table-cell
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive grids
|
||||
|
||||
All the column width classes can be set per breakpoint to create responsive grid layouts. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
### Breakpoints
|
||||
|
||||
We use abbreviations for each breakpoint to keep the class names concise.
|
||||
|
||||
| Shorthand | Description |
|
||||
| --------- | ----------------- |
|
||||
| sm | min-width: 544px |
|
||||
| md | min-width: 768px |
|
||||
| lg | min-width: 1004px |
|
||||
| xl | min-width: 1280px |
|
||||
|
||||
**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `12px`. This is so that content doesn't touch the edges of the window when resized.
|
||||
|
||||
<hr />
|
||||
|
||||
In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoint 4 columns will show, and at the `lg` breakpoint 6 columns will show.
|
||||
|
||||
```html live title="Responsive grid"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
||||
.col-sm-6 .col-md-3 .col-lg-2
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
||||
.col-sm-6 .col-md-3 .col-lg-2
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
||||
.col-sm-6 .col-md-3 .col-lg-2
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
||||
.col-sm-6 .col-md-3 .col-lg-2
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
||||
.col-sm-6 .col-md-3 .col-lg-2
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
||||
.col-sm-6 .col-md-3 .col-lg-2
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
For demonstration, this is how the above example would look at the `sm` breakpoint.
|
||||
|
||||
```html live title="Responsive grid small"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-sm-6 float-left p-2 border">
|
||||
.col-sm-6
|
||||
</div>
|
||||
<div class="col-sm-6 float-left p-2 border">
|
||||
.col-sm-6
|
||||
</div>
|
||||
<div class="col-sm-6 float-left p-2 border">
|
||||
.col-sm-6
|
||||
</div>
|
||||
<div class="col-sm-6 float-left p-2 border">
|
||||
.col-sm-6
|
||||
</div>
|
||||
<div class="col-sm-6 float-left p-2 border">
|
||||
.col-sm-6
|
||||
</div>
|
||||
<div class="col-sm-6 float-left p-2 border">
|
||||
.col-sm-6
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
This is how that same example would look at the `md` breakpoint.
|
||||
|
||||
```html live title="Responsive grid medium"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-md-3 float-left p-2 border">
|
||||
.col-md-3
|
||||
</div>
|
||||
<div class="col-md-3 float-left p-2 border">
|
||||
.col-md-3
|
||||
</div>
|
||||
<div class="col-md-3 float-left p-2 border">
|
||||
.col-md-3
|
||||
</div>
|
||||
<div class="col-md-3 float-left p-2 border">
|
||||
.col-md-3
|
||||
</div>
|
||||
<div class="col-md-3 float-left p-2 border">
|
||||
.col-md-3
|
||||
</div>
|
||||
<div class="col-md-3 float-left p-2 border">
|
||||
.col-md-3
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
This is how that example would look at the `lg` breakpoint.
|
||||
|
||||
```html live title="Responsive grid large"
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-lg-2 float-left p-2 border">
|
||||
.col-lg-2
|
||||
</div>
|
||||
<div class="col-lg-2 float-left p-2 border">
|
||||
.col-lg-2
|
||||
</div>
|
||||
<div class="col-lg-2 float-left p-2 border">
|
||||
.col-lg-2
|
||||
</div>
|
||||
<div class="col-lg-2 float-left p-2 border">
|
||||
.col-lg-2
|
||||
</div>
|
||||
<div class="col-lg-2 float-left p-2 border">
|
||||
.col-lg-2
|
||||
</div>
|
||||
<div class="col-lg-2 float-left p-2 border">
|
||||
.col-lg-2
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Containers
|
||||
|
||||
Container widths match our breakpoints and are available at a `sm`, `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
|
||||
|
||||
```html live title="Containers sized"
|
||||
<div class="container-sm border">
|
||||
.container-sm, max-width 544px
|
||||
</div>
|
||||
|
||||
<div class="container-md border">
|
||||
.container-md, max-width 768px
|
||||
</div>
|
||||
|
||||
<div class="container-lg border">
|
||||
.container-lg, max-width 1012px
|
||||
</div>
|
||||
|
||||
<div class="container-xl border">
|
||||
.container-xl, max-width 1280px
|
||||
</div>
|
||||
```
|
||||
@ -1,9 +0,0 @@
|
||||
---
|
||||
title: Utilities
|
||||
path: utilities/index
|
||||
---
|
||||
|
||||
Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles. When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.
|
||||
|
||||
* Utilities should do one job well and one job only, are immutable, and on occasion are an acceptable approach to overriding component styles.
|
||||
* Utility class-names should be transparent and clearly describe the job they do.
|
||||
@ -1,475 +0,0 @@
|
||||
---
|
||||
title: Layout
|
||||
path: utilities/layout
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/layout.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Change the document layout with display, float, alignment, and other utilities.
|
||||
|
||||
|
||||
|
||||
## Display
|
||||
Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-inline-block`, `.d-table`, `.d-table-cell` utilities.
|
||||
|
||||
```html live
|
||||
<div class="d-inline border">
|
||||
.d-inline
|
||||
<div class="d-inline-block border">
|
||||
.d-inline-block
|
||||
</div>
|
||||
<span class="d-block border">.d-block</span>
|
||||
<div class="d-table border">
|
||||
<div class="d-table-cell border">
|
||||
.d-table-cell
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-table-cell border">
|
||||
.d-table-cell
|
||||
</div>
|
||||
<div class="d-none">
|
||||
.d-none
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### The HTML `hidden` attribute
|
||||
|
||||
As of [Primer v10.10.0](https://github.com/primer/css/releases/v10.10.0), `primer-base` includes a rule that sets `display: none !important` for any element with the [`hidden` attribute][hidden]. You can safely use the `hidden` attribute with display utilities, but we suggest:
|
||||
|
||||
1. Use the `hidden` attribute (and corresponding JavaScript property) if you're going to programmatically show and hide content.
|
||||
1. Use `d-none` and/or its responsive variants (`d-sm-block`, `d-lg-none`) to conditionally show content at different screen sizes.
|
||||
|
||||
Rather than toggling the `d-none` class in JavaScript, you should toggle the `hidden` property on an element. This means that you won't have to restore any more specific display utility (`d-inline` or `d-flex`, for instance) just to work around the order in which they're listed in the stylesheet.
|
||||
|
||||
```js
|
||||
// Good:
|
||||
element.hidden = !visible
|
||||
|
||||
// Bad:
|
||||
element.classList.toggle('d-none', !visible)
|
||||
element.classList.toggle('d-inline', visible)
|
||||
```
|
||||
|
||||
### `display:table` wrapping issues
|
||||
|
||||
There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/utilities/grid#column-widths).
|
||||
|
||||
```html live
|
||||
<div class="d-table table-fixed width-full">
|
||||
<div class="d-table-cell border">
|
||||
.d-table-cell
|
||||
</div>
|
||||
<div class="d-table-cell col-10 border">
|
||||
d-table-cell .col-10
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive display
|
||||
A selection of display utilities are able to be applied or changed per [breakpoint](/utilities/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
|
||||
|
||||
In the following example, the `ul` element switches from `display: block` on mobile to `display: inline-block` at the `md` breakpoint, while the list items remain inline.
|
||||
|
||||
```html live
|
||||
<h5 class="d-md-inline-block">.d-md-inline-block</h5>
|
||||
<ul class="d-md-inline-block border">
|
||||
<li class="d-inline border">.d-inline</li>
|
||||
<li class="d-inline border">.d-inline</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Responsive hide
|
||||
Hide utilities are able to be applied or changed per breakpoint using the following formula:<br /> `hide-[breakpoint]`, for example: `hide-sm`. Hide utilities act differently from other responsive styles and are applied to each **breakpoint-range only**.
|
||||
|
||||
| Shorthand | Range |
|
||||
| --- | --- |
|
||||
| -sm | 0—543px |
|
||||
| -md | 544px—767px |
|
||||
| -lg | 768px—1011px |
|
||||
| -xl | 1012px and above |
|
||||
|
||||
```html live
|
||||
<div>
|
||||
<h3>Potato update</h3>
|
||||
<span class="hide-sm hide-md">Opened by <a href="#url">broccolini</a></span>
|
||||
<span class="d-md-none">Updated</span> 3 hours ago
|
||||
</div>
|
||||
```
|
||||
|
||||
### Text direction
|
||||
`.direction-ltr` or `.direction-rtl` can be used to change the text direction. This is especially helpful when paired with `.d-table`, `.d-table-cell`, and `.v-align-middle` to create equal height, vertically centered, alternating content.
|
||||
|
||||
## Visibility
|
||||
Adjust the visibility of an element with `.v-hidden` and `.v-visible`.
|
||||
|
||||
## Overflow
|
||||
Adjust element overflow with `.overflow-hidden`, `.overflow-scroll`, and `.overflow-auto`, or use `.overflow-visible` to undo the effects of CSS with overflow issues. `.overflow-hidden` can also be used to create a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) or clear floats.
|
||||
|
||||
Overflow utilities can also target x- and y-axes independently via:
|
||||
|
||||
* `.overflow-x-auto`
|
||||
* `.overflow-x-hidden`
|
||||
* `.overflow-x-scroll`
|
||||
* `.overflow-x-visible`
|
||||
* `.overflow-y-auto`
|
||||
* `.overflow-y-hidden`
|
||||
* `.overflow-y-scroll`
|
||||
* `.overflow-y-visible`
|
||||
|
||||
Overflow utilities can be applied or changed per [breakpoint](/utilities/grid#breakpoints). Each **responsive** overflow utility is applied to the specified breakpoint and up, using the following formula: `overflow-[breakpoint]-[axis]-[property]`. For example: `overflow-x-scroll` or `overflow-md-x-visible`.
|
||||
|
||||
## Floats
|
||||
|
||||
Using floats are discouraged since [flexbox](/utilities/flexbox) offers more features and doesn't need to be cleared. If you still need it, you can use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
|
||||
|
||||
```html live
|
||||
<div class="clearfix border">
|
||||
<div class="float-left border">
|
||||
.float-left
|
||||
</div>
|
||||
<div class="float-right border">
|
||||
.float-right
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
### Responsive floats
|
||||
Float utilities can be applied or changed per [breakpoint](/utilities/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
|
||||
|
||||
Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear.
|
||||
|
||||
```html live
|
||||
<div class="clearfix border">
|
||||
<div class="float-md-left border">
|
||||
.float-md-left
|
||||
</div>
|
||||
<div class="float-md-right border">
|
||||
.float-md-right
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Alignment
|
||||
Adjust the alignment of an element with `.v-align-baseline`, `.v-align-top`, `.v-align-middle` or `.v-align-bottom`. The vertical-align property only applies to inline or table-cell boxes.
|
||||
|
||||
```html live
|
||||
<div class="d-table border">
|
||||
<div class="d-table-cell"><h1>Potatoes</h1></div>
|
||||
<div class="d-table-cell v-align-baseline">.v-align-baseline</div>
|
||||
<div class="d-table-cell v-align-top">.v-align-top</div>
|
||||
<div class="d-table-cell v-align-middle">.v-align-middle</div>
|
||||
<div class="d-table-cell v-align-bottom">.v-align-bottom</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `v-align-text-top` or `v-align-text-bottom` to adjust the alignment of an element with the top or bottom of the parent element's font.
|
||||
|
||||
```html live
|
||||
<div class="border">
|
||||
<h1 class="mr-1">Potatoes
|
||||
<span class="f4 v-align-text-top mr-1">.v-align-text-top</span>
|
||||
<span class="f4 v-align-text-bottom mr-1">.v-align-text-bottom</span>
|
||||
</h1>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Width and height
|
||||
|
||||
Use `.width-fit` to set max-width 100%.
|
||||
|
||||
```html live
|
||||
<div class="one-fourth column">
|
||||
<img class="width-fit color-bg-subtle" src="https://github.com/github.png" alt="width fitted octocat" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.width-full` to set width to 100%.
|
||||
|
||||
```html live
|
||||
<div class="d-table width-full">
|
||||
<div class="d-table-cell">
|
||||
<input class="form-control width-full" type="text" value="Full width form field" aria-label="Sample full width form field">
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.width-auto` to reset width to `auto` (initial value). Typically used with **responsive variants**. Resize the window to see the effect in the example below.
|
||||
|
||||
```html live
|
||||
<div class="d-table width-full width-md-auto">
|
||||
<div class="d-table-cell">
|
||||
<input class="form-control width-full" type="text" value="Responsive width form field" aria-label="Sample full responsive width form field">
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.width-comfortable` to set max width to `65ch`. This can be used on text elements to shorten the line length for better readability.
|
||||
|
||||
```html live
|
||||
<p class="width-comfortable">
|
||||
Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
|
||||
</p>
|
||||
```
|
||||
|
||||
Use `.height-fit` to set max-height 100%.
|
||||
|
||||
```html live
|
||||
<div class="one-fourth column" style="height: 100px; overflow: auto;">
|
||||
<div class="p-3 height-fit border">
|
||||
Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.height-full` to set height to 100%.
|
||||
|
||||
```html live
|
||||
<div class="d-table border">
|
||||
<div class="d-table-cell height-full v-align-middle pl-3">
|
||||
<!-- <%= octicon "three-bars" %> -->
|
||||
<svg class="octicon octicon-three-bars" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"></path></svg>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Position
|
||||
Position utilities can be used to alter the default document flow. **Be careful when using positioning, it's often unnecessary and commonly misused.**
|
||||
|
||||
The position of an element depends on the content. Use `top-0`, `right-0`, `bottom-0`, and `left-0` to further specify an elements final position.
|
||||
|
||||
```html live
|
||||
<div style="height: 64px;">
|
||||
<div class="border position-absolute top-0 left-0">
|
||||
.top-0 .left-0
|
||||
</div>
|
||||
<div class="border position-absolute top-0 right-0">
|
||||
.top-0 .right-0
|
||||
</div>
|
||||
<div class="border position-absolute bottom-0 right-0">
|
||||
.bottom-0 .right-0
|
||||
</div>
|
||||
<div class="border position-absolute bottom-0 left-0">
|
||||
.bottom-0 .left-0
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Using the **responsive variants** (e.g. `.right-md-0`) can be helpful for positioning select menus, dropdowns, popovers etc. when the content gets shuffled around for certain responsive breakpoints. You can also use `auto` to "reset" a final position for wider breakpoints (e.g. `right-0 right-md-auto`).
|
||||
|
||||
### Relative
|
||||
|
||||
Use `.position-relative` to create a new stacking context.
|
||||
|
||||
_Note how the other elements are displayed as if "Two" were in its normal position and taking up space._
|
||||
|
||||
```html live
|
||||
<div class="d-inline-block float-left color-bg-accent-emphasis color-fg-on-emphasis m-3" style="width:100px; height:100px;">
|
||||
One
|
||||
</div>
|
||||
<div class="d-inline-block float-left position-relative color-bg-accent-emphasis color-fg-on-emphasis m-3" style="width:100px; height:100px; top:12px; left:12px;">
|
||||
Two
|
||||
</div>
|
||||
<div class="d-inline-block float-left color-bg-accent-emphasis color-fg-on-emphasis m-3" style="width:100px; height:100px;">
|
||||
Three
|
||||
</div>
|
||||
<div class="d-inline-block float-left color-bg-accent-emphasis color-fg-on-emphasis m-3" style="width:100px; height:100px;">
|
||||
Four
|
||||
</div>
|
||||
```
|
||||
|
||||
### Absolute
|
||||
|
||||
Use `.position-absolute` to take elements out of the normal document flow.
|
||||
|
||||
```html live
|
||||
<div class="position-relative" style="height:116px;">
|
||||
<button type="button" class="btn mb-1">Button</button>
|
||||
<div class="position-absolute border p-2">
|
||||
<a href="#url" class="d-block p-1">Mashed potatoes</a>
|
||||
<a href="#url" class="d-block p-1">Fries</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Fixed
|
||||
|
||||
Use `.position-fixed` to position an element relative to the viewport. **Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.**
|
||||
|
||||
_Note: This example is shown in an `<iframe>` and therefore will not be positioned to the viewport of this page._
|
||||
|
||||
```html live
|
||||
<div style="height: 64px;">
|
||||
<div class="position-fixed right-0 bottom-0 color-bg-subtle border p-2">
|
||||
.position-fixed
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
To fill an entire width or height, use opposing directions.
|
||||
|
||||
_Note: fixed positioning has been disabled here for demonstration only._
|
||||
|
||||
```html live
|
||||
<div class="position-fixed left-0 right-0 p-3 color-bg-accent-emphasis color-fg-on-emphasis">
|
||||
.position-fixed .left-0 .right-0
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sticky
|
||||
|
||||
Use `.position-sticky` to keep an element stuck to an edge as long as its parent is visible. Things to keep in mind:
|
||||
|
||||
- Using the `.position-sticky` class by itself doesn't have any effect. An additional `[top|bottom|left|right]-0` class is needed. See the examples below.
|
||||
- Add a background color to sticky elements so it covers the content underneath.
|
||||
- Use `style="z-index: 1;"` (or higher) in case there are other elements with `z-index`.
|
||||
|
||||
#### Top
|
||||
|
||||
Combine `.position-sticky` with `.top-0` to keep an element stuck to the top.
|
||||
|
||||
```html live
|
||||
<section class="mb-3">
|
||||
<header class="border position-sticky top-0 color-bg-subtle p-3" style="z-index: 1;">Sticky header 1</header>
|
||||
<main class="border border-top-0 p-3">
|
||||
<p>Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</p>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<section class="mb-3">
|
||||
<header class="border position-sticky top-0 color-bg-subtle p-3">Sticky header 2</header>
|
||||
<main class="border border-top-0 p-3">
|
||||
<p>As Cicero would put it, “Um, not so fast.”</p>
|
||||
|
||||
<p>The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin.</p>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<section class="mb-3">
|
||||
<header class="border position-sticky top-0 color-bg-subtle p-3">Sticky header 3</header>
|
||||
<main class="border border-top-0 p-3">
|
||||
<p>Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</p>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<style>.frame-example { max-width: 300px; height: 300px; }</style>
|
||||
```
|
||||
|
||||
#### Bottom
|
||||
|
||||
Combine `.position-sticky` with `.bottom-0` to keep an element stuck to the bottom. Can be used as a footer or toolbar.
|
||||
|
||||
```html live
|
||||
<section class="mb-3">
|
||||
<main class="border border-bottom-0 p-3">
|
||||
<h3>Title</h3>
|
||||
<p>Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</p>
|
||||
</main>
|
||||
<footer class="border position-sticky bottom-0 color-bg-subtle p-3">Sticky footer 1</footer>
|
||||
</section>
|
||||
|
||||
<section class="mb-3">
|
||||
<main class="border border-bottom-0 p-3">
|
||||
<h3>Title</h3>
|
||||
<p>Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</p>
|
||||
</main>
|
||||
<footer class="border position-sticky bottom-0 color-bg-subtle p-3">Sticky footer 2</footer>
|
||||
</section>
|
||||
|
||||
<style>.frame-example { max-width: 300px; height: 300px; }</style>
|
||||
```
|
||||
|
||||
#### Left and right
|
||||
|
||||
Combine `.position-sticky` with `.left-0` or `.right-0` to keep elements stuck to the left or right when scrolling horizontally.
|
||||
|
||||
```html live
|
||||
<div class="d-flex border overflow-x-auto">
|
||||
<section class="d-flex">
|
||||
<span class="border position-sticky left-0 color-bg-subtle p-4">A</span>
|
||||
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
|
||||
</section>
|
||||
<section class="d-flex">
|
||||
<span class="border position-sticky left-0 color-bg-subtle p-4">B</span>
|
||||
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
|
||||
</section>
|
||||
<section class="d-flex">
|
||||
<span class="border position-sticky left-0 color-bg-subtle p-4">C</span>
|
||||
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
|
||||
</section>
|
||||
<section class="d-flex">
|
||||
<span class="border position-sticky left-0 color-bg-subtle p-4">D</span>
|
||||
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
|
||||
</section>
|
||||
<section class="d-flex">
|
||||
<span class="border position-sticky left-0 color-bg-subtle p-4">E</span>
|
||||
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
|
||||
<span class="border position-sticky right-0 color-bg-subtle p-4">...</span>
|
||||
</section>
|
||||
</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 live
|
||||
<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.**
|
||||
|
||||
```html live
|
||||
<div class="js-details-container Details">
|
||||
<button type="button" class="btn">Tab once from this button, and press enter</button>
|
||||
<button type="button" class="sr-only js-details-target">
|
||||
Screen reader only button
|
||||
</button>
|
||||
<div class="Details-content--hidden">
|
||||
Button activated!
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## The media object
|
||||
|
||||
Create a media object with utilities.
|
||||
|
||||
```html live
|
||||
<div class="clearfix p-3 border">
|
||||
<div class="float-left p-3 mr-3 color-bg-subtle">
|
||||
Image
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<p><b>Body</b> Bacon ipsum dolor amet shankle rump tenderloin pork chop meatball strip steak bresaola doner sirloin capicola biltong shank pig. Alcatra frankfurter ham hock, ribeye prosciutto hamburger kevin brisket chuck burgdoggen short loin.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Create a double-sided media object for a container with a flexible center.
|
||||
|
||||
```html live
|
||||
<div class="clearfix p-3 border">
|
||||
<div class="float-left p-3 mr-3 color-bg-subtle">
|
||||
Image
|
||||
</div>
|
||||
<div class="float-right p-3 ml-3 color-bg-subtle">
|
||||
Image
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<p><b>Body</b> Bacon ipsum dolor amet shankle rump tenderloin pork chop meatball strip steak bresaola doner sirloin capicola biltong shank pig. Alcatra frankfurter ham hock, ribeye prosciutto hamburger kevin brisket chuck burgdoggen short loin.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also create a media object with [flexbox utilities](./flexbox#media-object) instead of floats which can be useful for changing the vertical alignment.
|
||||
|
||||
[hidden]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
|
||||
@ -1,155 +0,0 @@
|
||||
---
|
||||
title: Margin
|
||||
path: utilities/margin
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/main/src/utilities/margin.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Margin utilities are based on a global [spacing scale](/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
|
||||
|
||||
|
||||
## Naming convention
|
||||
|
||||
Since margin utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
|
||||
|
||||
|
||||
| Shorthand | Description |
|
||||
| --- | --- |
|
||||
| m | margin |
|
||||
| t | top |
|
||||
| r | right |
|
||||
| b | bottom |
|
||||
| l | left |
|
||||
| x | horizontal, left & right |
|
||||
| y | vertical, top & bottom |
|
||||
| 0 | 0 |
|
||||
| 1 | 4px |
|
||||
| 2 | 8px |
|
||||
| 3 | 16px |
|
||||
| 4 | 24px |
|
||||
| 5 | 32px |
|
||||
| 6 | 40px |
|
||||
| 7 | 48px |
|
||||
| 8 | 64px |
|
||||
| 9 | 80px |
|
||||
| 10 | 96px |
|
||||
| 11 | 112px |
|
||||
| 12 | 128px |
|
||||
|
||||
## 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.
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-items-baseline flex-justify-around">
|
||||
<div class="color-bg-attention"><div class="m-0 p-1 color-bg-subtle">.m-0</div></div>
|
||||
<div class="color-bg-attention"><div class="m-1 p-1 color-bg-subtle">.m-1</div></div>
|
||||
<div class="color-bg-attention"><div class="m-2 p-1 color-bg-subtle">.m-2</div></div>
|
||||
<div class="color-bg-attention"><div class="m-3 p-1 color-bg-subtle">.m-3</div></div>
|
||||
<div class="color-bg-attention"><div class="m-4 p-1 color-bg-subtle">.m-4</div></div>
|
||||
<div class="color-bg-attention"><div class="m-5 p-1 color-bg-subtle">.m-5</div></div>
|
||||
<div class="color-bg-attention"><div class="m-6 p-1 color-bg-subtle">.m-6</div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-items-baseline flex-justify-around">
|
||||
<div class="color-bg-attention"><div class="mt-3 p-1 color-bg-subtle">.mt-3</div></div>
|
||||
<div class="color-bg-attention"><div class="mr-3 p-1 color-bg-subtle">.mr-3</div></div>
|
||||
<div class="color-bg-attention"><div class="mb-3 p-1 color-bg-subtle">.mb-3</div></div>
|
||||
<div class="color-bg-attention"><div class="ml-3 p-1 color-bg-subtle">.ml-3</div></div>
|
||||
<div class="color-bg-attention"><div class="mx-3 p-1 color-bg-subtle">.mx-3</div></div>
|
||||
<div class="color-bg-attention"><div class="my-3 p-1 color-bg-subtle">.my-3</div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Extended vertical margins
|
||||
|
||||
The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-attention d-inline-block"><div class="mt-7 p-1 color-bg-subtle">.mt-7</div></div>
|
||||
<div class="color-bg-attention d-inline-block"><div class="mt-8 p-1 color-bg-subtle">.mt-8</div></div>
|
||||
<div class="color-bg-attention d-inline-block"><div class="mt-9 p-1 color-bg-subtle">.mt-9</div></div>
|
||||
<div class="color-bg-attention d-inline-block"><div class="mt-10 p-1 color-bg-subtle">.mt-10</div></div>
|
||||
<div class="color-bg-attention d-inline-block"><div class="mt-11 p-1 color-bg-subtle">.mt-11</div></div>
|
||||
<div class="color-bg-attention d-inline-block"><div class="mt-12 p-1 color-bg-subtle">.mt-12</div></div>
|
||||
```
|
||||
|
||||
## Center elements
|
||||
|
||||
Use `mx-auto`to center block elements with a set width.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-attention">
|
||||
<div class="mx-auto color-bg-subtle text-center" style="max-width: 500px;">.mx-auto</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
We also provide directional margin auto. `mt-auto, mr-auto, mb-auto, ml-auto`
|
||||
|
||||
```html live
|
||||
<div class="d-flex border mb-4">
|
||||
<div style="height:100px;"></div>
|
||||
<div class="border mt-auto">`mt-auto` will push this box to the bottom.</div>
|
||||
<div class="border mb-auto">`mb-auto` will push this box to the top.</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column border">
|
||||
<div class="border ml-auto">`ml-auto` will push this box to the right.</div>
|
||||
<div class="border mr-auto">`mr-auto` will push this box to the left.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Reset margins
|
||||
Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-attention border">
|
||||
<p class="mb-0 color-bg-subtle p-1">No bottom margin on this paragraph.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive margins
|
||||
|
||||
All margin utilities can be adjusted per [breakpoint](/utilities/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-attention d-inline-block">
|
||||
<div class="mx-sm-2 mx-md-4 color-bg-subtle p-1">
|
||||
.mx-sm-2 .mx-md-4
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Negative margins
|
||||
|
||||
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`, where `spacer` runs from `1` to `6`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center">
|
||||
<div class="color-bg-attention">
|
||||
<div class="m-3 ml-n4 ml-md-n6 border-left color-border-danger color-bg-subtle p-2">
|
||||
.m-3 .ml-n4 .ml-md-n6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Extended negative margins
|
||||
|
||||
You can use the extended spacing scale for `top` and `bottom` margins, ranging from `1` to `12`.
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center">
|
||||
<div class="py-6 px-3 color-bg-attention">
|
||||
<div class="mt-n8 border-left color-border-danger color-bg-subtle p-2">
|
||||
.mt-n8
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,22 +0,0 @@
|
||||
---
|
||||
title: Marketing filters
|
||||
path: utilities/marketing-filters
|
||||
status: Stable
|
||||
status_issue: 'https://github.com/github/design-systems/issues/302'
|
||||
source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/filters.scss'
|
||||
bundle: marketing-utilities
|
||||
---
|
||||
|
||||
Filter utility classes can be applied to divs or images to apply visual effects.
|
||||
|
||||
<div class="flash flash-warn">
|
||||
Note: CSS filters are <a href="http://caniuse.com/#feat=css-filters">not supported by IE</a>
|
||||
</div>
|
||||
|
||||
## Grayscale
|
||||
|
||||
Applying `.grayscale` to an element will remove all of its colors, and make it render in black and white.
|
||||
|
||||
```html live
|
||||
<img src="https://github.com/probot.png" class="img-responsive grayscale" alt="" />
|
||||
```
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
title: Marketing layout
|
||||
sort_title: Layout Marketing
|
||||
path: utilities/marketing-layout
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/blob/main/src/marketing/utilities/layout.scss'
|
||||
bundle: marketing-utilities
|
||||
---
|
||||
|
||||
Marketing layout utilities build on top of [primer-core utilities](/utilities/layout#position), adding the option of responsive positioning.
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
Use these with `.position-absolute` to position decorative assets and shapes on marketing sites.
|
||||
|
||||
In an effort to reduce the size of our CSS, responsive breakpoints are only supported for `md` and `lg` breakpoints. **There is no support for `sm` and `xl` breakpoints.**
|
||||
|
||||
```html live
|
||||
<div class="position-relative p-6 color-bg-subtle">
|
||||
<div class="border color-bg-default position-absolute top-2">.top-2</div>
|
||||
<div class="border color-bg-default position-absolute position-lg-static right-md-4">.right-md-4</div>
|
||||
<div class="border color-bg-default position-lg-absolute left-lg-1">.left-lg-1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Negative offset columns
|
||||
|
||||
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/spacing/#extended-spacing-scale).
|
||||
|
||||
```html live
|
||||
<div class="mx-auto border" style="width: 300px">
|
||||
<div class="offset-n1 col-4 border p-3">.offset-n1</div>
|
||||
<div class="offset-n2 col-4 border p-3">.offset-n2</div>
|
||||
</div>
|
||||
```
|
||||
@ -1,52 +0,0 @@
|
||||
---
|
||||
title: Marketing typography
|
||||
path: utilities/marketing-type
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/tree/main/src/marketing/type'
|
||||
bundle: marketing-type
|
||||
---
|
||||
|
||||
The typography for our marketing pages differs from Primer CSS's core. It is responsive, on a slightly different scale, and headlines are set in the [defined marketing font](https://github.com/primer/css/blob/main/src/marketing/support/variables.scss).
|
||||
|
||||
## Heading utilities
|
||||
|
||||
Use `.h0-mktg` – `.h6-mktg` to change an element's font, size, and weight on marketing pages.
|
||||
|
||||
```html live title="Heading Utilities"
|
||||
<p class="h0-mktg">This is heading 0</p>
|
||||
<p class="h1-mktg">This is heading 1</p>
|
||||
<p class="h2-mktg">This is heading 2</p>
|
||||
<p class="h3-mktg">This is heading 3</p>
|
||||
<p class="h4-mktg">This is heading 4</p>
|
||||
<p class="h5-mktg">This is heading 5</p>
|
||||
<p class="h6-mktg">This is heading 6</p>
|
||||
```
|
||||
|
||||
## Body content utilities
|
||||
|
||||
Use `.f0-mktg` – `.f6-mktg` to change an element's body font, size, and weight on marketing pages.
|
||||
|
||||
```html live title="Heading Utilities"
|
||||
<p class="f0-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
|
||||
|
||||
<p class="f1-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
|
||||
|
||||
<p class="f2-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
|
||||
|
||||
<p class="f3-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
|
||||
|
||||
<p class="f4-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
|
||||
|
||||
<p class="f5-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
|
||||
|
||||
<p class="f6-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
|
||||
```
|
||||
|
||||
|
||||
## Typographic utilities
|
||||
|
||||
These utilities are meant to be used in addition to Primer CSS's core utilities.
|
||||
|
||||
```html live title="Typographic Utilities"
|
||||
<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
|
||||
```
|
||||
@ -1,109 +0,0 @@
|
||||
---
|
||||
title: Padding
|
||||
path: utilities/padding
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/utilities/padding.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Padding utilities are based on a global [spacing scale](/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
|
||||
|
||||
|
||||
|
||||
## Shorthand
|
||||
|
||||
Since padding utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
|
||||
|
||||
| Shorthand | Description |
|
||||
| --- | --- |
|
||||
| p | padding |
|
||||
| t | top |
|
||||
| r | right |
|
||||
| b | bottom |
|
||||
| l | left |
|
||||
| x | horizontal, left & right |
|
||||
| y | vertical, top & bottom |
|
||||
| 0 | 0 |
|
||||
| 1 | 4px |
|
||||
| 2 | 8px |
|
||||
| 3 | 16px |
|
||||
| 4 | 24px |
|
||||
| 5 | 32px |
|
||||
| 6 | 40px |
|
||||
| 7 | 48px |
|
||||
| 8 | 64px |
|
||||
| 9 | 80px |
|
||||
| 10 | 96px |
|
||||
| 11 | 112px |
|
||||
| 12 | 128px |
|
||||
|
||||
_**Note:** The gray in the examples below represents the element, and the yellow represents the padding._
|
||||
|
||||
## 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.
|
||||
|
||||
```html live
|
||||
<div class="p-0 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.p-0</div></div>
|
||||
<div class="p-1 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.p-1</div></div>
|
||||
<div class="p-2 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.p-2</div></div>
|
||||
<div class="p-3 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.p-3</div></div>
|
||||
<div class="p-4 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.p-4</div></div>
|
||||
<div class="p-5 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.p-5</div></div>
|
||||
<div class="p-6 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.p-6</div></div>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```html live
|
||||
<div class="pt-3 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pt-3</div></div>
|
||||
<div class="pr-3 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pr-3</div></div>
|
||||
<div class="pb-3 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pb-3</div></div>
|
||||
<div class="pl-3 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pl-3</div></div>
|
||||
<div class="py-3 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.py-3</div></div>
|
||||
<div class="px-3 mr-3 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.px-3</div></div>
|
||||
```
|
||||
|
||||
## Extended directional padding
|
||||
|
||||
The extended directional padding scale starts from spacer `7` and goes up to `12`. All directions and their responsive variants are supported, except for `px`.
|
||||
|
||||
```html live
|
||||
<div class="pt-7 mr-1 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pt-7</div></div>
|
||||
<div class="pt-8 mr-1 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pt-8</div></div>
|
||||
<div class="pt-9 mr-1 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pt-9</div></div>
|
||||
<div class="pt-10 mr-1 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pt-10</div></div>
|
||||
<div class="pt-11 mr-1 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pt-11</div></div>
|
||||
<div class="pt-12 mr-1 color-bg-attention d-inline-block"><div class="color-bg-subtle p-1">.pt-12</div></div>
|
||||
```
|
||||
|
||||
|
||||
## Responsive padding
|
||||
|
||||
All padding utilities can be adjusted per [breakpoint](/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html live
|
||||
<div class="px-sm-2 px-md-4 color-bg-attention d-inline-block">
|
||||
<div class="color-bg-subtle p-1">.px-sm-2 .px-md-4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive container padding
|
||||
|
||||
`.p-responsive` is a padding class that adds padding on the left and right sides of an element. It is intended to be used with [container styles](/utilities/grid#containers).
|
||||
|
||||
- On **0 to sm** screens, it gives the element padding of `$spacer-3`
|
||||
- On **sm to lg** screens it gives the element padding of `$spacer-6`
|
||||
- On **lg and wider** screens, it gives the element padding of `$spacer-3`
|
||||
|
||||
It's the equivalent of adding the `.px-3 .px-sm-6 .px-lg-3` utility classes.
|
||||
|
||||
```html live
|
||||
<div class="p-responsive color-bg-attention">
|
||||
<div class="color-bg-subtle p-1">.p-responsive</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
> Note: Since the example is shown in an `iframe` it won't show the change to `$spacer-3` for the `lg` breakpoint.
|
||||
@ -1,151 +0,0 @@
|
||||
---
|
||||
title: Typography
|
||||
path: utilities/typography
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/utilities/typography.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/support/typography#typography-variables) that you can use in components or custom CSS.
|
||||
|
||||
|
||||
|
||||
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/support/breakpoints) to be larger on desktop.
|
||||
|
||||
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 00 | 40px | 48px | 60 | 72 |
|
||||
| 0 | 32px | 40px | 50 | 60 |
|
||||
| 1 | 26px | 32px | 40 | 48 |
|
||||
| 2 | 22px | 24px | 30 | 36 |
|
||||
| 3 | 18px | 20px | 25 | 30 |
|
||||
| 4 | 16px | 16px | 20 | 24 |
|
||||
| 5 | 14px | 14px | 17.5 | 21 |
|
||||
| 6 | 12px | 12px | 15 | 18 |
|
||||
|
||||
|
||||
## Heading utilities
|
||||
|
||||
Use `.h1` – `.h6` to change an elements font size and weight to match our heading styles.
|
||||
|
||||
```html live
|
||||
<p class="h1">Pizza 1</p>
|
||||
<p class="h2">Pizza 2</p>
|
||||
<p class="h3">Pizza 3</p>
|
||||
<p class="h4">Pizza 4</p>
|
||||
<p class="h5">Pizza 5</p>
|
||||
<p class="h6">Pizza 6</p>
|
||||
```
|
||||
|
||||
These are particularly useful for changing the visual appearance while keeping the markup semantically correct. Be sure you keep the hierarchy appropriate for the page.
|
||||
|
||||
```html live
|
||||
<h2 class="h1">Looks like a heading 1, semantically a heading 2</h2>
|
||||
```
|
||||
|
||||
## Type scale utilities
|
||||
|
||||
Use `.f1` – `.f6` to change an elements font size while keeping inline with our type scale.
|
||||
|
||||
```html live
|
||||
<p class="f1">Focaccia</p>
|
||||
<p class="f2">Focaccia</p>
|
||||
<p class="f3">Focaccia</p>
|
||||
<p class="f4">Focaccia</p>
|
||||
<p class="f5">Focaccia</p>
|
||||
<p class="f6">Focaccia</p>
|
||||
```
|
||||
|
||||
Lighter font-weight utilities are available in a limited range. Lighter font-weights reduce the legibility of text, particularly at small font sizes, so the scale only goes down to `f3` at 20px. The larger sizes`f0` and `f00` allow for lighter and larger type that is in keeping with our marketing styles.
|
||||
|
||||
```html live
|
||||
<h1 class="f00-light">Potato chips</h1>
|
||||
<h1 class="f0-light">Potato chips</h1>
|
||||
<h1 class="f1-light">Potato chips</h1>
|
||||
<h1 class="f2-light">Potato chips</h1>
|
||||
<h1 class="f3-light">Potato chips</h1>
|
||||
```
|
||||
|
||||
## Line height styles
|
||||
|
||||
Change the line height density with these utilities. Responsive variants are also available (e.g. `.lh-sm-condensed`).
|
||||
|
||||
```html live
|
||||
<p class="lh-default">
|
||||
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
|
||||
</p>
|
||||
<p class="lh-condensed">
|
||||
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
|
||||
</p>
|
||||
<p class="lh-condensed-ultra">
|
||||
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
|
||||
</p>
|
||||
|
||||
<style>.frame-example {height:350px;}</style>
|
||||
```
|
||||
|
||||
The `lh-0` utility class sets `line-height: 0 !important`, and can be used to remove vertical spacing from elements that inherit line-height but don't contain any text.
|
||||
|
||||
## Typographic styles
|
||||
Change the font weight, styles, and alignment with these utilities.
|
||||
|
||||
```html live
|
||||
<p class="text-normal">Normal</p>
|
||||
<p class="text-italic">Italic</p>
|
||||
<p class="text-bold">Bold</p>
|
||||
<p class="text-semibold">Semi-bold</p>
|
||||
<p class="text-light">Light</p>
|
||||
<p class="text-uppercase">Uppercase</p>
|
||||
<p class="no-wrap">No wrap</p>
|
||||
<p class="ws-normal">Normal whitespace</p>
|
||||
<p class="text-underline">Text underline</p>
|
||||
<p class="no-underline">No underline</p>
|
||||
<p class="text-emphasized">Emphasized</p>
|
||||
<p class="text-small">Small</p>
|
||||
<p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
|
||||
<p class="text-mono">Monospace</p>
|
||||
<p class="user-select-none">User Select None</p>
|
||||
<p class="text-capitalize">capitalize</p>
|
||||
```
|
||||
|
||||
## Word-break
|
||||
There are two utilities for adjusting how lines and words of text break when they exceed the width of their containing element:
|
||||
|
||||
1. `wb-break-word` sets `word-break: break-word` and `overflow-wrap: break-word`, which will only break words if they would exceed the line length _after wrapping_.
|
||||
|
||||
2. `wb-break-all` sets `word-break: break-all`, which will force a word to break regardless of whether it's shorter than the line length. See [MDN's `word-break` docs](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values) for more info.
|
||||
|
||||
```html live
|
||||
<p class="wb-break-word p-2 color-bg-subtle col-3 border-right">.wb-break-word will only break long words that exceed the line length, such as supercalifragilisticexpialidocious. Long words like "exceedingly" will simply break to the next line.</p>
|
||||
<p class="wb-break-all p-2 color-bg-subtle col-3 border-right">.wb-break-all will break any word that meets the end its line, and should be used sparingly. As you can see here, it's not particularly nice to read text that breaks in weird places.</p>
|
||||
```
|
||||
|
||||
|
||||
## Text alignment
|
||||
|
||||
Use text alignment utilities to left align, center, or right align text.
|
||||
|
||||
```html live
|
||||
<p class="text-left">Left align</p>
|
||||
<p class="text-center">Center</p>
|
||||
<p class="text-right">Right align</p>
|
||||
```
|
||||
## Responsive text alignment
|
||||
|
||||
Use the following formula to make a text alignment utility responsive: `.text-[breakpoint]-[alignment]`
|
||||
|
||||
```html live
|
||||
<p class="text-left text-sm-center text-lg-right">Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
|
||||
```
|
||||
|
||||
## List styles
|
||||
|
||||
Remove bullets from an unordered list or numbers from an ordered list by applying `.list-style-none` to the `<ul>`.
|
||||
|
||||
```html live
|
||||
<ul class="list-style-none">
|
||||
<li>First list item</li>
|
||||
<li>Second list item</li>
|
||||
<li>Third list item</li>
|
||||
</ul>
|
||||
```
|
||||
@ -1,11 +0,0 @@
|
||||
// temporary import until primitives moves to core bundle
|
||||
// importing the index from /css didn't play nice with Gatsby
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css'
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css'
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css'
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css'
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css'
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css'
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css'
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css'
|
||||
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css'
|
||||
@ -1,36 +0,0 @@
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: 'Primer CSS',
|
||||
shortName: 'CSS',
|
||||
description: "CSS for GitHub's Primer design system",
|
||||
imageUrl: 'https://user-images.githubusercontent.com/586552/47590375-121cad80-d93a-11e8-89f2-a1cf108e0548.png'
|
||||
},
|
||||
pathPrefix: '/css',
|
||||
plugins: [
|
||||
{
|
||||
resolve: '@primer/gatsby-theme-doctocat',
|
||||
options: {
|
||||
defaultBranch: 'main',
|
||||
repoRootPath: '..'
|
||||
}
|
||||
},
|
||||
'gatsby-plugin-sass',
|
||||
{
|
||||
resolve: 'gatsby-plugin-svgr',
|
||||
options: {
|
||||
svgo: false
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-alias-imports`,
|
||||
options: {
|
||||
alias: {
|
||||
'styled-components': path.resolve(__dirname, 'node_modules', 'styled-components'),
|
||||
react: path.resolve(__dirname, 'node_modules', 'react')
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
exports.onCreateWebpackConfig = ({actions, stage, plugins}) => {
|
||||
actions.setWebpackConfig({
|
||||
node: {
|
||||
fs: 'empty'
|
||||
},
|
||||
plugins: [
|
||||
plugins.define({
|
||||
__DEV__: stage === 'develop' || stage === 'develop-html'
|
||||
})
|
||||
]
|
||||
})
|
||||
}
|
||||
@ -3,30 +3,24 @@
|
||||
"name": "docs",
|
||||
"repository": "primer/css",
|
||||
"scripts": {
|
||||
"clean": "gatsby clean",
|
||||
"develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
|
||||
"storybook": "NODE_ENV=test start-storybook -p 6006",
|
||||
"storybook": "NODE_ENV=test storybook dev -p 6006",
|
||||
"build:storybook": "script/build-storybook"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-env": "^7.22.7",
|
||||
"@babel/preset-react": "^7.16.7",
|
||||
"@csstools/postcss-sass": "5.0.1",
|
||||
"@primer/components": "32.1.0",
|
||||
"@primer/gatsby-theme-doctocat": "4.4.0",
|
||||
"@geometricpanda/storybook-addon-badges": "^2.0.0",
|
||||
"@primer/octicons": "17.0.0",
|
||||
"@primer/octicons-react": "17.0.0",
|
||||
"@primer/primitives": "7.11.10",
|
||||
"@primer/react": "^35.26.1",
|
||||
"@primer/view-components": "^0.0.114",
|
||||
"@svgr/webpack": "5.5.0",
|
||||
"autoprefixer": "10.4.2",
|
||||
"babel-preset-gatsby": "^2.14.0",
|
||||
"chroma-js": "^2.4.2",
|
||||
"clsx": "^1.1.1",
|
||||
"clsx": "^1.2.1",
|
||||
"core-js": "^3.20.3",
|
||||
"gatsby": "2.32.13",
|
||||
"gatsby-plugin-alias-imports": "^1.0.5",
|
||||
"gatsby-plugin-sass": "3.2.0",
|
||||
"gatsby-plugin-svgr": "2.1.0",
|
||||
"path": "0.12.7",
|
||||
"postcss": "8.4.5",
|
||||
"postcss-import": "14.1.0",
|
||||
@ -48,15 +42,18 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.7",
|
||||
"@storybook/addon-a11y": "6.5.9",
|
||||
"@storybook/addon-actions": "^6.5.0",
|
||||
"@storybook/addon-essentials": "^6.5.0",
|
||||
"@storybook/addon-links": "^6.5.0",
|
||||
"@storybook/addon-postcss": "2.0.0",
|
||||
"@storybook/builder-webpack5": "^6.5.0",
|
||||
"@storybook/manager-webpack5": "^6.5.9",
|
||||
"@storybook/preset-scss": "^1.0.3",
|
||||
"@storybook/react": "6.5.0",
|
||||
"babel-loader": "^8.2.5"
|
||||
"@storybook/addon-essentials": "^7.0.26",
|
||||
"@storybook/addon-interactions": "^7.0.26",
|
||||
"@storybook/addon-links": "^7.0.26",
|
||||
"@storybook/addon-storysource": "^7.0.27",
|
||||
"@storybook/addon-styling": "^1.3.2",
|
||||
"@storybook/blocks": "^7.0.26",
|
||||
"@storybook/react": "^7.0.26",
|
||||
"@storybook/react-webpack5": "^7.0.26",
|
||||
"@storybook/testing-library": "^0.0.14-next.2",
|
||||
"babel-loader": "^8.2.5",
|
||||
"eslint-plugin-storybook": "^0.6.12",
|
||||
"storybook": "^7.0.26",
|
||||
"storybook-addon-pseudo-states": "^2.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,8 +7,11 @@ else
|
||||
echo '<base href="/css/storybook/" />' >> .storybook/manager-head.html
|
||||
fi
|
||||
|
||||
# Make Gatsby happy
|
||||
# yarn gatsby build
|
||||
|
||||
# Build storybook inside docs
|
||||
./node_modules/.bin/build-storybook -o public/storybook public/static
|
||||
npx storybook build -o public/storybook public/static
|
||||
|
||||
# Remove manager-head after build to not interfere with dev builds
|
||||
rm .storybook/manager-head.html
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import {Box, Heading, Text, ThemeProvider} from '@primer/components'
|
||||
import {Container} from '@primer/gatsby-theme-doctocat'
|
||||
import React from 'react'
|
||||
import {version} from '../../../../../package.json'
|
||||
import {ReactComponent as HeroIllustration} from '../../../hero-illustration.svg'
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<ThemeProvider colorMode="night" nightScheme="dark_dimmed">
|
||||
<Box bg="canvas.default" py={6}>
|
||||
<Container>
|
||||
<Heading color="accent.fg" fontSize={7} m={0}>
|
||||
Primer CSS
|
||||
</Heading>
|
||||
<Text as="p" fontFamily="mono" mt={0} mb={2} color="fg.default" fontSize={2}>
|
||||
v{version}
|
||||
</Text>
|
||||
<HeroIllustration />
|
||||
</Container>
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default Hero
|
||||
@ -1,42 +0,0 @@
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../../../../src/docs.scss'
|
||||
import {Flex} from '@primer/components'
|
||||
import {Frame} from '@primer/gatsby-theme-doctocat'
|
||||
import {MoonIcon, SunIcon} from '@primer/octicons-react'
|
||||
import React from 'react'
|
||||
|
||||
function LivePreviewWrapper({children}) {
|
||||
const [colorMode, setColorModeState] = React.useState('light')
|
||||
|
||||
const setColorMode = mode => {
|
||||
window.dispatchEvent(new CustomEvent('color-mode-change', {detail: {mode}}))
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
const callback = e => setColorModeState(e.detail.mode)
|
||||
window.addEventListener('color-mode-change', callback)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('color-mode-change', callback)
|
||||
}
|
||||
}, [setColorModeState])
|
||||
|
||||
return (
|
||||
<Frame>
|
||||
<style>{primerStyles}</style>
|
||||
<div data-color-mode={colorMode} data-light-theme="light" data-dark-theme="dark">
|
||||
<Flex pt={2} px={2} justifyContent="flex-end">
|
||||
<button
|
||||
className="btn"
|
||||
aria-label={colorMode === 'light' ? 'Activate dark mode' : 'Activate light mode'}
|
||||
onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
|
||||
>
|
||||
{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
|
||||
</button>
|
||||
</Flex>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
</Frame>
|
||||
)
|
||||
}
|
||||
|
||||
export default LivePreviewWrapper
|
||||
@ -1,164 +0,0 @@
|
||||
- title: Introduction
|
||||
children:
|
||||
- title: Getting started
|
||||
url: /getting-started
|
||||
- title: Contributing
|
||||
url: /getting-started/contributing
|
||||
- title: Support
|
||||
url: /support
|
||||
children:
|
||||
- title: Introduction
|
||||
url: /support
|
||||
- title: Breakpoints
|
||||
url: /support/breakpoints
|
||||
- title: Spacing
|
||||
url: /support/spacing
|
||||
- title: Theming
|
||||
url: /support/theming
|
||||
- title: Typography
|
||||
url: /support/typography
|
||||
- title: Variables
|
||||
url: /support/variables
|
||||
- title: Utilities
|
||||
url: /utilities
|
||||
children:
|
||||
- title: Introduction
|
||||
url: /utilities
|
||||
- title: Animations
|
||||
url: /utilities/animations
|
||||
- title: Borders
|
||||
url: /utilities/borders
|
||||
- title: Box shadow
|
||||
url: /utilities/box-shadow
|
||||
- title: Colors
|
||||
url: /utilities/colors
|
||||
- title: Details
|
||||
url: /utilities/details
|
||||
- title: Flexbox
|
||||
url: /utilities/flexbox
|
||||
- title: Grid
|
||||
url: /utilities/grid
|
||||
- title: Layout
|
||||
url: /utilities/layout
|
||||
- title: Margin
|
||||
url: /utilities/margin
|
||||
- title: Padding
|
||||
url: /utilities/padding
|
||||
- title: Typography
|
||||
url: /utilities/typography
|
||||
- title: Components
|
||||
url: /components
|
||||
children:
|
||||
- title: Introduction
|
||||
url: /components
|
||||
- title: Alerts
|
||||
url: /components/alerts
|
||||
- title: Avatars
|
||||
url: /components/avatars
|
||||
- title: AvatarStack
|
||||
url: /components/avatar-stack
|
||||
- title: Blankslate
|
||||
url: /components/blankslate
|
||||
- title: Box overlay
|
||||
url: /components/box-overlay
|
||||
- title: Box
|
||||
url: /components/box
|
||||
- title: Branch name
|
||||
url: /components/branch-name
|
||||
- title: Breadcrumbs
|
||||
url: /components/breadcrumb
|
||||
- title: Buttons
|
||||
url: /components/buttons
|
||||
- title: ButtonGroup
|
||||
url: /components/button-group
|
||||
- title: Counter
|
||||
url: /components/counter
|
||||
- title: Dropdown
|
||||
url: /components/dropdown
|
||||
- title: Filter list
|
||||
url: /components/filter-list
|
||||
- title: Forms
|
||||
url: /components/forms
|
||||
- title: Header
|
||||
url: /components/header
|
||||
- title: Labels
|
||||
url: /components/labels
|
||||
- title: Layout
|
||||
url: /components/layout
|
||||
- title: Links
|
||||
url: /components/links
|
||||
- title: Loaders
|
||||
url: /components/loaders
|
||||
- title: Markdown
|
||||
url: /components/markdown
|
||||
- title: Menu
|
||||
url: /components/menu
|
||||
- title: Navigation
|
||||
url: /components/navigation
|
||||
- title: Pagination
|
||||
url: /components/pagination
|
||||
- title: Popover
|
||||
url: /components/popover
|
||||
- title: Progress
|
||||
url: /components/progress
|
||||
- title: Select menu
|
||||
url: /components/select-menu
|
||||
- title: Side nav
|
||||
url: /components/side-nav
|
||||
- title: State
|
||||
url: /components/state
|
||||
- title: Subhead
|
||||
url: /components/subhead
|
||||
- title: Subnav
|
||||
url: /components/subnav
|
||||
- title: Tabnav
|
||||
url: /components/tabnav
|
||||
- title: Timeline
|
||||
url: /components/timeline
|
||||
- title: Toasts
|
||||
url: /components/toasts
|
||||
- title: Tooltips
|
||||
url: /components/tooltips
|
||||
- title: Truncate
|
||||
url: /components/truncate
|
||||
- title: UnderlineNav
|
||||
url: /components/underline-nav
|
||||
- title: Marketing
|
||||
url: /marketing
|
||||
children:
|
||||
- title: Introduction
|
||||
url: /marketing
|
||||
- title: Buttons
|
||||
url: /components/marketing-buttons
|
||||
- title: Filters
|
||||
url: /utilities/marketing-filters
|
||||
- title: Layout
|
||||
url: /utilities/marketing-layout
|
||||
- title: Links
|
||||
url: /components/marketing-links
|
||||
- title: Typography
|
||||
url: /utilities/marketing-type
|
||||
- title: Tools
|
||||
url: /tools
|
||||
children:
|
||||
- title: Introduction
|
||||
url: /tools
|
||||
- title: Deprecation data
|
||||
url: /tools/deprecations
|
||||
- title: Linting
|
||||
url: /tools/linting
|
||||
- title: Prototyping
|
||||
url: /tools/prototyping
|
||||
- title: Testing resources
|
||||
url: /tools/testing
|
||||
- title: Principles
|
||||
url: /principles
|
||||
children:
|
||||
- title: Introduction
|
||||
url: /principles
|
||||
- title: Accessibility
|
||||
url: /principles/accessibility
|
||||
- title: HTML
|
||||
url: /principles/html
|
||||
- title: SCSS
|
||||
url: /principles/scss
|
||||
@ -1,297 +0,0 @@
|
||||
import primerStyles from '!!raw-loader!postcss-loader!../../src/docs.scss'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import chroma from 'chroma-js'
|
||||
import styled from 'styled-components'
|
||||
import {Frame} from '@primer/gatsby-theme-doctocat'
|
||||
import {Box, Flex, Text} from '@primer/components'
|
||||
import {colors, colorModes, getPaletteByName} from './color-variables'
|
||||
import Table from './table'
|
||||
|
||||
function LivePreviewWrapper({children}) {
|
||||
return (
|
||||
<Frame>
|
||||
<style>{primerStyles}</style>
|
||||
<Flex direction="row">
|
||||
<div data-color-mode="light" data-light-theme="light" style={{flex: 1}}>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" style={{flex: 1}}>
|
||||
<div className="frame-example p-3">{children}</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Frame>
|
||||
)
|
||||
}
|
||||
|
||||
function capitalize(word) {
|
||||
return word[0].toUpperCase() + word.substr(1)
|
||||
}
|
||||
|
||||
export function CSSModeVars({filter, vars, render}) {
|
||||
const filteredVars = vars.filter(s => s.match(filter))
|
||||
|
||||
return (
|
||||
<LivePreviewWrapper>
|
||||
{filteredVars.map(variable => (
|
||||
<div key={variable}>{render(variable)}</div>
|
||||
))}
|
||||
</LivePreviewWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export function ColorModeTable({baseColor, values, ...rest}) {
|
||||
const fgColor = overlayColor(baseColor)
|
||||
const colorProps = {bg: baseColor, color: fgColor}
|
||||
|
||||
return (
|
||||
<Table {...rest}>
|
||||
<thead>
|
||||
<tr>
|
||||
<PaletteCell as="th" {...colorProps}>
|
||||
Variable
|
||||
</PaletteCell>
|
||||
{colorModes.map(mode => (
|
||||
<PaletteCell as="th" {...colorProps} key={mode}>
|
||||
{capitalize(mode)} Mode
|
||||
</PaletteCell>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{values.map(({variable, slug, values}) => (
|
||||
<tr key={slug}>
|
||||
<PaletteCell {...colorProps}>
|
||||
<Var>{variable}</Var>
|
||||
</PaletteCell>
|
||||
{Object.keys(values).map(mode => (
|
||||
<PaletteCell key={mode} bg={values[mode]} color={overlayColor(values[mode])}>
|
||||
<Var>{values[mode]}</Var>
|
||||
</PaletteCell>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
|
||||
export function PaletteTable(props) {
|
||||
const {columns = [], hasHeader, ...rest} = props
|
||||
const {children = <PaletteTableFragment columns={columns} {...rest} />} = rest
|
||||
return (
|
||||
<Table {...rest}>
|
||||
{hasHeader ? (
|
||||
<thead>
|
||||
<tr>
|
||||
{getColumns(columns).map(col => (
|
||||
<th key={col.title}>{col.title}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
) : null}
|
||||
{children}
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
|
||||
export function PaletteTableFragment(props) {
|
||||
const {children, columns = [], name, type, sparse, prefix = type, ...rest} = props
|
||||
let values = props.values
|
||||
if (name) {
|
||||
values = getPaletteByName(name).values
|
||||
}
|
||||
if (type && sparse) {
|
||||
values = values.filter(v => v.aliases[type])
|
||||
}
|
||||
if (!values || values.length === 0) {
|
||||
return null
|
||||
}
|
||||
const cols = getColumns(columns)
|
||||
return (
|
||||
<tbody {...rest}>
|
||||
{children}
|
||||
{values.map(row => {
|
||||
const cellProps = {type, ...row}
|
||||
const valueProps = {prefix, type, ...row}
|
||||
return (
|
||||
<tr key={row.slug}>
|
||||
{cols.map(({Cell = PaletteCell, Value = PaletteValue, title}) => (
|
||||
<Cell key={title} {...cellProps}>
|
||||
<Value {...valueProps} />
|
||||
</Cell>
|
||||
))}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
)
|
||||
}
|
||||
|
||||
PaletteTable.defaultProps = {
|
||||
columns: ['alias', 'variable', 'value'],
|
||||
hasHeader: true
|
||||
}
|
||||
|
||||
PaletteTableFragment.defaultProps = {
|
||||
type: 'bg',
|
||||
columns: PaletteTable.defaultProps.columns
|
||||
}
|
||||
|
||||
PaletteTable.propTypes = {
|
||||
columns: PropTypes.arrayOf(
|
||||
PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.shape({
|
||||
title: PropTypes.string,
|
||||
Cell: PropTypes.func
|
||||
})
|
||||
])
|
||||
),
|
||||
name: PropTypes.string,
|
||||
prefix: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
values: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
value: PropTypes.string,
|
||||
aliases: PropTypes.object
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
export function PaletteCell(props) {
|
||||
return <Box {...props} />
|
||||
}
|
||||
|
||||
PaletteCell.defaultProps = {
|
||||
as: 'td'
|
||||
}
|
||||
|
||||
PaletteCell.propTypes = {}
|
||||
|
||||
PaletteCell.Alias = ({aliases, type, ...rest}) =>
|
||||
aliases && aliases[type] ? (
|
||||
<PaletteCell.Smart type={type} {...rest}>
|
||||
<Var>.{aliases[type]}</Var>
|
||||
</PaletteCell.Smart>
|
||||
) : (
|
||||
<td />
|
||||
)
|
||||
|
||||
PaletteCell.Alias.propTypes = {
|
||||
aliases: PropTypes.object.isRequired,
|
||||
type: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
PaletteCell.Smart = ({type, ...rest}) => {
|
||||
switch (type) {
|
||||
case 'fg':
|
||||
case 'text':
|
||||
return <PaletteCell.Text {...rest} />
|
||||
case 'border':
|
||||
return <PaletteCell.Border {...rest} />
|
||||
case 'bg':
|
||||
default:
|
||||
return <PaletteCell.Background {...rest} />
|
||||
}
|
||||
}
|
||||
|
||||
PaletteCell.Smart.propTypes = {
|
||||
type: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
PaletteCell.Background = ({value, ...rest}) => <PaletteCell bg={value} color={overlayColor(value)} {...rest} />
|
||||
|
||||
PaletteCell.Text = ({value, ...rest}) => <PaletteCell color={value} bg={overlayColor(value)} {...rest} />
|
||||
|
||||
PaletteCell.Border = ({value, ...rest}) => (
|
||||
<PaletteCell bg="white" style={{border: `1px solid ${value} !important`}} {...rest} />
|
||||
)
|
||||
|
||||
export function PaletteValue({value, ...rest}) {
|
||||
return <Var {...rest}>{value}</Var>
|
||||
}
|
||||
|
||||
PaletteValue.Variable = ({variable}) => <Var>var({variable})</Var>
|
||||
PaletteValue.Variable.propTypes = {
|
||||
variable: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
PaletteValue.PrefixedClass = ({prefix, slug}) => (
|
||||
<Var>
|
||||
.{prefix}-{slug}
|
||||
</Var>
|
||||
)
|
||||
|
||||
PaletteValue.PrefixedClass.propTypes = {
|
||||
prefix: PropTypes.string.isRequired,
|
||||
slug: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
PaletteTable.columns = {
|
||||
variable: {
|
||||
title: 'Variable',
|
||||
Cell: PaletteCell.Background,
|
||||
Value: PaletteValue.Variable
|
||||
},
|
||||
value: {
|
||||
title: 'Value',
|
||||
Cell: PaletteCell.Background,
|
||||
Value: PaletteValue
|
||||
},
|
||||
background: {
|
||||
title: 'Background',
|
||||
Cell: PaletteCell.Background,
|
||||
Value: PaletteCell.PrefixedClass
|
||||
},
|
||||
foreground: {
|
||||
title: 'Foreground',
|
||||
Cell: PaletteCell.Text,
|
||||
Value: PaletteCell.PrefixedClass
|
||||
},
|
||||
className: {
|
||||
title: 'Class',
|
||||
Cell: PaletteCell.Background,
|
||||
Value: PaletteValue.PrefixedClass
|
||||
},
|
||||
alias: {
|
||||
title: 'Alias',
|
||||
Cell: PaletteCell.Alias
|
||||
}
|
||||
}
|
||||
|
||||
export const Var = styled(Text).attrs({
|
||||
as: 'var',
|
||||
fontFamily: 'mono',
|
||||
fontStyle: 'normal'
|
||||
})`
|
||||
white-space: nowrap;
|
||||
`
|
||||
|
||||
export const PaletteHeading = ({indicatorColor, children, ...rest}) => (
|
||||
<Text as="th" fontWeight="bold" {...rest}>
|
||||
<Box pt={3}>{children}</Box>
|
||||
</Text>
|
||||
)
|
||||
|
||||
const $overlayColorCache = new Map()
|
||||
export function overlayColor(bg) {
|
||||
if (!bg) {
|
||||
throw new Error(`overlayColor() expects a color string, but got: ${JSON.stringify(bg)}`)
|
||||
}
|
||||
if ($overlayColorCache.has(bg)) {
|
||||
return $overlayColorCache.get(bg)
|
||||
} else {
|
||||
try {
|
||||
const result = chroma(bg).luminance() > 0.5 ? colors.black : colors.white
|
||||
$overlayColorCache.set(bg, result)
|
||||
return result
|
||||
} catch (err) {
|
||||
return 'white'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getColumns(columns) {
|
||||
return columns.map(col => PaletteTable.columns[col] || col).filter(col => col)
|
||||
}
|
||||
@ -1,114 +0,0 @@
|
||||
import titleCase from 'title-case'
|
||||
import allModeColors from '@primer/primitives/dist/js/colors'
|
||||
|
||||
// TODO: Remove? Not sure if still needed?
|
||||
// The `../../src/support/variables/colors.scss` file got removed since all color variables are now in primer/primitives.
|
||||
// import colorVariablesSCSS from '!!raw-loader!../../src/support/variables/colors.scss'
|
||||
|
||||
// XXX we don't necessarily define them in this order in primer-colors,
|
||||
// so we define an array here just to be safe
|
||||
const gradientHues = ['gray', 'blue', 'green', 'purple', 'yellow', 'orange', 'red', 'pink']
|
||||
|
||||
const colors = allModeColors.light.scale
|
||||
|
||||
const variables = {}
|
||||
|
||||
// TODO: Remove? Not sure if still needed?
|
||||
// parseSCSSVariables(colorVariablesSCSS, variables)
|
||||
|
||||
const colorModes = Object.keys(allModeColors).sort((a, b) => {
|
||||
if (a.startsWith('light') && !b.startsWith('light')) return -1
|
||||
if (!a.startsWith('light') && b.startsWith('light')) return 1
|
||||
else return a.localeCompare(b)
|
||||
})
|
||||
|
||||
const palettes = gradientHues.map(name => {
|
||||
return {
|
||||
name,
|
||||
title: titleCase(name),
|
||||
value: colors[name][5],
|
||||
values: colors[name].map((value, index) => ({
|
||||
value,
|
||||
values: colorModes.reduce((acc, mode) => {
|
||||
acc[mode] = allModeColors[mode].scale[name][index]
|
||||
return acc
|
||||
}, {}),
|
||||
index,
|
||||
variable: `--color-scale-${name}-${index}`,
|
||||
slug: `color-scale-${name}-${index}`,
|
||||
aliases: {}
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
||||
export {colors, colorModes, gradientHues, palettes, getPaletteByName}
|
||||
|
||||
export const flattened = colorModes.reduce((acc, mode) => {
|
||||
acc[mode] = flattenVars(allModeColors[mode])
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
export const functionalVarNames = Object.keys(flattened.light).filter(
|
||||
v => !v.startsWith('scale-') && !v.startsWith('auto-')
|
||||
)
|
||||
|
||||
export const allColors = palettes.reduce((all, {values}) => all.concat(values), [])
|
||||
|
||||
// TODO: fix the borders code
|
||||
//
|
||||
// export const borders = Object.keys(variables)
|
||||
// // Re: border-gray-darker, see https://github.com/primer/css/pull/1192
|
||||
// .filter(key => key.startsWith('border-') && !variables[key].includes('$') && key !== 'border-gray-darker')
|
||||
// .sort()
|
||||
// .map(key => ({
|
||||
// variable: key,
|
||||
// value: variables[key],
|
||||
// slug: key,
|
||||
// aliases: {border: key}
|
||||
// }))
|
||||
|
||||
function getPaletteByName(name) {
|
||||
return palettes.find(palette => palette.name === name)
|
||||
}
|
||||
|
||||
function parseSCSSVariables(scssString, variables = {}) {
|
||||
const variablePattern = /\$([-\w]+):\s*(.+)( !default);/g
|
||||
let match
|
||||
do {
|
||||
match = variablePattern.exec(scssString)
|
||||
if (match) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [_, name, value] = match
|
||||
variables[name] = value.startsWith('$') ? variables[value.substr(1)] || value : value
|
||||
}
|
||||
} while (match)
|
||||
return variables
|
||||
}
|
||||
|
||||
function flattenVars(tree, prefix = []) {
|
||||
let output = {}
|
||||
|
||||
for (const key of Object.keys(tree)) {
|
||||
const val = tree[key]
|
||||
const varName = [...prefix, key].map(dasherize).join('-')
|
||||
if (Array.isArray(val) && !varName.includes('shadow')) {
|
||||
for (const i in val) {
|
||||
const arrayVarName = `${varName}-${i}`
|
||||
output[arrayVarName] = val[i]
|
||||
}
|
||||
} else if (Array.isArray(val)) {
|
||||
output[varName] = val.join(' ')
|
||||
} else if (typeof val === 'object') {
|
||||
const obj = flattenVars(val, [...prefix, key])
|
||||
output = {...output, ...obj}
|
||||
} else {
|
||||
output[varName] = val
|
||||
}
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
function dasherize(str) {
|
||||
return str.replace(/([A-Z])/g, (m, r) => `-${r.toLowerCase()}`).replace(/^-/, '')
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user