mirror of
https://github.com/primer/css.git
synced 2025-01-05 21:22:57 +03:00
simurai
GitHub
commit
23eaac68bf
15
CHANGELOG.md
15
CHANGELOG.md
@ -1,3 +1,18 @@
|
||||
# 13.1.0
|
||||
|
||||
### :rocket: Enhancement
|
||||
- [#904](https://github.com/primer/css/pull/904) Add Keyboard Shortcuts `kbd` from github/github
|
||||
- [#926](https://github.com/primer/css/pull/926) Add Flash Banner `.flash-banner` from github/github
|
||||
- [#927](https://github.com/primer/css/pull/927) Add `.flex-column-reverse` utilities
|
||||
|
||||
### :memo: Documentation
|
||||
- [#932](https://github.com/primer/css/pull/932) Fix CDN links in documentation
|
||||
- [#933](https://github.com/primer/css/pull/933) Convert most ERB examples to HTML
|
||||
|
||||
### Committers
|
||||
- [@shawnbot](https://github.com/shawnbot)
|
||||
- [@simurai](https://github.com/simurai)
|
||||
|
||||
# 13.0.2
|
||||
|
||||
### :memo: Documentation
|
||||
|
||||
@ -120,3 +120,15 @@ A flash message that is full width and removes border and border radius.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flash banner
|
||||
|
||||
A flash message that is fixed positioned at the top of the page. Use for more global events where the content of the page is unknown.
|
||||
|
||||
```html live
|
||||
<div class="ml-n3" style="min-height: 50px">
|
||||
<div class="flash flash-banner">
|
||||
Flash banner message.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -191,12 +191,13 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
|
||||
|
||||
### Small
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small" title="Travis CI">
|
||||
<img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt="">
|
||||
</a>
|
||||
<a class="CircleBadge CircleBadge--small bg-yellow" title="Zap this!" href="#small">
|
||||
<%= octicon "zap", :class => "CircleBadge-icon text-white" %>
|
||||
<!-- <%= octicon "zap", class: "CircleBadge-icon text-white" %> -->
|
||||
<svg class="CircleBadge-icon text-white 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>
|
||||
```
|
||||
|
||||
@ -220,11 +221,12 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
|
||||
|
||||
For specific cases where two badges or more need to be shown as related or connected (such as integrations or specific product workflows), a `DashedConnection` class was created. Use utility classes to ensure badges are spaced correctly.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="DashedConnection">
|
||||
<ul class="d-flex list-style-none flex-justify-between" aria-label="A sample GitHub workflow">
|
||||
<li class="CircleBadge CircleBadge--small" aria-label="GitHub">
|
||||
<%= octicon "mark-github", :class => "width-full height-full" %>
|
||||
<!-- <%= octicon "mark-github", class: "width-full height-full" %> -->
|
||||
<svg class="octicon octicon-mark-github width-full height-full" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</li>
|
||||
|
||||
<li class="CircleBadge CircleBadge--small" aria-label="Slack">
|
||||
|
||||
@ -331,20 +331,27 @@ Use `flash-full` for flash alert inside a box to remove the rounded corners. Pla
|
||||
|
||||
Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](./alerts) for more information.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
Box header
|
||||
</div>
|
||||
<div class="flash flash-full">
|
||||
<button class="flash-close js-flash-close"><%= octicon "x" %></button>
|
||||
Flash message with close button.
|
||||
<button class="flash-close js-flash-close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
|
||||
</button>
|
||||
<span>Flash message with close button.</span>
|
||||
</div>
|
||||
<div class="flash flash-full flash-success">
|
||||
<%= octicon("check") %> Flash success with an icon.
|
||||
<!-- <%= octicon("check") %> -->
|
||||
<svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||
<span>Flash success with an icon.</span>
|
||||
</div>
|
||||
<div class="flash flash-full flash-warn">
|
||||
<%= octicon("alert") %> Flash warning with an icon.
|
||||
<!-- <%= octicon("alert") %> -->
|
||||
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg>
|
||||
<span>Flash warning with an icon.</span>
|
||||
</div>
|
||||
<div class="flash flash-full flash-error">
|
||||
Flash error inside a Box.
|
||||
@ -359,21 +366,27 @@ Flash alerts come in three different colors and can be used with icons and butto
|
||||
|
||||
Use `Box-btn-octicon` with `btn-octicon` when you want the icon to maintain the same padding as other box elements. This selector offsets margin to ensure it lines up on the left and right sides of the box so you may need to add padding neighboring elements.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-body">
|
||||
<span class="pr-2">Box body</span>
|
||||
<button href="#" class="Box-btn-octicon btn-octicon"><%= octicon "pencil" %></button>
|
||||
<button href="#" class="Box-btn-octicon btn-octicon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
It's common to want to float icons to the far left or right and stop the `Box-title`from wrapping underneath. To do this you'll need to create a media object with utilities. Add `clearfix` to the surrounding div (this could be the header, body, or rows), add `overflow-hidden` to the title (or other text element), and float the icons as desired.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-header clearfix">
|
||||
<button href="#" class="Box-btn-octicon btn-octicon float-right"><%= octicon "x" %></button>
|
||||
<button href="#" class="Box-btn-octicon btn-octicon float-right">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
|
||||
</button>
|
||||
<h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3>
|
||||
</div>
|
||||
<div class="Box-body">
|
||||
@ -382,10 +395,13 @@ It's common to want to float icons to the far left or right and stop the `Box-ti
|
||||
</div>
|
||||
```
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="Box">
|
||||
<div class="Box-row clearfix">
|
||||
<button href="#" class="Box-btn-octicon btn-octicon float-left"><%= octicon "check" %></button>
|
||||
<button href="#" class="Box-btn-octicon btn-octicon float-left">
|
||||
<!-- <%= octicon "check" %> -->
|
||||
<svg class="octicon octicon-check" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
|
||||
</button>
|
||||
<p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -124,11 +124,12 @@ You can easily append a count to a **small button**. Add the `.with-count` class
|
||||
|
||||
**Be sure to clear the float added by the additional class.**
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="clearfix">
|
||||
<a class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon "eye" %>
|
||||
Watch
|
||||
<!-- <%= octicon "eye" %> -->
|
||||
<svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
|
||||
<span>Watch</span>
|
||||
</a>
|
||||
<a class="social-count" href="#url">6</a>
|
||||
</div>
|
||||
|
||||
@ -309,13 +309,14 @@ Content that is hidden by default should only be done so if it is non-essential
|
||||
|
||||
Attached an input and button to one another.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" placeholder="Username" aria-label="Username">
|
||||
<span class="input-group-button">
|
||||
<button class="btn" type="button" aria-label="Copy to clipboard">
|
||||
<%= octicon "clippy" %>
|
||||
<!-- <%= octicon "clippy" %> -->
|
||||
<svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path></svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -14,12 +14,13 @@ Use the Header component to create a header that has all of it's items aligned v
|
||||
|
||||
The `.Header` class is the wrapping class that aligns all the items properly and gives the header it's dark background. Each direct child of the `.Header` component is expected to be a `.Header-item` component. The component utilizes flexbox CSS to align all these items properly and applies spacing scale margin.
|
||||
|
||||
```html title="Header"
|
||||
```html live
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<%= octicon "mark-github", class: "mr-2", height: 32 %>
|
||||
GitHub
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="Header-item">
|
||||
@ -41,7 +42,7 @@ All items directly under the `.Header` component should be a `.Header-item` comp
|
||||
|
||||
`.Header-item` elements have a built-in margin that will need to be overridden with the `mr-0` utility class for the last element in the container. We relied on the utility classes here instead of `:last-child` because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints.
|
||||
|
||||
```html title="Header-item"
|
||||
```html live
|
||||
<div class="Header">
|
||||
<!-- Text item -->
|
||||
<div class="Header-item">
|
||||
@ -67,7 +68,7 @@ All items directly under the `.Header` component should be a `.Header-item` comp
|
||||
|
||||
The `.Header-item` element has a modifier class, `.Header-item--full`, that stretches it to fill the available space and push any remaining items to the right.
|
||||
|
||||
```html title="Header-item--full"
|
||||
```html live
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
Item 1
|
||||
@ -90,7 +91,7 @@ The `.Header-item` element has a modifier class, `.Header-item--full`, that stre
|
||||
|
||||
Add the `.Header-link` class to any anchor tags in the header to give them consistent styling and hover opacity. This class makes the links white, bold and 70% fade on hover.
|
||||
|
||||
```html title="Header-link"
|
||||
```html live
|
||||
<div class="Header">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link">About</a>
|
||||
|
||||
@ -74,10 +74,22 @@ Use state labels to inform users of an items status. States are large labels wit
|
||||
|
||||
States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
|
||||
```erb title="State themes"
|
||||
<span title="Status: open" class="State State--green"><%= octicon "git-pull-request" %> Open</span>
|
||||
<span title="Status: closed" class="State State--red"><%= octicon "git-pull-request" %> Closed</span>
|
||||
<span title="Status: merged" class="State State--purple"><%= octicon "git-merge" %> Merged</span>
|
||||
```html live
|
||||
<span title="Status: open" class="State State--green mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span title="Status: closed" class="State State--red mr-2">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
<span title="Status: merged" class="State State--purple">
|
||||
<!-- <%= octicon "git-merge" %> -->
|
||||
<svg class="octicon octicon-git-merge" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7c-.73 0-1.38.41-1.73 1.02V8C7.22 7.98 6 7.64 5.14 6.98c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 .99C.89.99 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.67c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
Merged
|
||||
</span>
|
||||
```
|
||||
|
||||
**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content.
|
||||
@ -86,9 +98,17 @@ States come in a few variations that apply different colors. Use the state that
|
||||
|
||||
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
|
||||
|
||||
```erb title="Small states"
|
||||
<span title="Status: open" class="State State--green State--small"><%= octicon "issue-opened" %> Open</span>
|
||||
<span title="Status: closed" class="State State--red State--small"><%= octicon "issue-closed" %> Closed</span>
|
||||
```html live
|
||||
<span title="Status: open" class="State State--green State--small mr-2">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span title="Status: closed" class="State State--red State--small">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
|
||||
## Counters
|
||||
|
||||
@ -27,10 +27,11 @@ Place an avatar inside the `h1` to have margins applied to it. Don't forget the
|
||||
|
||||
Also be sure to add `aria-hidden="true"` to hide the avatar from screenreaders.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="pagehead">
|
||||
<h1>
|
||||
<%= avatar_for("jonrohan", 32, "aria-hidden": "true") %>
|
||||
<!-- <%= avatar_for("jonrohan", 32, "aria-hidden": "true") %> -->
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" aria-hidden="true" />
|
||||
jonrohan
|
||||
</h1>
|
||||
</div>
|
||||
@ -70,22 +71,26 @@ To add actions on the right side of the `pagehead`, use the `pagehead-actions` e
|
||||
<div class="pagehead orghead px-3">
|
||||
<nav class="orgnav clearfix" role="navigation">
|
||||
<a class="pagehead-tabs-item selected" href="#url">
|
||||
<%= octicon("repo") %>
|
||||
Repositories
|
||||
<!-- <%= octicon("repo") %> -->
|
||||
<svg class="octicon octicon-repo" 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>
|
||||
<span>Repositories</span>
|
||||
</a>
|
||||
<a class="pagehead-tabs-item" href="#url">
|
||||
<%= octicon("jersey") %>
|
||||
Teams
|
||||
<!-- <%= octicon("jersey") %> -->
|
||||
<svg class="octicon octicon-jersey" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 6l-.5.5v5l.5.5h2l.5-.5v-5L6.5 6h-2zM6 11H5V7h1v4zm6.27-7.25C12.05 2.37 11.96 1.12 12 0H9.02c0 .27-.13.48-.39.69-.25.2-.63.3-1.13.3-.5 0-.88-.09-1.13-.3-.23-.2-.36-.42-.36-.69H3c.05 1.13-.03 2.38-.25 3.75C2.55 5.13 1.95 5.88 1 6v9c.02.27.11.48.31.69.2.21.42.3.69.31h11c.27-.02.48-.11.69-.31.21-.2.3-.42.31-.69V6c-.95-.13-1.53-.88-1.75-2.25h.02zM13 15H2V7c.89-.5 1.48-1.25 1.72-2.25S4.03 2.5 4 1h1c-.02.78.16 1.47.52 2.06.36.58 1.02.89 2 .94.98-.02 1.64-.33 2-.94.36-.59.5-1.28.48-2.06h1c.02 1.42.13 2.55.33 3.38.2.81.69 2 1.67 2.63v8V15zM8.5 6l-.5.5v5l.5.5h2l.5-.5v-5l-.5-.5h-2zm1.5 5H9V7h1v4z"></path></svg>
|
||||
<span>Teams</span>
|
||||
<span class="Counter">1</span>
|
||||
</a>
|
||||
<a class="pagehead-tabs-item" href="#url">
|
||||
<%= octicon("project") %>
|
||||
Projects
|
||||
<!-- <%= octicon("project") %> -->
|
||||
<svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"></path></svg>
|
||||
<span>Projects</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
<a class="pagehead-tabs-item" href="#url">
|
||||
<%= octicon("briefcase") %>
|
||||
Jobs
|
||||
<!-- <%= octicon("briefcase") %> -->
|
||||
<svg class="octicon octicon-briefcase" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 4V3c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H1c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1H9zM6 3h2v1H6V3zm7 6H8v1H6V9H1V5h1v3h10V5h1v4z"></path></svg>
|
||||
<span>Jobs</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
</nav>
|
||||
@ -105,8 +110,9 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<li>
|
||||
<div class="clearfix">
|
||||
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon("eye")%>
|
||||
Watch
|
||||
<!-- <%= octicon("eye")%> -->
|
||||
<svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
|
||||
<span>Watch</span>
|
||||
</button>
|
||||
<button class="social-count" href="#url">6</button>
|
||||
</div>
|
||||
@ -114,15 +120,17 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<li>
|
||||
<div class="clearfix">
|
||||
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon("repo-forked") %>
|
||||
Fork
|
||||
<!-- <%= octicon("repo-forked") %> -->
|
||||
<svg class="octicon octicon-repo-forked" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<span>Fork</span>
|
||||
</button>
|
||||
<button class="social-count" href="#url">0</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h1>
|
||||
<%= octicon("repo") %>
|
||||
<!-- <%= octicon("repo") %> -->
|
||||
<svg class="octicon octicon-repo" 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>
|
||||
<span class="author"><a href="#url" class="url fn" rel="author">cmwinters</a></span>
|
||||
<span class="path-divider">/</span>
|
||||
<strong><a href="#url">project</a></strong>
|
||||
@ -131,22 +139,26 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<div class="container-lg px-3">
|
||||
<nav class="reponav clearfix" role="navigation">
|
||||
<a class="reponav-item selected" href="#url">
|
||||
<%= octicon("code") %>
|
||||
Code
|
||||
<!-- <%= octicon("code") %> -->
|
||||
<svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
|
||||
<span>Code</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("issue-opened") %>
|
||||
Issues
|
||||
<!-- <%= octicon("issue-opened") %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
<span>Issues</span>
|
||||
<span class="Counter">1</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("git-pull-request") %>
|
||||
Pull requests
|
||||
<!-- <%= octicon("git-pull-request") %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<span>Pull requests</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("project") %>
|
||||
Projects
|
||||
<!-- <%= octicon("project") %> -->
|
||||
<svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"></path></svg>
|
||||
<span>Projects</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
</nav>
|
||||
@ -163,8 +175,9 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<li>
|
||||
<div class="clearfix">
|
||||
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon("eye") %>
|
||||
Watch
|
||||
<!-- <%= octicon("eye") %> -->
|
||||
<svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
|
||||
<span>Watch</span>
|
||||
</button>
|
||||
<button class="social-count" href="#url">6</button>
|
||||
</div>
|
||||
@ -172,15 +185,17 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<li>
|
||||
<div class="clearfix">
|
||||
<button class="btn btn-sm btn-with-count" href="#url" role="button">
|
||||
<%= octicon("repo-forked") %>
|
||||
Fork
|
||||
<!-- <%= octicon("repo-forked") %> -->
|
||||
<svg class="octicon octicon-repo-forked" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<span>Fork</span>
|
||||
</button>
|
||||
<button class="social-count" href="#url">0</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="private">
|
||||
<%= octicon("lock") %>
|
||||
<!-- <%= octicon("lock") %> -->
|
||||
<svg class="octicon octicon-lock" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 13H3v-1h1v1zm8-6v7c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h1V4c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1c.55 0 1 .45 1 1zM3.8 6h4.41V4c0-1.22-.98-2.2-2.2-2.2-1.22 0-2.2.98-2.2 2.2v2H3.8zM11 7H2v7h9V7zM4 8H3v1h1V8zm0 2H3v1h1v-1z"></path></svg>
|
||||
<span class="author"><a href="#url" class="url fn" rel="author">cmwinters</a></span>
|
||||
<span class="path-divider">/</span>
|
||||
<strong><a href="#url">project</a></strong>
|
||||
@ -190,22 +205,26 @@ Use `pagehead` to construct a header and navigation for a repository.
|
||||
<div class="container-lg px-3">
|
||||
<nav class="reponav clearfix" role="navigation">
|
||||
<a class="reponav-item selected" href="#url">
|
||||
<%= octicon("code") %>
|
||||
Code
|
||||
<!-- <%= octicon("code") %> -->
|
||||
<svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
|
||||
<span>Code</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("issue-opened") %>
|
||||
Issues
|
||||
<!-- <%= octicon("issue-opened") %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
<span>Issues</span>
|
||||
<span class="Counter">1</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("git-pull-request") %>
|
||||
Pull requests
|
||||
<!-- <%= octicon("git-pull-request") %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<span>Pull requests</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
<a class="reponav-item" href="#url">
|
||||
<%= octicon("project") %>
|
||||
Projects
|
||||
<!-- <%= octicon("project") %> -->
|
||||
<svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"></path></svg>
|
||||
<span>Projects</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
@ -100,5 +100,5 @@ Don't forget to add the compiled CSS to the `<head>` section of your page.
|
||||
You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from the [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML:
|
||||
|
||||
```html
|
||||
<link href="https://unpkg.com/primer/build/build.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
@ -88,10 +88,12 @@ Use `.mx-auto` to center columns within a container.
|
||||
|
||||
Column widths can be used with any other block or inline-block elements to add percentage-based widths.
|
||||
|
||||
```erb title="Column widths"
|
||||
```html live
|
||||
<div>
|
||||
<div class="col-4 float-right p-2 border text-red">
|
||||
<%= octicon "heart" %> Don't go bacon my heart.
|
||||
<!-- <%= octicon "heart" %> -->
|
||||
<svg class="octicon octicon-heart" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z"></path></svg>
|
||||
<span>Don't go bacon my heart.<span>
|
||||
</div>
|
||||
<p>T-bone drumstick alcatra ribeye. Strip steak chuck andouille tenderloin bacon tri-tip ball tip beef capicola rump. Meatloaf bresaola drumstick ball tip salami. Drumstick ham bacon alcatra pig porchetta, spare ribs leberkas pork belly.</p>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,7 @@ This method requires no dev environment set up and is useful for when you want t
|
||||
<head>
|
||||
<title></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/primer/build/build.css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
@ -9,46 +9,65 @@ bundle: utilities
|
||||
|
||||
Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
|
||||
|
||||
|
||||
|
||||
|
||||
## Fade In
|
||||
|
||||
The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.
|
||||
|
||||
```erb
|
||||
<span class="anim-fade-in"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
|
||||
```html live
|
||||
<span class="anim-fade-in">
|
||||
<!-- <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
Hello from GitHub!
|
||||
</span>
|
||||
```
|
||||
|
||||
## Fade Out
|
||||
|
||||
The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.
|
||||
|
||||
```erb
|
||||
<span class="anim-fade-out"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
|
||||
```html live
|
||||
<span class="anim-fade-out">
|
||||
<!-- <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
Hello from GitHub!
|
||||
</span>
|
||||
```
|
||||
|
||||
## Fade Up
|
||||
|
||||
The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
|
||||
|
||||
```erb
|
||||
<div class="anim-fade-up"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div>
|
||||
```html live
|
||||
<div class="anim-fade-up">
|
||||
<!-- <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
Hello from GitHub!
|
||||
</div>
|
||||
```
|
||||
|
||||
## Fade Down
|
||||
|
||||
The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
|
||||
|
||||
```erb
|
||||
<div class="anim-fade-down"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div>
|
||||
```html live
|
||||
<div class="anim-fade-down">
|
||||
<!-- <%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github v-align-middle mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
Hello from GitHub!
|
||||
</div>
|
||||
```
|
||||
|
||||
## Scale In
|
||||
|
||||
The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
|
||||
|
||||
```erb
|
||||
<div class="anim-scale-in bg-gray-dark text-white p-2"><%= octicon("mark-github") %></div>
|
||||
```html live
|
||||
<div class="anim-scale-in bg-gray-dark text-white p-2">
|
||||
<!-- <%= octicon("mark-github", :height => 32) %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Grow X
|
||||
@ -63,16 +82,18 @@ The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
|
||||
|
||||
The `.anim-pulse` class will pulse an element infinitely.
|
||||
|
||||
```erb
|
||||
<%= octicon("mark-github", :class => "anim-pulse") %>
|
||||
```html live
|
||||
<!-- <%= octicon("mark-github",:height => 32, :class => "anim-pulse") %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github anim-pulse" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
```
|
||||
|
||||
## Hover animation
|
||||
|
||||
The `.hover-grow` class will increase the scale of the element upon hover.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="Box hover-grow m-3 p-4">
|
||||
<%= octicon("mark-github", :height => 32) %>
|
||||
<!-- <%= 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>
|
||||
```
|
||||
|
||||
@ -54,7 +54,7 @@ Medium box shadows are more diffused and slightly larger than small box shadows.
|
||||
|
||||
Medium box shadows are typically used on editorialized content that needs to appear elevated. Most of the time, the elements using this level of shadow will be clickable.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="col-6">
|
||||
<a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
|
||||
<div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div>
|
||||
@ -63,8 +63,16 @@ Medium box shadows are typically used on editorialized content that needs to app
|
||||
Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
|
||||
</p>
|
||||
<ul class="position-absolute bottom-0 pb-3 text-small text-gray list-style-none ">
|
||||
<li class="d-inline-block mr-1"><%= octicon "repo", :class => "mr-1" %>12 Repositories</li>
|
||||
<li class="d-inline-block"><%= octicon "code", :class => "mr-1" %>5 Languages</li>
|
||||
<li class="d-inline-block mr-1">
|
||||
<!-- <%= octicon "repo", :class => "mr-1" %> -->
|
||||
<svg class="octicon octicon-repo mr-1" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
|
||||
12 Repositories
|
||||
</li>
|
||||
<li class="d-inline-block">
|
||||
<!-- <%= octicon "code", :class => "mr-1" %> -->
|
||||
<svg class="octicon octicon-code mr-1" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"></path></svg>
|
||||
5 Languages
|
||||
</li>
|
||||
</ul>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@ bundle: utilities
|
||||
|
||||
Flex utilities can be used to apply `flexbox` behaviors to elements by using utility classes.
|
||||
|
||||
|
||||
|
||||
|
||||
## Required reading
|
||||
|
||||
@ -64,9 +64,10 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-row-reverse { flex-direction: row-reverse; }
|
||||
.flex-column { flex-direction: column; }
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-row-reverse { flex-direction: row-reverse; }
|
||||
.flex-column { flex-direction: column; }
|
||||
.flex-column-reverse { flex-direction: column-reverse; }
|
||||
```
|
||||
|
||||
#### Classes
|
||||
@ -76,6 +77,7 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
|
||||
| `.flex-row` | The main axis runs left to right (default). |
|
||||
| `.flex-row-reverse` | The main axis runs right to left. |
|
||||
| `.flex-column` | The main axis runs top to bottom. |
|
||||
| `.flex-column-reverse` | The main axis runs bottom to top. |
|
||||
|
||||
#### Example using `.flex-column`
|
||||
|
||||
@ -87,6 +89,18 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Example using `.flex-column-reverse`
|
||||
|
||||
This example uses the responsive variant `.flex-md-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-md-column-reverse">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
<div class="p-5 border bg-gray-light">Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Example using `.flex-row`
|
||||
|
||||
This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
@ -101,7 +115,7 @@ This example uses the responsive variant `.flex-md-row` to override `.flex-colum
|
||||
|
||||
#### Example using `.flex-row-reverse`
|
||||
|
||||
This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
|
||||
|
||||
```html live
|
||||
<div class="border d-flex flex-column flex-md-row-reverse">
|
||||
@ -713,7 +727,7 @@ You can use flex utilities to make a simple media object, like this:
|
||||
|
||||
Here is an example of a media object that is **vertically centered on large screens**, but converts to a stacked column layout on small screens.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="border p-3 d-flex flex-column flex-md-row flex-md-items-center">
|
||||
<div class="pr-0 pr-md-3 mb-3 mb-md-0 d-flex flex-justify-center flex-md-justify-start">
|
||||
<img style="max-width:100px; max-height:100px;" src="https://github.com/github.png" />
|
||||
@ -722,7 +736,8 @@ Here is an example of a media object that is **vertically centered on large scre
|
||||
<p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
|
||||
</div>
|
||||
<div class="ml-md-3 d-flex flex-justify-center">
|
||||
<%= octicon "mark-github", :height => '32' %>
|
||||
<!-- <%= octicon "mark-github", :height => '32' %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -8,7 +8,7 @@ bundle: utilities
|
||||
|
||||
Change the document layout with display, float, alignment, and other utilities.
|
||||
|
||||
|
||||
|
||||
|
||||
## Display
|
||||
Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-inline-block`, `.d-table`, `.d-table-cell` utilities.
|
||||
@ -212,10 +212,11 @@ Use `.height-fit` to set max-height 100%.
|
||||
|
||||
Use `.height-full` to set height to 100%.
|
||||
|
||||
```erb
|
||||
```html live
|
||||
<div class="d-table border border-gray">
|
||||
<div class="d-table-cell height-full v-align-middle pl-3">
|
||||
<%= octicon "three-bars" %>
|
||||
<!-- <%= octicon "three-bars" %> -->
|
||||
<svg class="octicon octicon-three-bars" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"></path></svg>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "13.0.2",
|
||||
"version": "13.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "13.0.2",
|
||||
"version": "13.1.0",
|
||||
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
|
||||
"homepage": "https://primer.style/css",
|
||||
"author": "GitHub, Inc.",
|
||||
|
||||
@ -72,6 +72,18 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// A banner rendered at the top of the page.
|
||||
.flash-banner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 90;
|
||||
width: 100%;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// FIXME deprecate this
|
||||
.warning {
|
||||
padding: $em-spacer-5;
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
|
||||
@import "./normalize.scss";
|
||||
@import "./base.scss";
|
||||
@import "./kbd.scss";
|
||||
@import "./typography-base.scss";
|
||||
|
||||
16
src/base/kbd.scss
Normal file
16
src/base/kbd.scss
Normal file
@ -0,0 +1,16 @@
|
||||
// Keyboard shortcuts
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: ($spacer-1 - 1) ($spacer-1 + 1);
|
||||
font: 11px $mono-font;
|
||||
line-height: 10px;
|
||||
color: $gray-700;
|
||||
vertical-align: middle;
|
||||
background-color: $bg-gray-light;
|
||||
border: $border-style $border-width $border-gray-dark;
|
||||
border-bottom-color: $border-gray-dark;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: inset 0 -1px 0 $border-gray-dark;
|
||||
}
|
||||
@ -10,6 +10,8 @@
|
||||
line-height: $body-line-height;
|
||||
word-wrap: break-word;
|
||||
|
||||
@import "../base/kbd.scss"; // adds support for keyboard shortcuts
|
||||
|
||||
// Clearfix on the markdown body
|
||||
&::before {
|
||||
display: table;
|
||||
@ -90,18 +92,4 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: $gray-700;
|
||||
vertical-align: middle;
|
||||
background-color: $gray-000;
|
||||
border: solid 1px darken($gray-300, 4%);
|
||||
border-bottom-color: $gray-400;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 $gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,9 +4,10 @@
|
||||
@include breakpoint($breakpoint) {
|
||||
// Flexbox classes
|
||||
// Container
|
||||
.flex#{$variant}-row { flex-direction: row !important; }
|
||||
.flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex#{$variant}-column { flex-direction: column !important; }
|
||||
.flex#{$variant}-row { flex-direction: row !important; }
|
||||
.flex#{$variant}-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex#{$variant}-column { flex-direction: column !important; }
|
||||
.flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
|
||||
|
||||
.flex#{$variant}-wrap { flex-wrap: wrap !important; }
|
||||
.flex#{$variant}-nowrap { flex-wrap: nowrap !important; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user