mirror of
https://github.com/primer/css.git
synced 2024-12-14 06:44:38 +03:00
simurai
GitHub
commit
736361f075
@ -15,15 +15,30 @@ Add `.avatar` to any `<img>` element to make it an avatar. This resets some key
|
||||
Be sure to set `width` and `height` attributes for maximum browser performance.
|
||||
|
||||
```html live
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
|
||||
```
|
||||
|
||||
### Small avatars
|
||||
|
||||
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" />
|
||||
```
|
||||
|
||||
### Avatar sizes
|
||||
|
||||
Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
|
||||
<img class="avatar avatar-2 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" />
|
||||
<img class="avatar avatar-3 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=48" />
|
||||
<img class="avatar avatar-4 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=56" />
|
||||
<img class="avatar avatar-5 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" />
|
||||
<img class="avatar avatar-6 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=80" />
|
||||
<img class="avatar avatar-7 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
|
||||
<img class="avatar avatar-8 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=128" />
|
||||
```
|
||||
|
||||
### Parent-child avatars
|
||||
|
||||
@ -147,7 +147,7 @@ Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an
|
||||
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Trashcan icon">
|
||||
<button class="btn-octicon" type="button" aria-label="Kebab icon">
|
||||
<!-- <%= octicon "kebab-horizontal" %> -->
|
||||
<svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
|
||||
</button>
|
||||
@ -190,11 +190,16 @@ Icons can be added to any button.
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline" type="button">
|
||||
<button class="btn btn-outline mr-2" type="button">
|
||||
<!-- <%= octicon "device-desktop" %> -->
|
||||
<svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
|
||||
<span>Open in Desktop</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" type="button" aria-label="Pencil icon">
|
||||
<!-- <%= 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 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
## Button with counts
|
||||
|
||||
@ -76,12 +76,17 @@ Textual form controls have a white background by default. You can change this to
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
|
||||
<input
|
||||
class="form-control input-contrast"
|
||||
type="text"
|
||||
placeholder="Input with contrast"
|
||||
aria-label="Input with contrast"
|
||||
/>
|
||||
<input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Disabled state
|
||||
|
||||
Add the `disabled` attribute to make a `.form-control` appear disabled.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
|
||||
</form>
|
||||
```
|
||||
|
||||
|
||||
@ -60,6 +60,27 @@ Labels come in a few different themes. Use a theme that helps communicate the co
|
||||
|
||||
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
|
||||
|
||||
### Label sizes
|
||||
|
||||
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
|
||||
|
||||
```html live
|
||||
<span class="Label Label--gray-darker mr-1" title="Label: Default">Default</span>
|
||||
<span class="Label Label--large Label--gray-darker mr-1" title="Label: Large">Large</span>
|
||||
```
|
||||
|
||||
### Inline labels
|
||||
|
||||
Sometimes when adding a label the line-height can be incrased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.
|
||||
|
||||
```html live
|
||||
<p class="col-4">
|
||||
Lorem Ipsum is simply <span class="Label Label--inline" title="Label: dummy">dummy text</span>
|
||||
<span>of </span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
|
||||
</p>
|
||||
```
|
||||
|
||||
|
||||
## Issue labels
|
||||
|
||||
Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
|
||||
|
||||
96
docs/content/stickersheet/index.md
Normal file
96
docs/content/stickersheet/index.md
Normal file
@ -0,0 +1,96 @@
|
||||
---
|
||||
title: Sticker Sheet
|
||||
path: stickersheet/index
|
||||
---
|
||||
|
||||
|
||||
### Sizes
|
||||
|
||||
```html live
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">16px</span>
|
||||
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">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 bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-3 Counter">1.5K</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">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 bg-purple text-white">IssueLabel</span>
|
||||
<span class="mr-3 State State--small">State</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">28px</span>
|
||||
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn btn-sm" type="button">Button</button>
|
||||
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">32px</span>
|
||||
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn" type="button">Button</button>
|
||||
<input class="mr-3 form-control" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
<nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
<span class="mr-3 State">State</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">40px</span>
|
||||
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
|
||||
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 4</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">48px</span>
|
||||
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
|
||||
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">64px</span>
|
||||
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
|
||||
<div class="mr-3 Header d-inline-block v-align-middle">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
149
docs/content/stickersheet/labels.md
Normal file
149
docs/content/stickersheet/labels.md
Normal file
@ -0,0 +1,149 @@
|
||||
---
|
||||
title: Labels
|
||||
path: components/labels
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/labels'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
```html live
|
||||
<p class="mb-4 col-4">
|
||||
The base <span class="Label Label--inline"> label </span> component styles the text, adds <span class="Label Label--inline">padding</span> and rounded corners, and a border. Labels come in various themes which apply different colors.
|
||||
</p>
|
||||
|
||||
<div class="mb-4">Hello <span class="Label mr-1">world</span></div>
|
||||
|
||||
<div class="mb-2 f6">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f5">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f4">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f3">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f2">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f1">Hello <span class="Label mr-1">world</span></div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2 Label--gray">Gray</span>
|
||||
<span class="Label mr-2">Default</span>
|
||||
<span class="Label mr-2 Label--gray-darker">Dark gray</span>
|
||||
<span class="Label mr-2 Label--yellow">Pending</span>
|
||||
<span class="Label mr-2 Label--orange">Warning</span>
|
||||
<span class="Label mr-2 Label--red" >Error</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label Label--large mr-2 Label--gray">Gray</span>
|
||||
<span class="Label Label--large mr-2">Default</span>
|
||||
<span class="Label Label--large mr-2 Label--gray-darker">Dark gray</span>
|
||||
<span class="Label Label--large mr-2 Label--yellow">Pending</span>
|
||||
<span class="Label Label--large mr-2 Label--orange">Warning</span>
|
||||
<span class="Label Label--large mr-2 Label--red" >Error</span>
|
||||
<span class="Label Label--large mr-2 Label--green" >Success</span>
|
||||
<span class="Label Label--large mr-2 Label--blue" >Info</span>
|
||||
|
||||
<hr class="my-4"><!-- Divider ------------------------ -->
|
||||
|
||||
<span class="IssueLabel bg-blue text-white 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 bg-blue text-white mr-2">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big mr-2" style="background-color: #e5bffc;">
|
||||
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
|
||||
</span>
|
||||
```
|
||||
|
||||
### States
|
||||
|
||||
```html live
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State State--small mr-2" title="Status: Default">Default</span>
|
||||
<span class="State State--small State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--small State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Counters
|
||||
|
||||
```html live
|
||||
<span class="Counter mr-1">1</span>
|
||||
<span class="Counter mr-1 Counter--gray-light">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<span class="Counter mr-1">
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 bg-green text-white">22</span>
|
||||
<span class="Counter mr-1 bg-red text-white">22</span>
|
||||
<span class="Counter mr-1 bg-purple text-white">22</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Counter mr-1 Counter--gray-light">1</span>
|
||||
<span class="Counter mr-1">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<div class="my-2"></div>
|
||||
<span class="Counter Counter--small mr-1 Counter--gray-light">1</span>
|
||||
<span class="Counter Counter--small mr-1">23</span>
|
||||
<span class="Counter Counter--small mr-1 Counter--gray">456</span>
|
||||
<span class="Counter Counter--small mr-1">1.5K</span>
|
||||
```
|
||||
|
||||
### Diffstat
|
||||
|
||||
```html live
|
||||
<span class="diffstat tooltipped tooltipped-e" aria-label="6 changes: 3 additions & 3 deletions">
|
||||
6
|
||||
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
|
||||
</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="diffstat">
|
||||
<span class="text-green">+7</span>
|
||||
<span class="text-red">−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>
|
||||
</span>
|
||||
```
|
||||
@ -2,7 +2,9 @@
|
||||
// stylelint-disable selector-max-type
|
||||
.flash {
|
||||
position: relative;
|
||||
padding: $spacer-3;
|
||||
min-height: $size-7;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 12px $spacer-3;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $blue-800;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
|
||||
@ -6,9 +6,6 @@
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line primer/borders
|
||||
.avatar-small { border-radius: 2px; }
|
||||
|
||||
.avatar-link {
|
||||
float: left;
|
||||
line-height: $lh-condensed-ultra;
|
||||
@ -20,3 +17,28 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
// Border radius
|
||||
|
||||
.avatar-1,
|
||||
.avatar-2,
|
||||
.avatar-small {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius / 2;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
@mixin avatar-size( $size ) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.avatar-1 { @include avatar-size( $size-1 ); }
|
||||
.avatar-2 { @include avatar-size( $size-2 ); }
|
||||
.avatar-3 { @include avatar-size( $size-3 ); }
|
||||
.avatar-4 { @include avatar-size( $size-4 ); }
|
||||
.avatar-5 { @include avatar-size( $size-5 ); }
|
||||
.avatar-6 { @include avatar-size( $size-6 ); }
|
||||
.avatar-7 { @include avatar-size( $size-7 ); }
|
||||
.avatar-8 { @include avatar-size( $size-8 ); }
|
||||
|
||||
@ -4,13 +4,11 @@
|
||||
.btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px $spacer-3;
|
||||
padding: 0 $spacer-3;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-weight: 500;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px; // Specifically not inherit our `<body>` default
|
||||
line-height: height-without-border($size-5);
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
@ -31,6 +29,10 @@
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
cursor: default;
|
||||
|
||||
.octicon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
@ -43,16 +45,19 @@
|
||||
margin-right: $spacer-1;
|
||||
color: $text-gray-light;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&:only-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Darken for just a tad more contrast against the button background
|
||||
.Counter {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 2px;
|
||||
color: $text-gray;
|
||||
color: inherit;
|
||||
text-shadow: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($black, 0.1);
|
||||
background-color: rgba($black, 0.08); // Darken for just a tad more contrast against the button background
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
@ -64,31 +69,30 @@
|
||||
// Default button
|
||||
|
||||
.btn {
|
||||
$bg-default: $bg-gray-light;
|
||||
$bg-hover: #f3f4f6; // custom gray
|
||||
$bg-active: darken($bg-hover, 2%);
|
||||
$bg-disabled: $bg-default;
|
||||
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-gray-light;
|
||||
background-color: $bg-default;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: $box-shadow, $box-shadow-highlight;
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: transparent;
|
||||
box-shadow: $focus-shadow;
|
||||
}
|
||||
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
&.hover,
|
||||
[open] > & {
|
||||
background-color: $bg-hover;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
[open] > & {
|
||||
background-color: $bg-hover;
|
||||
border-color: $border-gray-dark;
|
||||
box-shadow: none;
|
||||
&[aria-selected=true] {
|
||||
background-color: $bg-active;
|
||||
box-shadow: $box-shadow-inset;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
@ -96,50 +100,47 @@
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
background-color: $bg-hover;
|
||||
background-color: $bg-disabled;
|
||||
border-color: $border-color-button;
|
||||
}
|
||||
|
||||
// Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: $box-shadow-focus;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary button
|
||||
|
||||
.btn-primary {
|
||||
$bg: #159739; // custom green
|
||||
$border-color: $green-600;
|
||||
$bg-default: #159739; // custom green
|
||||
$bg-hover: #138934; // custom green
|
||||
$bg-active: darken($bg-hover, 2%);
|
||||
$bg-disabled: #94d3a2; // custom green
|
||||
|
||||
$border-default: $green-600;
|
||||
$border-hover: $green-700;
|
||||
|
||||
$shadow: $green-900;
|
||||
$box-shadow: $box-shadow, inset 0 1px 0 rgba($white, 0.03);
|
||||
|
||||
$bg-hover: #138934; // custom green
|
||||
$border-hover: $green-700;
|
||||
$bg-disabled: #94d3a2; // custom green
|
||||
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $bg;
|
||||
border-color: $border-color;
|
||||
background-color: $bg-default;
|
||||
border-color: $border-default;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $bg;
|
||||
border-color: transparent;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 3px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
&.hover,
|
||||
[open] > & {
|
||||
background-color: $bg-hover;
|
||||
border-color: $border-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
[open] > & {
|
||||
background-color: $bg-hover;
|
||||
border-color: $border-color;
|
||||
&[aria-selected=true] {
|
||||
background-color: $bg-active;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
|
||||
}
|
||||
@ -148,17 +149,23 @@
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($text-white, 0.5);
|
||||
color: rgba($text-white, 0.8);
|
||||
background-color: $bg-disabled;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($green-600, 0.1);
|
||||
border-color: rgba($border-default, 0.1);
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 3px rgba($bg-default, 0.4);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
color: inherit;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: darken($bg, 6%);
|
||||
background-color: $bg-white;
|
||||
background-color: rgba($bg-white, 0.2);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
@ -167,28 +174,20 @@
|
||||
}
|
||||
|
||||
// Mixin: btn-inverse-on-hover
|
||||
//
|
||||
// Args: $color, $bg, $border
|
||||
@mixin btn-inverse-on-hover( $color, $bg, $border, $shadow ) {
|
||||
|
||||
@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $border-hover, $border-active, $shadow ) {
|
||||
color: $color;
|
||||
transition: none;
|
||||
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0 3px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
[open] > & {
|
||||
color: $text-white;
|
||||
background-color: $bg;
|
||||
border-color: $border;
|
||||
background-color: $bg-hover;
|
||||
border-color: $border-hover;
|
||||
box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($bg, 0.4);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
background-color: darken($bg, 12%);
|
||||
background-color: rgba($bg-white, 0.2);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
@ -198,11 +197,10 @@
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
[open] > & {
|
||||
&[aria-selected=true] {
|
||||
color: $text-white;
|
||||
background-color: $bg;
|
||||
border-color: $border;
|
||||
background-color: $bg-active;
|
||||
border-color: $border-active;
|
||||
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
|
||||
}
|
||||
|
||||
@ -210,9 +208,17 @@
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: rgba($color, 0.5);
|
||||
background-color: #f3f4f6;
|
||||
background-color: $bg-gray-light;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: $box-shadow, $box-shadow-highlight;
|
||||
|
||||
.Counter {
|
||||
background-color: rgba($color, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($bg-hover, 0.4);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
@ -226,8 +232,10 @@
|
||||
.btn-danger {
|
||||
@include btn-inverse-on-hover(
|
||||
$color: $text-red,
|
||||
$bg: $red-600,
|
||||
$border: $red-700,
|
||||
$bg-hover: $red-600,
|
||||
$bg-active: darken($red-600, 3%),
|
||||
$border-hover: $red-700,
|
||||
$border-active: $red-800,
|
||||
$shadow: $red-900
|
||||
);
|
||||
}
|
||||
@ -237,8 +245,10 @@
|
||||
.btn-outline {
|
||||
@include btn-inverse-on-hover(
|
||||
$color: $blue-600,
|
||||
$bg: $blue-500,
|
||||
$border: $blue-600,
|
||||
$bg-hover: $blue-500,
|
||||
$bg-active: darken($blue-500, 3%),
|
||||
$border-hover: $blue-600,
|
||||
$border-active: rgba($blue-700, 0.5),
|
||||
$shadow: $blue-900
|
||||
);
|
||||
}
|
||||
@ -254,30 +264,25 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Social button count
|
||||
// TODO: Deprecate? Use BtnGroup instead?
|
||||
|
||||
.btn-with-count {
|
||||
float: left;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
// Minibutton overrides
|
||||
// Sizes
|
||||
//
|
||||
// Tweak `line-height` to make them smaller.
|
||||
.btn-sm {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px 12px;
|
||||
padding-right: 12px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-left: 12px;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
line-height: height-without-border($size-4);
|
||||
}
|
||||
|
||||
// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
|
||||
.btn-large {
|
||||
padding: $em-spacer-6 1.5em;
|
||||
font-size: inherit;
|
||||
line-height: $lh-default;
|
||||
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
@ -290,92 +295,3 @@
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Link-like buttons
|
||||
//
|
||||
// This class is for styling <button> and <input> elements to look like links
|
||||
.btn-link {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[aria-disabled=true] {
|
||||
&,
|
||||
&:hover {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($gray-600, 0.5);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Invisible button
|
||||
//
|
||||
// Typically used as a "cancel" button next to a .btn
|
||||
.btn-invisible {
|
||||
color: $text-blue;
|
||||
background-color: transparent; // Reset default gradient backgrounds and colors
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: $text-blue;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Octicon button
|
||||
//
|
||||
// Icon-only buttons
|
||||
.btn-octicon {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
line-height: $lh-condensed-ultra;
|
||||
color: $text-gray;
|
||||
vertical-align: middle;
|
||||
|
||||
// For `<button>` elements
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover { color: $text-blue; }
|
||||
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
cursor: default;
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
&:hover { color: $gray-400; }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-octicon-danger:hover {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
@ -1,5 +1,94 @@
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
// Link-like buttons
|
||||
//
|
||||
// This class is for styling <button> and <input> elements to look like links
|
||||
.btn-link {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[aria-disabled=true] {
|
||||
&,
|
||||
&:hover {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($gray-600, 0.5);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Invisible button
|
||||
//
|
||||
// Typically used as a "cancel" button next to a .btn
|
||||
.btn-invisible {
|
||||
color: $text-blue;
|
||||
background-color: transparent; // Reset default gradient backgrounds and colors
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: $text-blue;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Octicon button
|
||||
//
|
||||
// Icon-only buttons
|
||||
.btn-octicon {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
line-height: $lh-condensed-ultra;
|
||||
color: $text-gray;
|
||||
vertical-align: middle;
|
||||
|
||||
// For `<button>` elements
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover { color: $text-blue; }
|
||||
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
cursor: default;
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
&:hover { color: $gray-400; }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-octicon-danger:hover {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
// Close button
|
||||
//
|
||||
// Typically used with an octicon-x
|
||||
@ -59,10 +148,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Social button count
|
||||
// TODO: Deprecate? Use BtnGroup instead?
|
||||
|
||||
.btn-with-count {
|
||||
float: left;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Social count bubble
|
||||
//
|
||||
// A container that is used for social bubbles counts.
|
||||
|
||||
.social-count {
|
||||
position: relative;
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px 12px;
|
||||
@ -88,4 +192,10 @@
|
||||
color: $text-blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
outline: 0;
|
||||
box-shadow: $box-shadow-focus;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,12 +17,11 @@ label {
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
min-height: 34px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px 12px;
|
||||
padding: 0 12px;
|
||||
font-size: $body-font-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
line-height: height-without-border($size-5);
|
||||
color: $text-gray-dark;
|
||||
vertical-align: middle;
|
||||
background-color: $bg-white;
|
||||
@ -31,12 +30,20 @@ label {
|
||||
border: $border-width $border-style $border-color;
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
box-shadow: $box-shadow-inset;
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
border-color: $border-blue;
|
||||
outline: none;
|
||||
box-shadow: $focus-shadow;
|
||||
box-shadow: $box-shadow-focus;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: #f3f4f6; // custom gray
|
||||
}
|
||||
|
||||
// Ensures inputs don't zoom on mobile but are body-font size on desktop
|
||||
@ -49,6 +56,7 @@ label {
|
||||
textarea.form-control {
|
||||
padding-top: $spacer-2;
|
||||
padding-bottom: $spacer-2;
|
||||
line-height: $lh-default;
|
||||
}
|
||||
|
||||
// Inputs with contrast for easy light gray backgrounds against white.
|
||||
@ -86,19 +94,15 @@ textarea.form-control {
|
||||
|
||||
// Mini inputs, to match .minibutton
|
||||
.input-sm {
|
||||
min-height: 28px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 3px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 3px;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
line-height: height-without-border($size-4);
|
||||
}
|
||||
|
||||
// Large inputs
|
||||
.input-lg {
|
||||
padding: $spacer-1 $spacer-3;
|
||||
padding-right: $spacer-3;
|
||||
padding-left: $spacer-3;
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
.form-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: 34px;
|
||||
height: $size-5;
|
||||
padding-right: $spacer-4;
|
||||
background-color: $bg-white;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
|
||||
@ -24,13 +24,11 @@
|
||||
}
|
||||
|
||||
.select-sm {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 3px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 3px;
|
||||
height: $size-4;
|
||||
min-height: $size-4;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: height-without-border($size-4);
|
||||
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
// Counters are rounded-corner badges for numbers
|
||||
.Counter {
|
||||
display: inline-block;
|
||||
min-width: 20px; // makes sure it's a circle with just one digit
|
||||
min-width: $size-2; // makes sure it's a circle with just one digit
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px 6px;
|
||||
padding: 0 6px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-weight: 500;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 16px;
|
||||
line-height: $size-2;
|
||||
color: $text-gray-dark;
|
||||
text-align: center;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
@import "../support/index.scss";
|
||||
@import "./mixins.scss";
|
||||
|
||||
@import "./issue-labels.scss";
|
||||
@import "./labels.scss";
|
||||
@import "./states.scss";
|
||||
|
||||
@ -1,16 +1,9 @@
|
||||
// Issue Labels
|
||||
|
||||
// TODO: Replace with .Label once solid backgrounds are supported
|
||||
|
||||
.IssueLabel {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px $spacer-2;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-weight: 500;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 16px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2em;
|
||||
@include labels-base;
|
||||
|
||||
.g-emoji {
|
||||
position: relative;
|
||||
@ -26,5 +19,5 @@
|
||||
}
|
||||
|
||||
.IssueLabel--big {
|
||||
padding: $spacer-1 12px;
|
||||
@include labels-large;
|
||||
}
|
||||
|
||||
@ -1,43 +1,38 @@
|
||||
// Needs refactoring
|
||||
// Labels
|
||||
//
|
||||
// Use labels to add keyword tags or phrases to issues and pull requests. These
|
||||
// are used within a list of issues/PRs, on individual issues/PRs, and within
|
||||
// the select menus that manage them.
|
||||
|
||||
// Provide a wrapper to ensure labels stick together
|
||||
.labels {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Each label gets common styles
|
||||
// Default label
|
||||
|
||||
.label, // TODO: Deprecte
|
||||
.Label {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px 12px;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-weight: 500;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 16px;
|
||||
@include labels-base;
|
||||
background-color: transparent !important; // TODO: Remove again
|
||||
border: $border-width $border-style $border-color;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2em;
|
||||
border-color: $border-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom GitHub labels (not for issues/PRs/etc)
|
||||
//
|
||||
// Commonly used across the site to indicate a particular role. For example,
|
||||
// "repo owner" within code comments or role in organizations.
|
||||
// Large
|
||||
|
||||
.Label--outline, // TODO: Deprecate
|
||||
.Label--large {
|
||||
@include labels-large;
|
||||
}
|
||||
|
||||
// Inline
|
||||
|
||||
.Label--inline {
|
||||
@include labels--inline;
|
||||
}
|
||||
|
||||
// Contrast
|
||||
|
||||
.Label--outline, // TODO: Deprecate? It's now the default
|
||||
.Label--gray {
|
||||
color: $text-gray;
|
||||
border-color: $border-gray;
|
||||
|
||||
32
src/labels/mixins.scss
Normal file
32
src/labels/mixins.scss
Normal file
@ -0,0 +1,32 @@
|
||||
// Label mixins
|
||||
|
||||
// Default: 20px
|
||||
// Large: 24px
|
||||
// Inline: em based
|
||||
|
||||
@mixin labels-base {
|
||||
display: inline-block;
|
||||
padding: 0 7px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-semibold;
|
||||
line-height: 18px;
|
||||
border: $border-width $border-style transparent;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
@mixin labels-large {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
// Inline
|
||||
//
|
||||
// Doesn't increase height of parent element
|
||||
// Can be used with different font-sizes
|
||||
|
||||
@mixin labels--inline {
|
||||
display: inline;
|
||||
padding: 0.1667em 0.5em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
@ -6,14 +6,18 @@
|
||||
// closed - $red background
|
||||
// merged - $purple background
|
||||
|
||||
// Default 32px
|
||||
// Small 24px
|
||||
|
||||
.state, // TODO: Deprecate
|
||||
.State {
|
||||
display: inline-block;
|
||||
padding: $spacer-2 12px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0 12px;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-weight: 500;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 16px;
|
||||
line-height: $size-5;
|
||||
color: $text-white;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
@ -39,8 +43,11 @@
|
||||
// Small
|
||||
|
||||
.State--small {
|
||||
padding: $spacer-1 $spacer-2;
|
||||
padding-right: $spacer-2;
|
||||
padding-left: $spacer-2;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: $size-3;
|
||||
|
||||
.octicon {
|
||||
width: 1em; // Ensures different icons don't change State indicator width
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 12px $spacer-3;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
color: $text-black;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
|
||||
@ -101,8 +100,7 @@
|
||||
padding: $spacer-1 $spacer-3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-weight: 500;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 23px;
|
||||
color: $text-black;
|
||||
|
||||
@ -20,12 +20,10 @@
|
||||
.subnav-item {
|
||||
position: relative;
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px $spacer-3;
|
||||
padding: 0 $spacer-3;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-weight: 500;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
line-height: height-without-border($size-5);
|
||||
color: $text-gray-dark;
|
||||
border: $border;
|
||||
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
// height-without-border
|
||||
//
|
||||
// Removes top/bottom border from the total height
|
||||
@function height-without-border($height) {
|
||||
@return $height - ($border-width * 2);
|
||||
}
|
||||
|
||||
// Text hiding for image based text replacement.
|
||||
// Higher performance than -9999px because it only renders
|
||||
// the size of the actual text, not a full 9999px box.
|
||||
|
||||
@ -71,6 +71,20 @@ $em-spacer-4: 0.375em !default; // 3/8
|
||||
$em-spacer-5: 0.5em !default; // 1/2
|
||||
$em-spacer-6: 0.75em !default; // 3/4
|
||||
|
||||
// Size scale
|
||||
// Used for buttons, inputs, labels, avatars etc.
|
||||
$size: 16px !default;
|
||||
|
||||
$size-0: 0 !default;
|
||||
$size-1: $size !default; // 16px
|
||||
$size-2: $size-1 + 4px !default; // 20px
|
||||
$size-3: $size-2 + 4px !default; // 24px
|
||||
$size-4: $size-3 + 4px !default; // 28px
|
||||
$size-5: $size-4 + 4px !default; // 32px
|
||||
$size-6: $size-5 + 8px !default; // 40px
|
||||
$size-7: $size-6 + 8px !default; // 48px
|
||||
$size-8: $size-7 + 16px !default; // 64px
|
||||
|
||||
// Fixed-width container variables
|
||||
$container-width: 980px !default;
|
||||
$grid-gutter: 10px !default;
|
||||
|
||||
@ -13,17 +13,17 @@ $box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
|
||||
$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
|
||||
$box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
|
||||
|
||||
$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default;
|
||||
|
||||
// Focus shadow
|
||||
$focus-shadow: 0 0 0 3px rgba($border-blue, 0.3) !default;
|
||||
|
||||
// Button and form variables
|
||||
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate? It's now unused.
|
||||
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $focus-shadow
|
||||
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate? It's now unused.
|
||||
$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; // top highlight
|
||||
$box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner shadow
|
||||
$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring
|
||||
|
||||
// Button variables
|
||||
$border-color-button: $border-color !default;
|
||||
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?
|
||||
|
||||
// Form variables
|
||||
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate?
|
||||
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus
|
||||
|
||||
// Tooltips
|
||||
$tooltip-max-width: 250px !default;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user