mirror of
https://github.com/primer/css.git
synced 2024-12-23 14:13:14 +03:00
Colors V2 docs (#1603)
* Add v18 migration guide * Update colors.mdx * Move theming to support * Delete color-system.mdx * Update nav.yml * Fix color imports in the docs * Create small-papayas-prove.md * Update theming.md * Update colors.mdx * Replace V1 with V2 classes * More docs updates
This commit is contained in:
simurai
GitHub
parent
53e78d1e64
commit
21c5ebc01b
5
.changeset/small-papayas-prove.md
Normal file
5
.changeset/small-papayas-prove.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": minor
|
||||
---
|
||||
|
||||
Update docs with V2 colors
|
||||
@ -210,16 +210,16 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
|
||||
<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-warning-inverse" href="#small">
|
||||
<!-- <%= octicon "zap", class: "CircleBadge-icon color-text-primary" %> -->
|
||||
<svg class="CircleBadge-icon color-text-primary 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 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-tertiary">
|
||||
<div class="CircleBadge CircleBadge--medium color-bg-subtle">
|
||||
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -472,7 +472,7 @@ A similar approach can be used for buttons with multiple lines of text within a
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small color-text-tertiary">
|
||||
<div class="text-small color-fg-subtle">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
@ -481,7 +481,7 @@ A similar approach can be used for buttons with multiple lines of text within a
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small color-text-tertiary">
|
||||
<div class="text-small color-fg-subtle">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
@ -490,7 +490,7 @@ A similar approach can be used for buttons with multiple lines of text within a
|
||||
<div class="Box-row d-flex flex-items-center">
|
||||
<div class="flex-auto">
|
||||
<strong>Row title</strong>
|
||||
<div class="text-small color-text-tertiary">
|
||||
<div class="text-small color-fg-subtle">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,9 +5,6 @@ status: Stable
|
||||
source: 'https://github.com/primer/css/tree/main/src/buttons'
|
||||
bundle: buttons
|
||||
---
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
|
||||
|
||||
|
||||
@ -3,10 +3,6 @@ title: Dropdown
|
||||
status: Beta
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
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
|
||||
@ -37,7 +33,7 @@ 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-text-secondary p-2 d-inline" aria-haspopup="true">
|
||||
<summary class="color-fg-muted p-2 d-inline" aria-haspopup="true">
|
||||
Dropdown
|
||||
<div class="dropdown-caret"></div>
|
||||
</summary>
|
||||
|
||||
@ -369,7 +369,7 @@ Content that is hidden by default should only be done so if it is non-essential
|
||||
<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-text-secondary pl-2">hours per week</span>
|
||||
<span class="text-small color-fg-muted pl-2">hours per week</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -7,10 +7,6 @@ source: 'https://github.com/primer/css/tree/main/src/labels'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
|
||||
|
||||
## Labels
|
||||
@ -78,19 +74,19 @@ Sometimes when adding a label the line-height can be incrased. Or the parent ele
|
||||
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-info-inverse color-text-white mr-1">Primer</span>
|
||||
<span class="IssueLabel color-bg-danger-inverse color-text-white mr-1">bug 🐛</span>
|
||||
<span class="IssueLabel color-bg-success-inverse color-text-white mr-1">help wanted</span>
|
||||
<span class="IssueLabel color-bg-warning-inverse color-text-primary mr-1">🚂 deploy: train</span>
|
||||
<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-info-inverse color-text-white mr-1">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big color-bg-danger-inverse color-text-white mr-1">bug 🐛</span>
|
||||
<span class="IssueLabel IssueLabel--big color-bg-success-inverse color-text-white mr-1">help wanted</span>
|
||||
<span class="IssueLabel IssueLabel--big color-bg-warning-inverse color-text-primary mr-1">🚂 deploy: train</span>
|
||||
<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>
|
||||
```
|
||||
|
||||
## States
|
||||
@ -180,9 +176,9 @@ You can also have icons and emoji in counters. Or use utilities for counters wit
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 color-bg-success-inverse color-text-white">22</span>
|
||||
<span class="Counter mr-1 color-bg-danger-inverse color-text-white">22</span>
|
||||
<span class="Counter mr-1 color-bg-info-inverse color-text-white">22</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>
|
||||
```
|
||||
|
||||
## Diffstat
|
||||
@ -196,12 +192,12 @@ Diffstats show how many deletions or additions a diff has. It's typically a row
|
||||
</span>
|
||||
```
|
||||
|
||||
Use the `color-text-success` and `color-text-danger` utilities to add additional information about the size of the diff.
|
||||
Use the `color-fg-success` and `color-fg-danger` utilities to add additional information about the size of the diff.
|
||||
|
||||
```html live
|
||||
<span class="diffstat">
|
||||
<span class="color-text-success">+7</span>
|
||||
<span class="color-text-danger">−2</span>
|
||||
<span class="color-fg-success">+7</span>
|
||||
<span class="color-fg-danger">−2</span>
|
||||
<span class="tooltipped tooltipped-e" aria-label="9 lines changed">
|
||||
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
|
||||
</span>
|
||||
|
||||
@ -76,7 +76,7 @@ Flowing as row:
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">
|
||||
<div class="Layout-main-centered-md">
|
||||
<div class="container-md border color-border-info">
|
||||
<div class="container-md border color-border-accent">
|
||||
centered md
|
||||
</div>
|
||||
</div>
|
||||
@ -86,7 +86,7 @@ Flowing as row:
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">
|
||||
<div class="Layout-main-centered-lg">
|
||||
<div class="container-lg border color-border-info">
|
||||
<div class="container-lg border color-border-accent">
|
||||
centered lg
|
||||
</div>
|
||||
</div>
|
||||
@ -96,7 +96,7 @@ Flowing as row:
|
||||
<div class="Layout">
|
||||
<div class="Layout-main border">
|
||||
<div class="Layout-main-centered-xl">
|
||||
<div class="container-xl border color-border-info">
|
||||
<div class="container-xl border color-border-accent">
|
||||
centered xl
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,10 +6,6 @@ source: 'https://github.com/primer/css/tree/main/src/links'
|
||||
bundle: links
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
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
|
||||
@ -24,7 +20,7 @@ If you like to override the default link styles you can do so with the following
|
||||
Use `.Link--primary` to turn the link color to blue only on hover.
|
||||
|
||||
```html live
|
||||
<p class="color-text-secondary">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
|
||||
<p class="color-fg-muted">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
|
||||
```
|
||||
|
||||
## Secondary link
|
||||
@ -49,7 +45,7 @@ Use `.Link--muted` also removes the underline on hover. Tip: You can also use th
|
||||
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-text-secondary no-underline" href="#url">
|
||||
<a class="color-fg-muted no-underline" href="#url">
|
||||
A link with a partial <span class="Link--onHover">Link--onHover</span>
|
||||
</a>
|
||||
```
|
||||
@ -59,7 +55,7 @@ Use `.Link--onHover` to make any text color used with links to turn blue on hove
|
||||
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-text-primary no-underline" href="#url">
|
||||
<a class="color-fg-default no-underline" href="#url">
|
||||
A nested <span class="Link">Link</span>
|
||||
</a>
|
||||
```
|
||||
@ -70,8 +66,8 @@ Link classes in combination with [color utilities](../utilities/colors) lets you
|
||||
|
||||
```html live
|
||||
<a class="Link--primary text-bold" href="#url">
|
||||
<svg class="octicon octicon-flame color-text-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>
|
||||
<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-text-secondary">potato</span>
|
||||
<span class="color-fg-muted">potato</span>
|
||||
</a>
|
||||
```
|
||||
|
||||
@ -271,8 +271,8 @@ Different kind of content can be added inside a Side Nav item. Use utility class
|
||||
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-secondary border p-3" style="max-width: 360px">
|
||||
<h5 class="color-text-secondary mb-2 pb-1 border-bottom">Menu</h5>
|
||||
<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>
|
||||
@ -296,7 +296,7 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t
|
||||
<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-primary border-top py-3" style="padding-left: 44px">
|
||||
<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>
|
||||
|
||||
@ -10,7 +10,7 @@ Use progress components to visualize task completion. The `Progress` class adds
|
||||
|
||||
```html live
|
||||
<span class="Progress">
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -20,7 +20,7 @@ Large progress bars are slightly taller than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--large">
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -30,7 +30,7 @@ Small progress bars are shorter than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--small">
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -39,9 +39,9 @@ Small progress bars are shorter than the default.
|
||||
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-text-secondary mr-2">4 of 16</span>
|
||||
<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-inverse" style="width: 25%"></span>
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 25%"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -52,7 +52,7 @@ In cases where it's not possible to describe the progress in text, provide an `a
|
||||
```html live
|
||||
<div aria-label="tasks: 8 of 10 complete">
|
||||
<span class="Progress">
|
||||
<span class="Progress-item color-bg-success-inverse" style="width: 80%;"></span>
|
||||
<span class="Progress-item color-bg-success-emphasis" style="width: 80%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
@ -64,10 +64,10 @@ To show the progress of tasks in multiple states (such as "done", "in progress",
|
||||
```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-inverse" style="width: 50%;"></span>
|
||||
<span class="Progress-item color-bg-warning-inverse" style="width: 25%;"></span>
|
||||
<span class="Progress-item color-bg-danger-inverse" style="width: 15%;"></span>
|
||||
<span class="Progress-item color-bg-info-inverse" style="width: 10%;"></span>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -457,7 +457,7 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-message color-bg-danger color-text-danger">Message goes here</div>
|
||||
<div class="SelectMenu-message color-bg-danger-subtle 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>
|
||||
@ -567,7 +567,7 @@ Sometimes a select menu needs to communicate a "blank slate" where there's no co
|
||||
/>
|
||||
</svg>
|
||||
<h4 class="my-2">No repositories</h4>
|
||||
<p class="mb-3 color-text-secondary">We didn’t find any matching repositories that you can commit to.</p>
|
||||
<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>
|
||||
|
||||
@ -49,7 +49,7 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
|
||||
```html live
|
||||
<!-- Colorful TimelineItem Badge -->
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-danger-inverse color-text-white">
|
||||
<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>
|
||||
@ -59,7 +59,7 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
|
||||
</div>
|
||||
</div>
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-success-inverse color-text-white">
|
||||
<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>
|
||||
@ -68,9 +68,8 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
|
||||
Green background when opened or passed events occur
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO: Replace bg-purple in V2
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge bg-purple color-text-white">
|
||||
<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>
|
||||
@ -78,9 +77,9 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
|
||||
<div class="TimelineItem-body">
|
||||
Purple background used when pull requests are merged
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-info-inverse color-text-white">
|
||||
<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>
|
||||
@ -150,7 +149,7 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
|
||||
|
||||
```html live
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-danger-inverse color-text-white">
|
||||
<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>
|
||||
@ -161,7 +160,7 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
|
||||
</div>
|
||||
<div class="TimelineItem-break ml-0"></div>
|
||||
<div class="TimelineItem">
|
||||
<div class="TimelineItem-badge color-bg-success-inverse color-text-white">
|
||||
<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>
|
||||
|
||||
@ -1,177 +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.
|
||||
|
||||
Currently there are 3 themes (`light`, `dark`, `dark_dimmed`) to choose from. 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.
|
||||
|
||||
- **Light** theme: `data-color-mode="light" data-dark-theme="light"`
|
||||
- **Dark** theme: `data-color-mode="dark" data-dark-theme="dark"`
|
||||
- **Dark Dimmed** theme: `data-color-mode="dark" data-dark-theme="dark_dimmed"`
|
||||
|
||||
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-text-secondary">
|
||||
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-text-secondary">
|
||||
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-text-secondary">
|
||||
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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 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-text-secondary">
|
||||
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](/support/color-system#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);
|
||||
}
|
||||
```
|
||||
|
||||
## Auto variables
|
||||
|
||||
If you tried using the [`scale` color variables](/support/color-system#color-variables) you might have noticed that they are not that useful with multiple color modes. That's because they stay light or dark in any color mode. As seen above, you could create custom variables that invert the scale like so:
|
||||
|
||||
```css
|
||||
@include color-variables(
|
||||
("custom-css-variable": (
|
||||
light: var(--color-scale-gray-7),
|
||||
dark: var(--color-scale-gray-2)
|
||||
)
|
||||
));
|
||||
|
||||
.my-class {
|
||||
color: var(--color-custom-css-variable);
|
||||
}
|
||||
```
|
||||
|
||||
In this case, the `auto` variables might come in handy.
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
color: var(--color-auto-gray-7);
|
||||
}
|
||||
```
|
||||
|
||||
The benefit of `auto` over the `scale` variables is that `auto` variables automatically get inverted in dark mode.
|
||||
|
||||
```html live
|
||||
<div data-color-mode="light" data-light-theme="light" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
<div data-color-mode="dark" data-dark-theme="dark_dimmed" class="p-3">
|
||||
<code style="color: var(--color-auto-gray-7)">--color-auto-gray-7</code>
|
||||
<code style="color: var(--color-scale-gray-7)">--color-scale-gray-7</code><br>
|
||||
<code style="color: var(--color-auto-blue-7)">--color-auto-blue-7</code>
|
||||
<code style="color: var(--color-scale-blue-7)">--color-scale-blue-7</code><br>
|
||||
<code style="color: var(--color-auto-green-7)">--color-auto-green-7</code>
|
||||
<code style="color: var(--color-scale-green-7)">--color-scale-green-7</code>
|
||||
</div>
|
||||
|
||||
<style>code { margin-right: 16px; }</style>
|
||||
```
|
||||
|
||||
**Note**: If you use `stylelint`, the [`primer/no-scale-colors`](https://github.com/primer/stylelint-config-primer/tree/main/plugins#primerno-scale-colors) will fail with "[variable] is a non-functional scale color and cannot be used without being wrapped in the color-variables mixin". You can disable stylelint for this case by adding `// stylelint-disable-line`:
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
color: var(--color-auto-gray-7); // stylelint-disable-line
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
In general,
|
||||
|
||||
1. use [functional variables](/support/color-system) as much as possible.
|
||||
2. create new [custom color variables](/getting-started/theming#custom-color-variables) if there is no functional variable that fits the use case.
|
||||
3. as an alternative to custom color variables, use [`auto` variables](/getting-started/theming#auto-variables) if the results give enough contrast.
|
||||
@ -90,7 +90,7 @@ Column widths can be used with any other block or inline-block elements to add p
|
||||
|
||||
```html live
|
||||
<div>
|
||||
<div class="col-4 float-right p-2 border color-text-danger">
|
||||
<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>
|
||||
@ -136,24 +136,24 @@ 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-warning">.pr-2</div>
|
||||
<div class="border color-bg-attention-subtle">.pr-2</div>
|
||||
</div>
|
||||
<div class="col-3 float-left px-2 mb-3">
|
||||
<div class="border color-bg-warning">.px-2</div>
|
||||
<div class="border color-bg-attention-subtle">.px-2</div>
|
||||
</div>
|
||||
<div class="col-3 float-left px-2 mb-3">
|
||||
<div class="border color-bg-warning">.px-2</div>
|
||||
<div class="border color-bg-attention-subtle">.px-2</div>
|
||||
</div>
|
||||
<div class="col-3 float-left pl-2 mb-3">
|
||||
<div class="border color-bg-warning">.pl-2</div>
|
||||
<div class="border color-bg-attention-subtle">.pl-2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-3 float-left pr-2">
|
||||
<div class="border color-bg-warning">.pr-2</div>
|
||||
<div class="border color-bg-attention-subtle">.pr-2</div>
|
||||
</div>
|
||||
<div class="col-9 float-left pl-2">
|
||||
<div class="border color-bg-warning">.pl-2</div>
|
||||
<div class="border color-bg-attention-subtle">.pl-2</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -258,8 +258,8 @@ You can also create an alternative [media object](/utilities/layout#the-media-ob
|
||||
</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-text-secondary text-normal mb-2">How people build software.</p>
|
||||
<a class="color-text-secondary text-small" href="#url">https://github.com/about</a>
|
||||
<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>
|
||||
```
|
||||
@ -297,8 +297,8 @@ This can be useful for keeping columns the same height, justifying content and v
|
||||
</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-text-secondary text-normal mb-2">How people build software.</p>
|
||||
<a class="color-text-secondary text-small" href="#url">https://github.com/about</a>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -27,8 +27,8 @@ path: stickersheet/
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 IssueLabel color-bg-info-inverse color-text-white">IssueLabel</span>
|
||||
<span class="mr-2 IssueLabel IssueLabel--big color-bg-info-inverse color-text-white">IssueLabel</span>
|
||||
<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 ------------------------ -->
|
||||
|
||||
@ -126,8 +126,8 @@ path: stickersheet/
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="mr-2 IssueLabel color-bg-info-inverse color-text-white">IssueLabel</span>
|
||||
<span class="mr-2 IssueLabel IssueLabel--big color-bg-info-inverse color-text-white">IssueLabel</span>
|
||||
<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 ------------------------ -->
|
||||
|
||||
|
||||
@ -44,14 +44,14 @@ The base <span class="Label Label--inline"> label </span> component styles the t
|
||||
|
||||
<hr class="my-4"><!-- Divider ------------------------ -->
|
||||
|
||||
<span class="IssueLabel color-bg-info-inverse color-text-white mr-2">Primer</span>
|
||||
<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-info-inverse color-text-white mr-2">Primer</span>
|
||||
<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>
|
||||
@ -112,9 +112,9 @@ The base <span class="Label Label--inline"> label </span> component styles the t
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 color-bg-danger-inverse color-text-white">22</span>
|
||||
<span class="Counter mr-1 color-bg-success-inverse color-text-white">22</span>
|
||||
<span class="Counter mr-1 color-bg-info-inverse color-text-white">22</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 ------------------------ -->
|
||||
|
||||
@ -140,8 +140,8 @@ The base <span class="Label Label--inline"> label </span> component styles the t
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="diffstat">
|
||||
<span class="color-text-success">+7</span>
|
||||
<span class="color-text-danger">−2</span>
|
||||
<span class="color-fg-success">+7</span>
|
||||
<span class="color-fg-danger">−2</span>
|
||||
<span class="tooltipped tooltipped-e" aria-label="9 lines changed">
|
||||
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
|
||||
</span>
|
||||
|
||||
@ -7,7 +7,7 @@ path: stickersheet/sizes
|
||||
|
||||
```html live
|
||||
|
||||
<span class="d-inline-block col-1 color-text-tertiary">16px</span>
|
||||
<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>
|
||||
@ -15,25 +15,25 @@ path: stickersheet/sizes
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-text-tertiary">20px</span>
|
||||
<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-info-inverse color-text-white">IssueLabel</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-text-tertiary">24px</span>
|
||||
<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-info-inverse color-text-white">IssueLabel</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-text-tertiary">28px</span>
|
||||
<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" />
|
||||
@ -41,7 +41,7 @@ path: stickersheet/sizes
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-text-tertiary">32px</span>
|
||||
<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" />
|
||||
@ -54,7 +54,7 @@ path: stickersheet/sizes
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-text-tertiary">40px</span>
|
||||
<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">
|
||||
@ -67,7 +67,7 @@ path: stickersheet/sizes
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-text-tertiary">48px</span>
|
||||
<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">
|
||||
@ -80,7 +80,7 @@ path: stickersheet/sizes
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 color-text-tertiary">64px</span>
|
||||
<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">
|
||||
|
||||
@ -1,146 +0,0 @@
|
||||
---
|
||||
title: Color system
|
||||
description: 'Sass variables, mixins, and functions for use in our components.'
|
||||
status: Beta
|
||||
source: 'https://github.com/primer/css/blob/main/src/support/variables/color-system.scss'
|
||||
bundle: support
|
||||
---
|
||||
|
||||
import lightColors from '@primer/primitives/dist/js/colors/light'
|
||||
import {Flash, Box, Flex, Heading, Link, StyledOcticon} from '@primer/components'
|
||||
import {LinkIcon, OctofaceIcon} from '@primer/octicons-react'
|
||||
import {colorModes, palettes, functionalVarNames, flattened} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteCell, ColorModeTable, CSSModeVars, overlayColor} from '../../src/color-system'
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
Starting in v16, Primer CSS uses CSS variables for all colors. When using CSS variables like `--color-text-secondary` make sure to wrap them with [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties):
|
||||
|
||||
```css
|
||||
.my-class {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
```
|
||||
|
||||
## Functional variables
|
||||
|
||||
The Primer color system contains multiple color modes; currently, Primer ships with a light mode and a dark mode. Each color mode comes with a set of CSS variables that can be used to style elements based on the functionality of the element. These should be used instead of specifying colors directly so that the colors adapt correctly when switching between color modes.
|
||||
|
||||
When at all possible, favor using [color utility classes](/utilities/colors) over using custom CSS to set colors. Because the new Primer CSS color system is based on *functional* colors, you should only use colors designed for the element you're applying them to. For example, text colors, which start with `--color-text-`, should not be used for icons, backgrounds, or any other non-text element.
|
||||
|
||||
### Text
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^text-/}
|
||||
render={variable => {
|
||||
return <span style={{color: `var(--color-${variable})`}}>--color-{variable}</span>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Icons
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^icon-(?!folder)/}
|
||||
render={variable => {
|
||||
return <><span style={{color: `var(--color-${variable})`}}><StyledOcticon icon={OctofaceIcon} /></span> --color-{variable}</>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Borders
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^border-/}
|
||||
render={variable => {
|
||||
return <div style={{border: `2px solid var(--color-${variable})`, marginBottom: 10, padding: 4}}>--color-{variable}</div>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Backgrounds
|
||||
|
||||
<CSSModeVars
|
||||
modes={colorModes}
|
||||
vars={functionalVarNames}
|
||||
filter={/^bg-/}
|
||||
render={variable => {
|
||||
return <Flex mb={1}><div style={{
|
||||
background: `var(--color-${variable})`,
|
||||
height: 20,
|
||||
width: 20,
|
||||
display: 'inline-block',
|
||||
border: '1px solid var(--color-border-primary)',
|
||||
marginRight: 10
|
||||
}} />--color-{variable}</Flex>
|
||||
}}
|
||||
/>
|
||||
|
||||
### Other variables
|
||||
|
||||
For a list of *all* functional variables, including app- and component-specific variables, see [this reference page](https://primer.style/primitives/).
|
||||
|
||||
## Color palette
|
||||
|
||||
In rare ocassions, it may be necessary to use one of the variables from the base color scale, though since the colors differ in the various color modes, the functional variables listed above should be used in almost all normal cases.
|
||||
|
||||
<Flex flexWrap="wrap" mr={-2}>
|
||||
{palettes
|
||||
.map(({name, title, value, props = {}}) => (
|
||||
<Flex.Item
|
||||
as={Link}
|
||||
href={`#${name}`}
|
||||
color={overlayColor(value)}
|
||||
flex="1 1 auto"
|
||||
bg={value}
|
||||
p={3}
|
||||
mr={2}
|
||||
mb={2}
|
||||
fontWeight="bold"
|
||||
key={name}
|
||||
{...props}
|
||||
>
|
||||
{title}
|
||||
</Flex.Item>
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
### Color variables
|
||||
|
||||
<Flex flexWrap="wrap" mr={[0, 0, -4]}>
|
||||
{palettes.map(({name, title, value, values}) => (
|
||||
<Flex id={name} flexDirection="column" width={1} pr={0} mb={4} key={name}>
|
||||
<Flex
|
||||
as={Link}
|
||||
href={`#${name}`}
|
||||
bg={value}
|
||||
color={overlayColor(value)}
|
||||
px={3}
|
||||
pt={4}
|
||||
style={{borderBottom: `1px solid ${overlayColor(value)}`}}
|
||||
alignItems="center"
|
||||
>
|
||||
<Flex.Item color="inherit !important" flex="1 1 auto">
|
||||
<Heading as="div" fontSize={4} pb={1}>
|
||||
{title}
|
||||
</Heading>
|
||||
</Flex.Item>
|
||||
<StyledOcticon icon={LinkIcon} color="inherit !important" height={20} />
|
||||
</Flex>
|
||||
<ColorModeTable
|
||||
baseColor={value}
|
||||
values={values}
|
||||
cellPadding="8px 16px"
|
||||
/>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
## Color utilities
|
||||
|
||||
There are [utility classes](/utilities/colors) for every color in our system except fades.
|
||||
115
docs/content/support/theming.md
Normal file
115
docs/content/support/theming.md
Normal file
@ -0,0 +1,115 @@
|
||||
---
|
||||
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-dark-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);
|
||||
}
|
||||
```
|
||||
81
docs/content/support/v18-migration.mdx
Normal file
81
docs/content/support/v18-migration.mdx
Normal file
@ -0,0 +1,81 @@
|
||||
---
|
||||
title: Primer CSS v18 migration guide
|
||||
description: 'Guide for migrating to version 18.0.0 of Primer CSS'
|
||||
---
|
||||
|
||||
Primer CSS `v18.0.0` replaces color modes V1 with V2. To help with the migration, please refer to the guide below.
|
||||
|
||||
<Note>
|
||||
The functional CSS color variables changed as well. Please refer to the <a href="https://primer.style/primitives/colors#deprecated-variables">deprecated variables section</a>.
|
||||
</Note>
|
||||
|
||||
## Utility classes
|
||||
|
||||
See [color utility classes](/utilities/colors) for a list of all the functional color utility classes.
|
||||
|
||||
### Text
|
||||
|
||||
| `v16` | `v18` |
|
||||
| ----------------------- | ------------------------|
|
||||
| `.color-text-primary` | `.color-fg-default` |
|
||||
| `.color-text-secondary` | `.color-fg-muted` |
|
||||
| `.color-text-tertiary` | `.color-fg-subtle` |
|
||||
| `.color-text-link` | `.color-fg-accent` |
|
||||
| `.color-text-success` | `.color-fg-success` |
|
||||
| `.color-text-warning` | `.color-fg-attention` |
|
||||
| `.color-text-danger` | `.color-fg-danger` |
|
||||
| `.color-text-inverse` | `.color-fg-on-emphasis` |
|
||||
| `.color-text-white` | n/a* |
|
||||
|
||||
* Often `.color-text-white` can be replaced with `.color-fg-on-emphasis`, but there are some cases where that's not ideal. If in doubt, plase reach out the the `#primer` team.
|
||||
|
||||
### Icon
|
||||
|
||||
| `v16` | `v18` |
|
||||
| ----------------------- | --------------------- |
|
||||
| `.color-icon-primary` | `.color-fg-default` |
|
||||
| `.color-icon-secondary` | `.color-fg-muted` |
|
||||
| `.color-icon-tertiary` | `.color-fg-muted` |
|
||||
| `.color-icon-info` | `.color-fg-accent` |
|
||||
| `.color-icon-danger` | `.color-fg-danger` |
|
||||
| `.color-icon-success` | `.color-fg-success` |
|
||||
| `.color-icon-warning` | `.color-fg-attention` |
|
||||
|
||||
### Border
|
||||
|
||||
| `v16` | `v18` |
|
||||
| ------------------------- | ------------------------- |
|
||||
| `.color-border-primary` | `.color-border-default` |
|
||||
| `.color-border-secondary` | `.color-border-muted` |
|
||||
| `.color-border-tertiary` | `.color-border-muted` |
|
||||
| `.color-border-inverse` | n/a |
|
||||
| `.color-border-info` | `.color-border-accent` |
|
||||
| `.color-border-warning` | `.color-border-attention` |
|
||||
|
||||
### Background
|
||||
|
||||
| `v16` | `v18` |
|
||||
| --------------------------- | ------------------------------ |
|
||||
| `.color-bg-canvas` | `.color-bg-default` |
|
||||
| `.color-bg-canvas-inverse` | `.color-bg-neutral-emphasis` |
|
||||
| `.color-bg-canvas-inset` | `.color-bg-inset` |
|
||||
| `.color-bg-primary` | `.color-bg-default` |
|
||||
| `.color-bg-secondary` | `.color-bg-subtle` |
|
||||
| `.color-bg-tertiary` | `.color-bg-subtle` |
|
||||
| `.color-bg-overlay` | `.color-bg-overlay` |
|
||||
| `.color-bg-info` | `.color-bg-accent-subtle` |
|
||||
| `.color-bg-info-inverse` | `.color-bg-accent-emphasis` |
|
||||
| `.color-bg-danger` | `.color-bg-danger-subtle` |
|
||||
| `.color-bg-danger-inverse` | `.color-bg-danger-emphasis` |
|
||||
| `.color-bg-success` | `.color-bg-success-subtle` |
|
||||
| `.color-bg-success-inverse` | `.color-bg-success-emphasis` |
|
||||
| `.color-bg-warning` | `.color-bg-attention-subtle` |
|
||||
| `.color-bg-warning-inverse` | `.color-bg-attention-emphasis` |
|
||||
|
||||
## Misc
|
||||
|
||||
| `v16` | `v18` |
|
||||
| --------------------------- | ------------------------------ |
|
||||
| `.text-inherit` | `.color-fg-inherit` |
|
||||
|
||||
A few more selectors and variables were removed. Please refer to [deprecations.json](https://github.com/primer/css/blob/main/src/deprecations.json) for a complete list.
|
||||
@ -64,7 +64,7 @@ The `.anim-fade-down` class is used to slide an element down hiding it. You shou
|
||||
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-info-inverse color-text-white p-2">
|
||||
<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>
|
||||
@ -75,7 +75,7 @@ The `.anim-scale-in` class will scale the element in. This is useful on menus wh
|
||||
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-inverse"></div>
|
||||
<div class="anim-grow-x py-2 color-bg-success-emphasis"></div>
|
||||
```
|
||||
|
||||
## Pulse
|
||||
|
||||
@ -121,19 +121,4 @@ You can adjust border widths on all sides or each side individually with respons
|
||||
|
||||
## Border colors
|
||||
|
||||
Border colors are documented on the [colors utilities page](../utilities/colors#border-colors).
|
||||
|
||||
<!-- TODO: Remove?
|
||||
## Border color utilities
|
||||
|
||||
<PaletteTable
|
||||
values={borders}
|
||||
prefix="bg"
|
||||
columns={[
|
||||
{title: 'Class', Cell: PaletteCell.Border, Value: props => `.${props.aliases.border}`},
|
||||
'variable',
|
||||
'value'
|
||||
]}
|
||||
style={{borderSpacing: '0 4px'}}
|
||||
/>
|
||||
-->
|
||||
Border colors are documented on the [colors utilities page](../utilities/colors#border).
|
||||
|
||||
@ -7,10 +7,6 @@ source: 'https://github.com/primer/css/tree/main/src/utilities/box-shadow.scss'
|
||||
bundle: utilities
|
||||
---
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
</Note>
|
||||
|
||||
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
|
||||
@ -32,7 +28,7 @@ These types of shadows are typically applied to elements with borders, such as t
|
||||
<h3 class="m-0">Organization</h3>
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
<p class="mb-0 color-text-secondary">
|
||||
<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>
|
||||
@ -62,11 +58,11 @@ Medium box shadows are typically used on editorialized content that needs to app
|
||||
<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-text-primary">Serverless architecture</h3>
|
||||
<p class="color-text-secondary">
|
||||
<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-text-secondary list-style-none ">
|
||||
<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>
|
||||
|
||||
@ -2,180 +2,102 @@
|
||||
title: Colors
|
||||
description: 'Immutable, atomic CSS classes to rapidly build product'
|
||||
status: Beta
|
||||
status_issue: 'https://github.com/github/design-systems/issues/97'
|
||||
---
|
||||
|
||||
import {Box, BorderBox} from '@primer/components'
|
||||
import {palettes, allColors} from '../../src/color-variables'
|
||||
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
|
||||
|
||||
<Note>
|
||||
Please note Primer v16 has changed the naming of these color classes. Check the <a href="/css/support/v16-migration">migration guide</a> to make sure your app is up to date.
|
||||
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.
|
||||
|
||||
## Text colors
|
||||
## 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).
|
||||
|
||||
> ⚠️ The `.color-text-warning` currently doesn't pass accessibility standards, but will be updated in the future. **Use with caution**.
|
||||
|
||||
```html live
|
||||
<div class="color-text-primary mb-2">.color-text-primary</div>
|
||||
<div class="color-text-secondary mb-2">.color-text-secondary</div>
|
||||
<div class="color-text-tertiary mb-2">.color-text-tertiary</div>
|
||||
<div class="color-text-link mb-2">.color-text-link</div>
|
||||
<div class="color-text-success mb-2">.color-text-success</div>
|
||||
<div class="color-text-warning mb-2">.color-text-warning <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span></div>
|
||||
<div class="color-text-danger mb-2">.color-text-danger</div>
|
||||
<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-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 `text-inherit` class.
|
||||
You can set the color inheritance on an element by using the `color-fg-inherit` class.
|
||||
|
||||
```html live
|
||||
<div class="color-text-success">This text is green, <a href="#" class="text-inherit">including the link</a></div>
|
||||
<div class="color-fg-success">This text is green, <a href="#" class="color-fg-inherit">including the link</a></div>
|
||||
```
|
||||
|
||||
## Icon colors
|
||||
|
||||
Use icon color utilities to set [Octicons](https://primer.style/octicons) to a specific color.
|
||||
|
||||
```html live
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "icon-primary mr-1" %> -->
|
||||
<svg class="color-icon-primary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-primary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-secondary mr-1" %> -->
|
||||
<svg class="color-icon-secondary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-secondary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-tertiary mr-1" %> -->
|
||||
<svg class="color-icon-tertiary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-tertiary
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-info mr-1" %> -->
|
||||
<svg class="color-icon-info mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-info
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-success mr-1" %> -->
|
||||
<svg class="color-icon-success mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-success
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-warning mr-1" %> -->
|
||||
<svg class="color-icon-warning mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-warning
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-danger mr-1" %> -->
|
||||
<svg class="color-icon-danger mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
.color-icon-danger
|
||||
</div>
|
||||
```
|
||||
|
||||
## Background colors
|
||||
## 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-canvas mb-2">.color-bg-canvas</div>
|
||||
<div class="color-bg-primary mb-2">.color-bg-primary</div>
|
||||
<div class="color-bg-secondary mb-2">.color-bg-secondary</div>
|
||||
<div class="color-bg-tertiary mb-2">.color-bg-tertiary</div>
|
||||
<div class="color-bg-info mb-2">.color-bg-info</div>
|
||||
<div class="color-bg-success mb-2">.color-bg-success</div>
|
||||
<div class="color-bg-warning mb-2">.color-bg-warning</div>
|
||||
<div class="color-bg-danger mb-2">.color-bg-danger</div>
|
||||
<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-4">.color-bg-subtle</div>
|
||||
|
||||
<div class="color-bg-neutral-emphasis-plus color-fg-on-emphasis p-2 rounded mb-2">.color-bg-neutral-emphasis-plus</div>
|
||||
<div class="color-bg-neutral-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-neutral-emphasis</div>
|
||||
<div class="color-bg-neutral-muted p-2 rounded mb-2">.color-bg-neutral-muted</div>
|
||||
<div class="color-bg-neutral-subtle p-2 rounded mb-4">.color-bg-neutral-subtle</div>
|
||||
|
||||
<div class="color-bg-accent-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-accent-emphasis</div>
|
||||
<div class="color-bg-accent-muted p-2 rounded mb-2">.color-bg-accent-muted</div>
|
||||
<div class="color-bg-accent-subtle p-2 rounded mb-4">.color-bg-accent-subtle</div>
|
||||
|
||||
<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-success-emphasis</div>
|
||||
<div class="color-bg-success-muted p-2 rounded mb-2">.color-bg-success-muted</div>
|
||||
<div class="color-bg-success-subtle p-2 rounded mb-4">.color-bg-success-subtle</div>
|
||||
|
||||
<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-attention-emphasis</div>
|
||||
<div class="color-bg-attention-muted p-2 rounded mb-2">.color-bg-attention-muted</div>
|
||||
<div class="color-bg-attention-subtle p-2 rounded mb-4">.color-bg-attention-subtle</div>
|
||||
|
||||
<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-severe-emphasis</div>
|
||||
<div class="color-bg-severe-muted p-2 rounded mb-2">.color-bg-severe-muted</div>
|
||||
<div class="color-bg-severe-subtle p-2 rounded mb-4">.color-bg-severe-subtle</div>
|
||||
|
||||
<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-danger-emphasis</div>
|
||||
<div class="color-bg-danger-muted p-2 rounded mb-2">.color-bg-danger-muted</div>
|
||||
<div class="color-bg-danger-subtle p-2 rounded mb-4">.color-bg-danger-subtle</div>
|
||||
|
||||
<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-done-emphasis</div>
|
||||
<div class="color-bg-done-muted p-2 rounded mb-2">.color-bg-done-muted</div>
|
||||
<div class="color-bg-done-subtle p-2 rounded mb-4">.color-bg-done-subtle</div>
|
||||
|
||||
<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded mb-2">.color-bg-sponsors-emphasis</div>
|
||||
<div class="color-bg-sponsors-muted p-2 rounded mb-2">.color-bg-sponsors-muted</div>
|
||||
<div class="color-bg-sponsors-subtle p-2 rounded">.color-bg-sponsors-subtle</div>
|
||||
```
|
||||
|
||||
## Inversed and permanent colors
|
||||
|
||||
⚠️ WIP: Don't use in produciton. They might still change.
|
||||
|
||||
You can inverse the canvas background color. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-canvas-inverse color-text-inverse mb-2">.color-bg-canvas-inverse .color-text-inverse</div>
|
||||
```
|
||||
|
||||
When using the functional inversed background colors the `.color-text-white` is the better choice as it keeps the text white in all color modes. An exception is the `.color-bg-warning-inverse`.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-info-inverse color-text-white mb-2">.color-bg-info-inverse .color-text-white</div>
|
||||
<div class="color-bg-success-inverse color-text-white mb-2">.color-bg-success-inverse .color-text-white</div>
|
||||
<div class="color-bg-warning-inverse mb-2">.color-bg-warning-inverse</div>
|
||||
<div class="color-bg-danger-inverse color-text-white mb-2">.color-bg-danger-inverse .color-text-white</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
## Border
|
||||
|
||||
Override default border colors with the following utilities.
|
||||
|
||||
```html live
|
||||
<div class="border color-border-primary mb-2">.color-border-primary</div>
|
||||
<div class="border color-border-secondary mb-2">.color-border-secondary</div>
|
||||
<div class="border color-border-tertiary mb-2">.color-border-tertiary</div>
|
||||
<div class="border color-border-info mb-2">.color-border-info</div>
|
||||
<div class="border color-border-success mb-2">.color-border-success</div>
|
||||
<div class="border color-border-warning mb-2">.color-border-warning</div>
|
||||
<div class="border color-border-danger mb-2">.color-border-danger</div>
|
||||
<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="color-bg-canvas-inverse color-text-inverse p-3">
|
||||
<div class="border color-border-inverse">.color-border-inverse</div>
|
||||
</div>
|
||||
<div class="border color-border-accent p-2 rounded mb-2">.color-border-accent</div>
|
||||
<div class="border color-border-success p-2 rounded mb-2">.color-border-success</div>
|
||||
<div class="border color-border-attention p-2 rounded mb-2">.color-border-attention</div>
|
||||
<div class="border color-border-severe p-2 rounded mb-2">.color-border-severe</div>
|
||||
<div class="border color-border-danger p-2 rounded mb-2">.color-border-danger</div>
|
||||
<div class="border color-border-done p-2 rounded mb-2">.color-border-done</div>
|
||||
<div class="border color-border-sponsors p-2 rounded">.color-border-sponsors</div>
|
||||
```
|
||||
|
||||
## Link colors
|
||||
## Link
|
||||
|
||||
You can use the [Link](../components/links) component to change the link colors.
|
||||
|
||||
|
||||
<!-- TODO: Remove? -->
|
||||
<!--
|
||||
<PaletteTable>
|
||||
{palettes.map(({name, title, value}) => (
|
||||
<PaletteTableFragment name={name} type="bg" sparse key={name}>
|
||||
<tr>
|
||||
<PaletteHeading indicatorColor={value} colSpan="4">
|
||||
{title}
|
||||
</PaletteHeading>
|
||||
</tr>
|
||||
</PaletteTableFragment>
|
||||
))}
|
||||
</PaletteTable>
|
||||
-->
|
||||
|
||||
<!-- TODO: Remove? -->
|
||||
<!--
|
||||
<PaletteTable columns={[
|
||||
{
|
||||
title: 'Alias',
|
||||
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
|
||||
},
|
||||
'variable',
|
||||
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
|
||||
]}>
|
||||
{palettes.map(({name, title, value}) => (
|
||||
<PaletteTableFragment name={name} key={name} type="text" sparse prefix="color" columns={[
|
||||
{
|
||||
title: 'Alias',
|
||||
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
|
||||
},
|
||||
'variable',
|
||||
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
|
||||
]}>
|
||||
<tr>
|
||||
<PaletteHeading indicatorColor={value} colSpan="4">
|
||||
{title}
|
||||
</PaletteHeading>
|
||||
</tr>
|
||||
</PaletteTableFragment>
|
||||
))}
|
||||
</PaletteTable>
|
||||
-->
|
||||
|
||||
@ -40,9 +40,9 @@ Use these classes to make an element lay out its content using the flexbox model
|
||||
```html live
|
||||
<!-- flex container -->
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary">flex item 1</div>
|
||||
<div class="p-5 border color-bg-secondary">flex item 2</div>
|
||||
<div class="p-5 border color-bg-secondary">flex item 3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -51,9 +51,9 @@ Use these classes to make an element lay out its content using the flexbox model
|
||||
```html live
|
||||
<!-- inline-flex container -->
|
||||
<div class="border d-inline-flex">
|
||||
<div class="p-5 border color-bg-secondary">flex item 1</div>
|
||||
<div class="p-5 border color-bg-secondary">flex item 2</div>
|
||||
<div class="p-5 border color-bg-secondary">flex item 3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -83,9 +83,9 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column">
|
||||
<div class="p-5 border color-bg-secondary">Item 1</div>
|
||||
<div class="p-5 border color-bg-secondary">Item 2</div>
|
||||
<div class="p-5 border color-bg-secondary">Item 3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -95,9 +95,9 @@ This example uses the responsive variant `.flex-sm-column-reverse` to override `
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-sm-column-reverse">
|
||||
<div class="p-5 border color-bg-secondary">Item 1</div>
|
||||
<div class="p-5 border color-bg-secondary">Item 2</div>
|
||||
<div class="p-5 border color-bg-secondary">Item 3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -107,9 +107,9 @@ This example uses the responsive variant `.flex-sm-row` to override `.flex-colum
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-sm-row">
|
||||
<div class="p-5 border color-bg-secondary">Item 1</div>
|
||||
<div class="p-5 border color-bg-secondary">Item 2</div>
|
||||
<div class="p-5 border color-bg-secondary">Item 3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -119,9 +119,9 @@ This example uses the responsive variant `.flex-sm-row-reverse` to override `.fl
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-sm-row-reverse">
|
||||
<div class="p-5 border color-bg-secondary">Item 1</div>
|
||||
<div class="p-5 border color-bg-secondary">Item 2</div>
|
||||
<div class="p-5 border color-bg-secondary">Item 3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -149,15 +149,15 @@ You can choose whether flex items are forced into a single line or wrapped onto
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-wrap">
|
||||
<div class="p-5 px-6 border color-bg-secondary">1</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">2</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">3</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">4</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">5</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">6</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">7</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">8</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">9</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -165,15 +165,15 @@ You can choose whether flex items are forced into a single line or wrapped onto
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-nowrap">
|
||||
<div class="p-5 px-6 border color-bg-secondary">1</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">2</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">3</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">4</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">5</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">6</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">7</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">8</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">9</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -181,15 +181,15 @@ You can choose whether flex items are forced into a single line or wrapped onto
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-wrap-reverse">
|
||||
<div class="p-5 px-6 border color-bg-secondary">1</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">2</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">3</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">4</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">5</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">6</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">7</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">8</div>
|
||||
<div class="p-5 px-6 border color-bg-secondary">9</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -223,9 +223,9 @@ Use `.flex-justify-start` to align items to the start line. By default this will
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-start">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -235,9 +235,9 @@ Use `.flex-justify-end` to align items to the end line. By default this will be
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-end">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -247,9 +247,9 @@ 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-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -259,9 +259,9 @@ Use `.flex-justify-between` to distribute items evenly in the container. The fir
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-between">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -271,9 +271,9 @@ Use `.flex-justify-around` to distribute items evenly, with an equal amount of s
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-justify-around">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -307,10 +307,10 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -318,10 +318,10 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-end">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -329,10 +329,10 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-center">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -342,10 +342,10 @@ With `.flex-items-baseline`, items will be aligned along their baselines even if
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-baseline">
|
||||
<div class="p-5 border color-bg-secondary f1">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary f3">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -353,10 +353,10 @@ With `.flex-items-baseline`, items will be aligned along their baselines even if
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-stretch">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -390,18 +390,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-start">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<div class="p-5 border color-bg-secondary">5</div>
|
||||
<div class="p-5 border color-bg-secondary">6</div>
|
||||
<div class="p-5 border color-bg-secondary">7</div>
|
||||
<div class="p-5 border color-bg-secondary">8</div>
|
||||
<div class="p-5 border color-bg-secondary">9</div>
|
||||
<div class="p-5 border color-bg-secondary">10</div>
|
||||
<div class="p-5 border color-bg-secondary">11</div>
|
||||
<div class="p-5 border color-bg-secondary">12</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -409,18 +409,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-end">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<div class="p-5 border color-bg-secondary">5</div>
|
||||
<div class="p-5 border color-bg-secondary">6</div>
|
||||
<div class="p-5 border color-bg-secondary">7</div>
|
||||
<div class="p-5 border color-bg-secondary">8</div>
|
||||
<div class="p-5 border color-bg-secondary">9</div>
|
||||
<div class="p-5 border color-bg-secondary">10</div>
|
||||
<div class="p-5 border color-bg-secondary">11</div>
|
||||
<div class="p-5 border color-bg-secondary">12</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -428,18 +428,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-center">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<div class="p-5 border color-bg-secondary">5</div>
|
||||
<div class="p-5 border color-bg-secondary">6</div>
|
||||
<div class="p-5 border color-bg-secondary">7</div>
|
||||
<div class="p-5 border color-bg-secondary">8</div>
|
||||
<div class="p-5 border color-bg-secondary">9</div>
|
||||
<div class="p-5 border color-bg-secondary">10</div>
|
||||
<div class="p-5 border color-bg-secondary">11</div>
|
||||
<div class="p-5 border color-bg-secondary">12</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -447,18 +447,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-between">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<div class="p-5 border color-bg-secondary">5</div>
|
||||
<div class="p-5 border color-bg-secondary">6</div>
|
||||
<div class="p-5 border color-bg-secondary">7</div>
|
||||
<div class="p-5 border color-bg-secondary">8</div>
|
||||
<div class="p-5 border color-bg-secondary">9</div>
|
||||
<div class="p-5 border color-bg-secondary">10</div>
|
||||
<div class="p-5 border color-bg-secondary">11</div>
|
||||
<div class="p-5 border color-bg-secondary">12</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -466,18 +466,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-around">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<div class="p-5 border color-bg-secondary">5</div>
|
||||
<div class="p-5 border color-bg-secondary">6</div>
|
||||
<div class="p-5 border color-bg-secondary">7</div>
|
||||
<div class="p-5 border color-bg-secondary">8</div>
|
||||
<div class="p-5 border color-bg-secondary">9</div>
|
||||
<div class="p-5 border color-bg-secondary">10</div>
|
||||
<div class="p-5 border color-bg-secondary">11</div>
|
||||
<div class="p-5 border color-bg-secondary">12</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -485,18 +485,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
|
||||
|
||||
```html live
|
||||
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-stretch">
|
||||
<div class="p-5 border color-bg-secondary">1</div>
|
||||
<div class="p-5 border color-bg-secondary">2</div>
|
||||
<div class="p-5 border color-bg-secondary">3</div>
|
||||
<div class="p-5 border color-bg-secondary">4</div>
|
||||
<div class="p-5 border color-bg-secondary">5</div>
|
||||
<div class="p-5 border color-bg-secondary">6</div>
|
||||
<div class="p-5 border color-bg-secondary">7</div>
|
||||
<div class="p-5 border color-bg-secondary">8</div>
|
||||
<div class="p-5 border color-bg-secondary">9</div>
|
||||
<div class="p-5 border color-bg-secondary">10</div>
|
||||
<div class="p-5 border color-bg-secondary">11</div>
|
||||
<div class="p-5 border color-bg-secondary">12</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -524,9 +524,9 @@ Adding `.flex-1` makes the item grow in size to take up all the space that is av
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary">flex item</div>
|
||||
<div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
|
||||
<div class="p-5 border color-bg-secondary">flex item</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -534,9 +534,9 @@ 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-secondary flex-1">.flex-1</div>
|
||||
<div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
|
||||
<div class="p-5 border color-bg-secondary 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 class="p-5 border color-bg-subtle flex-1">.flex-1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -546,9 +546,9 @@ Using `.flex-auto` fills the available space but also takes the size of the cont
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
|
||||
<div class="p-5 border color-bg-secondary flex-auto">.flex-auto with a bit more text</div>
|
||||
<div class="p-5 border color-bg-secondary 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-auto">.flex-auto with a bit more text</div>
|
||||
<div class="p-5 border color-bg-subtle flex-1">.flex-1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -558,9 +558,9 @@ Add `.flex-grow-0` to prevent an item from growing. This can be useful when used
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary">flex item</div>
|
||||
<div class="p-5 border color-bg-secondary flex-auto flex-sm-grow-0">.flex-auto .flex-sm-grow-0</div>
|
||||
<div class="p-5 border color-bg-secondary">flex item</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -570,9 +570,9 @@ Add `.flex-shrink-0` to prevent an item from shrinking. Note that for example te
|
||||
|
||||
```html live
|
||||
<div class="p-2 border d-flex" style="max-width: 340px">
|
||||
<div class="p-5 border color-bg-secondary">flex item</div>
|
||||
<div class="p-5 border color-bg-secondary flex-shrink-0">.flex-shrink-0</div>
|
||||
<div class="p-5 border color-bg-secondary">flex item</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -606,9 +606,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary flex-self-auto">.flex-self-auto</div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -616,9 +616,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary flex-self-start">.flex-self-start</div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -626,9 +626,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary flex-self-end">.flex-self-end</div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -636,9 +636,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary flex-self-center">.flex-self-center</div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -646,9 +646,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-end">
|
||||
<div class="p-5 border color-bg-secondary flex-self-baseline f4">.flex-self-baseline</div>
|
||||
<div class="p-5 border color-bg-secondary f1">item</div>
|
||||
<div class="p-5 border color-bg-secondary f00">item</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -656,9 +656,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
|
||||
|
||||
```html live
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start">
|
||||
<div class="p-5 border color-bg-secondary flex-self-stretch">.flex-self-stretch</div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -687,9 +687,9 @@ Use these classes to change the order of flex items. Keep in mind that it won't
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary flex-order-2">1. .flex-order-2</div>
|
||||
<div class="p-5 border color-bg-secondary">2.</div>
|
||||
<div class="p-5 border color-bg-secondary flex-order-1">3. .flex-order-1</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -699,9 +699,9 @@ Resize window to see the effect.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border color-bg-secondary flex-order-1 flex-sm-order-none">1. .flex-order-1 .flex-sm-order-none</div>
|
||||
<div class="p-5 border color-bg-secondary">2.</div>
|
||||
<div class="p-5 border color-bg-secondary">3.</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -737,9 +737,9 @@ 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-secondary flex-sm-self-stretch">.flex-self-stretch</div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<div class="p-5 border color-bg-secondary"> </div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -753,7 +753,7 @@ 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-secondary">image</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -178,7 +178,7 @@ Use `.width-fit` to set max-width 100%.
|
||||
|
||||
```html live
|
||||
<div class="one-fourth column">
|
||||
<img class="width-fit color-bg-secondary" src="https://github.com/github.png" alt="width fitted octocat" />
|
||||
<img class="width-fit color-bg-subtle" src="https://github.com/github.png" alt="width fitted octocat" />
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -257,16 +257,16 @@ 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-info-inverse color-text-white m-3" style="width:100px; height:100px;">
|
||||
<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-info-inverse color-text-white m-3" style="width:100px; height:100px; top:12px; left:12px;">
|
||||
<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-info-inverse color-text-white m-3" style="width:100px; height:100px;">
|
||||
<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-info-inverse color-text-white m-3" style="width:100px; height:100px;">
|
||||
<div class="d-inline-block float-left color-bg-accent-emphasis color-fg-on-emphasis m-3" style="width:100px; height:100px;">
|
||||
Four
|
||||
</div>
|
||||
```
|
||||
@ -293,7 +293,7 @@ _Note: This example is shown in an `<iframe>` and therefore will not be position
|
||||
|
||||
```html live
|
||||
<div style="height: 64px;">
|
||||
<div class="position-fixed right-0 bottom-0 color-bg-secondary border p-2">
|
||||
<div class="position-fixed right-0 bottom-0 color-bg-subtle border p-2">
|
||||
.position-fixed
|
||||
</div>
|
||||
</div>
|
||||
@ -304,7 +304,7 @@ 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-info-inverse color-text-white">
|
||||
<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>
|
||||
```
|
||||
@ -323,14 +323,14 @@ 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-secondary p-3" style="z-index: 1;">Sticky header 1</header>
|
||||
<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-secondary p-3">Sticky header 2</header>
|
||||
<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>
|
||||
|
||||
@ -339,7 +339,7 @@ Combine `.position-sticky` with `.top-0` to keep an element stuck to the top.
|
||||
</section>
|
||||
|
||||
<section class="mb-3">
|
||||
<header class="border position-sticky top-0 color-bg-secondary p-3">Sticky header 3</header>
|
||||
<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>
|
||||
@ -358,7 +358,7 @@ Combine `.position-sticky` with `.bottom-0` to keep an element stuck to the bott
|
||||
<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-secondary p-3">Sticky footer 1</footer>
|
||||
<footer class="border position-sticky bottom-0 color-bg-subtle p-3">Sticky footer 1</footer>
|
||||
</section>
|
||||
|
||||
<section class="mb-3">
|
||||
@ -366,7 +366,7 @@ Combine `.position-sticky` with `.bottom-0` to keep an element stuck to the bott
|
||||
<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-secondary p-3">Sticky footer 2</footer>
|
||||
<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>
|
||||
@ -379,25 +379,25 @@ Combine `.position-sticky` with `.left-0` or `.right-0` to keep elements stuck t
|
||||
```html live
|
||||
<div class="d-flex border overflow-x-auto">
|
||||
<section class="d-flex">
|
||||
<span class="border position-sticky left-0 color-bg-secondary p-4">A</span>
|
||||
<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-secondary p-4">B</span>
|
||||
<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-secondary p-4">C</span>
|
||||
<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-secondary p-4">D</span>
|
||||
<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-secondary p-4">E</span>
|
||||
<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-secondary p-4">...</span>
|
||||
<span class="border position-sticky right-0 color-bg-subtle p-4">...</span>
|
||||
</section>
|
||||
</div>
|
||||
```
|
||||
@ -436,7 +436,7 @@ Create a media object with utilities.
|
||||
|
||||
```html live
|
||||
<div class="clearfix p-3 border">
|
||||
<div class="float-left p-3 mr-3 color-bg-secondary">
|
||||
<div class="float-left p-3 mr-3 color-bg-subtle">
|
||||
Image
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
@ -448,10 +448,10 @@ 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-secondary">
|
||||
<div class="float-left p-3 mr-3 color-bg-subtle">
|
||||
Image
|
||||
</div>
|
||||
<div class="float-right p-3 ml-3 color-bg-secondary">
|
||||
<div class="float-right p-3 ml-3 color-bg-subtle">
|
||||
Image
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
|
||||
@ -43,13 +43,13 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-items-baseline flex-justify-around">
|
||||
<div class="color-bg-warning"><div class="m-0 p-1 color-bg-secondary">.m-0</div></div>
|
||||
<div class="color-bg-warning"><div class="m-1 p-1 color-bg-secondary">.m-1</div></div>
|
||||
<div class="color-bg-warning"><div class="m-2 p-1 color-bg-secondary">.m-2</div></div>
|
||||
<div class="color-bg-warning"><div class="m-3 p-1 color-bg-secondary">.m-3</div></div>
|
||||
<div class="color-bg-warning"><div class="m-4 p-1 color-bg-secondary">.m-4</div></div>
|
||||
<div class="color-bg-warning"><div class="m-5 p-1 color-bg-secondary">.m-5</div></div>
|
||||
<div class="color-bg-warning"><div class="m-6 p-1 color-bg-secondary">.m-6</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="m-0 p-1 color-bg-subtle">.m-0</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="m-1 p-1 color-bg-subtle">.m-1</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="m-2 p-1 color-bg-subtle">.m-2</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="m-3 p-1 color-bg-subtle">.m-3</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="m-4 p-1 color-bg-subtle">.m-4</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="m-5 p-1 color-bg-subtle">.m-5</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="m-6 p-1 color-bg-subtle">.m-6</div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -59,12 +59,12 @@ Use directional utilities to apply margin to an individual side, or the X and Y
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-items-baseline flex-justify-around">
|
||||
<div class="color-bg-warning"><div class="mt-3 p-1 color-bg-secondary">.mt-3</div></div>
|
||||
<div class="color-bg-warning"><div class="mr-3 p-1 color-bg-secondary">.mr-3</div></div>
|
||||
<div class="color-bg-warning"><div class="mb-3 p-1 color-bg-secondary">.mb-3</div></div>
|
||||
<div class="color-bg-warning"><div class="ml-3 p-1 color-bg-secondary">.ml-3</div></div>
|
||||
<div class="color-bg-warning"><div class="mx-3 p-1 color-bg-secondary">.mx-3</div></div>
|
||||
<div class="color-bg-warning"><div class="my-3 p-1 color-bg-secondary">.my-3</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="mt-3 p-1 color-bg-subtle">.mt-3</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="mr-3 p-1 color-bg-subtle">.mr-3</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="mb-3 p-1 color-bg-subtle">.mb-3</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="ml-3 p-1 color-bg-subtle">.ml-3</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="mx-3 p-1 color-bg-subtle">.mx-3</div></div>
|
||||
<div class="color-bg-attention-subtle"><div class="my-3 p-1 color-bg-subtle">.my-3</div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -73,12 +73,12 @@ Use directional utilities to apply margin to an individual side, or the X and Y
|
||||
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-warning d-inline-block"><div class="mt-7 p-1 color-bg-secondary">.mb-7</div></div>
|
||||
<div class="color-bg-warning d-inline-block"><div class="mt-8 p-1 color-bg-secondary">.mb-8</div></div>
|
||||
<div class="color-bg-warning d-inline-block"><div class="mt-9 p-1 color-bg-secondary">.mb-9</div></div>
|
||||
<div class="color-bg-warning d-inline-block"><div class="mt-10 p-1 color-bg-secondary">.mb-10</div></div>
|
||||
<div class="color-bg-warning d-inline-block"><div class="mt-11 p-1 color-bg-secondary">.mb-11</div></div>
|
||||
<div class="color-bg-warning d-inline-block"><div class="mt-12 p-1 color-bg-secondary">.mb-12</div></div>
|
||||
<div class="color-bg-attention-subtle d-inline-block"><div class="mt-7 p-1 color-bg-subtle">.mb-7</div></div>
|
||||
<div class="color-bg-attention-subtle d-inline-block"><div class="mt-8 p-1 color-bg-subtle">.mb-8</div></div>
|
||||
<div class="color-bg-attention-subtle d-inline-block"><div class="mt-9 p-1 color-bg-subtle">.mb-9</div></div>
|
||||
<div class="color-bg-attention-subtle d-inline-block"><div class="mt-10 p-1 color-bg-subtle">.mb-10</div></div>
|
||||
<div class="color-bg-attention-subtle d-inline-block"><div class="mt-11 p-1 color-bg-subtle">.mb-11</div></div>
|
||||
<div class="color-bg-attention-subtle d-inline-block"><div class="mt-12 p-1 color-bg-subtle">.mb-12</div></div>
|
||||
```
|
||||
|
||||
## Center elements
|
||||
@ -86,8 +86,8 @@ The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis
|
||||
Use `mx-auto`to center block elements with a set width.
|
||||
|
||||
```html live
|
||||
<div class="color-bg-warning">
|
||||
<div class="mx-auto color-bg-secondary text-center" style="max-width: 500px;">.mx-auto</div>
|
||||
<div class="color-bg-attention-subtle">
|
||||
<div class="mx-auto color-bg-subtle text-center" style="max-width: 500px;">.mx-auto</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -109,8 +109,8 @@ We also provide directional margin auto. `mt-auto, mr-auto, mb-auto, ml-auto`
|
||||
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-warning border">
|
||||
<p class="mb-0 color-bg-secondary p-1">No bottom margin on this paragraph.</p>
|
||||
<div class="color-bg-attention-subtle border">
|
||||
<p class="mb-0 color-bg-subtle p-1">No bottom margin on this paragraph.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -119,8 +119,8 @@ Reset margins built into typography elements or other components with `m-0`, `mt
|
||||
All margin utilities can be adjusted per [breakpoint](/objects/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-warning d-inline-block">
|
||||
<div class="mx-sm-2 mx-md-4 color-bg-secondary p-1">
|
||||
<div class="color-bg-attention-subtle d-inline-block">
|
||||
<div class="mx-sm-2 mx-md-4 color-bg-subtle p-1">
|
||||
.mx-sm-2 .mx-md-4
|
||||
</div>
|
||||
</div>
|
||||
@ -132,8 +132,8 @@ You can add negative margins to the top, right, bottom, or left of an item by ad
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center">
|
||||
<div class="color-bg-warning">
|
||||
<div class="m-3 ml-n4 ml-md-n6 border-left color-border-danger color-bg-secondary p-2">
|
||||
<div class="color-bg-attention-subtle">
|
||||
<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>
|
||||
@ -146,8 +146,8 @@ You can use the extended spacing scale for `top` and `bottom` margins, ranging f
|
||||
|
||||
```html live
|
||||
<div class="d-flex flex-justify-center">
|
||||
<div class="py-6 px-3 color-bg-warning">
|
||||
<div class="mt-n8 border-left color-border-danger color-bg-tertiary p-2">
|
||||
<div class="py-6 px-3 color-bg-attention-subtle">
|
||||
<div class="mt-n8 border-left color-border-danger color-bg-subtle p-2">
|
||||
.mt-n8
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,10 +20,10 @@ Use these with `.position-absolute` to position decorative assets and shapes on
|
||||
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-secondary">
|
||||
<div class="border color-bg-primary position-absolute top-2">.top-2</div>
|
||||
<div class="border color-bg-primary position-absolute position-lg-static right-md-4">.right-md-4</div>
|
||||
<div class="border color-bg-primary position-lg-absolute left-lg-1">.left-lg-1</div>
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
@ -44,13 +44,13 @@ _**Note:** The blue in the examples below represents the element, and the green
|
||||
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-warning d-inline-block"><div class="color-bg-secondary p-1">.p-0</div></div>
|
||||
<div class="p-1 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-1</div></div>
|
||||
<div class="p-2 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-2</div></div>
|
||||
<div class="p-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-3</div></div>
|
||||
<div class="p-4 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-4</div></div>
|
||||
<div class="p-5 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-5</div></div>
|
||||
<div class="p-6 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-6</div></div>
|
||||
<div class="p-0 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.p-0</div></div>
|
||||
<div class="p-1 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.p-1</div></div>
|
||||
<div class="p-2 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.p-2</div></div>
|
||||
<div class="p-3 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.p-3</div></div>
|
||||
<div class="p-4 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.p-4</div></div>
|
||||
<div class="p-5 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.p-5</div></div>
|
||||
<div class="p-6 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.p-6</div></div>
|
||||
```
|
||||
|
||||
## Directional padding
|
||||
@ -58,12 +58,12 @@ Use uniform spacing utilities to apply equal padding to all sides of an element.
|
||||
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-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-3</div></div>
|
||||
<div class="pr-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pr-3</div></div>
|
||||
<div class="pb-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pb-3</div></div>
|
||||
<div class="pl-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pl-3</div></div>
|
||||
<div class="py-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.py-3</div></div>
|
||||
<div class="px-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.px-3</div></div>
|
||||
<div class="pt-3 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pt-3</div></div>
|
||||
<div class="pr-3 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pr-3</div></div>
|
||||
<div class="pb-3 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pb-3</div></div>
|
||||
<div class="pl-3 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pl-3</div></div>
|
||||
<div class="py-3 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.py-3</div></div>
|
||||
<div class="px-3 mr-3 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.px-3</div></div>
|
||||
```
|
||||
|
||||
## Extended directional padding
|
||||
@ -71,12 +71,12 @@ Use directional utilities to apply padding to an individual side, or the X and Y
|
||||
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-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-7</div></div>
|
||||
<div class="pt-8 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-8</div></div>
|
||||
<div class="pt-9 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-9</div></div>
|
||||
<div class="pt-10 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-10</div></div>
|
||||
<div class="pt-11 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-11</div></div>
|
||||
<div class="pt-12 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-12</div></div>
|
||||
<div class="pt-7 mr-1 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pt-7</div></div>
|
||||
<div class="pt-8 mr-1 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pt-8</div></div>
|
||||
<div class="pt-9 mr-1 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pt-9</div></div>
|
||||
<div class="pt-10 mr-1 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pt-10</div></div>
|
||||
<div class="pt-11 mr-1 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pt-11</div></div>
|
||||
<div class="pt-12 mr-1 color-bg-attention-subtle d-inline-block"><div class="color-bg-subtle p-1">.pt-12</div></div>
|
||||
```
|
||||
|
||||
|
||||
@ -85,8 +85,8 @@ The extended directional padding scale starts from spacer `7` and goes up to `12
|
||||
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-warning d-inline-block">
|
||||
<div class="color-bg-tertiary p-1">.px-sm-2 .px-md-4</div>
|
||||
<div class="px-sm-2 px-md-4 color-bg-attention-subtle d-inline-block">
|
||||
<div class="color-bg-subtle p-1">.px-sm-2 .px-md-4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -101,8 +101,8 @@ All padding utilities can be adjusted per [breakpoint](/support/breakpoints) usi
|
||||
It's the equvilent of adding the `.px-3 .px-sm-6 .px-lg-3` utility classes.
|
||||
|
||||
```html live
|
||||
<div class="p-responsive color-bg-warning">
|
||||
<div class="color-bg-tertiary p-1">.p-responsive</div>
|
||||
<div class="p-responsive color-bg-attention-subtle">
|
||||
<div class="color-bg-subtle p-1">.p-responsive</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -115,8 +115,8 @@ There are two utilities for adjusting how lines and words of text break when the
|
||||
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-secondary 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-secondary 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>
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -3,17 +3,15 @@
|
||||
children:
|
||||
- title: Contributing
|
||||
url: /getting-started/contributing
|
||||
- title: Theming
|
||||
url: /getting-started/theming
|
||||
- title: Support
|
||||
url: /support
|
||||
children:
|
||||
- title: Breakpoints
|
||||
url: /support/breakpoints
|
||||
- title: Color system
|
||||
url: /support/color-system
|
||||
- title: Spacing
|
||||
url: /support/spacing
|
||||
- title: Theming
|
||||
url: /support/theming
|
||||
- title: Typography
|
||||
url: /support/typography
|
||||
- title: Variables
|
||||
|
||||
@ -8,6 +8,9 @@
|
||||
// Docs styles
|
||||
// Only meant for the docs at https://primer.style/css
|
||||
|
||||
// CSS color variables
|
||||
@import "./color-modes/index.scss";
|
||||
|
||||
// Global requirements
|
||||
@import "./core/index.scss";
|
||||
@import "./product/index.scss";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user